Projekt

Obecné

Profil

Stáhnout (7.54 KB) Statistiky
| Větev: | Tag: | Revize:
1
import 'antd/dist/antd.css';
2
import React, { useContext, useEffect, useState } from 'react';
3

    
4
import { useUnauthRedirect } from '../../hooks';
5
import { useRouter } from 'next/router';
6
import { Badge, Button, Dropdown, Menu, Space, Table, Typography } from 'antd';
7
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8
import { faUsers } from '@fortawesome/free-solid-svg-icons';
9
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
10
import { MainLayout } from '../../layouts/MainLayout';
11
import { UserInfo } from '../../api';
12
import { userController } from '../../controllers';
13
import AddUserModal from '../../components/modals/AddUserModal';
14
import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
15
import { ShowConfirmDelete, ShowToast } from '../../utils/alerts';
16
import EditUserModal from '../../components/modals/EditUserModal';
17
import { DeleteOutlined, EditOutlined, LockOutlined } from '@ant-design/icons';
18
import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
19
import EditUserPasswordModal from '../../components/modals/EditUserPasswordModal';
20

    
21
function UsersPage() {
22
    const redirecting = useUnauthRedirect('/login');
23
    const { logout, role } = useContext(LoggedUserContext);
24
    const router = useRouter();
25

    
26
    const [addVisible, setAddVisible] = React.useState(false);
27
    const [editVisible, setEditVisible] = React.useState(false);
28
    const [passwordEditVisible, setPasswordEditVisible] = React.useState(false);
29
    const [docsVisible, setDocsVisible] = React.useState(false);
30
    const [users, setUsers] = useState<UserInfo[]>([]);
31

    
32
    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
        }
41
    }
42

    
43
    useEffect(() => {
44
        if (!redirecting && role === 'ADMINISTRATOR') {
45
            fetchData();
46
        }
47
    }, [logout, redirecting, role, router]);
48

    
49
    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
            userController.userUserIdDelete(userId).then(() => {
59
                ShowToast('Uživatel úspěšně odstraněn', 'success', 3000, 'top-end');
60
                fetchData();
61
            });
62
        }, 'uživatele');
63
    };
64

    
65
    const showAddModal = () => {
66
        setAddVisible(true);
67
    };
68
    const showEditModal = (userId: string) => {
69
        setUserInfo(userId);
70
        setEditVisible(true);
71
    };
72
    const showEditPasswordModal = (userId: string) => {
73
        setUserInfo(userId);
74
        setPasswordEditVisible(true);
75
    };
76
    const showDocsModal = (userId: string) => {
77
        setUserInfo(userId);
78
        setDocsVisible(true);
79
    };
80

    
81
    const hideModals = () => {
82
        fetchData();
83
        setAddVisible(false);
84
        setDocsVisible(false);
85
        setEditVisible(false);
86
        setPasswordEditVisible(false);
87
    };
88

    
89
    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

    
107
    const columns = [
108
        {
109
            title: 'Jméno',
110
            dataIndex: 'name',
111
            key: 'name',
112
            ...getColumnSearchProps('name', 'jméno'),
113
            // @ts-ignore
114
            sorter: (a, b) => a.name.localeCompare(b.name),
115
        },
116
        {
117
            title: 'Příjmení',
118
            dataIndex: 'surname',
119
            key: 'surname',
120
            ...getColumnSearchProps('surname', 'příjmení'),
121
            // @ts-ignore
122
            sorter: (a, b) => a.surname.localeCompare(b.surname),
123
        },
124
        {
125
            title: 'Uživatelské jméno',
126
            dataIndex: 'username',
127
            key: 'username',
128
            ...getColumnSearchProps('username', 'uživatelské jméno'),
129
            // @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
        },
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
        {
182
            title: '',
183
            key: 'operations',
184
            dataIndex: 'id',
185
            align: 'right' as 'right',
186
            width: '150px',
187
            // @ts-ignore
188
            render: (id) => (
189
                <div>
190
                    <Space size={'middle'}>
191
                        {/*{menu(id)}*/}
192
                        {<Dropdown.Button overlay={menu(id)} placement="bottom" />}
193
                    </Space>
194
                </div>
195
            ),
196
        },
197
    ];
198

    
199
    // @ts-ignore
200
    return redirecting || role !== 'ADMINISTRATOR' ? null : (
201
        <MainLayout>
202
            <Typography.Title level={2}>
203
                <FontAwesomeIcon icon={faUsers} /> Uživatelé
204
            </Typography.Title>
205
            <Button type={'primary'} onClick={showAddModal}>
206
                Přidat uživatele
207
            </Button>
208
            {addVisible && <AddUserModal onCancel={hideModals} />}
209
            {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
210
            {passwordEditVisible && (
211
                <EditUserPasswordModal userInfo={user} onCancel={hideModals} />
212
            )}
213
            {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
214

    
215
            <Table
216
                locale={{ ...getLocaleProps() }}
217
                // @ts-ignore
218
                columns={columns}
219
                dataSource={users}
220
                scroll={{ y: 800 }}
221
            />
222
        </MainLayout>
223
    );
224
}
225

    
226
export default UsersPage;
    (1-1/1)