aswi20220x00-gitlab/webapp/pages/documents/annotator/index.tsx @ 0db53e25

import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';

import { useUnauthRedirect } from '../../../hooks';
import { useRouter } from 'next/router';
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 [documents, setDocuments] = useState<AnnotationListInfo[]>([]);
    const router = useRouter();

    useEffect(() => {
        async function fetchData() {
            let docs = (await userController.userAnnotationsGet()).data.annotations;
            if (!docs) {
                setDocuments([]);
            } else {
                setDocuments(docs);
            }
        }

        if (!redirecting /* && role === 'ANNOTATOR'*/) {
            // admin can also fetch data if he likes so
            fetchData();
        }
    }, [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',
            key: 'state',
            dataIndex: 'state',
            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 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: '',
            key: 'action',
            dataIndex: 'annotationId',
            render: (anotationId: number) => (
                <Button
                    key={anotationId}
                    type={'primary'}
                    onClick={() => router.push('/annotation/' + anotationId)}
                >
                    Anotovat
                </Button>
            ),
        },
    ];

    return redirecting /*|| role !== 'ANNOTATOR' */ ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <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 }}
            />
        </MainLayout>
    );
}

export default UserDocumentPage;