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

This commit is contained in:
2025-03-02 16:49:28 +04:00
parent 17e6c5f23a
commit e151e4bc5e
44 changed files with 476 additions and 512 deletions

View File

@@ -0,0 +1,7 @@
.container-wrapper {
flex: 1;
height: 95vh;
border: dashed var(--item-border-size) var(--mantine-color-default-border);
border-radius: var(--item-border-radius);
padding: rem(10);
}

View File

@@ -0,0 +1,80 @@
import { Box, Drawer, rem, Tabs } from "@mantine/core";
import { IconHexagons, IconSettings, IconSubtask } from "@tabler/icons-react";
import { ReactNode } from "react";
import { motion } from "framer-motion";
import { useProjectsEditorContext } from "../../contexts/ProjectsEditorContext.tsx";
import General from "./tabs/General/General.tsx";
import Attributes from "./tabs/Attributes/Attributes.tsx";
import Modules from "./tabs/Modules/Modules.tsx";
const ProjectEditDrawer = () => {
const { closeProjectsEditor, openedProjectsEditor } = useProjectsEditorContext();
const getTabPanel = (value: string, component: ReactNode) => {
return (
<Tabs.Panel value={value}>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}>
<Box
h={"100%"}
w={"100%"}
p={rem(10)}>
{component}
</Box>
</motion.div>
</Tabs.Panel>
);
};
return (
<Drawer
size={"calc(100vw - 150px)"}
position={"right"}
onClose={closeProjectsEditor}
removeScrollProps={{ allowPinchZoom: true }}
withCloseButton={false}
opened={openedProjectsEditor}
styles={{
body: {
height: "100%",
display: "flex",
flexDirection: "column",
gap: rem(10),
},
}}>
<Tabs
defaultValue={"general"}
flex={1}
variant={"outline"}
orientation={"vertical"}
keepMounted={false}>
<Tabs.List>
<Tabs.Tab
value={"general"}
leftSection={<IconSettings />}>
Общее
</Tabs.Tab>
<Tabs.Tab
value={"modules"}
leftSection={<IconHexagons />}>
Модули
</Tabs.Tab>
<Tabs.Tab
value={"attributes"}
leftSection={<IconSubtask />}>
Атрибуты
</Tabs.Tab>
</Tabs.List>
{getTabPanel("general", <General/>)}
{getTabPanel("attributes", <Attributes/>)}
{getTabPanel("modules", <Modules />)}
</Tabs>
</Drawer>
);
};
export default ProjectEditDrawer;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -0,0 +1,23 @@
import { formatDate, formatDateTime } from "../../../../../types/utils.ts";
const defaultValueToStr = (defaultValue: string | null | number | boolean, type: string): string => {
if (defaultValue === null) {
return "Значения по умолчанию нет";
}
let strValue;
const prefix = "Значение по умолчанию: ";
if (type === "bool") {
strValue = defaultValue ? "true" : "false";
} else if (type === "datetime") {
strValue = formatDateTime(defaultValue as string);
} else if (type === "date") {
strValue = formatDate(defaultValue as string);
} else {
strValue = String(defaultValue);
}
return prefix + strValue;
};
export default defaultValueToStr;

View File

@@ -0,0 +1,6 @@
const eqSet = (firstSet: Set<number>, secondSet: Set<number>) =>
firstSet.size === secondSet.size &&
[...firstSet].every((x) => secondSet.has(x));
export default eqSet;

View File

@@ -0,0 +1,25 @@
const translitMap: Record<string, string> = {
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo',
'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm',
'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
'ф': 'f', 'х': 'kh', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'shch', 'ъ': '',
'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya',
};
const transliterate = (text: string): string => {
return text.toLowerCase().split('').map(char => translitMap[char] || char).join('');
};
const toSnakeCase = (text: string): string => {
return text
.toLowerCase()
.replace(/\s+/g, '_') // Replace spaces with underscores
.replace(/[^a-z_0-9]/g, '') // Remove non-English letters and special chars
.replace(/__+/g, '_') // Replace multiple underscores with single one
.replace(/^_+|_+$/g, ''); // Trim leading/trailing underscores
};
export const convertRussianToSnakeCase = (input: string): string => {
const transliterated = transliterate(input);
return toSnakeCase(transliterated);
};