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

feat: additional stuff

Browse Source
This commit is contained in:
fakz9
2024-08-08 09:07:39 +03:00
parent 1ad96e3a69
commit 75860395b2
6 changed files with 104 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css
View File

@@ -6,22 +6,22 @@
}
.container-disabled {
pointer-events: none;
opacity: 0.4;
}
.products-list {
width: 60%;
display: flex;
flex-direction: column;
gap: rem(10);
flex: 2;
}
.deal-container {
display: flex;
flex-direction: column;
height: 100%;
gap: rem(10);
flex: 1;
}
.deal-container-wrapper {

16
src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx
View File

@@ -19,7 +19,7 @@ import classNames from "classnames";
const ProductAndServiceTab: FC = () => {
const {dealState, dealServicesState, dealProductsState} = useDealProductAndServiceTabState();
const isLocked = Boolean(dealState.deal?.billRequest);
const onAddProductClick = () => {
if (!dealProductsState.onCreate || !dealState.deal) return;
const productIds = dealState.deal.products.map(product => product.product.id);
@@ -130,7 +130,7 @@ const ProductAndServiceTab: FC = () => {
if (!dealState.deal) return;
const dealId = dealState.deal.id;
modals.openConfirmModal({
title: "Выставление счета",
withCloseButton: false,
size: "xl",
children:
<Text style={{textAlign: "justify"}}>
@@ -181,20 +181,28 @@ const ProductAndServiceTab: FC = () => {
</ScrollArea>
</div>
<div className={styles['deal-container']}>
<ScrollArea offsetScrollbars>
<Flex direction={"column"} className={styles['deal-container-wrapper']}>
<DealServicesTable
onKitAdd={onDealKitAdd}
{...dealServicesState}
/>
<Divider my={rem(15)}/>
<div className={styles['deal-container-buttons']}>
<Button
disabled={isLocked}
variant={"default"}
fullWidth
onClick={onCreateProductClick}
>Создать товар</Button>
<Button
disabled={isLocked}
onClick={onAddProductClick}
variant={"default"}
fullWidth>Добавить товар</Button>
@@ -202,14 +210,18 @@ const ProductAndServiceTab: FC = () => {
<Divider my={rem(15)}/>
<div className={styles['deal-container-buttons']}>
<Button
disabled={isLocked}
onClick={onCreateBillClick}
variant={"default"}
fullWidth>Выставить счет</Button>
</div>
</Flex>
<Flex direction={"column"} className={styles['deal-container-wrapper']}>
<Title order={3}>Общая стоимость всех услуг: {getTotalPrice().toLocaleString("ru")}₽</Title>
</Flex>
</ScrollArea>
</div>
</div>

18
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx
View File

@@ -9,6 +9,7 @@ import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUser
import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
import {useSelector} from "react-redux";
import {RootState} from "../../../../../../redux/store.ts";
import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
type RestProps = {
onKitAdd?: (kit: GetServiceKitSchema) => void
@@ -17,6 +18,9 @@ type Props = CRUDTableProps<DealServiceSchema> & RestProps;
const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKitAdd}) => {
const authState = useSelector((state: RootState) => state.auth);
const {dealState} = useDealProductAndServiceTabState();
const isLocked = Boolean(dealState.deal?.billRequest);
const [currentService, setCurrentService] = useState<DealServiceSchema | undefined>();
const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
@@ -81,7 +85,8 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
onSelect: onKitAdd,
serviceType: ServiceType.DEAL_SERVICE
},
title: 'Печать штрихкода',
withCloseButton: false
})
}
return (
@@ -101,11 +106,11 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
style={{textAlign: "center"}}
mb={rem(10)}
>Общие услуги</Title>
<Flex
direction={"column"}
gap={rem(10)}
>
{items.map(service => (
<Flex
key={service.service.id}
@@ -114,9 +119,11 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
align={"center"}
>
<Tooltip
onClick={() => onDeleteClick(service)}
label="Удалить услугу">
<ActionIcon
disabled={isLocked}
variant={"default"}>
<IconTrash/>
</ActionIcon>
@@ -132,15 +139,18 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
flex={1}
>{service.service.name}</Text>
<NumberInput
disabled={isLocked}
flex={1}
suffix={" шт."}
onChange={event => isNumber(event) && onQuantityChange(service, event)}
value={service.quantity}
/>
<NumberInput
flex={1}
onChange={event => isNumber(event) && onPriceChange(service, event)}
suffix={"₽"}
value={service.price}
disabled={authState.isGuest}
disabled={authState.isGuest || isLocked}
/>
</Flex>
))}
@@ -154,11 +164,13 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKi
</Flex>
<Flex direction={"column"} gap={rem(10)} mt={"auto"}>
<Button
disabled={isLocked}
onClick={onCreateClick}
fullWidth
variant={"default"}
>Добавить услугу</Button>
<Button
disabled={isLocked}
onClick={onAddKitClick}
fullWidth
variant={"default"}

30
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx
View File

@@ -10,6 +10,7 @@ import {modals} from "@mantine/modals";
import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUsersTable.tsx";
import {useSelector} from "react-redux";
import {RootState} from "../../../../../../redux/store.ts";
import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
type RestProps = {
quantity: number;
@@ -27,6 +28,8 @@ const ProductServicesTable: FC<Props> = ({
onCopyServices,
onKitAdd
}) => {
const {dealState} = useDealProductAndServiceTabState();
const isLocked = Boolean(dealState.deal?.billRequest);
const authState = useSelector((state: RootState) => state.auth);
const columns = useProductServicesTableColumns({data: items, quantity});
@@ -99,14 +102,26 @@ const ProductServicesTable: FC<Props> = ({
enableBottomToolbar: true,
renderBottomToolbar: (
<Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
<Button onClick={() => onKitAdd && onKitAdd()} variant={"default"}>
<Button
disabled={isLocked}
onClick={() => onKitAdd && onKitAdd()}
variant={"default"}
>
Добавить набор услуг
</Button>
<Button onClick={() => onCopyServices && onCopyServices()} variant={"default"}>
<Button
disabled={isLocked}
onClick={() => onCopyServices && onCopyServices()}
variant={"default"}
>
Продублировать услуги
</Button>
<Button onClick={onCreateClick} variant={"default"}>
<Button
disabled={isLocked}
onClick={onCreateClick}
variant={"default"}
>
Добавить услугу
</Button>
@@ -115,14 +130,19 @@ const ProductServicesTable: FC<Props> = ({
renderRowActions: ({row}) => (
<Flex gap="md">
<Tooltip label="Удалить">
<ActionIcon onClick={() => {
<ActionIcon
onClick={() => {
if (onDelete) onDelete(row.original);
}} variant={"default"}>
<IconTrash/>
</ActionIcon>
</Tooltip>
<Tooltip label="Редактировать">
<Tooltip
label="Редактировать">
<ActionIcon
onClick={() => onChangeClick(row.original)}
variant={"default"}>
<IconEdit/>

2
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css
View File

@@ -5,6 +5,7 @@
gap: rem(20);
padding: rem(10);
margin-bottom: rem(10);
flex: 1;
}
.image-container {
@@ -26,6 +27,7 @@
display: flex;
flex-direction: column;
gap: rem(10);
flex: 1;
}
.attributes-container {

17
src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx
View File

@@ -6,12 +6,13 @@ import {
ProductSchema
} from "../../../../../../client";
import styles from './ProductView.module.css';
import {ActionIcon, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
import {ActionIcon, Box, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
import {isNil, isNumber} from "lodash";
import {IconBarcode, IconEdit, IconTrash} from "@tabler/icons-react";
import {modals} from "@mantine/modals";
import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
import useDealProductAndServiceTabState from "../../hooks/useProductAndServiceTabState.tsx";
type Props = {
product: DealProductSchema;
@@ -40,6 +41,8 @@ const ProductView: FC<Props> = ({
onKitAdd,
onProductEdit
}) => {
const {dealState} = useDealProductAndServiceTabState();
const isLocked = Boolean(dealState.deal?.billRequest);
const onDeleteClick = () => {
if (!onDelete) return;
onDelete(product);
@@ -95,7 +98,7 @@ const ProductView: FC<Props> = ({
onSelect: (kit) => onKitAdd(product, kit),
serviceType: ServiceType.PRODUCT_SERVICE
},
title: 'Печать штрихкода',
withCloseButton: false
})
}
@@ -134,7 +137,10 @@ const ProductView: FC<Props> = ({
</Spoiler>
</div>
<Box/>
<NumberInput
mt={rem(10)}
disabled={isLocked}
suffix={" шт."}
value={product.quantity}
onChange={event => isNumber(event) && onQuantityChange(event)}
@@ -158,9 +164,11 @@ const ProductView: FC<Props> = ({
gap={rem(10)}
>
<Tooltip
onClick={onPrintBarcodeClick}
label="Печать штрихкода">
<ActionIcon
variant={"default"}>
<IconBarcode/>
</ActionIcon>
@@ -169,13 +177,16 @@ const ProductView: FC<Props> = ({
onClick={onProductEditClick}
label="Редактировать товар">
<ActionIcon
variant={"default"}>
<IconEdit/>
</ActionIcon>
</Tooltip>
<Tooltip onClick={onDeleteClick} label="Удалить товар">
<ActionIcon
variant={"default"}>
disabled={isLocked}
variant={"default"}
>
<IconTrash/>
</ActionIcon>
</Tooltip>