diff --git a/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentForm.tsx b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentForm.tsx new file mode 100644 index 0000000..6fb853b --- /dev/null +++ b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentForm.tsx @@ -0,0 +1,66 @@ +import { DepartmentCrud } from "../hooks/useDepartmentCrud.tsx"; +import { DepartmentSchema } from "../../../../../client"; +import { DepartmentModalForm } from "../types/DepartmentModalForm.tsx"; +import { useForm } from "@mantine/form"; +import { Button, Flex, rem, TextInput } from "@mantine/core"; + + +type Props = { + departmentsCrud: DepartmentCrud; + department?: DepartmentSchema; + closeModal: () => void; +} + +const DepartmentForm = ({ + departmentsCrud, + department, + closeModal, + }: Props) => { + const initialValues: Partial = { + name: department?.name ?? "", + }; + const form = useForm>({ + initialValues, + validate: { + name: name => !name && "Необходимо указать название", + }, + }); + + const isChanged = (): boolean => { + return initialValues.name !== form.values.name; + }; + + const onSubmit = () => { + if (department) { + if (isChanged()) { + departmentsCrud.onChange({ name: form.values.name ?? "", id: department?.id }); + } + } else { + departmentsCrud.onCreate({ name: form.values.name ?? "" }); + } + closeModal(); + }; + + return ( +
onSubmit())}> + + + + + +
+ ); +}; + +export default DepartmentForm; diff --git a/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSectionForm.tsx b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSectionForm.tsx new file mode 100644 index 0000000..8d2ecbe --- /dev/null +++ b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSectionForm.tsx @@ -0,0 +1,90 @@ +import { DepartmentSchema, DepartmentSectionSchema } from "../../../../../client"; +import { DepartmentSectionCrud } from "../hooks/useDepartmentSectionCrud.tsx"; +import { DepartmentSectionModalForm } from "../types/DepartmentModalForm.tsx"; +import { useForm } from "@mantine/form"; +import { Button, Flex, rem, TextInput } from "@mantine/core"; +import DepartmentSelect from "./DepartmentSelect.tsx"; + +type Props = { + departmentSectionsCrud: DepartmentSectionCrud; + departmentSection?: DepartmentSectionSchema; + allDepartments: DepartmentSchema[]; + closeModal: () => void; +} + +const DepartmentSectionForm = ({ + departmentSectionsCrud, + departmentSection, + allDepartments, + closeModal, + }: Props) => { + const initialValues: DepartmentSectionModalForm = { + name: departmentSection?.name ?? "", + departmentId: departmentSection?.departmentId ?? null, + parentDepartmentSectionId: departmentSection?.parentDepartmentSectionId ?? null, + }; + + const form = useForm({ + initialValues, + validate: { + name: name => !name && "Необходимо указать название", + }, + }); + + const isChanged = (): boolean => { + return ( + initialValues.name !== form.values.name || + initialValues.departmentId !== form.values.departmentId || + initialValues.parentDepartmentSectionId !== form.values.parentDepartmentSectionId + ); + }; + + const onSubmit = () => { + const sectionData = { ...departmentSection, ...form.values }; + const sectionName = form.values.name; + if (!sectionName) return; + if (departmentSection?.id) { + if (isChanged()) { + departmentSectionsCrud.onChange({ + id: departmentSection.id, + name: form.values.name ?? "", + departmentId: form.values.departmentId, + parentDepartmentSectionId: form.values.parentDepartmentSectionId, + }); + } + } else { + console.log(sectionData); + departmentSectionsCrud.onCreate(sectionData); + } + closeModal(); + }; + + return ( +
onSubmit())}> + + + + + + + +
+ ); +}; + +export default DepartmentSectionForm; diff --git a/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx new file mode 100644 index 0000000..81f2927 --- /dev/null +++ b/src/pages/AdminPage/tabs/OrganizationalStructureTab/components/DepartmentSelect.tsx @@ -0,0 +1,80 @@ +import { DepartmentSchema, DepartmentSectionSchema } from "../../../../../client"; +import { Select } from "@mantine/core"; +import { DepartmentSectionModalForm } from "../types/DepartmentModalForm.tsx"; +import { UseFormReturnType } from "@mantine/form"; + + +type Props = { + allDepartments: DepartmentSchema[]; + form: UseFormReturnType; + parentDepartmentSectionId?: number; +} + +const DepartmentSelect = ({ + allDepartments, + form, + parentDepartmentSectionId, + }: Props) => { + const getDepartmentValue = () => { + if (form.values.departmentId) { + return "D" + form.values.departmentId; + } + return "O" + form.values.parentDepartmentSectionId; + }; + + const setDepartmentValue = (value: string | null) => { + if (!value) { + form.setFieldValue("departmentId", null); + form.setFieldValue("parentDepartmentSectionId", null); + return; + } + const isDepartmentSection = value && value[0] === "O"; + const id = Number.parseInt(value.substring(1)); + if (isDepartmentSection) { + form.setFieldValue("departmentId", null); + form.setFieldValue("parentDepartmentSectionId", id); + } else { + form.setFieldValue("departmentId", id); + form.setFieldValue("parentDepartmentSectionId", null); + } + }; + + const getDepartmentSections = (section: DepartmentSectionSchema | DepartmentSchema): DepartmentSectionSchema[] => { + const sections: DepartmentSectionSchema[] = []; + + section.sections?.forEach((section) => { + sections.push(section); + sections.push(...getDepartmentSections(section)); + }); + return sections; + }; + + let departmentSections: DepartmentSectionSchema[] = []; + allDepartments.forEach(department => { + departmentSections.push(...getDepartmentSections(department)); + }); + + if (parentDepartmentSectionId) { + departmentSections = departmentSections.filter(section => section.id !== parentDepartmentSectionId); + } + + return ( +