diff --git a/src/app/modules/components/ModulesHeader.tsx b/src/app/modules/components/ModulesHeader.tsx index d47823a..cda2407 100644 --- a/src/app/modules/components/ModulesHeader.tsx +++ b/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" : ""}> - + Создать модуль diff --git a/src/app/modules/contexts/ModulesContext.tsx b/src/app/modules/contexts/ModulesContext.tsx index 1d48b4e..f558a9a 100644 --- a/src/app/modules/contexts/ModulesContext.tsx +++ b/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, }; }; diff --git a/src/app/modules/hooks/useModulesTableActions.tsx b/src/app/modules/hooks/useModulesActions.tsx similarity index 63% rename from src/app/modules/hooks/useModulesTableActions.tsx rename to src/app/modules/hooks/useModulesActions.tsx index cdbbeff..115b8eb 100644 --- a/src/app/modules/hooks/useModulesTableActions.tsx +++ b/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, _: 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: ( Вы уверены, что хотите удалить модуль "{module.label}"? @@ -49,6 +77,7 @@ const useModulesActions = ({ refetchModules }: Props): ModulesActions => { }; return { + onCreate, onUpdate, onDelete, }; diff --git a/src/app/modules/hooks/useModulesTableColumns.tsx b/src/app/modules/hooks/useModulesTableColumns.tsx index 6ce90eb..0e79891 100644 --- a/src/app/modules/hooks/useModulesTableColumns.tsx +++ b/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) { diff --git a/src/app/modules/modals/ModuleCreatorModal.tsx b/src/app/modules/modals/ModuleCreatorModal.tsx new file mode 100644 index 0000000..1e59200 --- /dev/null +++ b/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) => { + const form = useForm({ + initialValues: { + label: "", + description: "", + }, + validate: { + label: label => !label?.trim() && "Название не заполнено", + }, + }); + + const close = () => context.closeContextModal(id); + + return ( +
+ innerProps.onCreate(values, close) + )}> + + +