-
Notifications
You must be signed in to change notification settings - Fork 73
/
AccountsTable.tsx
100 lines (87 loc) · 2.67 KB
/
AccountsTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { useEffect } from 'react'
import {
Table,
TableHeader,
TableBody,
OnSort
} from '@patternfly/react-table'
import {
PageEmptyState,
useDataListFilters,
useDataListPagination,
useDataListTable,
Toolbar,
SearchWidget,
PaginationWidget,
filterRows
} from 'components'
import { useTranslation } from 'i18n/useTranslation'
import { ToolbarContent, ToolbarItem } from '@patternfly/react-core'
const AccountsTable: React.FunctionComponent = () => {
const { t } = useTranslation('accountsIndex')
const {
columns,
rows,
sortBy,
setSortBy
} = useDataListTable()
if (rows.length === 0) {
return <PageEmptyState msg={t('accounts_table.empty_state')} />
}
const { startIdx, endIdx, resetPagination } = useDataListPagination()
const { filters } = useDataListFilters()
const options = [
{ name: 'approved', humanName: t('actions_filter_options.by_state_options.approved') },
{ name: 'pending', humanName: t('actions_filter_options.by_state_options.pending') },
{ name: 'rejected', humanName: t('actions_filter_options.by_state_options.rejected') },
{ name: 'suspended', humanName: t('actions_filter_options.by_state_options.suspended') }
]
const categories = [
{ name: 'group', humanName: t('accounts_table.group_header') },
{ name: 'admin', humanName: t('accounts_table.admin_header') },
{ name: 'state', humanName: t('accounts_table.state_header'), options }
]
useEffect(() => resetPagination, [filters])
const filteredRows = filterRows(rows, filters, columns)
const visibleRows = filteredRows.slice(startIdx, endIdx)
const onSort: OnSort = (_event, index, direction) => {
setSortBy(index, direction)
}
const pagination = <PaginationWidget itemCount={filteredRows.length} />
const Header = (
<Toolbar>
<ToolbarContent>
<ToolbarItem>
<SearchWidget categories={categories} />
</ToolbarItem>
<ToolbarItem variant="pagination" breakpointMods={[{ modifier: 'align-right', breakpoint: 'md' }]}>
{pagination}
</ToolbarItem>
</ToolbarContent>
</Toolbar>
)
return (
<>
<Table
aria-label={t('accounts_table.aria_label')}
header={Header}
cells={columns}
rows={visibleRows}
canSelectAll={false}
sortBy={sortBy}
onSort={onSort}
>
<TableHeader />
<TableBody />
</Table>
<Toolbar>
<ToolbarContent>
<ToolbarItem variant="pagination" breakpointMods={[{ modifier: 'align-right', breakpoint: 'md' }]}>
{pagination}
</ToolbarItem>
</ToolbarContent>
</Toolbar>
</>
)
}
export { AccountsTable }