k

src/modals/EmployeeSelectModal/EmployeeSelectModal.tsx

@@ -0,0 +1,67 @@
+import {UserSchema} from "../../client";
+import {ObjectSelectProps} from "../../components/ObjectSelect/ObjectSelect.tsx";
+import {ContextModalProps} from "@mantine/modals";
+import {Button, Flex, rem} from "@mantine/core";
+import {useState} from "react";
+import UserSelect from "../../components/Selects/UserSelect/UserSelect.tsx";
+import {notifications} from "../../shared/lib/notifications.ts";
+
+type SelectProps = Omit<ObjectSelectProps<UserSchema>, 'data' | 'getValueFn' | 'getLabelFn' | 'onChange'>;
+type Props = {
+    onSelect: (user: UserSchema) => void
+    selectProps?: SelectProps;
+}
+
+const EmployeeSelectModal = ({
+                                 context,
+                                 id,
+                                 innerProps,
+                             }: ContextModalProps<Props>) => {
+    const [innerValue, setInnerValue] = useState<UserSchema | undefined>();
+
+    const closeSelf = () => {
+        context.closeContextModal(id);
+    }
+
+    const onSelectClick = () => {
+        if (!innerValue) {
+            notifications.error({message: "Необходимо выбрать сотрудника"})
+            return;
+        }
+        innerProps.onSelect(innerValue);
+        closeSelf();
+    }
+    const onCloseClick = () => {
+        closeSelf();
+    }
+    return (
+        <Flex direction={"column"}
+              gap={rem(10)}
+        >
+            <Flex w={"100%"}>
+                <UserSelect
+                    onChange={setInnerValue}
+                    w={"100%"}
+                    placeholder={"Выберите сотрудника"}
+                    {...innerProps.selectProps}
+
+                />
+            </Flex>
+            <Flex justify={"flex-end"} gap={rem(10)}>
+                <Button
+                    variant={"default"}
+                    onClick={() => onCloseClick()}
+                >
+                    Отменить
+                </Button>
+                <Button
+                    onClick={() => onSelectClick()}
+                >
+                    Выбрать сотрудника
+                </Button>
+            </Flex>
+        </Flex>
+    )
+}
+
+export default EmployeeSelectModal

src/modals/EmployeeTableModal/EmployeeTableModal.tsx

@@ -0,0 +1,31 @@
+import SimpleUsersTable from "../../pages/LeadsPage/components/SimpleUsersTable/SimpleUsersTable.tsx";
+import {ContextModalProps} from "@mantine/modals";
+import {Flex, rem} from "@mantine/core";
+import {UserSchema} from "../../client";
+import {MutableRefObject, useEffect} from "react";
+
+type Props = {
+    items: MutableRefObject<UserSchema[]>
+    onChange: (items: UserSchema[]) => void;
+};
+
+const EmployeeTableModal = ({
+                                innerProps
+                            }: ContextModalProps<Props>) => {
+    useEffect(() => {
+        console.log("Effect from table modal");
+        console.log(innerProps.items);
+    }, [innerProps.items.current])
+    return (
+        <Flex direction={"column"} gap={rem(10)}>
+            <SimpleUsersTable
+                items={innerProps.items.current}
+                onChange={(event) => {
+                    innerProps.onChange(event);
+                }}
+            />
+
+        </Flex>
+    )
+}
+export default EmployeeTableModal;

src/modals/PositionFormModal/PositionFormModal.tsx

@@ -0,0 +1,59 @@
+import BaseFormModal, {CreateEditFormProps} from "../../pages/ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {PositionSchema} from "../../client";
+import {ContextModalProps} from "@mantine/modals";
+import {useForm} from "@mantine/form";
+import {Flex, rem, TextInput} from "@mantine/core";
+import {useEffect} from "react";
+import CyrillicToTranslit from 'cyrillic-to-translit-js';
+
+type Props = CreateEditFormProps<PositionSchema>;
+
+const PositionFormModal = ({
+                               id,
+                               context,
+                               innerProps
+                           }: ContextModalProps<Props>) => {
+    const translit = CyrillicToTranslit({preset: "ru"})
+    const isEditing = 'element' in innerProps;
+    const initialValues: PositionSchema = isEditing ? innerProps.element : {
+        key: "",
+        name: ""
+    }
+    const form = useForm<PositionSchema>({
+        initialValues: initialValues
+    })
+
+    useEffect(() => {
+        if (isEditing) return;
+        form.setFieldValue("key", translit.transform(form.values.name).toLowerCase());
+    }, [form.values.name]);
+
+    return (
+        <BaseFormModal
+            closeOnSubmit
+            form={form}
+            onClose={() => context.closeContextModal(id)}
+            {...innerProps}
+        >
+            <BaseFormModal.Body>
+                <Flex
+                    direction={"column"}
+                    gap={rem(10)}
+                >
+                    <TextInput
+                        label={"Название"}
+                        placeholder={"Введите название должности"}
+                        {...form.getInputProps("name")}
+                    />
+                    <TextInput
+                        label={"Ключ"}
+                        placeholder={"Введите ключ должности"}
+                        {...form.getInputProps("key")}
+                    />
+                </Flex>
+            </BaseFormModal.Body>
+        </BaseFormModal>
+    )
+}
+
+export default PositionFormModal;

src/modals/modals.ts

@@ -11,6 +11,9 @@ import BarcodeTemplateFormModal
     from "../pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx";
 import ProductServiceFormModal from "../pages/LeadsPage/modals/ProductServiceFormModal.tsx";
 import UserFormModal from "../pages/AdminPage/modals/UserFormModal/UserFormModal.tsx";
+import EmployeeSelectModal from "./EmployeeSelectModal/EmployeeSelectModal.tsx";
+import EmployeeTableModal from "./EmployeeTableModal/EmployeeTableModal.tsx";
+import PositionFormModal from "./PositionFormModal/PositionFormModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
@@ -24,5 +27,8 @@ export const modals = {
     printBarcode: PrintBarcodeModal,
     addBarcode: AddBarcodeModal,
     barcodeTemplateFormModal: BarcodeTemplateFormModal,
-    userFormModal: UserFormModal
+    userFormModal: UserFormModal,
+    employeeSelect: EmployeeSelectModal,
+    employeeTable: EmployeeTableModal,
+    positionForm: PositionFormModal
 }