diff --git a/src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.tsx b/src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.tsx deleted file mode 100644 index 8a18d4b..0000000 --- a/src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { IconPlus } from "@tabler/icons-react"; -import { ActionIcon, Box } from "@mantine/core"; -import { modals } from "@mantine/modals"; -import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; -import style from "./CreateProjectButton.module.css"; - -const CreateProjectButton = () => { - const { projectsCrud } = useProjectsContext(); - - const onCreateClick = () => { - modals.openContextModal({ - modal: "enterNameModal", - title: "Создание проекта", - withCloseButton: true, - innerProps: { - onComplete: (name: string) => { - projectsCrud.onCreate(name); - }, - }, - }); - }; - - return ( - - - - - - ); -}; - -export default CreateProjectButton; diff --git a/src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.module.css b/src/app/deals/components/desktop/ProjectAction/ProjectAction.module.css similarity index 100% rename from src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.module.css rename to src/app/deals/components/desktop/ProjectAction/ProjectAction.module.css diff --git a/src/app/deals/components/desktop/ProjectAction/ProjectAction.tsx b/src/app/deals/components/desktop/ProjectAction/ProjectAction.tsx new file mode 100644 index 0000000..4703c89 --- /dev/null +++ b/src/app/deals/components/desktop/ProjectAction/ProjectAction.tsx @@ -0,0 +1,26 @@ +import { FC, PropsWithChildren } from "react"; +import { ActionIcon, Box } from "@mantine/core"; +import style from "./ProjectAction.module.css"; + +type Props = { + onClick: () => void; +}; + +const ProjectAction: FC> = ({ + onClick, + children, +}) => { + return ( + + + {children} + + + ); +}; + +export default ProjectAction; diff --git a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx index d2f2707..10ef434 100644 --- a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx +++ b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx @@ -1,19 +1,43 @@ "use client"; +import { IconEdit, IconPlus } from "@tabler/icons-react"; import { Flex, Group } from "@mantine/core"; -import CreateProjectButton from "@/app/deals/components/desktop/CreateProjectButton/CreateProjectButton"; +import { modals } from "@mantine/modals"; +import ProjectAction from "@/app/deals/components/desktop/ProjectAction/ProjectAction"; import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector"; import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect"; +import { useDrawersContext } from "@/drawers/DrawersContext"; import useIsMobile from "@/hooks/utils/useIsMobile"; const TopToolPanel = () => { - const { projects, setSelectedProjectId, selectedProject } = + const { projects, setSelectedProjectId, selectedProject, projectsCrud } = useProjectsContext(); + const { openDrawer } = useDrawersContext(); const isMobile = useIsMobile(); if (isMobile) return; + const onCreateClick = () => { + modals.openContextModal({ + modal: "enterNameModal", + title: "Создание проекта", + withCloseButton: true, + innerProps: { + onComplete: projectsCrud.onCreate, + }, + }); + }; + + const onEditClick = () => { + if (!selectedProject) return; + + openDrawer({ + key: "selectedProjectEditorDrawer", + props: { project: selectedProject, projectsCrud }, + }); + }; + return ( @@ -21,7 +45,12 @@ const TopToolPanel = () => { wrap={"nowrap"} align={"center"} gap={"sm"}> - + + + + + + void; }; -const GeneralTab: FC = ({ deal, dealsCrud, onClose }) => { - const [initialValues, setInitialValues] = useState(deal); - const form = useForm({ +const GeneralTab: FC = ({ project, projectsCrud, onClose }) => { + const [initialValues, setInitialValues] = useState(project); + const form = useForm({ initialValues, validate: { name: value => !value && "Введите название", }, }); - const onSubmit = (values: DealSchema) => { - dealsCrud.onUpdate(deal.id, values); + const onSubmit = (values: ProjectSchema) => { + projectsCrud.onUpdate(project.id, values); setInitialValues(values); }; const onDelete = () => { - dealsCrud.onDelete(deal, onClose); + projectsCrud.onDelete(project, onClose); }; return ( @@ -37,7 +37,6 @@ const GeneralTab: FC = ({ deal, dealsCrud, onClose }) => { label={"Название"} {...form.getInputProps("name")} /> - Создано: {utcDateTimeToLocalString(deal.createdAt)} diff --git a/src/app/deals/drawers/SelectedProjectEditorDrawer/DealEditorDrawer.module.css b/src/app/deals/drawers/SelectedProjectEditorDrawer/DealEditorDrawer.module.css new file mode 100644 index 0000000..9e60d88 --- /dev/null +++ b/src/app/deals/drawers/SelectedProjectEditorDrawer/DealEditorDrawer.module.css @@ -0,0 +1,4 @@ + +.tab { + border-bottom-width: 3px; +} diff --git a/src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.tsx b/src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.tsx new file mode 100644 index 0000000..d62c369 --- /dev/null +++ b/src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.tsx @@ -0,0 +1,48 @@ +"use client"; + +import React, { FC } from "react"; +import { Drawer } from "@mantine/core"; +import ProjectEditorBody from "@/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody"; +import { DrawerProps } from "@/drawers/types"; +import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud"; +import useIsMobile from "@/hooks/utils/useIsMobile"; +import { ProjectSchema } from "@/lib/client"; + +type Props = { + project: ProjectSchema; + projectsCrud: ProjectsCrud; +}; + +const SelectedProjectEditorDrawer: FC> = ({ + opened, + onClose, + props, +}) => { + const isMobile = useIsMobile(); + + return ( + + + + ); +}; + +export default SelectedProjectEditorDrawer; diff --git a/src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx b/src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx new file mode 100644 index 0000000..bee81fd --- /dev/null +++ b/src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx @@ -0,0 +1,71 @@ +import { FC, useState } from "react"; +import { isEqual } from "lodash"; +import { Button, Group, Stack, Text, TextInput } from "@mantine/core"; +import { useForm } from "@mantine/form"; +import { DealsCrud } from "@/hooks/cruds/useDealsCrud"; +import { DealSchema } from "@/lib/client"; +import { utcDateTimeToLocalString } from "@/utils/datetime"; + +type Props = { + dealsCrud: DealsCrud; + deal: DealSchema; + onClose: () => void; +}; + +const GeneralTab: FC = ({ deal, dealsCrud, onClose }) => { + const [initialValues, setInitialValues] = useState(deal); + const form = useForm({ + initialValues, + validate: { + name: value => !value && "Введите название", + }, + }); + + const onSubmit = (values: DealSchema) => { + dealsCrud.onUpdate(deal.id, values); + setInitialValues(values); + }; + + const onDelete = () => { + dealsCrud.onDelete(deal, onClose); + }; + + return ( +
+ + + Создано: {utcDateTimeToLocalString(deal.createdAt)} + + + + + + + + +
+ ); +}; + +export default GeneralTab; diff --git a/src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx b/src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx new file mode 100644 index 0000000..f2301f2 --- /dev/null +++ b/src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx @@ -0,0 +1,38 @@ +import { FC } from "react"; +import { IconEdit } from "@tabler/icons-react"; +import { Tabs } from "@mantine/core"; +import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/components/GeneralTab"; +import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud"; +import { ProjectSchema } from "@/lib/client"; +import styles from "../DealEditorDrawer.module.css"; + +type Props = { + projectsCrud: ProjectsCrud; + project: ProjectSchema; + onClose: () => void; +}; + +const ProjectEditorBody: FC = ({ projectsCrud, project, onClose }) => { + return ( + + + }> + Общая информация + + + + + + + ); +}; + +export default ProjectEditorBody; diff --git a/src/app/deals/drawers/SelectedProjectEditorDrawer/index.ts b/src/app/deals/drawers/SelectedProjectEditorDrawer/index.ts new file mode 100644 index 0000000..b451989 --- /dev/null +++ b/src/app/deals/drawers/SelectedProjectEditorDrawer/index.ts @@ -0,0 +1,3 @@ +import SelectedProjectEditorDrawer from "@/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer"; + +export default SelectedProjectEditorDrawer; diff --git a/src/drawers/drawersRegistry.tsx b/src/drawers/drawersRegistry.tsx index 206f647..f1c9c40 100644 --- a/src/drawers/drawersRegistry.tsx +++ b/src/drawers/drawersRegistry.tsx @@ -2,12 +2,14 @@ import BoardStatusesEditorDrawer from "@/app/deals/drawers/BoardStatusesEditorDr import DealEditorDrawer from "@/app/deals/drawers/DealEditorDrawer/DealEditorDrawer"; import ProjectBoardsEditorDrawer from "@/app/deals/drawers/ProjectBoardsEditorDrawer"; import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer"; +import SelectedProjectEditorDrawer from "@/app/deals/drawers/SelectedProjectEditorDrawer"; const drawerRegistry = { projectsEditorDrawer: ProjectsEditorDrawer, boardStatusesEditorDrawer: BoardStatusesEditorDrawer, projectBoardsEditorDrawer: ProjectBoardsEditorDrawer, dealEditorDrawer: DealEditorDrawer, + selectedProjectEditorDrawer: SelectedProjectEditorDrawer, }; export default drawerRegistry; diff --git a/src/hooks/cruds/useProjectsCrud.tsx b/src/hooks/cruds/useProjectsCrud.tsx index cc9140e..0064ec6 100644 --- a/src/hooks/cruds/useProjectsCrud.tsx +++ b/src/hooks/cruds/useProjectsCrud.tsx @@ -17,7 +17,7 @@ type Props = { export type ProjectsCrud = { onCreate: (name: string) => void; onUpdate: (projectId: number, project: UpdateProjectSchema) => void; - onDelete: (project: ProjectSchema) => void; + onDelete: (project: ProjectSchema, onSuccess?: () => void) => void; }; export const useProjectsCrud = ({ queryKey }: Props): ProjectsCrud => {