3 |
3 |
|
4 |
4 |
import { useUnauthRedirect } from '../../hooks';
|
5 |
5 |
import { useRouter } from 'next/router';
|
6 |
|
import { Button, Space, Table, Typography } from 'antd';
|
|
6 |
import { Badge, Button, Input, Space, Table, Typography } from 'antd';
|
7 |
7 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
8 |
8 |
import { faUsers } from '@fortawesome/free-solid-svg-icons';
|
9 |
9 |
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
|
... | ... | |
14 |
14 |
import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
|
15 |
15 |
import { ShowConfirmDelete } from '../../utils/alerts';
|
16 |
16 |
import EditUserModal from '../../components/modals/EditUserModal';
|
|
17 |
import { SearchOutlined } from '@ant-design/icons';
|
17 |
18 |
|
18 |
19 |
function UsersPage() {
|
19 |
20 |
const redirecting = useUnauthRedirect('/login');
|
... | ... | |
74 |
75 |
setEditVisible(false);
|
75 |
76 |
};
|
76 |
77 |
|
|
78 |
const handleSearch = (
|
|
79 |
selectedKeys: React.SetStateAction<string>[],
|
|
80 |
confirm: () => void
|
|
81 |
) => {
|
|
82 |
confirm();
|
|
83 |
};
|
|
84 |
|
|
85 |
const handleReset = (clearFilters: () => void) => {
|
|
86 |
clearFilters();
|
|
87 |
};
|
|
88 |
|
|
89 |
const getColumnSearchProps = (dataIndex: string, searchLabel: string) => ({
|
|
90 |
// @ts-ignore
|
|
91 |
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
|
|
92 |
<div style={{ padding: 8 }}>
|
|
93 |
<Input
|
|
94 |
placeholder={`Vyhledat ${searchLabel}`}
|
|
95 |
value={selectedKeys[0]}
|
|
96 |
onChange={(e) =>
|
|
97 |
setSelectedKeys(e.target.value ? [e.target.value] : [])
|
|
98 |
}
|
|
99 |
onPressEnter={() => handleSearch(selectedKeys, confirm)}
|
|
100 |
style={{ marginBottom: 8, display: 'block' }}
|
|
101 |
/>
|
|
102 |
<Space>
|
|
103 |
<Button
|
|
104 |
type="primary"
|
|
105 |
onClick={() => handleSearch(selectedKeys, confirm)}
|
|
106 |
icon={<SearchOutlined />}
|
|
107 |
style={{ width: 90 }}
|
|
108 |
>
|
|
109 |
Hledat
|
|
110 |
</Button>
|
|
111 |
<Button
|
|
112 |
onClick={() => handleReset(clearFilters)}
|
|
113 |
style={{ width: 90 }}
|
|
114 |
>
|
|
115 |
Smazat
|
|
116 |
</Button>
|
|
117 |
</Space>
|
|
118 |
</div>
|
|
119 |
),
|
|
120 |
filterIcon: (filtered: any) => (
|
|
121 |
<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
|
|
122 |
),
|
|
123 |
onFilter: (value: string, record: { [x: string]: { toString: () => string } }) =>
|
|
124 |
record[dataIndex]
|
|
125 |
? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
|
|
126 |
: '',
|
|
127 |
});
|
|
128 |
|
77 |
129 |
const columns = [
|
78 |
|
{ title: 'Jméno', dataIndex: 'name', key: 'name' },
|
79 |
|
{ title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
|
80 |
|
{ title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
|
|
130 |
{
|
|
131 |
title: 'Jméno',
|
|
132 |
dataIndex: 'name',
|
|
133 |
key: 'name',
|
|
134 |
...getColumnSearchProps('name', 'jméno'),
|
|
135 |
},
|
|
136 |
{
|
|
137 |
title: 'Příjmení',
|
|
138 |
dataIndex: 'surname',
|
|
139 |
key: 'surname',
|
|
140 |
...getColumnSearchProps('surname', 'příjmení'),
|
|
141 |
},
|
|
142 |
{
|
|
143 |
title: 'Uživatelské jméno',
|
|
144 |
dataIndex: 'username',
|
|
145 |
key: 'username',
|
|
146 |
...getColumnSearchProps('username', 'uživatelské jméno'),
|
|
147 |
},
|
|
148 |
{
|
|
149 |
title: 'Přiřazeno dokumentů',
|
|
150 |
key: 'docCounts',
|
|
151 |
align: 'center' as 'center',
|
|
152 |
dataIndex: ['id', 'assignedDocumentsCount'],
|
|
153 |
// @ts-ignore
|
|
154 |
render: (text, row) => (
|
|
155 |
<div>
|
|
156 |
<Space size={'middle'}>
|
|
157 |
<Badge count={row.assignedDocumentsCount}>
|
|
158 |
<Button onClick={() => showDocsModal(row.id)}>
|
|
159 |
Dokumenty
|
|
160 |
</Button>
|
|
161 |
</Badge>
|
|
162 |
</Space>
|
|
163 |
</div>
|
|
164 |
),
|
|
165 |
// @ts-ignore
|
|
166 |
sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
|
|
167 |
},
|
81 |
168 |
{
|
82 |
169 |
title: '',
|
83 |
|
key: 'operation',
|
|
170 |
key: 'operations',
|
84 |
171 |
dataIndex: 'id',
|
85 |
|
render: (id: string) => (
|
|
172 |
align: 'center' as 'center',
|
|
173 |
// @ts-ignore
|
|
174 |
render: (id) => (
|
86 |
175 |
<div>
|
87 |
176 |
<Space size={'middle'}>
|
88 |
|
<Button onClick={() => showDocsModal(id)}>Dokumenty</Button>
|
89 |
177 |
<Button onClick={() => showEditModal(id)}>Upravit</Button>
|
90 |
178 |
<Button onClick={() => deleteUser(id)}>Smazat</Button>
|
91 |
179 |
</Space>
|
... | ... | |
94 |
182 |
},
|
95 |
183 |
];
|
96 |
184 |
|
|
185 |
// @ts-ignore
|
97 |
186 |
return redirecting || role !== 'ADMINISTRATOR' ? null : (
|
98 |
187 |
<MainLayout>
|
99 |
188 |
<Typography.Title level={2}>
|
... | ... | |
107 |
196 |
{docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
|
108 |
197 |
|
109 |
198 |
<Table
|
|
199 |
locale={{
|
|
200 |
triggerDesc: 'Seřadit sestupně',
|
|
201 |
triggerAsc: 'Seřadit vzestupně',
|
|
202 |
cancelSort: 'Vypnout řazení',
|
|
203 |
}}
|
|
204 |
// @ts-ignore
|
110 |
205 |
columns={columns}
|
111 |
206 |
dataSource={users}
|
112 |
|
size="small"
|
113 |
207 |
scroll={{ y: 500 }}
|
114 |
208 |
/>
|
115 |
209 |
</MainLayout>
|
User filtering implemented