Revize 82ba2ee5

Users table implemented

webapp/pages/users/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 { Typography } from 'antd';
+import { Button, Space, Table, Typography } from 'antd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
 import { MainLayout } from '../../layouts/MainLayout';
+import { UserInfo } from '../../api';
+import { userController } from '../../controllers';
+import AddUserModal from '../../components/modals/AddUserModal';
 
 function UsersPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
     const router = useRouter();
 
+    const [visible, setVisible] = React.useState(false);
+    const [users, setUsers] = useState<UserInfo[]>([]);
+
     useEffect(() => {
+        async function fetchData() {
+            let usrs = (await userController.usersGet()).data.users;
+            if (!usrs) {
+                setUsers([]);
+            } else {
+                setUsers(usrs);
+            }
+        }
+
         if (!redirecting && role === 'ADMINISTRATOR') {
-            // TODO load users
+            fetchData();
         }
     }, [logout, redirecting, role, router]);
 
+    const showModal = () => {
+        setVisible(true);
+    };
+
+    const hideModal = () => {
+        setVisible(false);
+    };
+
+    const columns = [
+        { title: 'Jméno', dataIndex: 'name', key: 'name' },
+        { title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
+        { title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
+        {
+            title: '',
+            key: 'operation',
+            render: () => (
+                <div>
+                    <Space size={'middle'}>
+                        <Button>Dokumenty</Button>
+                        <Button>Upravit</Button>
+                        <Button>Smazat</Button>
+                    </Space>
+                </div>
+            ),
+        },
+    ];
+
     return redirecting || role !== 'ADMINISTRATOR' ? null : (
         <MainLayout>
             <Typography.Title level={2}>
                 <FontAwesomeIcon icon={faUsers} /> Uživatelé
             </Typography.Title>
+            <Button type={'primary'} onClick={showModal}>
+                Přidat uživatele
+            </Button>
+            {visible && <AddUserModal onCancel={hideModal} />}
+
+            <Table
+                columns={columns}
+                dataSource={users}
+                size="small"
+                scroll={{ y: 500 }}
+            />
         </MainLayout>
     );
 }