Revize 0db53e25

Document filtering implemented

webapp/pages/documents/annotator/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, Tag, Typography } from 'antd';
 import { faFileLines } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
 import { MainLayout } from '../../../layouts/MainLayout';
 import { userController } from '../../../controllers';
 import { AnnotationListInfo } from '../../../api';
+import {
+    CheckCircleOutlined,
+    ClockCircleOutlined,
+    SearchOutlined,
+    SyncOutlined,
+} from '@ant-design/icons';
 
 function UserDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
-    const router = useRouter();
     const [documents, setDocuments] = useState<AnnotationListInfo[]>([]);
+    const router = useRouter();
 
     useEffect(() => {
         async function fetchData() {
@@ -33 +39 @@
         }
     }, [logout, redirecting, role, router]);
 
+    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: 'documentName',
             key: 'documentName',
+            ...getColumnSearchProps('documentName', 'název'),
         },
         {
             title: 'Stav anotace',
@@ -46 +104 @@
             render: (state: string) => {
                 let color = 'green';
                 let label = 'Hotovo';
+                let icon = <CheckCircleOutlined />;
                 if (state === 'NEW') {
                     color = 'volcano';
                     label = 'Nový';
+                    icon = <ClockCircleOutlined />;
                 }
                 if (state === 'IN_PROGRESS') {
                     color = 'orange';
                     label = 'Rozpracováno';
+                    icon = <SyncOutlined spin />;
                 }
                 return (
-                    <Tag color={color} key={label}>
+                    <Tag icon={icon} color={color} key={label}>
                         {label.toUpperCase()}
                     </Tag>
                 );
             },
+            filters: [
+                {
+                    text: 'Nový',
+                    value: 'NEW',
+                },
+                {
+                    text: 'Rozpracováno',
+                    value: 'IN_PROGRESS',
+                },
+                {
+                    text: 'Hotovo',
+                    value: 'DONE',
+                },
+            ],
+            // @ts-ignore
+            onFilter: (value, record) => record.state.indexOf(value) === 0,
+            // @ts-ignore
+            sorter: (a, b) => a.state.length - b.state.length,
+            sortDirections: ['descend', 'ascend'],
         },
         {
             title: '',
@@ -83 +163 @@
                 <FontAwesomeIcon icon={faFileLines} /> Dokumenty
             </Typography.Title>
             <Table
+                locale={{
+                    triggerDesc: 'Seřadit sestupně',
+                    triggerAsc: 'Seřadit vzestupně',
+                    cancelSort: 'Vypnout řazení',
+                }}
+                // @ts-ignore
                 columns={columns}
+                // @ts-ignore
                 dataSource={documents}
                 size="small"
                 scroll={{ y: 500 }}