Revize 9980241e

User filtering implemented

webapp/pages/users/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../hooks';
 import { useRouter } from 'next/router';
-import { Button, Space, Table, Typography } from 'antd';
+import { Badge, Button, Input, Space, Table, Typography } from 'antd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
@@ -14 +14 @@
 import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
 import { ShowConfirmDelete } from '../../utils/alerts';
 import EditUserModal from '../../components/modals/EditUserModal';
+import { SearchOutlined } from '@ant-design/icons';
 
 function UsersPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -74 +75 @@
         setEditVisible(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: 'Jméno', dataIndex: 'name', key: 'name' },
-        { title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
-        { title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
+        {
+            title: 'Jméno',
+            dataIndex: 'name',
+            key: 'name',
+            ...getColumnSearchProps('name', 'jméno'),
+        },
+        {
+            title: 'Příjmení',
+            dataIndex: 'surname',
+            key: 'surname',
+            ...getColumnSearchProps('surname', 'příjmení'),
+        },
+        {
+            title: 'Uživatelské jméno',
+            dataIndex: 'username',
+            key: 'username',
+            ...getColumnSearchProps('username', 'uživatelské jméno'),
+        },
+        {
+            title: 'Přiřazeno dokumentů',
+            key: 'docCounts',
+            align: 'center' as 'center',
+            dataIndex: ['id', 'assignedDocumentsCount'],
+            // @ts-ignore
+            render: (text, row) => (
+                <div>
+                    <Space size={'middle'}>
+                        <Badge count={row.assignedDocumentsCount}>
+                            <Button onClick={() => showDocsModal(row.id)}>
+                                Dokumenty
+                            </Button>
+                        </Badge>
+                    </Space>
+                </div>
+            ),
+            // @ts-ignore
+            sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
+        },
         {
             title: '',
-            key: 'operation',
+            key: 'operations',
             dataIndex: 'id',
-            render: (id: string) => (
+            align: 'center' as 'center',
+            // @ts-ignore
+            render: (id) => (
                 <div>
                     <Space size={'middle'}>
-                        <Button onClick={() => showDocsModal(id)}>Dokumenty</Button>
                         <Button onClick={() => showEditModal(id)}>Upravit</Button>
                         <Button onClick={() => deleteUser(id)}>Smazat</Button>
                     </Space>
@@ -94 +182 @@
         },
     ];
 
+    // @ts-ignore
     return redirecting || role !== 'ADMINISTRATOR' ? null : (
         <MainLayout>
             <Typography.Title level={2}>
@@ -107 +196 @@
             {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
 
             <Table
+                locale={{
+                    triggerDesc: 'Seřadit sestupně',
+                    triggerAsc: 'Seřadit vzestupně',
+                    cancelSort: 'Vypnout řazení',
+                }}
+                // @ts-ignore
                 columns={columns}
                 dataSource={users}
-                size="small"
                 scroll={{ y: 500 }}
             />
         </MainLayout>