diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css index 9e60d88..78d3ffa 100644 --- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css +++ b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css @@ -2,3 +2,12 @@ .tab { border-bottom-width: 3px; } + +.header-board { + @mixin light { + color: var(--mantine-color-gray-7); + } + @mixin dark { + color: var(--mantine-color-dark-2); + } +} diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx index b5f660e..62a85b6 100644 --- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx @@ -1,8 +1,9 @@ "use client"; -import React, { FC } from "react"; +import React, { FC, useState } from "react"; 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"; @@ -20,6 +21,7 @@ const DealEditorDrawer: FC> = ({ props, }) => { const isMobile = useIsMobile(); + const [deal, setDeal] = useState(props.deal); return ( > = ({ position={"right"} onClose={onClose} removeScrollProps={{ allowPinchZoom: true }} - withCloseButton={false} + withCloseButton={isMobile} opened={opened} trapFocus={false} + title={isMobile &&
} styles={{ body: { - height: "100%", display: "flex", flexDirection: "column", padding: 0, }, + header: { + paddingBlock: 0, + }, }}> diff --git a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx index 0a3a30a..743ab75 100644 --- a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx @@ -1,4 +1,4 @@ -import { FC } from "react"; +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"; @@ -10,10 +10,11 @@ type Props = { project: ProjectSchema; dealsCrud: DealsCrud; deal: DealSchema; + setDeal: React.Dispatch>; onClose: () => void; }; -const DealEditorBody: FC = ({ project, dealsCrud, deal, onClose }) => { +const DealEditorBody: FC = props => { return ( = ({ project, dealsCrud, deal, onClose }) => { - + mock diff --git a/src/app/deals/drawers/DealEditorDrawer/components/Header.tsx b/src/app/deals/drawers/DealEditorDrawer/components/Header.tsx new file mode 100644 index 0000000..bf140d3 --- /dev/null +++ b/src/app/deals/drawers/DealEditorDrawer/components/Header.tsx @@ -0,0 +1,23 @@ +import React, { FC } from "react"; +import { Stack, Text } from "@mantine/core"; +import { DealSchema } from "@/lib/client"; +import styles from "../DealEditorDrawer.module.css"; + +type Props = { + deal: DealSchema; +}; + +const Header: FC = ({ deal }) => { + return ( + + {deal.name} + + {deal.board.name} + + + ); +}; + +export default Header; diff --git a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx index 101e4aa..164710a 100644 --- a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx +++ b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from "react"; +import React, { FC } from "react"; import { Stack, Text, TextInput } from "@mantine/core"; import { useForm } from "@mantine/form"; import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer"; @@ -12,14 +12,19 @@ type Props = { project: ProjectSchema; dealsCrud: DealsCrud; deal: DealSchema; + setDeal: React.Dispatch>; onClose: () => void; }; -const GeneralTab: FC = ({ project, deal, dealsCrud, onClose }) => { - const [initialValues, setInitialValues] = - useState>(deal); +const GeneralTab: FC = ({ + project, + deal, + setDeal, + dealsCrud, + onClose, +}) => { const form = useForm>({ - initialValues, + initialValues: deal, validate: { name: value => !value && "Введите название", board: value => !value && "Выберите доску", @@ -33,7 +38,10 @@ const GeneralTab: FC = ({ project, deal, dealsCrud, onClose }) => { boardId: values.board?.id, statusId: values.status?.id, }); - setInitialValues(values); + setDeal(prev => ({ + ...prev, + ...values, + })); }; const onDelete = () => { @@ -64,7 +72,7 @@ const GeneralTab: FC = ({ project, deal, dealsCrud, onClose }) => { />