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

refactor: drawers refactored

Browse Source
This commit is contained in:
AlexSserb
2025-09-06 11:09:42 +04:00
parent 67780b5251
commit d76dc82cb8
44 changed files with 239 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/deals/components/desktop/DealsTable/DealsTable.tsx
View File

@ -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,
},
});
},

8
src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
View File

@ -44,8 +44,12 @@ const TopToolPanel: FC<Props> = ({ 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,
},
});
};

6
src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx
View File

@ -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,
},

9
src/app/deals/components/shared/DealCard/DealCard.tsx
View File

@ -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,
},
});
};

2
src/app/deals/components/shared/StatusMenu/StatusMenu.tsx
View File

@ -69,7 +69,7 @@ const StatusMenu: FC<Props> = ({
e.stopPropagation();
if (!board) return;
openDrawer({
key: "boardStatusesEditorDrawer",
key: "statusesMobileEditorDrawer",
props: {
board,
},

3
src/app/deals/drawers/BoardStatusesEditorDrawer/index.ts
View File

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

12
src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx → src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx
View File

@ -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<DrawerProps<Props>> = ({
const BoardsMobileEditorDrawer: FC<DrawerProps<Props>> = ({
onClose,
opened,
props: { project },
@ -33,11 +33,11 @@ const ProjectBoardsEditorDrawer: FC<DrawerProps<Props>> = ({
gap: rem(10),
},
}}>
<ProjectBoardsContextProvider project={project}>
<BoardsMobileContextProvider project={project}>
<BoardsDrawerBody onClose={onClose} />
</ProjectBoardsContextProvider>
</BoardsMobileContextProvider>
</Drawer>
);
};
export default ProjectBoardsEditorDrawer;
export default BoardsMobileEditorDrawer;

4
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardMobile.tsx → src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile.tsx
View File

@ -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<Props> = ({ board }) => {
const { boardsCrud } = useProjectBoardsContext();
const { boardsCrud } = useBoardsMobileContext();
const startEditing = () => {
modals.openContextModal({

8
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/BoardsDrawerBody.tsx → src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody.tsx
View File

@ -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<Props> = ({ onClose }) => {
const { boards, boardsCrud, project } = useProjectBoardsContext();
const { boards, boardsCrud, project } = useBoardsMobileContext();
const renderDraggable = () => (
<Box p={"xs"}>

0
src/app/deals/drawers/ProjectBoardsEditorDrawer/components/CreateBoardButton.tsx → src/app/deals/drawers/BoardsMobileEditorDrawer/components/CreateBoardButton.tsx
View File

2
src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx → src/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext.tsx
View File

@ -40,7 +40,7 @@ const useProjectBoardsContextState = ({ project }: Props) => {
};
};
export const [ProjectBoardsContextProvider, useProjectBoardsContext] =
export const [BoardsMobileContextProvider, useBoardsMobileContext] =
makeContext<ProjectBoardsContextState, Props>(
useProjectBoardsContextState,
"ProjectBoards"

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

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

21
src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
View File

@ -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<DrawerProps<Props>> = ({
@ -21,7 +20,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
props,
}) => {
const isMobile = useIsMobile();
const [deal, setDeal] = useState(props.deal);
const [deal, setDeal] = useState(props.value);
return (
<Drawer
@ -44,10 +43,12 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
},
}}>
<DealEditorBody
{...props}
deal={deal}
setDeal={setDeal}
onClose={onClose}
value={deal}
onChange={deal => {
setDeal(deal);
props.onChange(deal);
}}
onDelete={value => props.onDelete(value, onClose)}
/>
</Drawer>
);

11
src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
View File

@ -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<React.SetStateAction<DealSchema>>;
onClose: () => void;
value: DealSchema;
onChange: (deal: DealSchema) => void;
onDelete: (deal: DealSchema) => void;
};
const DealEditorBody: FC<Props> = props => {

4
src/app/deals/drawers/DealEditorDrawer/index.ts
View File

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

3
src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx
View File

@ -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<Partial<DealSchema>>;
form: UseFormReturnType<DealForm>;
initialValues: Partial<DealSchema>;
onDelete: () => void;
};

55
src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx
View File

@ -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<React.SetStateAction<DealSchema>>;
onClose: () => void;
value: DealSchema;
onChange: (deal: DealSchema) => void;
onDelete: (deal: DealSchema) => void;
};
const GeneralTab: FC<Props> = ({
project,
deal,
setDeal,
dealsCrud,
onClose,
}) => {
const form = useForm<Partial<DealSchema>>({
initialValues: deal,
export type DealForm = Omit<DealSchema, "board" | "status"> & {
board?: BoardSchema | undefined;
status?: StatusSchema | undefined;
};
const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
const form = useForm<DealForm>({
initialValues: value,
validate: {
name: value => !value && "Введите название",
board: value => !value && "Выберите доску",
@ -32,20 +28,13 @@ const GeneralTab: FC<Props> = ({
},
});
const onSubmit = (values: Partial<DealSchema>) => {
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<Props> = ({
label={"Название"}
{...form.getInputProps("name")}
/>
<Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
<Text>
Создано: {utcDateTimeToLocalString(value.createdAt)}
</Text>
<BoardSelect
label={"Доска"}
{...form.getInputProps("board")}
@ -63,7 +54,7 @@ const GeneralTab: FC<Props> = ({
form.setFieldValue("board", board ?? undefined);
form.setFieldValue("status", undefined);
}}
projectId={project?.id}
projectId={value.board.projectId}
/>
<StatusSelect
label={"Статус"}
@ -72,8 +63,8 @@ const GeneralTab: FC<Props> = ({
/>
<Footer
form={form}
initialValues={deal}
onDelete={onDelete}
initialValues={value}
onDelete={() => onDelete(value)}
/>
</Stack>
</form>

3
src/app/deals/drawers/ProjectBoardsEditorDrawer/index.ts
View File

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

0
src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.module.css → src/app/deals/drawers/ProjectEditorDrawer/ProjectEditorDrawer.module.css
View File

23
src/app/deals/drawers/SelectedProjectEditorDrawer/SelectedProjectEditorDrawer.tsx → src/app/deals/drawers/ProjectEditorDrawer/ProjectEditorDrawer.tsx
View File

@ -1,24 +1,25 @@
"use client";
import React, { FC } from "react";
import React, { FC, useState } from "react";
import { Drawer } from "@mantine/core";
import ProjectEditorBody from "@/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody";
import ProjectEditorBody from "@/app/deals/drawers/ProjectEditorDrawer/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;
value: ProjectSchema;
onChange: (value: ProjectSchema) => void;
onDelete: (value: ProjectSchema, onSuccess: () => void) => void;
};
const SelectedProjectEditorDrawer: FC<DrawerProps<Props>> = ({
const ProjectEditorDrawer: FC<DrawerProps<Props>> = ({
opened,
onClose,
props,
}) => {
const isMobile = useIsMobile();
const [project, setProject] = useState(props.value);
return (
<Drawer
@ -38,11 +39,15 @@ const SelectedProjectEditorDrawer: FC<DrawerProps<Props>> = ({
},
}}>
<ProjectEditorBody
{...props}
onClose={onClose}
value={project}
onChange={project => {
setProject(project);
props.onChange(project);
}}
onDelete={value => props.onDelete(value, onClose)}
/>
</Drawer>
);
};
export default SelectedProjectEditorDrawer;
export default ProjectEditorDrawer;

19
src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx → src/app/deals/drawers/ProjectEditorDrawer/components/ProjectEditorBody.tsx
View File

@ -1,18 +1,17 @@
import { FC } from "react";
import { IconEdit } from "@tabler/icons-react";
import { Tabs } from "@mantine/core";
import GeneralTab from "@/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab";
import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
import GeneralTab from "@/app/deals/drawers/ProjectEditorDrawer/tabs/GeneralTab/GeneralTab";
import { ProjectSchema } from "@/lib/client";
import styles from "../SelectedProjectEditorDrawer.module.css";
import styles from "../ProjectEditorDrawer.module.css";
type Props = {
projectsCrud: ProjectsCrud;
project: ProjectSchema;
onClose: () => void;
value: ProjectSchema;
onChange: (value: ProjectSchema) => void;
onDelete: (value: ProjectSchema) => void;
};
const ProjectEditorBody: FC<Props> = ({ projectsCrud, project, onClose }) => {
const ProjectEditorBody: FC<Props> = props => {
return (
<Tabs
defaultValue="general"
@ -25,11 +24,7 @@ const ProjectEditorBody: FC<Props> = ({ projectsCrud, project, onClose }) => {
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<GeneralTab
projectsCrud={projectsCrud}
project={project}
onClose={onClose}
/>
<GeneralTab {...props} />
</Tabs.Panel>
</Tabs>
);

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

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

43
src/app/deals/drawers/ProjectEditorDrawer/tabs/GeneralTab/Footer.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FC } from "react";
import { isEqual } from "lodash";
import { Button, Group } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { ProjectSchema } from "@/lib/client";
type Props = {
form: UseFormReturnType<ProjectSchema>;
initialValues: Partial<ProjectSchema>;
onDelete: () => void;
};
const Footer: FC<Props> = ({ form, initialValues, onDelete }) => {
return (
<Group
justify={"space-between"}
wrap={"nowrap"}>
<Group wrap={"nowrap"}>
<Button
type={"submit"}
disabled={isEqual(form.values, initialValues)}
variant={"filled"}>
Сохранить
</Button>
<Button
type={"reset"}
onClick={() => form.reset()}
disabled={isEqual(form.values, initialValues)}
variant={"default"}>
Отменить
</Button>
</Group>
<Button
onClick={onDelete}
color={"red"}
variant={"outline"}>
Удалить
</Button>
</Group>
);
};
export default Footer;

43
src/app/deals/drawers/ProjectEditorDrawer/tabs/GeneralTab/GeneralTab.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FC } from "react";
import { Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import Footer from "@/app/deals/drawers/ProjectEditorDrawer/tabs/GeneralTab/Footer";
import { ProjectSchema } from "@/lib/client";
type Props = {
value: ProjectSchema;
onChange: (value: ProjectSchema) => void;
onDelete: (value: ProjectSchema) => void;
};
const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
const form = useForm<ProjectSchema>({
initialValues: value,
validate: {
name: value => !value && "Введите название",
},
});
const onSubmit = (values: ProjectSchema) => {
onChange(values);
form.setInitialValues(values);
};
return (
<form onSubmit={form.onSubmit(onSubmit)}>
<Stack p={"md"}>
<TextInput
label={"Название"}
{...form.getInputProps("name")}
/>
<Footer
form={form}
initialValues={value}
onDelete={() => onDelete(value)}
/>
</Stack>
</form>
);
};
export default GeneralTab;

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

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

0
src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.module.css → src/app/deals/drawers/ProjectsMobileEditorDrawer/ProjectsEditorDrawer.module.css
View File

13
src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.tsx → src/app/deals/drawers/ProjectsMobileEditorDrawer/ProjectsMobileEditorDrawer.tsx
View File

@ -3,17 +3,18 @@
import React, { FC } from "react";
import { Center, Divider, Drawer, rem, Text } from "@mantine/core";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import ProjectsDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody";
import ProjectsDrawerBody from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/ProjectsDrawerBody";
import { DrawerProps } from "@/drawers/types";
import { ProjectSchema } from "@/lib/client";
type Props = {
setSelectedProjectId: (projectId: number | null) => void;
onSelect: (project: ProjectSchema | null) => void;
};
const ProjectsEditorDrawer: FC<DrawerProps<Props>> = ({
const ProjectsMobileEditorDrawer: FC<DrawerProps<Props>> = ({
opened,
onClose,
props: { setSelectedProjectId },
props: { onSelect },
}) => {
return (
<Drawer
@ -38,7 +39,7 @@ const ProjectsEditorDrawer: FC<DrawerProps<Props>> = ({
<Divider />
<ProjectsContextProvider>
<ProjectsDrawerBody
setSelectedProjectId={setSelectedProjectId}
onSelect={onSelect}
onClose={onClose}
/>
</ProjectsContextProvider>
@ -46,4 +47,4 @@ const ProjectsEditorDrawer: FC<DrawerProps<Props>> = ({
);
};
export default ProjectsEditorDrawer;
export default ProjectsMobileEditorDrawer;

0
src/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton.tsx → src/app/deals/drawers/ProjectsMobileEditorDrawer/components/CreateProjectButton.tsx
View File

0
src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx → src/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMenu.tsx
View File

12
src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx → src/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMobile.tsx
View File

@ -2,21 +2,17 @@ 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 ProjectMenu from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMenu";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";
type Props = {
project: ProjectSchema;
setSelectedProjectId: (projectId: number | null) => void;
onSelect: (project: ProjectSchema | null) => void;
closeDrawer: () => void;
};
const ProjectMobile: FC<Props> = ({
project,
setSelectedProjectId,
closeDrawer,
}) => {
const ProjectMobile: FC<Props> = ({ project, onSelect, closeDrawer }) => {
const { projectsCrud } = useProjectsContext();
const startEditing = () => {
@ -32,7 +28,7 @@ const ProjectMobile: FC<Props> = ({
};
const onClick = () => {
setSelectedProjectId(project.id);
onSelect(project);
closeDrawer();
};

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

@ -0,0 +1,3 @@
import ProjectsMobileEditorDrawer from "./ProjectsMobileEditorDrawer";
export default ProjectsMobileEditorDrawer;

70
src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx
View File

@ -1,70 +0,0 @@
import { FC, useState } from "react";
import { isEqual } from "lodash";
import { Button, Group, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
import { ProjectSchema } from "@/lib/client";
type Props = {
projectsCrud: ProjectsCrud;
project: ProjectSchema;
onClose: () => void;
};
const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
const [initialValues, setInitialValues] = useState(project);
const form = useForm<ProjectSchema>({
initialValues,
validate: {
name: value => !value && "Введите название",
},
});
const onSubmit = (values: ProjectSchema) => {
projectsCrud.onUpdate(project.id, values);
setInitialValues(values);
};
const onDelete = () => {
projectsCrud.onDelete(project, onClose);
};
return (
<form onSubmit={form.onSubmit(onSubmit)}>
<Stack p={"md"}>
<TextInput
label={"Название"}
{...form.getInputProps("name")}
/>
<Group
justify={"space-between"}
wrap={"nowrap"}>
<Group wrap={"nowrap"}>
<Button
type={"submit"}
disabled={isEqual(form.values, initialValues)}
variant={"filled"}>
Сохранить
</Button>
<Button
type={"reset"}
onClick={() => form.reset()}
disabled={isEqual(form.values, initialValues)}
variant={"default"}>
Отменить
</Button>
</Group>
<Button
onClick={onDelete}
color={"red"}
variant={"outline"}>
Удалить
</Button>
</Group>
</Stack>
</form>
);
};
export default GeneralTab;

3
src/app/deals/drawers/SelectedProjectEditorDrawer/index.ts
View File

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

12
src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/StatusesMobileEditorDrawer.tsx
View File

@ -2,8 +2,8 @@
import React, { FC } from "react";
import { Drawer, rem } from "@mantine/core";
import StatusesDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody";
import { BoardStatusesContextProvider } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
import StatusesDrawerBody from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusesDrawerBody";
import { StatusesMobileContextProvider } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
import { DrawerProps } from "@/drawers/types";
import { BoardSchema } from "@/lib/client";
@ -11,7 +11,7 @@ type Props = {
board: BoardSchema;
};
const BoardStatusesEditorDrawer: FC<DrawerProps<Props>> = ({
const StatusesMobileEditorDrawer: FC<DrawerProps<Props>> = ({
opened,
onClose,
props: { board },
@ -33,11 +33,11 @@ const BoardStatusesEditorDrawer: FC<DrawerProps<Props>> = ({
gap: rem(10),
},
}}>
<BoardStatusesContextProvider board={board}>
<StatusesMobileContextProvider board={board}>
<StatusesDrawerBody onClose={onClose} />
</BoardStatusesContextProvider>
</StatusesMobileContextProvider>
</Drawer>
);
};
export default BoardStatusesEditorDrawer;
export default StatusesMobileEditorDrawer;

4
src/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/components/CreateStatusButton.tsx
View File

@ -2,10 +2,10 @@ import { FC } from "react";
import { IconPlus } from "@tabler/icons-react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
const CreateStatusButton: FC = () => {
const { statusesCrud } = useBoardStatusesContext();
const { statusesCrud } = useStatusesMobileContext();
const onStartCreating = () => {
modals.openContextModal({

11
src/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/components/ProjectsDrawerBody.tsx
View File

@ -1,15 +1,16 @@
import React, { FC } from "react";
import { Stack } 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";
import CreateProjectButton from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/CreateProjectButton";
import ProjectMobile from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMobile";
import { ProjectSchema } from "@/lib/client";
type Props = {
setSelectedProjectId: (projectId: number | null) => void;
onSelect: (project: ProjectSchema | null) => void;
onClose: () => void;
};
const ProjectsDrawerBody: FC<Props> = ({ setSelectedProjectId, onClose }) => {
const ProjectsDrawerBody: FC<Props> = ({ onSelect, onClose }) => {
const { projects } = useProjectsContext();
return (
@ -19,7 +20,7 @@ const ProjectsDrawerBody: FC<Props> = ({ setSelectedProjectId, onClose }) => {
<ProjectMobile
key={index}
project={project}
setSelectedProjectId={setSelectedProjectId}
onSelect={onSelect}
closeDrawer={onClose}
/>
))}

4
src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusMobile.tsx
View File

@ -2,7 +2,7 @@ import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
import { BoardSchema, StatusSchema } from "@/lib/client";
type Props = {
@ -11,7 +11,7 @@ type Props = {
};
const StatusMobile: FC<Props> = ({ status, board }) => {
const { statusesCrud } = useBoardStatusesContext();
const { statusesCrud } = useStatusesMobileContext();
const startEditing = () => {
modals.openContextModal({

8
src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusesDrawerBody.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusesDrawerBody.tsx
View File

@ -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 CreateStatusButton from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/CreateStatusButton";
import StatusMobile from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile";
import { useBoardStatusesContext } from "@/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext";
import CreateStatusButton from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/CreateStatusButton";
import StatusMobile from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusMobile";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
import SortableDnd from "@/components/dnd/SortableDnd";
import { StatusSchema } from "@/lib/client";
@ -12,7 +12,7 @@ type Props = {
};
const StatusesDrawerBody: FC<Props> = ({ onClose }) => {
const { statusesCrud, board, statuses } = useBoardStatusesContext();
const { statusesCrud, board, statuses } = useStatusesMobileContext();
const renderDraggable = () => (
<Box p={"xs"}>

2
src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx → src/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext.tsx
View File

@ -44,7 +44,7 @@ const useBoardStatusesContextState = ({
};
};
export const [BoardStatusesContextProvider, useBoardStatusesContext] =
export const [StatusesMobileContextProvider, useStatusesMobileContext] =
makeContext<BoardStatusesContextState, Props>(
useBoardStatusesContextState,
"BoardStatuses"

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

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

3
src/components/ui/InPlaceInput/InPlaceInputDesktop.tsx
View File

@ -49,7 +49,7 @@ const InPlaceInputDesktop: FC<Props> = ({
};
const onCancelCreating = () => {
setLocalValue(localValue);
setLocalValue("");
setIsWriting(false);
};
@ -58,6 +58,7 @@ const InPlaceInputDesktop: FC<Props> = ({
if (val) {
onChange(val);
}
setLocalValue("");
setIsWriting(false);
};

16
src/drawers/drawersRegistry.tsx
View File

@ -1,15 +1,15 @@
import BoardStatusesEditorDrawer from "@/app/deals/drawers/BoardStatusesEditorDrawer";
import BoardsMobileEditorDrawer from "@/app/deals/drawers/BoardsMobileEditorDrawer";
import StatusesMobileEditorDrawer from "../app/deals/drawers/StatusesMobileEditorDrawer";
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";
import ProjectEditorDrawer from "@/app/deals/drawers/ProjectEditorDrawer";
import ProjectsMobileEditorDrawer from "@/app/deals/drawers/ProjectsMobileEditorDrawer";
const drawerRegistry = {
projectsEditorDrawer: ProjectsEditorDrawer,
boardStatusesEditorDrawer: BoardStatusesEditorDrawer,
projectBoardsEditorDrawer: ProjectBoardsEditorDrawer,
projectsMobileEditorDrawer: ProjectsMobileEditorDrawer,
statusesMobileEditorDrawer: StatusesMobileEditorDrawer,
boardsMobileEditorDrawer: BoardsMobileEditorDrawer,
dealEditorDrawer: DealEditorDrawer,
selectedProjectEditorDrawer: SelectedProjectEditorDrawer,
projectEditorDrawer: ProjectEditorDrawer,
};
export default drawerRegistry;

4
src/lib/client/types.gen.ts
View File

@ -16,6 +16,10 @@ export type BoardSchema = {
* Lexorank
*/
lexorank: string;
/**
* Projectid
*/
projectId: number;
};
/**

1
src/lib/client/zod.gen.ts
View File

@ -9,6 +9,7 @@ export const zBoardSchema = z.object({
id: z.int(),
name: z.string(),
lexorank: z.string(),
projectId: z.int(),
});
/**