aswi20220x00-gitlab/webapp/components/modals/UserDocumentsModal.tsx @ baf6fc22

import { List, Modal, Skeleton, Tag } from 'antd';
import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';
import { AnnotationListInfo, EState } from '../../api';
import { userController } from '../../controllers';
import { useUnauthRedirect } from '../../hooks';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';

import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
import styles from '/styles/Icon.module.scss';

interface ModalProps {
    onCancel: () => void;
    userId: string | undefined;
}

function UserDocumentsModal({ onCancel, userId }: ModalProps) {
    const redirecting = useUnauthRedirect('/login');
    const { role } = useContext(LoggedUserContext);
    const [annotations, setAnnotations] = useState<AnnotationListInfo[]>([]);

    const handleOk = () => {
        onCancel();
    };

    const handleCancel = () => {
        onCancel();
    };

    const getStateTag = (state: EState) => {
        let color = 'green';
        let label = 'Hotovo';
        let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
        if (state === EState.New) {
            color = 'volcano';
            label = 'Nový';
            icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
        }
        if (state === EState.InProgress) {
            color = 'orange';
            label = 'Rozpracováno';
            icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
        }
        return (
            <Tag icon={icon} color={color} key={label}>
                {label.toUpperCase()}
            </Tag>
        );
    };

    useEffect(() => {
        if (!redirecting && role === 'ADMINISTRATOR' && userId) {
            userController
                .userUserIdAnnotationsGet(userId)
                .then(({ data: { annotations } }) => {
                    setAnnotations(annotations || []);
                });
        }
    }, [userId, redirecting, role]);

    return (
        <Modal
            title="Dokumenty uživatele"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={[null]}
        >
            <List
                dataSource={annotations}
                size={'small'}
                grid={{ gutter: 10, column: 1 }}
                style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
                renderItem={(item) => (
                    <List.Item key={item.annotationId}>
                        <List.Item.Meta
                            title={item.documentName}
                            // @ts-ignore
                            avatar={getStateTag(item.state)}
                        />
                    </List.Item>
                )}
            />
        </Modal>
    );
}

export default UserDocumentsModal;