aswi20220x00-gitlab/webapp/components/modals/AssignDocumentModal.tsx @ 43d49a98

import { Button, Checkbox, List, Modal } from 'antd';
import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';
import { UserInfo } from '../../api';
import { annotationController, userController } from '../../controllers';
import { useUnauthRedirect } from '../../hooks';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';

interface ModalProps {
    onCancel: () => void;
    documentsIds: (string | undefined)[];
}

function AssignDocumentModal({ onCancel, documentsIds }: ModalProps) {
    const redirecting = useUnauthRedirect('/login');
    const { role } = useContext(LoggedUserContext);
    const [users, setUsers] = useState<UserInfo[]>([]);
    const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

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

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

    useEffect(() => {
        console.log(documentsIds);
        if (!redirecting && role === 'ADMINISTRATOR') {
            userController.usersGet().then(({ data: { users } }) => {
                setUsers(users || []);
            });
        }
    }, [documentsIds, redirecting, role]);

    const handleUpload = async () => {
        // console.log(documentsIds, selectedUsers);
        if (documentsIds && documentsIds.length !== 0) {
            await annotationController.annotationsPost({
                // @ts-ignore
                documentIdList: documentsIds,
                userIdList: selectedUsers,
            });
        }
        onCancel();
    };

    function onChange(event: any) {
        if (event.target.checked) {
            selectedUsers.push(event.target.value);
        } else {
            setSelectedUsers(selectedUsers.filter((usr) => usr !== event.target.value));
        }
    }

    return (
        <Modal
            title="Přiřadit dokumenty"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={[
                <Button key="back" onClick={handleCancel}>
                    Storno
                </Button>,
                <Button key="submit" type="primary" onClick={handleUpload}>
                    Přiřadit
                </Button>,
            ]}
        >
            <List
                dataSource={users}
                size={'small'}
                grid={{ gutter: 10, column: 1 }}
                style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
                renderItem={(item) => (
                    <List.Item key={item.id}>
                        <List.Item.Meta
                            title={
                                <Checkbox onChange={onChange} value={item.id}>
                                    {item.name + ' ' + item.surname}
                                </Checkbox>
                            }
                        />
                    </List.Item>
                )}
            />
        </Modal>
    );
}

export default AssignDocumentModal;