NestJS backend rewrite; migrate client to FluentUI V9

client/src/pages/Users.tsx

@@ -3,8 +3,9 @@ import { IRole } from "../interfaces/role"
 import { useEffect, useState } from "react"
 import { CreateField } from "../interfaces/create"
 import UserService from "../services/UserService"
-import { Flex, Loader, Stack } from "@mantine/core"
 import CustomTable from "../components/CustomTable"
+import { Spinner } from "@fluentui/react-components"
+import { IUser } from "../interfaces/user"
 
 export default function Users() {
     const { users, isError, isLoading } = useUsers()
@@ -13,12 +14,20 @@ export default function Users() {
 
     const [roleOptions, setRoleOptions] = useState<{ label: string, value: string }[]>()
 
+    const [data, setData] = useState<IUser[]>([])
+
     useEffect(() => {
         if (Array.isArray(roles)) {
             setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
         }
     }, [roles])
 
+    useEffect(() => {
+        if (users) {
+            setData(users)
+        }
+    }, [users])
+
     const createFields: CreateField[] = [
         { key: 'email', headerName: 'E-mail', type: 'string', required: true, defaultValue: '' },
         { key: 'login', headerName: 'Логин', type: 'string', required: true, defaultValue: '' },
@@ -36,57 +45,71 @@ export default function Users() {
 
     if (isLoading) {
         return (
-            <Flex direction='column' align='flex-start' gap='sm' p='sm'>
-                <Loader />
-            </Flex>
+            <div>
+                <Spinner />
+            </div>
         )
     }
 
     return (
-        <Stack w={'100%'} h={'100%'} p='xs'>
-            {Array.isArray(roleOptions) &&
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            padding: '1rem'
+        }}>
+            {Array.isArray(roleOptions) && Array.isArray(data) &&
                 <CustomTable
                     createFields={createFields}
                     submitHandler={UserService.createUser}
-                    data={users}
+                    data={data}
+                    onEditCell={(rowId, columnId, value) => {
+                        console.log(rowId, columnId, value)
+                        setData((prev) =>
+                            prev.map((row) =>
+                                row.id === rowId ? { ...row, [columnId]: value } : row
+                            )
+                        )
+                    }}
                     columns={[
                         {
-                            accessorKey: 'email',
+                            name: 'email',
                             header: 'E-mail',
-                            cell: (info) => info.getValue(),
+                            type: "string"
                         },
                         {
-                            accessorKey: 'login',
+                            name: 'login',
                             header: 'Логин',
-                            cell: (info) => info.getValue(),
+                            type: "string"
                         },
                         {
-                            accessorKey: 'phone',
+                            name: 'phone',
                             header: 'Телефон',
-                            cell: (info) => info.getValue(),
+                            type: "string"
                         },
                         {
-                            accessorKey: 'name',
+                            name: 'name',
                             header: 'Имя',
-                            cell: (info) => info.getValue(),
+                            type: "string"
                         },
                         {
-                            accessorKey: 'surname',
+                            name: 'surname',
                             header: 'Фамилия',
-                            cell: (info) => info.getValue(),
+                            type: "string"
                         },
                         {
-                            accessorKey: 'is_active',
+                            name: 'is_active',
                             header: 'Активен',
-                            cell: (info) => info.getValue(),
+                            type: "boolean"
                         },
                         {
-                            accessorKey: 'role_id',
+                            name: 'role_id',
                             header: 'Роль',
-                            cell: (info) => info.getValue(),
+                            type: "dictionary" //TODO: dictionary getter by id
                         }
                     ]} />
             }
-        </Stack>
+        </div>
     )
 }