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

feat: styles for deal drawer

Browse Source
This commit is contained in:
AlexSserb
2025-09-18 09:50:06 +04:00
parent 6b4e2f193a
commit a95d05e28b
20 changed files with 199 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
View File

@ -1,6 +0,0 @@
.container {
width: min-content;
cursor: pointer;
padding: 6px;
height: 100%;
}

26
src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
View File

@ -1,26 +0,0 @@
import { FC, PropsWithChildren } from "react";
import { ActionIcon, Box } from "@mantine/core";
import style from "./ToolPanelAction.module.css";
type Props = {
onClick: () => void;
};
const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
onClick,
children,
}) => {
return (
<Box>
<ActionIcon
variant={"default"}
onClick={onClick}
radius="lg"
className={style.container}>
{children}
</ActionIcon>
</Box>
);
};
export default ToolPanelAction;

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

@ -4,12 +4,12 @@ import { FC } from "react";
import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
import { Flex, Group, Indicator } from "@mantine/core";
import { modals } from "@mantine/modals";
import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/utils/useIsMobile";
@ -89,16 +89,16 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
disabled={!isChangedFilters}
offset={3}
size={8}>
<ToolPanelAction onClick={onFiltersClick}>
<ActionIconWithTip onClick={onFiltersClick}>
<IconFilter />
</ToolPanelAction>
</ActionIconWithTip>
</Indicator>
<ToolPanelAction onClick={onEditClick}>
<ActionIconWithTip onClick={onEditClick}>
<IconEdit />
</ToolPanelAction>
<ToolPanelAction onClick={onCreateClick}>
</ActionIconWithTip>
<ActionIconWithTip onClick={onCreateClick}>
<IconPlus />
</ToolPanelAction>
</ActionIconWithTip>
<ProjectSelect
data={projects}
value={selectedProject}

2
src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css
View File

@ -1,7 +1,9 @@
.tab {
@media (max-width: 48em) {
border-bottom-width: 3px;
}
}
.header-board {
@mixin light {

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

@ -25,7 +25,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
return (
<Drawer
size={isMobile ? "100%" : "60%"}
size={isMobile ? "100%" : "80%"}
position={"right"}
onClose={onClose}
removeScrollProps={{ allowPinchZoom: true }}
@ -37,7 +37,8 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
body: {
display: "flex",
flexDirection: "column",
padding: 0,
padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
height: "100vh",
},
header: {
paddingBlock: 0,

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

@ -3,6 +3,7 @@ import { IconEdit } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { Box, Tabs } from "@mantine/core";
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { DealSchema, ProjectSchema } from "@/lib/client";
import { MODULES } from "@/modules/modules";
import styles from "../DealEditorDrawer.module.css";
@ -15,6 +16,8 @@ type Props = {
};
const DealEditorBody: FC<Props> = props => {
const isMobile = useIsMobile();
const getTabPanel = (value: string, component: ReactNode): ReactNode => (
<Tabs.Panel
key={value}
@ -53,6 +56,8 @@ const DealEditorBody: FC<Props> = props => {
return (
<Tabs
defaultValue="general"
orientation={isMobile ? "horizontal" : "vertical"}
h={"100%"}
classNames={{ tab: styles.tab }}>
<Tabs.List>
<Tabs.Tab

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

@ -1,5 +1,5 @@
import React, { FC } from "react";
import { Stack, Text, TextInput } from "@mantine/core";
import { Flex, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
@ -40,13 +40,26 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
return (
<form onSubmit={form.onSubmit(onSubmit)}>
<Stack p={"md"}>
<Flex
gap={"md"}
w={"100%"}
direction={{ base: "column", sm: "row" }}>
<TextInput
label={"Название"}
{...form.getInputProps("name")}
flex={1}
/>
<Text>
Создано: {utcDateTimeToLocalString(value.createdAt)}
</Text>
<TextInput
label={"Дата создания"}
value={utcDateTimeToLocalString(value.createdAt)}
readOnly
flex={1}
/>
</Flex>
<Flex
gap={"md"}
w={"100%"}
direction={{ base: "column", sm: "row" }}>
<BoardSelect
label={"Доска"}
{...form.getInputProps("board")}
@ -55,12 +68,15 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
form.setFieldValue("status", undefined);
}}
projectId={value.board.projectId}
flex={1}
/>
<StatusSelect
label={"Статус"}
{...form.getInputProps("status")}
boardId={form.values.board?.id}
flex={1}
/>
</Flex>
<Footer
form={form}
onDelete={() => onDelete(value)}

5
src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css Normal file
View File

@ -0,0 +1,5 @@
.container {
cursor: pointer;
min-height: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
min-width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
}

34
src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx Normal file
View File

@ -0,0 +1,34 @@
import { FC, PropsWithChildren } from "react";
import {
ActionIcon,
ActionIconProps,
PolymorphicComponentProps,
Tooltip,
} from "@mantine/core";
import style from "./ActionIconWithTip.module.css";
type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
tipLabel?: string;
};
const ActionIconWithTip: FC<PropsWithChildren<Props>> = ({
children,
tipLabel,
...props
}) => (
<Tooltip
label={tipLabel}
hidden={!tipLabel}
h={"max-content"}
w={"max-content"}>
<ActionIcon
variant={"default"}
radius={"lg"}
className={style.container}
{...props}>
{children}
</ActionIcon>
</Tooltip>
);
export default ActionIconWithTip;

11
src/components/ui/BaseTable/BaseTable.module.css Normal file
View File

@ -0,0 +1,11 @@
.table-border {
border-width: 1px;
border-radius: var(--mantine-radius-lg);
@mixin light {
border-color: var(--mantine-color-gray-4);
}
@mixin dark {
border-color: var(--mantine-color-dark-4);
}
}

6
src/components/ui/BaseTable/BaseTable.tsx
View File

@ -1,14 +1,18 @@
import React from "react";
import classNames from "classnames";
import { DataTable, DataTableProps } from "mantine-datatable";
import styles from "./BaseTable.module.css";
function BaseTable<T>(props: DataTableProps<T>) {
return (
<DataTable
withTableBorder
withRowBorders
striped={false}
verticalAlign={"center"}
backgroundColor={"transparent"}
className={classNames(
props.withTableBorder && styles["table-border"]
)}
{...props}
/>
);

23
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx
View File

@ -1,16 +1,9 @@
import { FC } from "react";
import { IconTrash } from "@tabler/icons-react";
import { isNumber } from "lodash";
import {
ActionIcon,
Divider,
Group,
NumberInput,
Stack,
Text,
Tooltip,
} from "@mantine/core";
import { Divider, Group, NumberInput, Stack, Text } from "@mantine/core";
import { useDebouncedCallback } from "@mantine/hooks";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { DealServiceSchema } from "@/lib/client";
import LockCheckbox from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox";
@ -51,17 +44,13 @@ const DealServiceRow: FC<Props> = ({ value, onChange, onDelete }) => {
<Divider />
<Text>{value.service.name}</Text>
<Group>
<Tooltip
<ActionIconWithTip
onClick={() => onDelete(value)}
label="Удалить услугу">
<ActionIcon variant={"default"}>
tipLabel={"Удалить услугу"}>
<IconTrash />
</ActionIcon>
</Tooltip>
</ActionIconWithTip>
{/*<Tooltip label="Сотрудники">*/}
{/* <ActionIcon*/}
{/* onClick={() => onEmployeeClick(service)}*/}
{/* variant={"default"}>*/}
{/*<ActionIcon onClick={() => onEmployeeClick(service)}>*/}
{/* <IconUsersGroup />*/}
{/*</ActionIcon>*/}
{/*</Tooltip>*/}

3
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
View File

@ -13,6 +13,7 @@ const FulfillmentBaseTabBody = () => {
gap={"xs"}>
<ScrollArea
offsetScrollbars={"y"}
flex={4}
mah={"91vh"}>
<Stack>
{dealProductsList.dealProducts.map((dealProduct, index) => (
@ -23,7 +24,7 @@ const FulfillmentBaseTabBody = () => {
))}
</Stack>
</ScrollArea>
<Stack>
<Stack flex={2}>
<DealServicesTable />
<ProductsActions />
</Stack>

9
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx
View File

@ -1,6 +1,7 @@
import { FC } from "react";
import { IconLock, IconLockOpen } from "@tabler/icons-react";
import { ActionIcon, CheckboxProps, Tooltip } from "@mantine/core";
import { CheckboxProps } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
type RestProps = {
value: boolean;
@ -15,13 +16,11 @@ const LockCheckbox: FC<Props> = props => {
const handleChange = () => props.onChange(!props.value);
return (
<Tooltip label={props.label}>
<ActionIcon
<ActionIconWithTip
onClick={handleChange}
variant={props.variant}>
{getIcon()}
</ActionIcon>
</Tooltip>
</ActionIconWithTip>
);
};

29
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
View File

@ -1,11 +1,6 @@
.container {
display: flex;
border: dashed var(--item-border-size) var(--mantine-color-default-border);
border-radius: var(--item-border-radius);
gap: rem(20);
padding: rem(10);
margin-bottom: rem(10);
flex: 1;
border: dashed 1px var(--mantine-color-default-border);
border-radius: var(--mantine-radius-lg);
}
.image-container {
@ -14,23 +9,3 @@
max-width: rem(250);
height: 100%;
}
.services-container {
width: 100%;
display: flex;
flex-direction: column;
gap: rem(10);
flex: 1;
}
.data-container {
max-width: rem(250);
display: flex;
flex-direction: column;
gap: rem(10);
flex: 1;
}
.attributes-container {
overflow-wrap: break-word;
}

29
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
View File

@ -1,8 +1,7 @@
import { FC } from "react";
import { isNumber } from "lodash";
import {
Box,
Card,
Flex,
Image,
NumberInput,
rem,
@ -23,6 +22,7 @@ import ProductViewActions from "@/modules/dealModules/dealEditorTabs/Fulfillment
import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
import { ServiceType } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/types/service";
import ProductServicesTable from "./components/ProductServicesTable";
import styles from "./ProductView.module.css";
type Props = {
dealProduct: DealProductSchema;
@ -99,23 +99,29 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
};
return (
<Card
<Flex
align={"start"}
direction={"row"}
p={"sm"}
style={{ display: "flex", flexDirection: "row" }}>
<Stack gap={"sm"}>
className={styles.container}
gap={"sm"}>
<Stack
flex={2}
gap={"sm"}>
{!dealProduct.product && (
<Image
flex={1}
radius={rem(10)}
fit={"cover"}
// src={dealProduct.product.imageUrl}
/>
)}
<Title order={3}>{dealProduct.product.name}</Title>
<ProductFieldsList product={dealProduct.product} />
{/*<Text>*/}
{/* Штрихкоды:*/}
{/*{value.product.barcodes.join(", ")}*/}
{/*</Text>*/}
<Box />
<NumberInput
mt={rem(10)}
suffix={" шт."}
@ -126,22 +132,17 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
placeholder={"Введите количество товара"}
/>
<Textarea
mih={rem(140)}
styles={{
wrapper: { height: "90%" },
input: { height: "90%" },
}}
my={rem(10)}
defaultValue={dealProduct.comment}
onChange={event =>
debouncedOnChange({
comment: event.currentTarget.value,
})
}
rows={4}
placeholder={"Комментарий"}
/>
</Stack>
<Stack>
<Stack flex={5}>
<ProductServicesTable
dealProduct={dealProduct}
onDuplicateServices={() => onDuplicateServices(dealProduct)}
@ -149,7 +150,7 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
/>
<ProductViewActions dealProduct={dealProduct} />
</Stack>
</Card>
</Flex>
);
};

22
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx
View File

@ -1,7 +1,8 @@
import { FC } from "react";
import { IconMoodSad } from "@tabler/icons-react";
import { IconCopy, IconMoodSad } from "@tabler/icons-react";
import { Button, Flex, Group, Stack, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { DealProductSchema, ProductServiceSchema } from "@/lib/client";
import useProductServicesTableColumns from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns";
@ -113,6 +114,7 @@ const ProductServicesTable: FC<Props> = ({
columns={columns}
groups={undefined}
idAccessor={"serviceId"}
withTableBorder
style={{
height: isEmptyTable ? "8rem" : "auto",
}}
@ -128,17 +130,21 @@ const ProductServicesTable: FC<Props> = ({
<Flex
justify={"flex-end"}
gap={"xs"}
pt={isEmptyTable ? 0 : "xs"}>
pt={"xs"}>
{onDuplicateServices && (
<ActionIconWithTip
tipLabel={"Продублировать услуги"}
onClick={onDuplicateServices}>
<IconCopy />
</ActionIconWithTip>
)}
{onKitAdd && (
<Button
onClick={() => onKitAdd && onKitAdd()}
onClick={onKitAdd}
variant={"default"}>
Добавить набор услуг
</Button>
<Button
onClick={() => onDuplicateServices && onDuplicateServices()}
variant={"default"}>
Продублировать услуги
</Button>
)}
<Button
onClick={onCreateClick}
variant={"default"}>

21
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx
View File

@ -1,7 +1,8 @@
import { FC } from "react";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { ActionIcon, Flex, rem, Tooltip } from "@mantine/core";
import { Flex } from "@mantine/core";
import { modals } from "@mantine/modals";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { DealProductSchema } from "@/lib/client";
import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
@ -35,7 +36,7 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
<Flex
mt={"auto"}
ml={"auto"}
gap={rem(10)}>
gap={"sm"}>
{/*<Tooltip*/}
{/* onClick={onPrintBarcodeClick}*/}
{/* label="Печать штрихкода">*/}
@ -43,20 +44,16 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
{/* <IconBarcode />*/}
{/* </ActionIcon>*/}
{/*</Tooltip>*/}
<Tooltip
<ActionIconWithTip
onClick={onProductEditClick}
label="Редактировать товар">
<ActionIcon variant={"default"}>
tipLabel="Редактировать товар">
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
</ActionIconWithTip>
<ActionIconWithTip
onClick={() => dealProductsCrud.onDelete(dealProduct)}
label="Удалить товар">
<ActionIcon variant={"default"}>
tipLabel="Удалить товар">
<IconTrash />
</ActionIcon>
</Tooltip>
</ActionIconWithTip>
</Flex>
);
};

30
src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx
View File

@ -1,7 +1,8 @@
import { useMemo } from "react";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { ActionIcon, Box, Flex, Text, Tooltip } from "@mantine/core";
import { Box, Flex, Text } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { ProductServiceSchema } from "@/lib/client";
type Props = {
@ -31,21 +32,20 @@ const useProductServicesTableColumns = ({
textAlign: "center",
width: "0%",
render: dealProductService => (
<Flex gap="md">
<Tooltip label="Удалить">
<ActionIcon
onClick={() => onDelete(dealProductService)}
variant={"default"}>
<Flex
gap="md"
px={"sm"}
my={"sm"}>
<ActionIconWithTip
tipLabel={"Удалить услугу"}
onClick={() => onDelete(dealProductService)}>
<IconTrash />
</ActionIcon>
</Tooltip>
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onChange(dealProductService)}
variant={"default"}>
</ActionIconWithTip>
<ActionIconWithTip
tipLabel="Редактировать"
onClick={() => onChange(dealProductService)}>
<IconEdit />
</ActionIcon>
</Tooltip>
</ActionIconWithTip>
{/*<Tooltip label="Сотрудники">*/}
{/* <ActionIcon*/}
{/* onClick={() =>*/}
@ -66,7 +66,7 @@ const useProductServicesTableColumns = ({
accessor: "price",
title: "Цена",
footer: data.length > 0 && (
<Box h={"100%"}>
<Box my={"sm"}>
<Text fw={700}>
Итог: {totalPrice.toLocaleString("ru")}₽
</Text>

2
src/theme.ts
View File

@ -14,7 +14,7 @@ export const myColor: MantineColorsTuple = [
"#00718c",
];
const radius = "md";
const radius = "lg";
const font = Roboto({
subsets: ["latin"],