fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: projects create, update, delete

Browse Source
This commit is contained in:
AlexSserb
2025-08-13 15:03:09 +04:00
parent f2bba7e469
commit 90582b329e
27 changed files with 2310 additions and 1219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.module.css Normal file
View File

@ -0,0 +1,15 @@
.project:hover {
background-color: whitesmoke;
@mixin dark {
background-color: var(--mantine-color-dark-6);
}
}
.menu-button {
cursor: pointer;
}
.project:hover:has(.menu-button:hover) {
background: none; /* or revert to normal */
}

66
src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.tsx Normal file
View File

@ -0,0 +1,66 @@
"use client";
import React, { FC } from "react";
import { IconChevronLeft } from "@tabler/icons-react";
import {
Box,
Center,
Divider,
Drawer,
Group,
rem,
Stack,
Text,
} from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";
const ProjectsEditorDrawer: FC = () => {
const { projects, isEditorDrawerOpened, setIsEditorDrawerOpened } =
useProjectsContext();
const onClose = () => setIsEditorDrawerOpened(false);
return (
<Drawer
size={"100%"}
position={"left"}
onClose={onClose}
removeScrollProps={{ allowPinchZoom: true }}
withCloseButton={false}
opened={isEditorDrawerOpened}
trapFocus={false}
styles={{
body: {
height: "100%",
display: "flex",
flexDirection: "column",
gap: rem(10),
},
}}>
<Group justify={"space-between"}>
<Box
onClick={onClose}
p={"xs"}>
<IconChevronLeft />
</Box>
<Center>
<Text>Проекты</Text>
</Center>
<Box p={"lg"} />
</Group>
<Divider />
<Stack gap={0}>
{projects.map((project, index) => (
<ProjectMobile
key={index}
project={project}
/>
))}
</Stack>
<CreateProjectButton />
</Drawer>
);
};
export default ProjectsEditorDrawer;

32
src/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton.tsx Normal file
View File

@ -0,0 +1,32 @@
import { IconPlus } from "@tabler/icons-react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
const CreateProjectButton = () => {
const { onCreateProject } = useProjectsContext();
const onStartCreating = () => {
modals.openContextModal({
modal: "enterNameModal",
title: "Создание проекта",
withCloseButton: true,
innerProps: {
onComplete: onCreateProject,
},
});
};
return (
<Group
ml={"xs"}
onClick={onStartCreating}>
<IconPlus />
<Box mt={5}>
<Text>Создать проект</Text>
</Box>
</Group>
);
};
export default CreateProjectButton;

56
src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Group, Menu, Text } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";
type Props = {
project: ProjectSchema;
startEditing: () => void;
menuIconSize: number;
};
const ProjectMenu: FC<Props> = ({
project,
startEditing,
menuIconSize = 16,
}) => {
const { onDeleteProject } = useProjectsContext();
return (
<Menu>
<Menu.Target>
<Box
className={styles["menu-button"]}
onClick={e => e.stopPropagation()}>
<IconDotsVertical size={menuIconSize} />
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={e => {
e.stopPropagation();
startEditing();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Переименовать</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
onDeleteProject(project);
}}>
<Group wrap={"nowrap"}>
<IconTrash />
<Text>Удалить</Text>
</Group>
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
};
export default ProjectMenu;

55
src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx Normal file
View File

@ -0,0 +1,55 @@
import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ProjectMenu from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";
type Props = {
project: ProjectSchema;
};
const ProjectMobile: FC<Props> = ({ project }) => {
const { onUpdateProject, setSelectedProject, setIsEditorDrawerOpened } =
useProjectsContext();
const startEditing = () => {
modals.openContextModal({
modal: "enterNameModal",
title: "Редактирование проекта",
withCloseButton: true,
innerProps: {
onComplete: name => onUpdateProject(project.id, { name }),
defaultValue: project.name,
},
});
};
const onClick = () => {
setSelectedProject(project);
setIsEditorDrawerOpened(false);
};
return (
<Group
w={"100%"}
pl={"xs"}
py={"xs"}
justify={"space-between"}
wrap={"nowrap"}
className={styles.project}
onClick={onClick}>
<Box>
<Text>{project.name}</Text>
</Box>
<ProjectMenu
project={project}
startEditing={startEditing}
menuIconSize={22}
/>
</Group>
);
};
export default ProjectMobile;

3
src/app/deals/drawers/ProjectsEditorDrawer/index.ts Normal file
View File

@ -0,0 +1,3 @@
import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer";
export default ProjectsEditorDrawer;