Revize 669ffe38

Refactoring after code review

webapp/pages/users/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../hooks';
 import { useRouter } from 'next/router';
-import { Badge, Button, Input, Space, Table, Typography } from 'antd';
+import { Badge, Button, Dropdown, Menu, Space, Table, Typography } from 'antd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
@@ -12 +12 @@
 import { userController } from '../../controllers';
 import AddUserModal from '../../components/modals/AddUserModal';
 import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
-import { ShowConfirmDelete } from '../../utils/alerts';
+import { ShowConfirmDelete, ShowToast } from '../../utils/alerts';
 import EditUserModal from '../../components/modals/EditUserModal';
-import { SearchOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, LockOutlined } from '@ant-design/icons';
+import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
+import EditUserPasswordModal from '../../components/modals/EditUserPasswordModal';
 
 function UsersPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -23 +25 @@
 
     const [addVisible, setAddVisible] = React.useState(false);
     const [editVisible, setEditVisible] = React.useState(false);
+    const [passwordEditVisible, setPasswordEditVisible] = React.useState(false);
     const [docsVisible, setDocsVisible] = React.useState(false);
     const [users, setUsers] = useState<UserInfo[]>([]);
 
@@ -52 +55 @@
 
     const deleteUser = (userId: string) => {
         ShowConfirmDelete(() => {
-            userController.userUserIdDelete(userId).then(() => fetchData());
+            userController.userUserIdDelete(userId).then(() => {
+                ShowToast('Uživatel úspěšně odstraněn', 'success', 3000, 'top-end');
+                fetchData();
+            });
         }, 'uživatele');
     };
 
@@ -63 +69 @@
         setUserInfo(userId);
         setEditVisible(true);
     };
+    const showEditPasswordModal = (userId: string) => {
+        setUserInfo(userId);
+        setPasswordEditVisible(true);
+    };
     const showDocsModal = (userId: string) => {
         setUserInfo(userId);
         setDocsVisible(true);
@@ -73 +83 @@
         setAddVisible(false);
         setDocsVisible(false);
         setEditVisible(false);
+        setPasswordEditVisible(false);
     };
 
-    const handleSearch = (
-        selectedKeys: React.SetStateAction<string>[],
-        confirm: () => void
-    ) => {
-        confirm();
-    };
-
-    const handleReset = (clearFilters: () => void) => {
-        clearFilters();
-    };
-
-    const getColumnSearchProps = (dataIndex: string, searchLabel: string) => ({
-        // @ts-ignore
-        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
-            <div style={{ padding: 8 }}>
-                <Input
-                    placeholder={`Vyhledat ${searchLabel}`}
-                    value={selectedKeys[0]}
-                    onChange={(e) =>
-                        setSelectedKeys(e.target.value ? [e.target.value] : [])
-                    }
-                    onPressEnter={() => handleSearch(selectedKeys, confirm)}
-                    style={{ marginBottom: 8, display: 'block' }}
-                />
-                <Space>
-                    <Button
-                        type="primary"
-                        onClick={() => handleSearch(selectedKeys, confirm)}
-                        icon={<SearchOutlined />}
-                        style={{ width: 90 }}
-                    >
-                        Hledat
-                    </Button>
-                    <Button
-                        onClick={() => handleReset(clearFilters)}
-                        style={{ width: 90 }}
-                    >
-                        Smazat
-                    </Button>
-                </Space>
-            </div>
-        ),
-        filterIcon: (filtered: any) => (
-            <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
-        ),
-        onFilter: (value: string, record: { [x: string]: { toString: () => string } }) =>
-            record[dataIndex]
-                ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
-                : '',
-    });
+    const menu = (id: string) => (
+        <Menu>
+            <Menu.Item
+                icon={<EditOutlined />}
+                key={'edit'}
+                onClick={() => showEditModal(id)}
+            >
+                Upravit
+            </Menu.Item>
+            <Menu.Item icon={<LockOutlined />} onClick={() => showEditPasswordModal(id)}>
+                Změnit Heslo
+            </Menu.Item>
+            <Menu.Item icon={<DeleteOutlined />} onClick={() => deleteUser(id)}>
+                Smazat
+            </Menu.Item>
+        </Menu>
+    );
 
     const columns = [
         {
@@ -132 +110 @@
             dataIndex: 'name',
             key: 'name',
             ...getColumnSearchProps('name', 'jméno'),
+            // @ts-ignore
+            sorter: (a, b) => a.name.localeCompare(b.name),
         },
         {
             title: 'Příjmení',
             dataIndex: 'surname',
             key: 'surname',
             ...getColumnSearchProps('surname', 'příjmení'),
+            // @ts-ignore
+            sorter: (a, b) => a.surname.localeCompare(b.surname),
         },
         {
             title: 'Uživatelské jméno',
             dataIndex: 'username',
             key: 'username',
             ...getColumnSearchProps('username', 'uživatelské jméno'),
+            // @ts-ignore
+            sorter: (a, b) => a.username.localeCompare(b.username),
+        },
+        {
+            title: 'Role',
+            dataIndex: 'role',
+            key: 'role',
+            filters: [
+                {
+                    text: 'Administrátor',
+                    value: 'ADMINISTRATOR',
+                },
+                {
+                    text: 'Anotátor',
+                    value: 'ANNOTATOR',
+                },
+            ],
+            // @ts-ignore
+            onFilter: (value, record) => record.role.indexOf(value) === 0,
+            // @ts-ignore
+            sorter: (a, b) => a.username.localeCompare(b.username),
+            render: (role: string) => {
+                let label = '';
+                if (role === 'ANNOTATOR') {
+                    label = 'Anotátor';
+                }
+                if (role === 'ADMINISTRATOR') {
+                    label = 'Administrátor';
+                }
+                return label;
+            },
         },
         {
             title: 'Přiřazeno dokumentů',
@@ -169 +182 @@
             title: '',
             key: 'operations',
             dataIndex: 'id',
-            align: 'center' as 'center',
+            align: 'right' as 'right',
+            width: '150px',
             // @ts-ignore
             render: (id) => (
                 <div>
                     <Space size={'middle'}>
-                        <Button onClick={() => showEditModal(id)}>Upravit</Button>
-                        <Button onClick={() => deleteUser(id)}>Smazat</Button>
+                        {/*{menu(id)}*/}
+                        {<Dropdown.Button overlay={menu(id)} placement="bottom" />}
                     </Space>
                 </div>
             ),
@@ -193 +207 @@
             </Button>
             {addVisible && <AddUserModal onCancel={hideModals} />}
             {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
+            {passwordEditVisible && (
+                <EditUserPasswordModal userInfo={user} onCancel={hideModals} />
+            )}
             {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
 
             <Table
-                locale={{
-                    triggerDesc: 'Seřadit sestupně',
-                    triggerAsc: 'Seřadit vzestupně',
-                    cancelSort: 'Vypnout řazení',
-                }}
+                locale={{ ...getLocaleProps() }}
                 // @ts-ignore
                 columns={columns}
                 dataSource={users}
-                scroll={{ y: 500 }}
+                scroll={{ y: 800 }}
             />
         </MainLayout>
     );