feat: create user

src/pages/AdminPage/components/UsersTable/UsersTable.tsx

@@ -2,7 +2,7 @@ import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
 import {UserSchema} from "../../../../client";
 import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
 import {FC} from "react";
-import {ActionIcon, Flex, Text, Tooltip} from "@mantine/core";
+import {ActionIcon, Button, Flex, rem, Text, Tooltip} from "@mantine/core";
 import {useUsersTableColumns} from "./columns.tsx";
 import {IconEdit, IconTrash} from "@tabler/icons-react";
 import {modals} from "@mantine/modals";
@@ -10,7 +10,7 @@ import {MRT_TableOptions} from "mantine-react-table";
 
 type Props = CRUDTableProps<UserSchema>;
 
-const UsersTable: FC<Props> = ({items, onChange, onDelete}) => {
+const UsersTable: FC<Props> = ({items, onChange, onDelete, onCreate}) => {
     const columns = useUsersTableColumns();
     const onEditClick = (user: UserSchema) => {
         if (!onChange) return;
@@ -40,19 +40,39 @@ const UsersTable: FC<Props> = ({items, onChange, onDelete}) => {
             onConfirm: () => onDelete(user)
         });
     }
-
+    const onCreateClick = () => {
+        if (!onCreate) return;
+        modals.openContextModal({
+            modal: "userFormModal",
+            title: 'Редактирование пользователя',
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onCreate
+            },
+            size: "md"
+        })
+    }
     return (
         <BaseTable
             data={items}
             columns={columns}
             restProps={{
-                enableTopToolbar: false,
                 enableSorting: false,
                 enableColumnActions: false,
+                enableTopToolbar: true,
+                renderTopToolbar: (
+                    <Flex p={rem(10)}>
+                        <Button
+                            variant={"default"}
+                            onClick={() => onCreateClick()}
+                        >
+                            Создать пользователя
+                        </Button>
+                    </Flex>
+                ),
                 enableRowActions: true,
                 renderRowActions: ({row}) => (
                     <Flex gap="md">
-
                         <Tooltip
                             onClick={() => {
                                 onEditClick(row.original)

src/pages/AdminPage/modals/UserFormModal/UserFormModal.tsx

@@ -1,5 +1,5 @@
 import {ContextModalProps} from "@mantine/modals";
-import BaseFormModal, {EditProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
 import {UserSchema} from "../../../../client";
 import {useForm} from "@mantine/form";
 import {Checkbox, Fieldset, Input, Stack, Textarea, TextInput} from "@mantine/core";
@@ -11,16 +11,23 @@ import {IMaskInput} from "react-imask";
 import phone from "phone";
 import PayRateSelect from "../../../../components/Selects/PayRateSelect/PayRateSelect.tsx";
 
-type Props = EditProps<UserSchema>;
+type Props = CreateEditFormProps<UserSchema>;
 const UserFormModal = ({context, id, innerProps}: ContextModalProps<Props>) => {
-    const initialValues = innerProps.element;
+    const isEditing = 'element' in innerProps;
+    const initialValues = isEditing ? innerProps.element : {
+        isAdmin: false,
+        isBlocked: false,
+        isDeleted: false,
+        comment: "",
+        roleKey: UserRoleEnum.USER
+    };
 
-    const form = useForm<UserSchema>({
+    const form = useForm<Partial<UserSchema>>({
         initialValues: initialValues,
         validate: {
-            firstName: value => !value.trim() && "Укажите имя пользователя",
-            secondName: value => !value.trim() && "Укажите фамилию",
-            position: (value, values) => ((values.role.key === UserRoleEnum.EMPLOYEE) && (!value)) && 'Необходимо указать должность сотрудника',
+            firstName: value => !value?.trim() && "Укажите имя пользователя",
+            secondName: value => !value?.trim() && "Укажите фамилию",
+            position: (value, values) => ((values.role?.key === UserRoleEnum.EMPLOYEE) && (!value)) && 'Необходимо указать должность сотрудника',
             phoneNumber: value => !phone(value || '', {
                 country: "",
                 strictDetection: false,
@@ -71,7 +78,7 @@ const UserFormModal = ({context, id, innerProps}: ContextModalProps<Props>) => {
                                 placeholder={"Выберите роль пользователя"}
                                 {...form.getInputProps('role')}
                             />
-                            {form.values.role.key === UserRoleEnum.EMPLOYEE &&
+                            {form.values.role?.key === UserRoleEnum.EMPLOYEE &&
                                 <>
                                     <PositionSelect
                                         label={"Должность сотрудника"}

src/pages/AdminPage/tabs/Users/UsersTab.tsx

@@ -24,11 +24,26 @@ const UsersTab = () => {
     const onDelete = async (user: UserSchema) => {
         onChange({...user, isDeleted: true});
     }
+    const onCreate = (user: UserSchema) => {
+        UserService.createUser({
+            requestBody: {
+                data: {
+                    ...user,
+                    telegramId: -1
+                }
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await refetch();
+        })
+    }
     return (
         <UsersTable
             items={users}
             onChange={onChange}
             onDelete={onDelete}
+            onCreate={onCreate}
         />
     )
 }