Revize 0db53e25

Document filtering implemented

webapp/pages/documents/admin/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../../hooks';
 import { useRouter } from 'next/router';
-import { Button, Table, Tag, Typography } from 'antd';
+import { Button, Input, 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';
 import { MainLayout } from '../../../layouts/MainLayout';
 import AddDocumentModal from '../../../components/modals/AddDocumentModal';
-import { AnnotationListInfo, DocumentListInfo, UserInfo } from '../../../api';
+import { DocumentListInfo, UserInfo } from '../../../api';
 import { documentController, userController } from '../../../controllers';
 import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
 import { ShowToast } from '../../../utils/alerts';
 import { TableDocInfo } from '../../../components/types/TableDocInfo';
+import { SearchOutlined } from '@ant-design/icons';
+import { UserFilter } from '../../../components/types/UserFilter';
 
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -23 +25 @@
     const router = useRouter();
 
     const [documents, setDocuments] = useState<TableDocInfo[]>([]);
+    const [userFilters, setUserFilters] = useState<UserFilter[]>([]);
     const [selectedDocs, setSelectedDocs] = useState<string[] | undefined[]>([]);
 
     async function fetchData() {
         const docs = (await documentController.documentsGet(0, 1000)).data.documents;
-
         // @ts-ignore
         const tableDocs: TableDocInfo[] = docs?.map((doc, index) => {
             return { key: index, ...doc };
         });
 
+        const users = (await userController.usersGet()).data.users;
+        // @ts-ignore
+        const filters: UserFilter[] = users?.map((user) => {
+            return {
+                text: user.name + ' ' + user.surname,
+                value: user.username,
+            };
+        });
+        setUserFilters(filters);
+
         if (!docs) {
             setDocuments([]);
         } else {
@@ -64 +76 @@
         setVisibleAssign(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 columns = [
         {
             title: 'Název dokumentu',
             dataIndex: 'name',
             key: 'name',
+            ...getColumnSearchProps('name', 'název'),
         },
         {
             title: 'Délka',
             dataIndex: 'length',
             key: 'length',
+            sorter: {
+                // @ts-ignore
+                compare: (a, b) => a.length - b.length,
+                multiple: 1,
+            },
+            sortDirections: ['descend', 'ascend'],
         },
         {
             title: 'Anotátoři',
@@ -97 +167 @@
                     </div>
                 );
             },
+            filters: userFilters,
+            filterSearch: true,
+            // @ts-ignore
+            onFilter: (value, record) =>
+                // @ts-ignore
+                record.annotatingUsers.find((user) => user['username'] === value),
+            sorter: {
+                // @ts-ignore
+                compare: (a, b) => a.annotatingUsers.length - b.annotatingUsers.length,
+                multiple: 1,
+            },
+            sortDirections: ['descend', 'ascend'],
         },
     ];
 
@@ -122 +204 @@
             )}
 
             <Table
+                locale={{
+                    filterSearchPlaceholder: 'Hledat uživatele',
+                    triggerDesc: 'Seřadit sestupně',
+                    triggerAsc: 'Seřadit vzestupně',
+                    cancelSort: 'Vypnout řazení',
+                }}
                 rowSelection={{
                     type: 'checkbox',
                     ...rowSelection,
                 }}
+                // @ts-ignore
                 columns={columns}
                 dataSource={documents}
                 size="middle"