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

import { List, Modal, Skeleton, Tag, Typography } from 'antd';
import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';
import { AnnotationListInfo, EState, UserInfo } 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';
import { Badge, Tab, TabPane, Tabs } from 'react-bootstrap';

interface ModalProps {
    onCancel: () => void;
    user: UserInfo;
}

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

    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' && user.id) {
            userController
                .userUserIdAnnotationsGet(user.id)
                .then(({ data: { annotations } }) => {
                    setAnnotations(annotations || []);
                });
            if (
                user &&
                user.finalizedDocumentsCount !== undefined &&
                user.inProgressDocumentsCount !== undefined &&
                user.newDocumentsCount !== undefined
            ) {
                setFinished(user.finalizedDocumentsCount);
                setInProgress(user.newDocumentsCount + user.inProgressDocumentsCount);
            }
        }
    }, [redirecting, role]);

    return (
        <Modal
            title="Dokumenty uživatele"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={[null]}
        >
            <Tabs defaultActiveKey="all" id="tabs" className="mb-3">
                <Tab
                    eventKey="all"
                    title={
                        <div>
                            <Typography.Text>Vše </Typography.Text>
                            <Badge bg="info" pill>
                                {inProgress + finished}
                            </Badge>
                        </div>
                    }
                >
                    <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>
                        )}
                    />
                </Tab>
                <Tab
                    eventKey="profile"
                    title={
                        <div>
                            <Typography.Text>Nové a rozpracované </Typography.Text>
                            <Badge bg="warning" pill>
                                {inProgress}
                            </Badge>
                        </div>
                    }
                >
                    <List
                        dataSource={annotations}
                        size={'small'}
                        grid={{ gutter: 10, column: 1 }}
                        style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
                        renderItem={(item) =>
                            item.state === EState.New ||
                            item.state === EState.InProgress ? (
                                <List.Item key={item.annotationId}>
                                    <List.Item.Meta
                                        title={item.documentName}
                                        // @ts-ignore
                                        avatar={getStateTag(item.state)}
                                    />
                                </List.Item>
                            ) : (
                                ''
                            )
                        }
                    />
                </Tab>
                <Tab
                    eventKey="contact"
                    title={
                        <div>
                            <Typography.Text>Hotové </Typography.Text>
                            <Badge bg="success" pill>
                                {finished}
                            </Badge>
                        </div>
                    }
                >
                    <List
                        dataSource={annotations}
                        size={'small'}
                        grid={{ gutter: 10, column: 1 }}
                        style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
                        renderItem={(item) =>
                            item.state === EState.Done ? (
                                <List.Item key={item.annotationId}>
                                    <List.Item.Meta
                                        title={item.documentName}
                                        // @ts-ignore
                                        avatar={getStateTag(item.state)}
                                    />
                                </List.Item>
                            ) : (
                                ''
                            )
                        }
                    />
                </Tab>
            </Tabs>
        </Modal>
    );
}

export default UserDocumentsModal;