Revize c4f198c3

Finalization - buttons, confirm toasters and navigation were implemented

webapp/pages/documents/admin/index.tsx

@@ -3 +3 @@
 
 import { useUnauthRedirect } from '../../../hooks';
 import { useRouter } from 'next/router';
-import { Button, Space, Table, Typography } from 'antd';
+import { Button, Row, Space, Table, Tag, Typography } from 'antd';
 import { faFileLines, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
@@ -17 +17 @@
 } from '../../../api';
 import { documentController, userController } from '../../../controllers';
 import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
-import { ShowConfirmDelete, ShowToast } from '../../../utils/alerts';
+import { ShowConfirm, ShowToast } from '../../../utils/alerts';
 import { TableDocInfo } from '../../../components/types/TableDocInfo';
 import {
     getAnnotationStateColor,
+    getAnnotationStateString,
     getNameTruncated,
     getUserInfoAlt,
 } from '../../../utils/strings';
@@ -29 +30 @@
 import DocPreviewModal from '../../../components/modals/DocPreviewModal';
 import { UserFilter } from '../../../components/types/UserFilter';
 import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
-import { UserOutlined } from '@ant-design/icons';
-import Swal from 'sweetalert2';
+import {
+    CheckCircleOutlined,
+    ClockCircleOutlined,
+    SyncOutlined,
+} from '@ant-design/icons';
+import { SweetAlertIcon } from 'sweetalert2';
 
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
+    const [finalizing, setFinalizing] = React.useState(false);
     const [visibleAdd, setVisibleAdd] = React.useState(false);
     const [visibleAssign, setVisibleAssign] = React.useState(false);
     const [visiblePreview, setVisiblePreview] = React.useState(false);
@@ -78 +84 @@
         }
     }, [logout, redirecting, role, router]);
 
+    const finalizeDocumentConfirm = async (
+        document: DocumentListInfo,
+        recreate: boolean
+    ) => {
+        let desc = recreate ? 'Dosavadní změny finální verze budou smazány' : '';
+        let icon: SweetAlertIcon = recreate ? 'warning' : 'question';
+
+        const doneAnnotations = document.annotatingUsers?.filter(
+            (usr) => usr.state === EState.Done
+        ).length;
+
+        if (
+            doneAnnotations !== undefined &&
+            document.requiredAnnotations !== undefined &&
+            doneAnnotations < document.requiredAnnotations
+        ) {
+            icon = 'warning';
+            desc =
+                'Není dokončen požadovaný počet anotací <br /> (dokončeno ' +
+                doneAnnotations +
+                ' z ' +
+                document.requiredAnnotations +
+                ')';
+        }
+        recreate
+            ? ShowConfirm(
+                  () => finalizeDocument(document.id),
+                  'vytvořit novou finální verzi dokumentu',
+                  desc,
+                  icon
+              )
+            : ShowConfirm(
+                  () => finalizeDocument(document.id),
+                  'vytvořit finální verzi dokumentu',
+                  desc,
+                  icon
+              );
+    };
+
+    const finalizeDocument = async (documentId: string | undefined) => {
+        setFinalizing(true);
+        const finalAnnotationId = (
+            await documentController.documentDocumentIdFinalPost(
+                documentId ? documentId : ''
+            )
+        ).data.finalAnnotationId;
+        if (!finalAnnotationId) {
+            ShowToast('Finální verzi se nepovedlo vytvořit', 'error');
+        } else {
+            router.push({
+                pathname: '/annotation/[annotationId]',
+                query: { annotationId: finalAnnotationId, final: true },
+            });
+        }
+        setFinalizing(false);
+    };
+
+    const editFinalizedDocument = async (finalAnnotationId: string) => {
+        setFinalizing(true);
+        if (!finalAnnotationId) {
+            ShowToast('Finální verze dosud neexistuje', 'warning');
+        } else {
+            router.push({
+                pathname: '/annotation/[annotationId]',
+                query: { annotationId: finalAnnotationId, final: true },
+            });
+        }
+        setFinalizing(false);
+    };
+
+    const getFinalizationStateIcon = (state: EState) => {
+        const color = getAnnotationStateColor(state);
+        const label = getAnnotationStateString(state);
+        let icon = <CheckCircleOutlined />;
+        if (state === 'NEW') {
+            icon = <ClockCircleOutlined />;
+        }
+        if (state === 'IN_PROGRESS') {
+            icon = <SyncOutlined />;
+        }
+
+        return (
+            <Tag icon={icon} color={color} key={label}>
+                {label.toUpperCase()}
+            </Tag>
+        );
+    };
+
     const showAssignModal = () => {
         if (selectedDocs.length == 0) {
             ShowToast('Vyberte dokument pro přiřazení', 'warning', 3000, 'top-end');
@@ -124 +218 @@
             title: 'Název dokumentu',
             dataIndex: 'name',
             key: 'name',
+            width: '15%',
             ...getColumnSearchProps('name', 'název'),
             sorter: {
                 // @ts-ignore
@@ -135 +230 @@
             title: 'Délka',
             dataIndex: 'length',
             key: 'length',
+            width: '6%',
+            align: 'center' as 'center',
             sorter: {
                 // @ts-ignore
                 compare: (a, b) => a.length - b.length,
@@ -144 +241 @@
         {
             title: 'Dokončeno | přiřazeno | vyžadováno',
             key: 'annotationCounts',
+            width: '15%',
+            align: 'center' as 'center',
             render: (
                 columnData: DocumentListResponse,
                 record: DocumentListInfo,
@@ -187 +286 @@
             title: 'Anotátoři',
             dataIndex: 'annotatingUsers',
             key: 'annotatingUsers',
+            width: '20%',
             render: (
                 columnData: DocumentUserInfo[],
                 record: DocumentListInfo,
@@ -209 +309 @@
                                     title={getUserInfoAlt(e)}
                                     className={'me-2'}
                                 />
-                                {getNameTruncated(e)}
+                                {record.finalAnnotations?.some(
+                                    (annot) => annot.userId === e.id
+                                ) ? (
+                                    <u>{getNameTruncated(e)}</u>
+                                ) : (
+                                    getNameTruncated(e)
+                                )}
                             </span>
                         ))}
                     </div>
@@ -231 +337 @@
             title: '',
             key: 'action',
             dataIndex: ['id', 'name'],
+            width: '10%',
+            align: 'center' as 'center',
             // @ts-ignore
             render: (text, row) => (
                 <Button key={row.id} onClick={() => showPreviewModal(row.id, row.name)}>
@@ -238 +346 @@
                 </Button>
             ),
         },
+        {
+            title: 'Finální verze dokumentu',
+            key: 'final',
+            dataIndex: ['id', 'finalizedExists'],
+            // @ts-ignore
+            render: (text, row) =>
+                row.finalizedExists ? (
+                    <Row>
+                        <Space>
+                            <Button
+                                disabled={finalizing}
+                                onClick={() => finalizeDocumentConfirm(row.id, true)}
+                            >
+                                Znovu vytvořit
+                            </Button>
+                            <Button
+                                disabled={finalizing}
+                                onClick={() =>
+                                    editFinalizedDocument(row.finalizedAnnotationId)
+                                }
+                            >
+                                Upravit
+                            </Button>
+                            {getFinalizationStateIcon(row.finalizedState)}
+                        </Space>
+                    </Row>
+                ) : (
+                    <Button
+                        disabled={finalizing}
+                        onClick={() => finalizeDocumentConfirm(row, false)}
+                    >
+                        Finalizovat
+                    </Button>
+                ),
+            filters: [
+                {
+                    text: 'Nefinalizováno',
+                    value: null,
+                },
+                {
+                    text: 'Nový',
+                    value: 'NEW',
+                },
+                {
+                    text: 'Rozpracováno',
+                    value: 'IN_PROGRESS',
+                },
+                {
+                    text: 'Hotovo',
+                    value: 'DONE',
+                },
+            ],
+            // @ts-ignore
+            onFilter: (value, record) => record.finalizedState === value,
+        },
     ];
 
     const rowSelection = {