fix: projects editor to selected project editor, moved attributes editor

2025-03-02 16:49:28 +04:00
parent 17e6c5f23a
commit e151e4bc5e
44 changed files with 476 additions and 512 deletions
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Attributes/Attributes.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Attributes/Attributes.tsx
@@ -0,0 +1,71 @@
+import { ProjectService } from "../../../../../../client";
+import useAttributesList from "../../../../../../hooks/useAttributesList.tsx";
+import { useEffect, useState } from "react";
+import { useSet } from "@mantine/hooks";
+import useAttributesTableColumns from "./hooks/attributesTableColumns.tsx";
+import { notifications } from "../../../../../../shared/lib/notifications.ts";
+import { rem, Stack } from "@mantine/core";
+import { BaseTable } from "../../../../../../components/BaseTable/BaseTable.tsx";
+import eqSet from "../../utils/eqSet.ts";
+import InlineButton from "../../../../../../components/InlineButton/InlineButton.tsx";
+import { IconCheck } from "@tabler/icons-react";
+import { useProjectsContext } from "../../../../../../contexts/ProjectsContext.tsx";
+
+
+const Attributes = () => {
+    const { selectedProject: project, refetchProjects } = useProjectsContext();
+
+    const { objects: attributes } = useAttributesList();
+    const [defaultSelectedAttributes, setDefaultSelectedAttributes] = useState(new Set<number>(project?.attributes.map(m => m.id)));
+    const selectedAttributes = useSet<number>(project?.attributes.map(a => a.id));
+    const columns = useAttributesTableColumns({ selectedAttributes });
+
+    useEffect(() => {
+        selectedAttributes.clear();
+        project?.attributes.forEach(attribute => {
+            selectedAttributes.add(attribute.id);
+        });
+        setDefaultSelectedAttributes(new Set([...selectedAttributes]));
+    }, [project]);
+
+    const onUpdateAttributesClick = () => {
+        if (!project) return;
+        ProjectService.updateProjectAttributes({
+            requestBody: {
+                projectId: project.id,
+                attributeIds: selectedAttributes.values().toArray(),
+            },
+        })
+            .then(({ ok, message }) => {
+                if (!ok) {
+                    notifications.error({ message });
+                }
+                refetchProjects();
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <Stack gap={rem(10)}>
+            <BaseTable
+                data={attributes}
+                columns={columns}
+
+                restProps={{
+                    enableSorting: false,
+                    enableColumnActions: false,
+                    enableRowVirtualization: true,
+                    mantineTableContainerProps: { style: { maxHeight: "88vh" } },
+                }}
+            />
+            {!eqSet(selectedAttributes, defaultSelectedAttributes) && (
+                <InlineButton onClick={onUpdateAttributesClick}>
+                    <IconCheck />
+                    Сохранить
+                </InlineButton>
+            )}
+        </Stack>
+    );
+};
+
+export default Attributes;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Attributes/hooks/attributesTableColumns.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Attributes/hooks/attributesTableColumns.tsx
@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { AttributeSchema } from "../../../../../../../client";
+import { Box, Center, Checkbox, rem, Text, Tooltip } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import defaultValueToStr from "../../../utils/defaultValueToStr.ts";
+
+
+type Props = {
+    selectedAttributes: Set<number>;
+}
+
+const useAttributesTableColumns = ({ selectedAttributes }: Props) => {
+    return useMemo<MRT_ColumnDef<AttributeSchema>[]>(
+        () => [
+            {
+                header: "Название",
+                accessorKey: "label",
+                size: 25,
+            },
+            {
+                header: "Тип",
+                accessorKey: "type.name",
+                size: 25,
+            },
+            {
+                header: "  ",
+                Cell: ({ row }) => {
+                    const description = row.original.description ? `Описание: ${row.original.description}` : "";
+                    const info = (
+                        <Box>
+                            <Text>Может быть пустым: {row.original.isNullable ? "да" : "нет"}</Text>
+                            <Text>{defaultValueToStr(row.original.defaultValue, row.original.type.type)}</Text>
+                            <Text>Синхронизировано в группе: {row.original.isApplicableToGroup ? "да" : "нет"}</Text>
+                            <Text>{description}</Text>
+                        </Box>
+                    );
+                    return (
+                        <Tooltip label={info} multiline w={rem(300)}>
+                            <IconInfoCircle />
+                        </Tooltip>
+                    );
+                },
+                size: 5,
+            },
+            {
+                header: " ",
+                Cell: ({ row }) => (
+                    <Center>
+                        <Checkbox
+                            checked={selectedAttributes.has(row.original.id)}
+                            onChange={() => {
+                                if (selectedAttributes.has(row.original.id)) {
+                                    selectedAttributes.delete(row.original.id);
+                                } else {
+                                    selectedAttributes.add(row.original.id);
+                                }
+                            }}
+                        />
+                    </Center>
+                ),
+                size: 5,
+            },
+        ],
+        [selectedAttributes],
+    );
+};
+
+export default useAttributesTableColumns;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/General.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/General.tsx
@@ -0,0 +1,114 @@
+import { Button, Fieldset, Flex, rem, Stack, Text, TextInput } from "@mantine/core";
+import { ProjectService } from "../../../../../../client";
+import { useForm } from "@mantine/form";
+import { notifications } from "../../../../../../shared/lib/notifications.ts";
+import { isEqual } from "lodash";
+import { useProjectsContext } from "../../../../../../contexts/ProjectsContext.tsx";
+import { modals } from "@mantine/modals";
+import { useProjectsEditorContext } from "../../../../contexts/ProjectsEditorContext.tsx";
+
+
+type ProjectForm = {
+    name: string;
+}
+
+const General = () => {
+    const { selectedProject: project, refetchProjects } = useProjectsContext();
+    const { closeProjectsEditor } = useProjectsEditorContext();
+    if (!project) return;
+
+    const form = useForm<ProjectForm>({
+        initialValues: project,
+        validate: {
+            name: name => !name && "Название проекта не введено",
+        },
+    });
+
+    const onProjectDelete = () => {
+        ProjectService.deleteProject({
+            projectId: project.id,
+        })
+            .then(({ ok, message }) => {
+                if (!ok) {
+                    notifications.error({ message });
+                    return;
+                }
+                closeProjectsEditor();
+                refetchProjects();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onDeleteProjectClick = () => {
+        modals.openConfirmModal({
+            title: "Удаление проекта",
+            children: (
+                <Text size="sm">
+                    Вы уверены что хотите удалить проект "{project.name}"?
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => onProjectDelete(),
+        });
+    };
+
+    const onSubmit = (values: ProjectForm) => {
+        ProjectService.updateProject({
+            requestBody: {
+                project: {
+                    id: project.id,
+                    name: values.name,
+                },
+            },
+        })
+            .then(({ ok, message }) => {
+                if (!ok) {
+                    notifications.error({ message });
+                    return;
+                }
+                refetchProjects();
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <form onSubmit={form.onSubmit(values => onSubmit(values))}>
+            <Stack>
+                <Fieldset legend={"Общие параметры"}>
+                    <Stack>
+                        <TextInput
+                            label={"Название"}
+                            {...form.getInputProps("name")}
+                        />
+                    </Stack>
+                </Fieldset>
+                <Flex direction={"row-reverse"} gap={rem(10)}>
+                    <Button
+                        variant={"default"}
+                        type={"submit"}
+                        disabled={isEqual(project, form.values)}
+                    >
+                        Сохранить изменения
+                    </Button>
+                    <Button
+                        type={"reset"}
+                        variant={"default"}
+                        disabled={isEqual(project, form.values)}
+                        onClick={() => form.reset()}
+                    >
+                        Отменить изменения
+                    </Button>
+                    <Button
+                        variant={"default"}
+                        onClick={() => onDeleteProjectClick()}
+                    >
+                        Удалить
+                    </Button>
+                </Flex>
+            </Stack>
+        </form>
+    );
+};
+
+export default General;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/hooks/projectsTableColumns.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/hooks/projectsTableColumns.tsx
@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { BaseProjectSchema, ProjectSchema } from "../../../../../../../client";
+import { Radio, TextInput } from "@mantine/core";
+
+
+type Props = {
+    editingProjects: Map<number, ProjectSchema | BaseProjectSchema>;
+    selectedProject: ProjectSchema | null;
+    setSelectedProject: React.Dispatch<React.SetStateAction<ProjectSchema | null>>;
+}
+
+const useProjectsTableColumns = ({ editingProjects, selectedProject, setSelectedProject }: Props) => {
+    return useMemo<MRT_ColumnDef<ProjectSchema>[]>(
+        () => [
+            {
+                header: " ",
+                Cell: ({ row }) => (
+                    <Radio
+                        checked={row.original.id === selectedProject?.id}
+                        onChange={() =>  setSelectedProject(row.original)}
+                    />
+                ),
+                size: 10,
+            },
+            {
+                header: "Название",
+                accessorKey: "name",
+                Cell: ({ row }) => {
+                    if (editingProjects.has(row.original.id)) {
+                        return (
+                            <TextInput
+                                variant={"default"}
+                                value={editingProjects.get(row.original.id)?.name}
+                                onChange={e => {
+                                    const project = editingProjects.get(row.original.id);
+                                    if (!project) return;
+                                    project.name = e.target.value;
+                                    editingProjects.set(row.original.id, project);
+                                }}
+                            />
+                        );
+                    }
+                    return row.original.name;
+                },
+                size: 25,
+            },
+            {
+                header: "Кол-во досок",
+                accessorKey: "boardsCount",
+                size: 10,
+            },
+        ],
+        [selectedProject],
+    );
+};
+
+export default useProjectsTableColumns;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/modals/CreateProjectModal.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/General/modals/CreateProjectModal.tsx
@@ -0,0 +1,59 @@
+import { ContextModalProps } from "@mantine/modals";
+import { Button, Stack, TextInput } from "@mantine/core";
+import { BaseProjectSchema, ProjectService } from "../../../../../../../client";
+import { useForm } from "@mantine/form";
+import { notifications } from "../../../../../../../shared/lib/notifications.ts";
+
+
+type Props = {
+    refetchProjects: () => void;
+};
+
+const CreateProjectModal = ({
+                                context,
+                                id,
+                                innerProps,
+                            }: ContextModalProps<Props>) => {
+    const closeModal = () => context.closeContextModal(id);
+
+    const form = useForm<BaseProjectSchema>({
+        initialValues: { name: "" },
+        validate: {
+            name: name => !name && "Название не заполнено",
+        },
+    });
+
+    const onSubmit = (project: BaseProjectSchema) => {
+        ProjectService.createProject({
+            requestBody: { project },
+        })
+            .then(({ ok, message }) => {
+                if (!ok) {
+                    notifications.error({ message });
+                    return;
+                }
+                innerProps.refetchProjects();
+                closeModal();
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <form onSubmit={form.onSubmit(values => onSubmit(values))}>
+            <Stack gap={"md"}>
+                <TextInput
+                    label={"Название"}
+                    {...form.getInputProps("name")}
+                />
+                <Button
+                    variant={"default"}
+                    type={"submit"}
+                >
+                    Сохранить
+                </Button>
+            </Stack>
+        </form>
+    );
+};
+
+export default CreateProjectModal;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/Modules.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/Modules.tsx
@@ -0,0 +1,70 @@
+import useModulesList from "./hooks/useModulesList.tsx";
+import { useEffect, useState } from "react";
+import { useSet } from "@mantine/hooks";
+import useModulesTableColumns from "./hooks/modulesTableColumns.tsx";
+import { ProjectService } from "../../../../../../client";
+import { notifications } from "../../../../../../shared/lib/notifications.ts";
+import { rem, Stack } from "@mantine/core";
+import { BaseTable } from "../../../../../../components/BaseTable/BaseTable.tsx";
+import eqSet from "../../utils/eqSet.ts";
+import InlineButton from "../../../../../../components/InlineButton/InlineButton.tsx";
+import { IconCheck } from "@tabler/icons-react";
+import { useProjectsContext } from "../../../../../../contexts/ProjectsContext.tsx";
+
+const Modules = () => {
+    const { selectedProject: project, refetchProjects } = useProjectsContext();
+
+    const { objects: modules } = useModulesList();
+    const [defaultSelectedModules, setDefaultSelectedModules] = useState(
+        new Set<number>(project?.modules.map(m => m.id)),
+    );
+    const selectedModules = useSet<number>();
+    const columns = useModulesTableColumns({ selectedModules });
+
+    useEffect(() => {
+        selectedModules.clear();
+        project?.modules.forEach(module => {
+            selectedModules.add(module.id);
+        });
+        setDefaultSelectedModules(new Set([...selectedModules]));
+    }, [project]);
+
+    const updateProjectModules = () => {
+        if (!project) return;
+        ProjectService.updateProjectModules({
+            requestBody: {
+                projectId: project.id,
+                moduleIds: selectedModules.values().toArray(),
+            },
+        })
+            .then(({ ok, message }) => {
+                if (!ok) {
+                    notifications.error({ message });
+                }
+                refetchProjects();
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <Stack gap={rem(10)}>
+            <BaseTable
+                data={modules}
+                columns={columns}
+
+                restProps={{
+                    enableSorting: false,
+                    enableColumnActions: false,
+                }}
+            />
+            {!eqSet(selectedModules, defaultSelectedModules) && (
+                <InlineButton onClick={updateProjectModules}>
+                    <IconCheck />
+                    Сохранить
+                </InlineButton>
+            )}
+        </Stack>
+    );
+};
+
+export default Modules;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/hooks/modulesTableColumns.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/hooks/modulesTableColumns.tsx
@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { ModuleSchema } from "../../../../../../../client";
+import { Center, Checkbox } from "@mantine/core";
+
+
+type Props = {
+    selectedModules: Set<number>;
+}
+
+const useModulesTableColumns = ({ selectedModules }: Props) => {
+    return useMemo<MRT_ColumnDef<ModuleSchema>[]>(
+        () => [
+            {
+                header: "Название",
+                accessorKey: "label",
+                size: 25,
+            },
+            {
+                header: " ",
+                Cell: ({ row }) => (
+                    <Center>
+                        <Checkbox
+                            checked={selectedModules.has(row.original.id)}
+                            onChange={() => {
+                                if (selectedModules.has(row.original.id)) {
+                                    selectedModules.delete(row.original.id);
+                                } else {
+                                    selectedModules.add(row.original.id);
+                                }
+                            }}
+                        />
+                    </Center>
+                ),
+                size: 5,
+            },
+        ],
+        [selectedModules],
+    );
+};
+
+export default useModulesTableColumns;
--- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/hooks/useModulesList.tsx
+++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Modules/hooks/useModulesList.tsx
@@ -0,0 +1,11 @@
+import { ProjectService } from "../../../../../../../client";
+import ObjectList from "../../../../../../../hooks/objectList.tsx";
+
+const useModulesList = () =>
+    ObjectList({
+        queryFn: ProjectService.getAllModules,
+        getObjectsFn: response => response.modules,
+        queryKey: "getAllModules",
+    });
+
+export default useModulesList;