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

29
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,19 +44,15 @@ const DealServiceRow: FC<Props> = ({ value, onChange, onDelete }) => {
<Divider />
<Text>{value.service.name}</Text>
<Group>
<Tooltip
<ActionIconWithTip
onClick={() => onDelete(value)}
label="Удалить услугу">
<ActionIcon variant={"default"}>
<IconTrash />
</ActionIcon>
</Tooltip>
tipLabel={"Удалить услугу"}>
<IconTrash />
</ActionIconWithTip>
{/*<Tooltip label="Сотрудники">*/}
{/* <ActionIcon*/}
{/* onClick={() => onEmployeeClick(service)}*/}
{/* variant={"default"}>*/}
{/* <IconUsersGroup />*/}
{/* </ActionIcon>*/}
{/*<ActionIcon onClick={() => onEmployeeClick(service)}>*/}
{/* <IconUsersGroup />*/}
{/*</ActionIcon>*/}
{/*</Tooltip>*/}
<NumberInput
flex={1}

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>

15
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
onClick={handleChange}
variant={props.variant}>
{getIcon()}
</ActionIcon>
</Tooltip>
<ActionIconWithTip
onClick={handleChange}
variant={props.variant}>
{getIcon()}
</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;
}

41
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"}>
<Image
flex={1}
radius={rem(10)}
fit={"cover"}
// src={dealProduct.product.imageUrl}
/>
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>
);
};

30
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"}>
<Button
onClick={() => onKitAdd && onKitAdd()}
variant={"default"}>
Добавить набор услуг
</Button>
<Button
onClick={() => onDuplicateServices && onDuplicateServices()}
variant={"default"}>
Продублировать услуги
</Button>
pt={"xs"}>
{onDuplicateServices && (
<ActionIconWithTip
tipLabel={"Продублировать услуги"}
onClick={onDuplicateServices}>
<IconCopy />
</ActionIconWithTip>
)}
{onKitAdd && (
<Button
onClick={onKitAdd}
variant={"default"}>
Добавить набор услуг
</Button>
)}
<Button
onClick={onCreateClick}
variant={"default"}>

25
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"}>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
tipLabel="Редактировать товар">
<IconEdit />
</ActionIconWithTip>
<ActionIconWithTip
onClick={() => dealProductsCrud.onDelete(dealProduct)}
label="Удалить товар">
<ActionIcon variant={"default"}>
<IconTrash />
</ActionIcon>
</Tooltip>
tipLabel="Удалить товар">
<IconTrash />
</ActionIconWithTip>
</Flex>
);
};

34
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"}>
<IconTrash />
</ActionIcon>
</Tooltip>
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onChange(dealProductService)}
variant={"default"}>
<IconEdit />
</ActionIcon>
</Tooltip>
<Flex
gap="md"
px={"sm"}
my={"sm"}>
<ActionIconWithTip
tipLabel={"Удалить услугу"}
onClick={() => onDelete(dealProductService)}>
<IconTrash />
</ActionIconWithTip>
<ActionIconWithTip
tipLabel="Редактировать"
onClick={() => onChange(dealProductService)}>
<IconEdit />
</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>