Revize 669ffe38

Refactoring after code review

webapp/pages/documents/admin/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../../hooks';
 import { useRouter } from 'next/router';
-import { Button, Input, Space, Table, Typography } from 'antd';
+import { Button, Space, Table, Typography } from 'antd';
 import { faFileLines, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
@@ -12 +12 @@
 import { DocumentListInfo, UserInfo } from '../../../api';
 import { documentController, userController } from '../../../controllers';
 import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
-import { ShowToast } from '../../../utils/alerts';
+import { ShowConfirmDelete, ShowToast } from '../../../utils/alerts';
 import { TableDocInfo } from '../../../components/types/TableDocInfo';
-import { SearchOutlined } from '@ant-design/icons';
 import { UserFilter } from '../../../components/types/UserFilter';
+import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
+import { UserOutlined } from '@ant-design/icons';
+import Swal from 'sweetalert2';
 
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -76 +78 @@
         setVisibleAssign(false);
     };
 
-    const handleSearch = (
-        selectedKeys: React.SetStateAction<string>[],
-        confirm: () => void
-    ) => {
-        confirm();
-    };
-
-    const handleReset = (clearFilters: () => void) => {
-        clearFilters();
+    const removeUserDocument = (userId: string, documentId: string) => {
+        Swal.fire({
+            title: 'Opravdu si přejete uživateli odebrat dokument?',
+            showCancelButton: true,
+            confirmButtonText: 'Odebrat',
+        }).then((result) => {
+            // TODO call API
+        });
     };
 
-    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 columns = [
         {
             title: 'Název dokumentu',
             dataIndex: 'name',
             key: 'name',
             ...getColumnSearchProps('name', 'název'),
+            sorter: {
+                // @ts-ignore
+                compare: (a, b) => a.name.localeCompare(b.name),
+                multiple: 2,
+            },
         },
         {
             title: 'Délka',
@@ -143 +109 @@
                 compare: (a, b) => a.length - b.length,
                 multiple: 1,
             },
-            sortDirections: ['descend', 'ascend'],
         },
         {
             title: 'Anotátoři',
@@ -152 +117 @@
             render: (columnData: UserInfo[], record: DocumentListInfo, index: number) => {
                 return (
                     <div>
-                        {columnData.map((e) => (
-                            <span
-                                key={e.username + '.' + record.id}
-                                title={e.username ?? ''}
-                            >
-                                <FontAwesomeIcon
-                                    icon={faUser}
+                        <Space>
+                            {columnData.map((e) => (
+                                <span
+                                    key={e.username + '.' + record.id}
                                     title={e.username ?? ''}
-                                    className={'me-2'}
-                                />
-                            </span>
-                        ))}
+                                >
+                                    <FontAwesomeIcon
+                                        icon={faUser}
+                                        size={'2x'}
+                                        onClick={() =>
+                                            // @ts-ignore
+                                            removeUserDocument(e.id, record.id)
+                                        }
+                                        title={e.username ?? ''}
+                                        className={'me-2'}
+                                    />
+                                </span>
+                            ))}
+                        </Space>
                     </div>
                 );
             },
@@ -176 +148 @@
             sorter: {
                 // @ts-ignore
                 compare: (a, b) => a.annotatingUsers.length - b.annotatingUsers.length,
-                multiple: 1,
+                multiple: 3,
             },
-            sortDirections: ['descend', 'ascend'],
         },
     ];
 
@@ -204 +175 @@
             )}
 
             <Table
-                locale={{
-                    filterSearchPlaceholder: 'Hledat uživatele',
-                    triggerDesc: 'Seřadit sestupně',
-                    triggerAsc: 'Seřadit vzestupně',
-                    cancelSort: 'Vypnout řazení',
-                }}
+                locale={{ ...getLocaleProps() }}
                 rowSelection={{
                     type: 'checkbox',
                     ...rowSelection,