diff --git a/src/app/deals/components/desktop/DealsTable/DealsTable.tsx b/src/app/deals/components/desktop/DealsTable/DealsTable.tsx index 4810fe0..49c1318 100644 --- a/src/app/deals/components/desktop/DealsTable/DealsTable.tsx +++ b/src/app/deals/components/desktop/DealsTable/DealsTable.tsx @@ -3,7 +3,6 @@ import { IconMoodSad } from "@tabler/icons-react"; import { Group, Pagination, Stack, Text } from "@mantine/core"; import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns"; import { useDealsContext } from "@/app/deals/contexts/DealsContext"; -import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import BaseTable from "@/components/ui/BaseTable/BaseTable"; import { useDrawersContext } from "@/drawers/DrawersContext"; import { DealSchema } from "@/lib/client"; @@ -11,18 +10,16 @@ import { DealSchema } from "@/lib/client"; const DealsTable: FC = () => { const { deals, paginationInfo, page, setPage, sortingForm, dealsCrud } = useDealsContext(); - const { selectedProject } = useProjectsContext(); const { openDrawer } = useDrawersContext(); const onEditClick = useCallback( (deal: DealSchema) => { - if (!selectedProject) return; openDrawer({ key: "dealEditorDrawer", props: { - deal, - dealsCrud, - project: selectedProject, + value: deal, + onChange: deal => dealsCrud.onUpdate(deal.id, deal), + onDelete: dealsCrud.onDelete, }, }); }, diff --git a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx index 1062e58..de496a0 100644 --- a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx +++ b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx @@ -44,8 +44,12 @@ const TopToolPanel: FC = ({ view, setView }) => { if (!selectedProject) return; openDrawer({ - key: "selectedProjectEditorDrawer", - props: { project: selectedProject, projectsCrud }, + key: "projectEditorDrawer", + props: { + value: selectedProject, + onChange: value => projectsCrud.onUpdate(value.id, value), + onDelete: projectsCrud.onDelete, + }, }); }; diff --git a/src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx b/src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx index 5fee885..b2ef8bb 100644 --- a/src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx +++ b/src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx @@ -22,9 +22,9 @@ const MainBlockHeader = () => { const openProjectsEditorDrawer = () => { openDrawer({ - key: "projectsEditorDrawer", + key: "projectsMobileEditorDrawer", props: { - setSelectedProjectId: selectProjectId, + onSelect: project => selectProjectId(project?.id ?? null), }, }); }; @@ -32,7 +32,7 @@ const MainBlockHeader = () => { const openBoardsEditorDrawer = () => { if (!selectedProject) return; openDrawer({ - key: "projectBoardsEditorDrawer", + key: "boardsMobileEditorDrawer", props: { project: selectedProject, }, diff --git a/src/app/deals/components/shared/DealCard/DealCard.tsx b/src/app/deals/components/shared/DealCard/DealCard.tsx index 28cad7c..9b66ab0 100644 --- a/src/app/deals/components/shared/DealCard/DealCard.tsx +++ b/src/app/deals/components/shared/DealCard/DealCard.tsx @@ -1,6 +1,5 @@ import { Box, Card, Group, Pill, Stack, Text } from "@mantine/core"; import { useDealsContext } from "@/app/deals/contexts/DealsContext"; -import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import { useDrawersContext } from "@/drawers/DrawersContext"; import { DealSchema } from "@/lib/client"; import styles from "./DealCard.module.css"; @@ -10,15 +9,17 @@ type Props = { }; const DealCard = ({ deal }: Props) => { - const { selectedProject } = useProjectsContext(); const { dealsCrud } = useDealsContext(); const { openDrawer } = useDrawersContext(); const onClick = () => { - if (!selectedProject) return; openDrawer({ key: "dealEditorDrawer", - props: { project: selectedProject, deal, dealsCrud }, + props: { + value: deal, + onChange: deal => dealsCrud.onUpdate(deal.id, deal), + onDelete: dealsCrud.onDelete, + }, }); }; diff --git a/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx b/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx index dbc0adb..8e5ae6a 100644 --- a/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx +++ b/src/app/deals/components/shared/StatusMenu/StatusMenu.tsx @@ -69,7 +69,7 @@ const StatusMenu: FC = ({ e.stopPropagation(); if (!board) return; openDrawer({ - key: "boardStatusesEditorDrawer", + key: "statusesMobileEditorDrawer", props: { board, }, diff --git a/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts b/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts deleted file mode 100644 index 2ccd309..0000000 --- a/src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import BoardStatusesEditorDrawer from "@/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer"; - -export default BoardStatusesEditorDrawer; diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx similarity index 66% rename from src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx rename to src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx index a72a967..13aa1ff 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx @@ -2,8 +2,8 @@ import React, { FC } from "react"; import { Drawer, rem } from "@mantine/core"; -import BoardsDrawerBody from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody"; -import { ProjectBoardsContextProvider } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext"; +import BoardsDrawerBody from "@/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody"; +import { BoardsMobileContextProvider } from "@/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext"; import { DrawerProps } from "@/drawers/types"; import { ProjectSchema } from "@/lib/client"; @@ -11,7 +11,7 @@ type Props = { project: ProjectSchema; }; -const ProjectBoardsEditorDrawer: FC> = ({ +const BoardsMobileEditorDrawer: FC> = ({ onClose, opened, props: { project }, @@ -33,11 +33,11 @@ const ProjectBoardsEditorDrawer: FC> = ({ gap: rem(10), }, }}> - + - + ); }; -export default ProjectBoardsEditorDrawer; +export default BoardsMobileEditorDrawer; diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile.tsx similarity index 87% rename from src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx rename to src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile.tsx index 584d9a0..a2cc11b 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { Box, Group, Text } from "@mantine/core"; import { modals } from "@mantine/modals"; import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; -import { useProjectBoardsContext } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext"; +import { useBoardsMobileContext } from "@/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext"; import { BoardSchema } from "@/lib/client"; type Props = { @@ -10,7 +10,7 @@ type Props = { }; const BoardMobile: FC = ({ board }) => { - const { boardsCrud } = useProjectBoardsContext(); + const { boardsCrud } = useBoardsMobileContext(); const startEditing = () => { modals.openContextModal({ diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody.tsx similarity index 81% rename from src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx rename to src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody.tsx index 2bc701e..3a0c94a 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody.tsx @@ -1,9 +1,9 @@ import React, { FC, ReactNode } from "react"; import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react"; import { Box, Center, Divider, Group, Text } from "@mantine/core"; -import BoardMobile from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile"; -import CreateBoardButton from "@/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton"; -import { useProjectBoardsContext } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext"; +import BoardMobile from "@/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile"; +import CreateBoardButton from "@/app/deals/drawers/BoardsMobileEditorDrawer/components/CreateBoardButton"; +import { useBoardsMobileContext } from "@/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext"; import SortableDnd from "@/components/dnd/SortableDnd"; import { BoardSchema } from "@/lib/client"; @@ -12,7 +12,7 @@ type Props = { }; const BoardsDrawerBody: FC = ({ onClose }) => { - const { boards, boardsCrud, project } = useProjectBoardsContext(); + const { boards, boardsCrud, project } = useBoardsMobileContext(); const renderDraggable = () => ( diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/components/CreateBoardButton.tsx similarity index 100% rename from src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx rename to src/app/deals/drawers/BoardsMobileEditorDrawer/components/CreateBoardButton.tsx diff --git a/src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext.tsx similarity index 93% rename from src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx rename to src/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext.tsx index 797ae6e..5e0b663 100644 --- a/src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext.tsx @@ -40,7 +40,7 @@ const useProjectBoardsContextState = ({ project }: Props) => { }; }; -export const [ProjectBoardsContextProvider, useProjectBoardsContext] = +export const [BoardsMobileContextProvider, useBoardsMobileContext] = makeContext( useProjectBoardsContextState, "ProjectBoards" diff --git a/src/app/deals/drawers/BoardsMobileEditorDrawer/index.ts b/src/app/deals/drawers/BoardsMobileEditorDrawer/index.ts new file mode 100644 index 0000000..a8ffadb --- /dev/null +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/index.ts @@ -0,0 +1,3 @@ +import BoardsMobileEditorDrawer from "@/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer"; + +export default BoardsMobileEditorDrawer; diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx index 62a85b6..4cde60f 100644 --- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx @@ -5,14 +5,13 @@ import { Drawer } from "@mantine/core"; import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorBody"; import Header from "@/app/deals/drawers/DealEditorDrawer/components/Header"; import { DrawerProps } from "@/drawers/types"; -import { DealsCrud } from "@/hooks/cruds/useDealsCrud"; import useIsMobile from "@/hooks/utils/useIsMobile"; -import { DealSchema, ProjectSchema } from "@/lib/client"; +import { DealSchema } from "@/lib/client"; type Props = { - project: ProjectSchema; - deal: DealSchema; - dealsCrud: DealsCrud; + value: DealSchema; + onChange: (deal: DealSchema) => void; + onDelete: (deal: DealSchema, onSuccess: () => void) => void; }; const DealEditorDrawer: FC> = ({ @@ -21,7 +20,7 @@ const DealEditorDrawer: FC> = ({ props, }) => { const isMobile = useIsMobile(); - const [deal, setDeal] = useState(props.deal); + const [deal, setDeal] = useState(props.value); return ( > = ({ }, }}> { + setDeal(deal); + props.onChange(deal); + }} + onDelete={value => props.onDelete(value, onClose)} /> ); diff --git a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx index 743ab75..985cc11 100644 --- a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx @@ -2,16 +2,13 @@ import React, { FC } from "react"; import { IconCircleDotted, IconEdit } from "@tabler/icons-react"; import { Tabs, Text } from "@mantine/core"; import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab"; -import { DealsCrud } from "@/hooks/cruds/useDealsCrud"; -import { DealSchema, ProjectSchema } from "@/lib/client"; +import { DealSchema } from "@/lib/client"; import styles from "../DealEditorDrawer.module.css"; type Props = { - project: ProjectSchema; - dealsCrud: DealsCrud; - deal: DealSchema; - setDeal: React.Dispatch>; - onClose: () => void; + value: DealSchema; + onChange: (deal: DealSchema) => void; + onDelete: (deal: DealSchema) => void; }; const DealEditorBody: FC = props => { diff --git a/src/app/deals/drawers/DealEditorDrawer/index.ts b/src/app/deals/drawers/DealEditorDrawer/index.ts index 906564b..b48fc3f 100644 --- a/src/app/deals/drawers/DealEditorDrawer/index.ts +++ b/src/app/deals/drawers/DealEditorDrawer/index.ts @@ -1,3 +1,3 @@ -import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer"; +import ProjectsMobileEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsMobileEditorDrawer"; -export default ProjectsEditorDrawer; +export default ProjectsMobileEditorDrawer; diff --git a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx index 47bb369..a165483 100644 --- a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx @@ -2,10 +2,11 @@ import { FC } from "react"; import { isEqual } from "lodash"; import { Button, Group } from "@mantine/core"; import { UseFormReturnType } from "@mantine/form"; +import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab"; import { DealSchema } from "@/lib/client"; type Props = { - form: UseFormReturnType>; + form: UseFormReturnType; initialValues: Partial; onDelete: () => void; }; diff --git a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx index 164710a..f585764 100644 --- a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx @@ -4,27 +4,23 @@ import { useForm } from "@mantine/form"; import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer"; import BoardSelect from "@/components/selects/BoardSelect/BoardSelect"; import StatusSelect from "@/components/selects/StatusSelect/StatusSelect"; -import { DealsCrud } from "@/hooks/cruds/useDealsCrud"; -import { DealSchema, ProjectSchema } from "@/lib/client"; +import { BoardSchema, DealSchema, StatusSchema } from "@/lib/client"; import { utcDateTimeToLocalString } from "@/utils/datetime"; type Props = { - project: ProjectSchema; - dealsCrud: DealsCrud; - deal: DealSchema; - setDeal: React.Dispatch>; - onClose: () => void; + value: DealSchema; + onChange: (deal: DealSchema) => void; + onDelete: (deal: DealSchema) => void; }; -const GeneralTab: FC = ({ - project, - deal, - setDeal, - dealsCrud, - onClose, -}) => { - const form = useForm>({ - initialValues: deal, +export type DealForm = Omit & { + board?: BoardSchema | undefined; + status?: StatusSchema | undefined; +}; + +const GeneralTab: FC = ({ value, onDelete, onChange }) => { + const form = useForm({ + initialValues: value, validate: { name: value => !value && "Введите название", board: value => !value && "Выберите доску", @@ -32,20 +28,13 @@ const GeneralTab: FC = ({ }, }); - const onSubmit = (values: Partial) => { - dealsCrud.onUpdate(deal.id, { + const onSubmit = (values: DealForm) => { + form.setInitialValues(values); + onChange({ ...values, - boardId: values.board?.id, - statusId: values.status?.id, + board: values.board!, + status: values.status!, }); - setDeal(prev => ({ - ...prev, - ...values, - })); - }; - - const onDelete = () => { - dealsCrud.onDelete(deal, onClose); }; return ( @@ -55,7 +44,9 @@ const GeneralTab: FC = ({ label={"Название"} {...form.getInputProps("name")} /> - Создано: {utcDateTimeToLocalString(deal.createdAt)} + + Создано: {utcDateTimeToLocalString(value.createdAt)} + = ({ form.setFieldValue("board", board ?? undefined); form.setFieldValue("status", undefined); }} - projectId={project?.id} + projectId={value.board.projectId} /> = ({ />