Revize c197eb02

document assigning modal window improved - table instead of list

webapp/components/modals/AssignDocumentModal.tsx

@@ -1 @@
-import { Button, Checkbox, List, Modal } from 'antd';
+import { Badge, Button, Checkbox, Dropdown, List, Modal, Space, Table } from 'antd';
 import 'antd/dist/antd.css';
 import React, { useContext, useEffect, useState } from 'react';
-import { UserInfo } from '../../api';
-import { annotationController, userController } from '../../controllers';
+import { DocumentListInfo, UserInfo } from '../../api';
+import {
+    annotationController,
+    documentController,
+    userController,
+} from '../../controllers';
 import { useUnauthRedirect } from '../../hooks';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
 import { ShowToast } from '../../utils/alerts';
+import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
+import { TableUserInfo } from '../types/TableUserInfo';
+import { TableDocInfo } from '../types/TableDocInfo';
 
 interface ModalProps {
     onCancel: () => void;
@@ -15 +22 @@
 function AssignDocumentModal({ onCancel, documentsIds }: ModalProps) {
     const redirecting = useUnauthRedirect('/login');
     const { role } = useContext(LoggedUserContext);
-    const [users, setUsers] = useState<UserInfo[]>([]);
+    const [users, setUsers] = useState<TableUserInfo[]>([]);
     const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
 
     const handleOk = () => {
@@ -26 +33 @@
         onCancel();
     };
 
-    useEffect(() => {
-        console.log(documentsIds);
+    async function fetchData() {
         if (!redirecting && role === 'ADMINISTRATOR') {
-            userController.usersGet().then(({ data: { users } }) => {
-                setUsers(users || []);
+            const usrs = (await userController.usersGet()).data.users;
+            // @ts-ignore
+            const tableUsers: TableUserInfo[] = usrs?.map((usr, index) => {
+                return { key: index, ...usr };
             });
+            setUsers(tableUsers || []);
         }
-    }, [documentsIds, redirecting, role]);
+    }
+
+    useEffect(() => {
+        fetchData();
+    }, [documentsIds, fetchData, redirecting, role]);
 
     const handleUpload = async () => {
         // console.log(documentsIds, selectedUsers);
@@ -56 +69 @@
         }
     };
 
-    function onChange(event: any) {
-        if (event.target.checked) {
-            selectedUsers.push(event.target.value);
-        } else {
-            setSelectedUsers(selectedUsers.filter((usr) => usr !== event.target.value));
-        }
-    }
+    const rowSelection = {
+        onChange: (selectedRowKeys: React.Key[], selectedRows: UserInfo[]) => {
+            // @ts-ignore
+            setSelectedUsers(selectedRows.map((row) => row.id));
+        },
+    };
+
+    const columns = [
+        {
+            title: 'Jméno',
+            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ů',
+            key: 'docCounts',
+            align: 'center' as 'center',
+            dataIndex: 'assignedDocumentsCount',
+            // @ts-ignore
+            render: (assignedDocumentsCount) => (
+                <div>
+                    <Space size={'middle'}>
+                        <Badge count={assignedDocumentsCount} />
+                    </Space>
+                </div>
+            ),
+            // @ts-ignore
+            sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
+        },
+    ];
 
     return (
         <Modal
@@ -70 +154 @@
             onOk={handleOk}
             visible={true}
             onCancel={handleCancel}
+            width={1000}
             footer={[
                 <Button key="back" onClick={handleCancel}>
                     Storno
@@ -79 +164 @@
                 </Button>,
             ]}
         >
-            <List
+            <Table
+                locale={{ ...getLocaleProps() }}
+                rowSelection={{
+                    type: 'checkbox',
+                    ...rowSelection,
+                }}
+                // @ts-ignore
+                columns={columns}
                 dataSource={users}
-                size={'small'}
-                grid={{ gutter: 10, column: 1 }}
-                style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
-                renderItem={(item) => (
-                    <List.Item key={item.id}>
-                        <List.Item.Meta
-                            title={
-                                <Checkbox onChange={onChange} value={item.id}>
-                                    {item.name + ' ' + item.surname}
-                                </Checkbox>
-                            }
-                        />
-                    </List.Item>
-                )}
+                pagination={false}
+                scroll={{ y: 400 }}
             />
         </Modal>
     );