Revize 43d49a98

Modal windows for user edit, delete and assigned documents were implemented

webapp/pages/users/index.tsx

@@ -11 +11 @@
 import { UserInfo } from '../../api';
 import { userController } from '../../controllers';
 import AddUserModal from '../../components/modals/AddUserModal';
+import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
+import { ShowConfirmDelete } from '../../utils/alerts';
+import EditUserModal from '../../components/modals/EditUserModal';
 
 function UsersPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
     const router = useRouter();
 
-    const [visible, setVisible] = React.useState(false);
+    const [addVisible, setAddVisible] = React.useState(false);
+    const [editVisible, setEditVisible] = React.useState(false);
+    const [docsVisible, setDocsVisible] = 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);
-            }
+    const [user, setUser] = useState<UserInfo>({});
+
+    async function fetchData() {
+        let usrs = (await userController.usersGet()).data.users;
+        if (!usrs) {
+            setUsers([]);
+        } else {
+            setUsers(usrs);
         }
+    }
 
+    useEffect(() => {
         if (!redirecting && role === 'ADMINISTRATOR') {
             fetchData();
         }
     }, [logout, redirecting, role, router]);
 
-    const showModal = () => {
-        setVisible(true);
+    const setUserInfo = (userId: string) => {
+        const userInfo = users.find((user) => user.id === userId);
+        if (userInfo) {
+            setUser(userInfo);
+        }
+    };
+
+    const deleteUser = (userId: string) => {
+        ShowConfirmDelete(() => {
+            userController.userUserIdDelete(userId).then(() => fetchData());
+        }, 'uživatele');
+    };
+
+    const showAddModal = () => {
+        setAddVisible(true);
+    };
+    const showEditModal = (userId: string) => {
+        setUserInfo(userId);
+        setEditVisible(true);
+    };
+    const showDocsModal = (userId: string) => {
+        setUserInfo(userId);
+        setDocsVisible(true);
     };
 
-    const hideModal = () => {
-        setVisible(false);
+    const hideModals = () => {
+        fetchData();
+        setAddVisible(false);
+        setDocsVisible(false);
+        setEditVisible(false);
     };
 
     const columns = [
@@ -50 +81 @@
         {
             title: '',
             key: 'operation',
-            render: () => (
+            dataIndex: 'id',
+            render: (id: string) => (
                 <div>
                     <Space size={'middle'}>
-                        <Button>Dokumenty</Button>
-                        <Button>Upravit</Button>
-                        <Button>Smazat</Button>
+                        <Button onClick={() => showDocsModal(id)}>Dokumenty</Button>
+                        <Button onClick={() => showEditModal(id)}>Upravit</Button>
+                        <Button onClick={() => deleteUser(id)}>Smazat</Button>
                     </Space>
                 </div>
             ),
@@ -67 +99 @@
             <Typography.Title level={2}>
                 <FontAwesomeIcon icon={faUsers} /> Uživatelé
             </Typography.Title>
-            <Button type={'primary'} onClick={showModal}>
+            <Button type={'primary'} onClick={showAddModal}>
                 Přidat uživatele
             </Button>
-            {visible && <AddUserModal onCancel={hideModal} />}
+            {addVisible && <AddUserModal onCancel={hideModals} />}
+            {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
+            {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}
 
             <Table
                 columns={columns}