Projekt

Obecné

Profil

Stáhnout (7.54 KB) Statistiky
| Větev: | Tag: | Revize:
1 8c45ccb0 hrubyjar
import 'antd/dist/antd.css';
2 82ba2ee5 Jaroslav Hrubý
import React, { useContext, useEffect, useState } from 'react';
3 8c45ccb0 hrubyjar
4
import { useUnauthRedirect } from '../../hooks';
5
import { useRouter } from 'next/router';
6 669ffe38 Jaroslav Hrubý
import { Badge, Button, Dropdown, Menu, Space, Table, Typography } from 'antd';
7 8c45ccb0 hrubyjar
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8
import { faUsers } from '@fortawesome/free-solid-svg-icons';
9
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
10 51f70e00 Lukáš Vlček
import { MainLayout } from '../../layouts/MainLayout';
11 82ba2ee5 Jaroslav Hrubý
import { UserInfo } from '../../api';
12
import { userController } from '../../controllers';
13
import AddUserModal from '../../components/modals/AddUserModal';
14 43d49a98 Jaroslav Hrubý
import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
15 669ffe38 Jaroslav Hrubý
import { ShowConfirmDelete, ShowToast } from '../../utils/alerts';
16 43d49a98 Jaroslav Hrubý
import EditUserModal from '../../components/modals/EditUserModal';
17 669ffe38 Jaroslav Hrubý
import { DeleteOutlined, EditOutlined, LockOutlined } from '@ant-design/icons';
18
import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
19
import EditUserPasswordModal from '../../components/modals/EditUserPasswordModal';
20 8c45ccb0 hrubyjar
21
function UsersPage() {
22
    const redirecting = useUnauthRedirect('/login');
23
    const { logout, role } = useContext(LoggedUserContext);
24
    const router = useRouter();
25
26 43d49a98 Jaroslav Hrubý
    const [addVisible, setAddVisible] = React.useState(false);
27
    const [editVisible, setEditVisible] = React.useState(false);
28 669ffe38 Jaroslav Hrubý
    const [passwordEditVisible, setPasswordEditVisible] = React.useState(false);
29 43d49a98 Jaroslav Hrubý
    const [docsVisible, setDocsVisible] = React.useState(false);
30 82ba2ee5 Jaroslav Hrubý
    const [users, setUsers] = useState<UserInfo[]>([]);
31
32 43d49a98 Jaroslav Hrubý
    const [user, setUser] = useState<UserInfo>({});
33
34
    async function fetchData() {
35
        let usrs = (await userController.usersGet()).data.users;
36
        if (!usrs) {
37
            setUsers([]);
38
        } else {
39
            setUsers(usrs);
40 82ba2ee5 Jaroslav Hrubý
        }
41 43d49a98 Jaroslav Hrubý
    }
42 82ba2ee5 Jaroslav Hrubý
43 43d49a98 Jaroslav Hrubý
    useEffect(() => {
44 06d1aa21 Jaroslav Hrubý
        if (!redirecting && role === 'ADMINISTRATOR') {
45 82ba2ee5 Jaroslav Hrubý
            fetchData();
46 8c45ccb0 hrubyjar
        }
47
    }, [logout, redirecting, role, router]);
48
49 43d49a98 Jaroslav Hrubý
    const setUserInfo = (userId: string) => {
50
        const userInfo = users.find((user) => user.id === userId);
51
        if (userInfo) {
52
            setUser(userInfo);
53
        }
54
    };
55
56
    const deleteUser = (userId: string) => {
57
        ShowConfirmDelete(() => {
58 669ffe38 Jaroslav Hrubý
            userController.userUserIdDelete(userId).then(() => {
59
                ShowToast('Uživatel úspěšně odstraněn', 'success', 3000, 'top-end');
60
                fetchData();
61
            });
62 43d49a98 Jaroslav Hrubý
        }, 'uživatele');
63
    };
64
65
    const showAddModal = () => {
66
        setAddVisible(true);
67
    };
68
    const showEditModal = (userId: string) => {
69
        setUserInfo(userId);
70
        setEditVisible(true);
71
    };
72 669ffe38 Jaroslav Hrubý
    const showEditPasswordModal = (userId: string) => {
73
        setUserInfo(userId);
74
        setPasswordEditVisible(true);
75
    };
76 43d49a98 Jaroslav Hrubý
    const showDocsModal = (userId: string) => {
77
        setUserInfo(userId);
78
        setDocsVisible(true);
79 82ba2ee5 Jaroslav Hrubý
    };
80
81 43d49a98 Jaroslav Hrubý
    const hideModals = () => {
82
        fetchData();
83
        setAddVisible(false);
84
        setDocsVisible(false);
85
        setEditVisible(false);
86 669ffe38 Jaroslav Hrubý
        setPasswordEditVisible(false);
87 82ba2ee5 Jaroslav Hrubý
    };
88
89 669ffe38 Jaroslav Hrubý
    const menu = (id: string) => (
90
        <Menu>
91
            <Menu.Item
92
                icon={<EditOutlined />}
93
                key={'edit'}
94
                onClick={() => showEditModal(id)}
95
            >
96
                Upravit
97
            </Menu.Item>
98
            <Menu.Item icon={<LockOutlined />} onClick={() => showEditPasswordModal(id)}>
99
                Změnit Heslo
100
            </Menu.Item>
101
            <Menu.Item icon={<DeleteOutlined />} onClick={() => deleteUser(id)}>
102
                Smazat
103
            </Menu.Item>
104
        </Menu>
105
    );
106 9980241e Jaroslav Hrubý
107 82ba2ee5 Jaroslav Hrubý
    const columns = [
108 9980241e Jaroslav Hrubý
        {
109
            title: 'Jméno',
110
            dataIndex: 'name',
111
            key: 'name',
112
            ...getColumnSearchProps('name', 'jméno'),
113 669ffe38 Jaroslav Hrubý
            // @ts-ignore
114
            sorter: (a, b) => a.name.localeCompare(b.name),
115 9980241e Jaroslav Hrubý
        },
116
        {
117
            title: 'Příjmení',
118
            dataIndex: 'surname',
119
            key: 'surname',
120
            ...getColumnSearchProps('surname', 'příjmení'),
121 669ffe38 Jaroslav Hrubý
            // @ts-ignore
122
            sorter: (a, b) => a.surname.localeCompare(b.surname),
123 9980241e Jaroslav Hrubý
        },
124
        {
125
            title: 'Uživatelské jméno',
126
            dataIndex: 'username',
127
            key: 'username',
128
            ...getColumnSearchProps('username', 'uživatelské jméno'),
129 669ffe38 Jaroslav Hrubý
            // @ts-ignore
130
            sorter: (a, b) => a.username.localeCompare(b.username),
131
        },
132
        {
133
            title: 'Role',
134
            dataIndex: 'role',
135
            key: 'role',
136
            filters: [
137
                {
138
                    text: 'Administrátor',
139
                    value: 'ADMINISTRATOR',
140
                },
141
                {
142
                    text: 'Anotátor',
143
                    value: 'ANNOTATOR',
144
                },
145
            ],
146
            // @ts-ignore
147
            onFilter: (value, record) => record.role.indexOf(value) === 0,
148
            // @ts-ignore
149
            sorter: (a, b) => a.username.localeCompare(b.username),
150
            render: (role: string) => {
151
                let label = '';
152
                if (role === 'ANNOTATOR') {
153
                    label = 'Anotátor';
154
                }
155
                if (role === 'ADMINISTRATOR') {
156
                    label = 'Administrátor';
157
                }
158
                return label;
159
            },
160 9980241e Jaroslav Hrubý
        },
161
        {
162
            title: 'Přiřazeno dokumentů',
163
            key: 'docCounts',
164
            align: 'center' as 'center',
165
            dataIndex: ['id', 'assignedDocumentsCount'],
166
            // @ts-ignore
167
            render: (text, row) => (
168
                <div>
169
                    <Space size={'middle'}>
170
                        <Badge count={row.assignedDocumentsCount}>
171
                            <Button onClick={() => showDocsModal(row.id)}>
172
                                Dokumenty
173
                            </Button>
174
                        </Badge>
175
                    </Space>
176
                </div>
177
            ),
178
            // @ts-ignore
179
            sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
180
        },
181 82ba2ee5 Jaroslav Hrubý
        {
182
            title: '',
183 9980241e Jaroslav Hrubý
            key: 'operations',
184 43d49a98 Jaroslav Hrubý
            dataIndex: 'id',
185 669ffe38 Jaroslav Hrubý
            align: 'right' as 'right',
186
            width: '150px',
187 9980241e Jaroslav Hrubý
            // @ts-ignore
188
            render: (id) => (
189 82ba2ee5 Jaroslav Hrubý
                <div>
190
                    <Space size={'middle'}>
191 669ffe38 Jaroslav Hrubý
                        {/*{menu(id)}*/}
192
                        {<Dropdown.Button overlay={menu(id)} placement="bottom" />}
193 82ba2ee5 Jaroslav Hrubý
                    </Space>
194
                </div>
195
            ),
196
        },
197
    ];
198
199 9980241e Jaroslav Hrubý
    // @ts-ignore
200 8c45ccb0 hrubyjar
    return redirecting || role !== 'ADMINISTRATOR' ? null : (
201
        <MainLayout>
202
            <Typography.Title level={2}>
203
                <FontAwesomeIcon icon={faUsers} /> Uživatelé
204
            </Typography.Title>
205 43d49a98 Jaroslav Hrubý
            <Button type={'primary'} onClick={showAddModal}>
206 82ba2ee5 Jaroslav Hrubý
                Přidat uživatele
207
            </Button>
208 43d49a98 Jaroslav Hrubý
            {addVisible && <AddUserModal onCancel={hideModals} />}
209
            {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
210 669ffe38 Jaroslav Hrubý
            {passwordEditVisible && (
211
                <EditUserPasswordModal userInfo={user} onCancel={hideModals} />
212
            )}
213 43d49a98 Jaroslav Hrubý
            {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
214 82ba2ee5 Jaroslav Hrubý
215
            <Table
216 669ffe38 Jaroslav Hrubý
                locale={{ ...getLocaleProps() }}
217 9980241e Jaroslav Hrubý
                // @ts-ignore
218 82ba2ee5 Jaroslav Hrubý
                columns={columns}
219
                dataSource={users}
220 669ffe38 Jaroslav Hrubý
                scroll={{ y: 800 }}
221 82ba2ee5 Jaroslav Hrubý
            />
222 8c45ccb0 hrubyjar
        </MainLayout>
223
    );
224
}
225
226
export default UsersPage;