Revize 669ffe38

Refactoring after code review

webapp/api/api.ts

@@ -793 +793 @@
      * @memberof UserInfo
      */
     'assignedDocumentsCount'?: number;
+    /**
+     * 
+     * @type {ERole}
+     * @memberof UserInfo
+     */
+    'role'?: ERole;
 }
 /**
  * 

webapp/components/modals/AddUserModal.tsx

@@ -62 +62 @@
             visible={true}
             onCancel={handleCancel}
             footer={null}
+            centered
         >
             <Form
                 onFinish={onFinish}

webapp/components/modals/AssignDocumentModal.tsx

@@ -5 +5 @@
 import { annotationController, userController } from '../../controllers';
 import { useUnauthRedirect } from '../../hooks';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
+import { ShowToast } from '../../utils/alerts';
 
 interface ModalProps {
     onCancel: () => void;
@@ -37 +38 @@
     const handleUpload = async () => {
         // console.log(documentsIds, selectedUsers);
         if (documentsIds && documentsIds.length !== 0) {
-            await annotationController.annotationsPost({
-                // @ts-ignore
-                documentIdList: documentsIds,
-                userIdList: selectedUsers,
-            });
+            await annotationController
+                .annotationsPost({
+                    // @ts-ignore
+                    documentIdList: documentsIds,
+                    userIdList: selectedUsers,
+                })
+                .then((r) => {
+                    ShowToast(
+                        'Přiřazení dokumentů proběhlo úspěšně',
+                        'success',
+                        3000,
+                        'top-end'
+                    );
+                    onCancel();
+                });
         }
-        onCancel();
     };
 
     function onChange(event: any) {

webapp/components/modals/EditUserModal.tsx

@@ -38 +38 @@
             role: values.role,
         };
         if (userInfo.id) {
-            await userController.userUserIdPut(userInfo.id, req);
+            userController.userUserIdPut(userInfo.id, req).then((r) => {
+                ShowToast(
+                    'Úprava uživatele proběhla úspěšně',
+                    'success',
+                    3000,
+                    'top-end'
+                );
+                onCancel();
+            });
         }
-        onCancel();
     };
 
     const onFinishFailed = (errorInfo: any) => {
@@ -54 +61 @@
             visible={true}
             onCancel={handleCancel}
             footer={null}
+            centered
         >
             <Form
                 onFinish={onFinish}
@@ -62 +70 @@
                 labelCol={{ span: 4 }}
                 layout="horizontal"
             >
-                <Form.Item
-                    label=""
-                    name="role"
-                    rules={[
-                        {
-                            required: true,
-                            message: 'Prosím vyberte roli',
-                        },
-                    ]}
-                >
-                    <Radio.Group>
+                <Form.Item label="" name="role">
+                    <Radio.Group defaultValue={userInfo.role}>
                         <Radio.Button value={ERole.Annotator}>Anotátor</Radio.Button>
                         <Radio.Button value={ERole.Administrator}>Admin</Radio.Button>
                     </Radio.Group>
@@ -89 +88 @@
                 >
                     <Input placeholder="Uživatelské jméno" />
                 </Form.Item>
-                <Form.Item
-                    name="password"
-                    rules={[{ required: true, message: 'Prosím zadejte heslo' }]}
-                >
-                    <Input.Password placeholder="Heslo" />
-                </Form.Item>
-
                 <Form.Item
                     name="name"
                     initialValue={userInfo.name}

webapp/components/modals/EditUserPasswordModal.tsx

@@ +1 @@
+import { Button, Form, Input, Modal, Radio } from 'antd';
+import 'antd/dist/antd.css';
+import React from 'react';
+import { ChangeUserInfoRequest, ERole, UserInfo } from '../../api';
+import { userController } from '../../controllers';
+import { ShowToast } from '../../utils/alerts';
+
+interface ModalProps {
+    onCancel: () => void;
+    userInfo: UserInfo;
+}
+
+/**
+ * Creates a modal window that loads documents to the app.
+ * @returns The modal window.
+ */
+const EditUserModal: React.FC<ModalProps> = ({ onCancel, userInfo }: ModalProps) => {
+    /**
+     * Handles successful closing of the modal window.
+     */
+    const handleOk = () => {
+        onCancel();
+    };
+
+    /**
+     * Handles cancelling of the model window.
+     */
+    const handleCancel = () => {
+        onCancel();
+    };
+
+    const onFinish = async (values: any) => {
+        const req: ChangeUserInfoRequest = {
+            password: values.password,
+        };
+        if (userInfo.id) {
+            userController.userUserIdPut(userInfo.id, req).then((r) => {
+                ShowToast('Heslo úspěšně změněno', 'success', 3000, 'top-end');
+                onCancel();
+            });
+        }
+    };
+
+    const onFinishFailed = (errorInfo: any) => {
+        ShowToast('Zadané údaje nejsou validní', 'error', 3000, 'top-end');
+    };
+
+    return (
+        <Modal
+            title={'Změnit heslo uživatele ' + userInfo.username}
+            onOk={handleOk}
+            visible={true}
+            onCancel={handleCancel}
+            footer={null}
+            width={400}
+            centered
+        >
+            <Form
+                onFinish={onFinish}
+                onFinishFailed={onFinishFailed}
+                autoComplete="off"
+                labelCol={{ span: 4 }}
+                layout="horizontal"
+            >
+                <Form.Item
+                    name="password"
+                    rules={[{ required: true, message: 'Prosím zadejte heslo' }]}
+                >
+                    <Input.Password placeholder="Heslo" />
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className="w-100">
+                        Změnit
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+
+export default EditUserModal;

webapp/components/modals/UserDocumentsModal.tsx

@@ -1 @@
-import { List, Modal } from 'antd';
+import { List, Modal, Skeleton, Tag } from 'antd';
 import 'antd/dist/antd.css';
 import React, { useContext, useEffect, useState } from 'react';
-import { AnnotationListInfo } from '../../api';
+import { AnnotationListInfo, EState } from '../../api';
 import { userController } from '../../controllers';
 import { useUnauthRedirect } from '../../hooks';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
+import {
+    CheckCircleOutlined,
+    ClockCircleOutlined,
+    SyncOutlined,
+} from '@ant-design/icons';
 
 interface ModalProps {
     onCancel: () => void;
@@ -24 +29 @@
         onCancel();
     };
 
+    const getStateTag = (state: EState) => {
+        let color = 'green';
+        let label = 'Hotovo';
+        let icon = <CheckCircleOutlined />;
+        if (state === EState.New) {
+            color = 'volcano';
+            label = 'Nový';
+            icon = <ClockCircleOutlined />;
+        }
+        if (state === EState.InProgress) {
+            color = 'orange';
+            label = 'Rozpracováno';
+            icon = <SyncOutlined spin />;
+        }
+        return (
+            <Tag icon={icon} color={color} key={label}>
+                {label.toUpperCase()}
+            </Tag>
+        );
+    };
+
     useEffect(() => {
         if (!redirecting && role === 'ADMINISTRATOR' && userId) {
             userController
@@ -49 +75 @@
                 style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
                 renderItem={(item) => (
                     <List.Item key={item.annotationId}>
-                        <List.Item.Meta title={item.documentName} />
+                        <List.Item.Meta
+                            title={item.documentName}
+                            // @ts-ignore
+                            avatar={getStateTag(item.state)}
+                        />
                     </List.Item>
                 )}
             />

webapp/pages/_app.tsx

@@ -1 +1 @@
 // @ts-nocheck
 import '../styles/globals.css';
-import 'bootstrap/dist/css/bootstrap.css';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 
 import type { AppProps } from 'next/app';

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,

webapp/pages/documents/annotator/index.tsx

@@ -13 +13 @@
 import {
     CheckCircleOutlined,
     ClockCircleOutlined,
-    SearchOutlined,
     SyncOutlined,
 } from '@ant-design/icons';
+import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
 
 function UserDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -39 +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'),
+            // @ts-ignore
+            sorter: (a, b) => a.documentName.localeCompare(b.documentName),
         },
         {
             title: 'Stav anotace',
@@ -163 +114 @@
                 <FontAwesomeIcon icon={faFileLines} /> Dokumenty
             </Typography.Title>
             <Table
-                locale={{
-                    triggerDesc: 'Seřadit sestupně',
-                    triggerAsc: 'Seřadit vzestupně',
-                    cancelSort: 'Vypnout řazení',
-                }}
+                locale={{ ...getLocaleProps() }}
                 // @ts-ignore
                 columns={columns}
                 // @ts-ignore

webapp/pages/users/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../hooks';
 import { useRouter } from 'next/router';
-import { Badge, Button, Input, Space, Table, Typography } from 'antd';
+import { Badge, Button, Dropdown, Menu, Space, Table, Typography } from 'antd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
@@ -12 +12 @@
 import { userController } from '../../controllers';
 import AddUserModal from '../../components/modals/AddUserModal';
 import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
-import { ShowConfirmDelete } from '../../utils/alerts';
+import { ShowConfirmDelete, ShowToast } from '../../utils/alerts';
 import EditUserModal from '../../components/modals/EditUserModal';
-import { SearchOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, LockOutlined } from '@ant-design/icons';
+import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
+import EditUserPasswordModal from '../../components/modals/EditUserPasswordModal';
 
 function UsersPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -23 +25 @@
 
     const [addVisible, setAddVisible] = React.useState(false);
     const [editVisible, setEditVisible] = React.useState(false);
+    const [passwordEditVisible, setPasswordEditVisible] = React.useState(false);
     const [docsVisible, setDocsVisible] = React.useState(false);
     const [users, setUsers] = useState<UserInfo[]>([]);
 
@@ -52 +55 @@
 
     const deleteUser = (userId: string) => {
         ShowConfirmDelete(() => {
-            userController.userUserIdDelete(userId).then(() => fetchData());
+            userController.userUserIdDelete(userId).then(() => {
+                ShowToast('Uživatel úspěšně odstraněn', 'success', 3000, 'top-end');
+                fetchData();
+            });
         }, 'uživatele');
     };
 
@@ -63 +69 @@
         setUserInfo(userId);
         setEditVisible(true);
     };
+    const showEditPasswordModal = (userId: string) => {
+        setUserInfo(userId);
+        setPasswordEditVisible(true);
+    };
     const showDocsModal = (userId: string) => {
         setUserInfo(userId);
         setDocsVisible(true);
@@ -73 +83 @@
         setAddVisible(false);
         setDocsVisible(false);
         setEditVisible(false);
+        setPasswordEditVisible(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 menu = (id: string) => (
+        <Menu>
+            <Menu.Item
+                icon={<EditOutlined />}
+                key={'edit'}
+                onClick={() => showEditModal(id)}
+            >
+                Upravit
+            </Menu.Item>
+            <Menu.Item icon={<LockOutlined />} onClick={() => showEditPasswordModal(id)}>
+                Změnit Heslo
+            </Menu.Item>
+            <Menu.Item icon={<DeleteOutlined />} onClick={() => deleteUser(id)}>
+                Smazat
+            </Menu.Item>
+        </Menu>
+    );
 
     const columns = [
         {
@@ -132 +110 @@
             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ů',
@@ -169 +182 @@
             title: '',
             key: 'operations',
             dataIndex: 'id',
-            align: 'center' as 'center',
+            align: 'right' as 'right',
+            width: '150px',
             // @ts-ignore
             render: (id) => (
                 <div>
                     <Space size={'middle'}>
-                        <Button onClick={() => showEditModal(id)}>Upravit</Button>
-                        <Button onClick={() => deleteUser(id)}>Smazat</Button>
+                        {/*{menu(id)}*/}
+                        {<Dropdown.Button overlay={menu(id)} placement="bottom" />}
                     </Space>
                 </div>
             ),
@@ -193 +207 @@
             </Button>
             {addVisible && <AddUserModal onCancel={hideModals} />}
             {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
+            {passwordEditVisible && (
+                <EditUserPasswordModal userInfo={user} onCancel={hideModals} />
+            )}
             {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
 
             <Table
-                locale={{
-                    triggerDesc: 'Seřadit sestupně',
-                    triggerAsc: 'Seřadit vzestupně',
-                    cancelSort: 'Vypnout řazení',
-                }}
+                locale={{ ...getLocaleProps() }}
                 // @ts-ignore
                 columns={columns}
                 dataSource={users}
-                scroll={{ y: 500 }}
+                scroll={{ y: 800 }}
             />
         </MainLayout>
     );

webapp/utils/tableUtils.tsx

@@ +1 @@
+import { Button, Input, Space } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import React from 'react';
+import { style } from 'dom-helpers';
+
+export const getLocaleProps = () => ({
+    filterSearchPlaceholder: 'Hledat uživatele',
+    triggerDesc: 'Seřadit sestupně',
+    triggerAsc: 'Seřadit vzestupně',
+    cancelSort: 'Vypnout řazení',
+});
+
+const handleSearch = (
+    selectedKeys: React.SetStateAction<string>[],
+    confirm: () => void
+) => {
+    confirm();
+};
+
+const handleReset = (clearFilters: () => void) => {
+    clearFilters();
+};
+
+export 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' : '#757575', fontSize: '140%' }}
+        />
+    ),
+    onFilter: (value: string, record: { [x: string]: { toString: () => string } }) =>
+        record[dataIndex]
+            ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
+            : '',
+});