feat: modules creation

src/app/modules/components/ModulesHeader.tsx

@@ -2,10 +2,14 @@
 
 import { FC } from "react";
 import { Group } from "@mantine/core";
+import { useModulesContext } from "@/app/modules/contexts/ModulesContext";
 import InlineButton from "@/components/ui/InlineButton/InlineButton";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
 const ModulesHeader: FC = () => {
+    const {
+        modulesActions: { onCreate },
+    } = useModulesContext();
     const isMobile = useIsMobile();
 
     return (
@@ -14,7 +18,9 @@ const ModulesHeader: FC = () => {
             justify={"space-between"}
             mt={isMobile ? "xs" : ""}
             mx={isMobile ? "xs" : ""}>
-            <InlineButton w={isMobile ? "100%" : ""}>
+            <InlineButton
+                onClick={onCreate}
+                w={isMobile ? "100%" : ""}>
                 Создать модуль
             </InlineButton>
         </Group>

src/app/modules/contexts/ModulesContext.tsx

@@ -3,18 +3,22 @@
 import useModulesWithAttrsList from "@/app/modules/hooks/useModulesWithAttrsList";
 import { ModuleWithAttributesSchema } from "@/lib/client";
 import makeContext from "@/lib/contextFactory/contextFactory";
+import useModulesActions, { ModulesActions } from "@/app/modules/hooks/useModulesActions";
 
 type ModulesContextState = {
     modules: ModuleWithAttributesSchema[];
     refetchModules: () => void;
+    modulesActions: ModulesActions;
 };
 
 const useModulesContextState = (): ModulesContextState => {
     const { modules, refetch } = useModulesWithAttrsList();
+    const modulesActions = useModulesActions({ refetchModules: refetch });
 
     return {
         modules,
         refetchModules: refetch,
+        modulesActions,
     };
 };
 

src/app/modules/hooks/useModulesActions.tsx

@@ -5,10 +5,14 @@ import { AxiosError } from "axios";
 import { Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { HttpValidationError, ModuleSchemaOutput } from "@/lib/client";
-import { deleteModuleMutation } from "@/lib/client/@tanstack/react-query.gen";
+import {
+    createModuleMutation,
+    deleteModuleMutation,
+} from "@/lib/client/@tanstack/react-query.gen";
 import { notifications } from "@/lib/notifications";
 
 export type ModulesActions = {
+    onCreate: () => void;
     onUpdate: (module: ModuleSchemaOutput) => void;
     onDelete: (module: ModuleSchemaOutput) => void;
 };
@@ -18,10 +22,6 @@ type Props = {
 };
 
 const useModulesActions = ({ refetchModules }: Props): ModulesActions => {
-    const onUpdate = (module: ModuleSchemaOutput) => {
-        redirect(`/module-editor/${module.id}`);
-    };
-
     const onError = (error: AxiosError<HttpValidationError>, _: any) => {
         console.error(error);
         notifications.error({
@@ -29,6 +29,34 @@ const useModulesActions = ({ refetchModules }: Props): ModulesActions => {
         });
     };
 
+    const createMutation = useMutation({
+        ...createModuleMutation(),
+        onError,
+    });
+
+    const onCreate = () => {
+        modals.openContextModal({
+            modal: "moduleCreatorModal",
+            title: "Создание модуля",
+            innerProps: {
+                onCreate: (data, onSuccess) =>
+                    createMutation.mutate(
+                        { body: { entity: data } },
+                        {
+                            onSuccess: () => {
+                                refetchModules();
+                                onSuccess && onSuccess();
+                            },
+                        }
+                    ),
+            },
+        });
+    };
+
+    const onUpdate = (module: ModuleSchemaOutput) => {
+        redirect(`/module-editor/${module.id}`);
+    };
+
     const deleteMutation = useMutation({
         ...deleteModuleMutation(),
         onError,
@@ -37,7 +65,7 @@ const useModulesActions = ({ refetchModules }: Props): ModulesActions => {
 
     const onDelete = (module: ModuleSchemaOutput) => {
         modals.openConfirmModal({
-            title: "Удаление услуги из сделки",
+            title: "Удаление модуля",
             children: (
                 <Text>
                     Вы уверены, что хотите удалить модуль "{module.label}"?
@@ -49,6 +77,7 @@ const useModulesActions = ({ refetchModules }: Props): ModulesActions => {
     };
 
     return {
+        onCreate,
         onUpdate,
         onDelete,
     };

src/app/modules/hooks/useModulesTableColumns.tsx

@@ -8,7 +8,6 @@ import {
 } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
 import { Box, Group, Text, Tooltip } from "@mantine/core";
-import useModulesActions from "@/app/modules/hooks/useModulesTableActions";
 import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { ModuleWithAttributesSchema } from "@/lib/client";
@@ -24,8 +23,10 @@ const useModulesTableColumns = ({
     setExpandedModuleIds,
 }: Props) => {
     const isMobile = useIsMobile();
-    const { modules, refetchModules } = useModulesContext();
-    const { onUpdate, onDelete } = useModulesActions({ refetchModules });
+    const {
+        modules,
+        modulesActions: { onUpdate, onDelete },
+    } = useModulesContext();
 
     const onExpandAllClick = () => {
         if (expandedModuleIds.length !== modules.length) {

src/app/modules/modals/ModuleCreatorModal.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { ContextModalProps } from "@mantine/modals";
+import { CreateModuleSchema } from "@/lib/client";
+
+type Props = {
+    onCreate: (data: CreateModuleSchema, onSuccess?: () => void) => void;
+};
+
+const ModuleCreatorModal = ({
+    context,
+    id,
+    innerProps,
+}: ContextModalProps<Props>) => {
+    const form = useForm<CreateModuleSchema>({
+        initialValues: {
+            label: "",
+            description: "",
+        },
+        validate: {
+            label: label => !label?.trim() && "Название не заполнено",
+        },
+    });
+
+    const close = () => context.closeContextModal(id);
+
+    return (
+        <form
+            onSubmit={form.onSubmit(values =>
+                innerProps.onCreate(values, close)
+            )}>
+            <Stack gap={"md"}>
+                <TextInput
+                    withAsterisk
+                    label={"Название"}
+                    {...form.getInputProps("label")}
+                />
+                <Textarea
+                    label={"Описание"}
+                    {...form.getInputProps("description")}
+                />
+                <Button
+                    type={"submit"}
+                    variant={"default"}>
+                    Сохранить
+                </Button>
+            </Stack>
+        </form>
+    );
+};
+
+export default ModuleCreatorModal;

src/app/products/components/shared/ProductsTable/columns.tsx

@@ -71,7 +71,7 @@ export const useProductsTableColumns = ({
                                     }
                                     showLabel={"Показать все"}
                                     hideLabel={"Скрыть"}>
-                                    {product.barcodes.map(barcode => (
+                                    {product.barcodes?.map(barcode => (
                                         <List.Item key={barcode}>
                                             {barcode}
                                         </List.Item>