Revize c6109e2d

Document table added for admin (document management)

webapp/pages/documents/admin/index.tsx

@@ -1 +1 @@
 import 'antd/dist/antd.css';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { useUnauthRedirect } from '../../../hooks';
 import { useRouter } from 'next/router';
-import { Button, Typography } from 'antd';
-import { faFileLines } from '@fortawesome/free-solid-svg-icons';
+import { Button, 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';
 import { MainLayout } from '../../../layouts/MainLayout';
 import AddDocumentModal from '../../../components/modals/AddDocumentModal';
+import { AnnotationListInfo, DocumentListInfo, UserInfo } from '../../../api';
+import { documentController, userController } from '../../../controllers';
 
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -16 +18 @@
     const [visible, setVisible] = React.useState(false);
     const router = useRouter();
 
+    const [documents, setDocuments] = useState<DocumentListInfo[]>([]);
+
     useEffect(() => {
+        async function fetchData() {
+            let docs = (await documentController.documentsGet(0, 1000)).data.documents;
+            if (!docs) {
+                setDocuments([]);
+            } else {
+                setDocuments(docs);
+            }
+        }
+
         if (!redirecting && role === 'ADMINISTRATOR') {
-            // TODO load documents
+            fetchData();
         }
     }, [logout, redirecting, role, router]);
 
@@ -30 +43 @@
         setVisible(false);
     };
 
+    const columns = [
+        {
+            title: 'Název dokumentu',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Délka',
+            dataIndex: 'length',
+            key: 'length',
+        },
+        {
+            title: 'Anotátoři',
+            dataIndex: 'annotatingUsers',
+            key: 'annotatingUsers',
+            render: (columnData: UserInfo[], record: DocumentListInfo, index: number) => {
+                return (
+                    <div>
+                        {columnData.map((e) => (
+                            <span
+                                key={e.username + '.' + record.id}
+                                title={e.username ?? ''}
+                            >
+                                <FontAwesomeIcon
+                                    icon={faUser}
+                                    title={e.username ?? ''}
+                                    className={'me-2'}
+                                />
+                            </span>
+                        ))}
+                    </div>
+                );
+            },
+        },
+    ];
+
     return redirecting || role !== 'ADMINISTRATOR' ? null : (
         <MainLayout>
             <Typography.Title level={2}>
@@ -39 +88 @@
                 Nahrát dokument
             </Button>
             {visible && <AddDocumentModal onCancel={hideModal} />}
+
+            <Table
+                columns={columns}
+                dataSource={documents}
+                size="small"
+                scroll={{ y: 500 }}
+            />
         </MainLayout>
     );
 }