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

feat: deal product services

Browse Source
This commit is contained in:
fakz9
2024-05-13 07:46:24 +03:00
parent 0ebb1d5e08
commit 6acb34271d
19 changed files with 401 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/index.ts
View File

@@ -21,6 +21,8 @@ export type { BarcodeTemplateSchema } from './models/BarcodeTemplateSchema';
export type { BarcodeTemplateSizeSchema } from './models/BarcodeTemplateSizeSchema';
export type { BarcodeTemplateUpdateRequest } from './models/BarcodeTemplateUpdateRequest';
export type { BarcodeTemplateUpdateResponse } from './models/BarcodeTemplateUpdateResponse';
export type { BaseEnumListSchema } from './models/BaseEnumListSchema';
export type { BaseEnumSchema } from './models/BaseEnumSchema';
export type { ClientCreateRequest } from './models/ClientCreateRequest';
export type { ClientCreateResponse } from './models/ClientCreateResponse';
export type { ClientDeleteRequest } from './models/ClientDeleteRequest';
@@ -55,6 +57,7 @@ export type { DealDeleteServicesResponse } from './models/DealDeleteServicesResp
export type { DealGeneralInfoSchema } from './models/DealGeneralInfoSchema';
export type { DealGetAllResponse } from './models/DealGetAllResponse';
export type { DealProductSchema } from './models/DealProductSchema';
export type { DealProductServiceSchema } from './models/DealProductServiceSchema';
export type { DealQuickCreateRequest } from './models/DealQuickCreateRequest';
export type { DealQuickCreateResponse } from './models/DealQuickCreateResponse';
export type { DealSchema } from './models/DealSchema';
@@ -100,6 +103,7 @@ export type { ServiceDeleteRequest } from './models/ServiceDeleteRequest';
export type { ServiceDeleteResponse } from './models/ServiceDeleteResponse';
export type { ServiceGetAllCategoriesResponse } from './models/ServiceGetAllCategoriesResponse';
export type { ServiceGetAllResponse } from './models/ServiceGetAllResponse';
export type { ServicePriceRangeSchema } from './models/ServicePriceRangeSchema';
export type { ServiceSchema } from './models/ServiceSchema';
export type { ServiceUpdateRequest } from './models/ServiceUpdateRequest';
export type { ServiceUpdateResponse } from './models/ServiceUpdateResponse';

9
src/client/models/BaseEnumListSchema.ts Normal file
View File

@@ -0,0 +1,9 @@
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BaseEnumSchema } from './BaseEnumSchema';
export type BaseEnumListSchema = {
items: Array<BaseEnumSchema>;
};

9
src/client/models/BaseEnumSchema.ts Normal file
View File

@@ -0,0 +1,9 @@
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type BaseEnumSchema = {
id: number;
name: string;
};

2
src/client/models/DealProductSchema.ts
View File

@@ -2,9 +2,11 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { DealProductServiceSchema } from './DealProductServiceSchema';
import type { ProductSchema } from './ProductSchema';
export type DealProductSchema = {
product: ProductSchema;
services: Array<DealProductServiceSchema>;
quantity: number;
};

1
src/client/models/DealServiceSchema.ts
View File

@@ -6,5 +6,6 @@ import type { ServiceSchema } from './ServiceSchema';
export type DealServiceSchema = {
service: ServiceSchema;
quantity: number;
price: number;
};

11
src/client/models/ServicePriceRangeSchema.ts Normal file
View File

@@ -0,0 +1,11 @@
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type ServicePriceRangeSchema = {
id: (number | null);
fromQuantity: number;
toQuantity: number;
price: number;
};

3
src/client/models/ServiceSchema.ts
View File

@@ -3,10 +3,13 @@
/* tslint:disable */
/* eslint-disable */
import type { ServiceCategorySchema } from './ServiceCategorySchema';
import type { ServicePriceRangeSchema } from './ServicePriceRangeSchema';
export type ServiceSchema = {
id: number;
name: string;
category: ServiceCategorySchema;
price: number;
serviceType: number;
priceRanges: Array<ServicePriceRangeSchema>;
};

12
src/client/services/ServiceService.ts
View File

@@ -2,6 +2,7 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BaseEnumListSchema } from '../models/BaseEnumListSchema';
import type { ServiceCreateCategoryRequest } from '../models/ServiceCreateCategoryRequest';
import type { ServiceCreateCategoryResponse } from '../models/ServiceCreateCategoryResponse';
import type { ServiceCreateRequest } from '../models/ServiceCreateRequest';
@@ -118,4 +119,15 @@ export class ServiceService {
},
});
}
/**
* Get All Service Types
* @returns BaseEnumListSchema Successful Response
* @throws ApiError
*/
public static getAllServiceTypes(): CancelablePromise<BaseEnumListSchema> {
return __request(OpenAPI, {
method: 'GET',
url: '/service/types/get-all',
});
}
}

68
src/components/Selects/BaseEnumSelect/BaseEnumSelect.tsx Normal file
View File

@@ -0,0 +1,68 @@
import {BaseEnumListSchema, type CancelablePromise} from "../../../client";
import {FC, useEffect, useMemo, useState} from "react";
import {useQuery} from "@tanstack/react-query";
import {Select, SelectProps} from "@mantine/core";
import {omit} from "lodash";
type ControlledValueProps = {
value: number,
onChange: (value: number) => void;
}
type RestProps = {
defaultValue?: number;
onChange: (value: number) => void;
fetchFn: () => CancelablePromise<BaseEnumListSchema>;
queryKey: string;
}
export type BaseEnumSelectProps =
(RestProps & Partial<ControlledValueProps>)
& Omit<SelectProps, 'value' | 'onChange' | 'data' | 'defaultValue'>;
export type EnumSelectProps = Omit<BaseEnumSelectProps, 'fetchFn' | 'queryKey'>;
const BaseEnumSelect: FC<BaseEnumSelectProps> = (props: BaseEnumSelectProps) => {
const {data: queryData = []} = useQuery({
queryKey: [props.queryKey],
queryFn: props.fetchFn,
select: data => data.items || []
})
const isControlled = 'value' in props;
const [internalValue, setInternalValue] = useState<number | undefined>(props.defaultValue);
const value = isControlled ? props.value : internalValue;
const selectData = useMemo(() => queryData.reduce((acc, item) => {
acc.push({
label: item.name,
value: item.id.toString()
});
return acc;
}, [] as { label: string, value: string }[]), [queryData]);
const handleOnChange = (event: string | null) => {
if (typeof event === 'undefined' || event === null) return;
const object = queryData.find(item => event == item.id.toString());
if (!object) return;
if (isControlled) {
props.onChange(parseInt(event));
return;
}
setInternalValue(parseInt(event));
}
const restProps = omit(props, ['fetchFn', 'queryKey'])
useEffect(() => {
if (isControlled || typeof internalValue === 'undefined') return;
props.onChange(internalValue);
}, [internalValue]);
return (
<Select
{...restProps}
defaultValue={props.defaultValue ? props.defaultValue.toString() : undefined}
value={value?.toString()}
onChange={handleOnChange}
data={selectData}
/>
)
}
export default BaseEnumSelect;

25
src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx Normal file
View File

@@ -0,0 +1,25 @@
import {FC} from "react";
import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
import {ServiceSchema} from "../../../client";
import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
import {omit} from "lodash";
import {ServiceType} from "../../../shared/enums/ServiceType.ts";
type RestProps = {
filterType?: ServiceType;
}
type Props = Omit<ObjectSelectProps<ServiceSchema>, 'data'> & RestProps;
const ServiceSelectNew: FC<Props> = (props: Props) => {
const {services} = useServicesList();
const data = props.filterType ? services.filter(service => service.serviceType === props.filterType) : services;
const restProps = omit(props, ['filterType']);
return (
<ObjectSelect
{...restProps}
data={data}
/>
)
}
export default ServiceSelectNew;

30
src/pages/LeadsPage/components/DealProductsTable/DealProductServiceTable.tsx Normal file
View File

@@ -0,0 +1,30 @@
import {Checkbox, Flex, NumberInput} from "@mantine/core";
import ServiceSelectNew from "../../../../components/Selects/ServiceSelectNew/ServiceSelectNew.tsx";
import {ServiceType} from "../../../../shared/enums/ServiceType.ts";
import {useForm} from "@mantine/form";
import {DealProductServiceSchema} from "../../../../client";
const DealProductServiceTable = () => {
const initialValues: Partial<DealProductServiceSchema> = {}
const form = useForm<Partial<DealProductServiceSchema>>(
);
return (
<Flex direction={"column"}>
<ServiceSelectNew
filterType={ServiceType.PRODUCT_SERVICE}
onChange={() => {
}}/>
<NumberInput
label={"Количество"}
/>
<Checkbox
label={"Привязать количество услуг к количеству товара"}
/>
<NumberInput
label={"Цена за единицу"}
/>
</Flex>
)
}
export default DealProductServiceTable;

100
src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx Normal file
View File

@@ -0,0 +1,100 @@
import {BaseFormInputProps} from "../../../../types/utils.ts";
import {ServicePriceRangeSchema} from "../../../../client";
import {FC, useEffect, useState} from "react";
import {ActionIcon, Button, Flex, Input, NumberInput, rem} from "@mantine/core";
import {IconTrash} from "@tabler/icons-react";
import {isNumber} from "lodash";
export type PriceRangeInputType = BaseFormInputProps<ServicePriceRangeSchema[]>;
const RangePriceInput: FC<PriceRangeInputType> = (props: PriceRangeInputType) => {
const {value} = props;
const [innerValue, setInnerValue] = useState<ServicePriceRangeSchema[]>(props.value || []);
const onAddRange = () => {
const newRange = {
fromQuantity: 0,
toQuantity: 0,
price: 0,
id: null
}
setInnerValue([...innerValue, newRange]);
props.onChange([...innerValue, newRange]);
}
const onDeleteRange = (idx: number) => {
const newRanges = innerValue.filter((_, i) => i !== idx);
setInnerValue(newRanges);
props.onChange(newRanges);
}
const onFromQuantityChange = (idx: number, value: number) => {
const newRanges = innerValue.map((item, i) => i === idx ? {
...item,
fromQuantity: value
} : item);
setInnerValue(newRanges);
props.onChange(newRanges);
}
const onToQuantityChange = (idx: number, value: number) => {
const newRanges = innerValue.map((item, i) => i === idx ? {
...item,
toQuantity: value
} : item);
setInnerValue(newRanges);
props.onChange(newRanges);
}
const onPriceChange = (idx: number, value: number) => {
const newRanges = innerValue.map((item, i) => i === idx ? {
...item,
price: value
} : item);
setInnerValue(newRanges);
props.onChange(newRanges);
}
useEffect(() => {
if (props.value === innerValue) return;
setInnerValue(props.value || []);
}, [value]);
return (
<Input.Wrapper error={props.error} label={"Диапазон цен"}>
<Flex direction={"column"} gap={rem(10)}>
{innerValue.map((range, idx) => (
<Flex
key={idx}
gap={rem(10)}
align={"flex-end"}
>
<ActionIcon onClick={() => onDeleteRange(idx)} variant={"default"}>
<IconTrash/>
</ActionIcon>
<NumberInput
label={"От количества"}
placeholder={"От"}
hideControls
value={range.fromQuantity}
onChange={event => (event && isNumber(event)) && onFromQuantityChange(idx, event)}
/>
<NumberInput
label={"До количества"}
placeholder={"До"}
hideControls
value={range.toQuantity}
onChange={event => (event && isNumber(event)) && onToQuantityChange(idx, event)}
/>
<NumberInput
label={"Цена"}
placeholder={"Цена"}
hideControls
value={range.price}
onChange={event => (event && isNumber(event)) && onPriceChange(idx, event)}
/>
</Flex>
))}
<Button onClick={onAddRange}>Добавить диапазон</Button>
</Flex>
</Input.Wrapper>
)
}
export default RangePriceInput

38
src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx Normal file
View File

@@ -0,0 +1,38 @@
import {FC, useState} from "react";
import {Button, Flex} from "@mantine/core";
import SinglePriceInput, {PriceInputType} from "./SinglePriceInput.tsx";
import RangePriceInput, {PriceRangeInputType} from "./RangePriceInput.tsx";
type Props = {
singlePriceInputProps: PriceInputType;
priceRangeInputProps: PriceRangeInputType;
}
const ServicePriceInput: FC<Props> = ({priceRangeInputProps, singlePriceInputProps}) => {
const [isUsingRange, setIsUsingRange] = useState<boolean>(true);
return (
<>
<Flex
direction={"column"}
gap={10}
>
{isUsingRange ?
<RangePriceInput
{...priceRangeInputProps}
/> :
<SinglePriceInput
{...singlePriceInputProps}
/>}
<Button
variant={"default"}
onClick={() => setIsUsingRange(!isUsingRange)}
>
{isUsingRange ? "Использовать одну цену" : "Использовать диапазон цен"}
</Button>
</Flex>
</>
)
}
export default ServicePriceInput;

14
src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx Normal file
View File

@@ -0,0 +1,14 @@
import {FC} from "react";
import {NumberInput, NumberInputProps} from "@mantine/core";
export type PriceInputType = NumberInputProps;
const SinglePriceInput: FC<PriceInputType> = (props) => {
return (
<NumberInput
{...props}
/>
)
}
export default SinglePriceInput;

15
src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx Normal file
View File

@@ -0,0 +1,15 @@
import {ServiceService} from "../../../../client";
import {FC} from "react";
import BaseEnumSelect, {EnumSelectProps} from "../../../../components/Selects/BaseEnumSelect/BaseEnumSelect.tsx";
const ServiceTypeSelect: FC<EnumSelectProps> = (props: EnumSelectProps) => {
return (
<BaseEnumSelect
{...props}
fetchFn={ServiceService.getAllServiceTypes}
queryKey='getAllServiceTypes'
/>
)
}
export default ServiceTypeSelect;

49
src/pages/ServicesPage/modals/CreateServiceModal.tsx
View File

@@ -1,9 +1,12 @@
import {ServiceSchema} from "../../../client";
import {ServicePriceRangeSchema, ServiceSchema} from "../../../client";
import {useForm} from "@mantine/form";
import {ContextModalProps} from "@mantine/modals";
import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {NumberInput, TextInput} from "@mantine/core";
import {TextInput} from "@mantine/core";
import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
import ServicePriceInput from "../components/ServicePriceInput/ServicePriceInput.tsx";
import {PriceRangeInputType} from "../components/ServicePriceInput/RangePriceInput.tsx";
type Props = CreateEditFormProps<ServiceSchema>
const CreateServiceModal = ({
@@ -13,32 +16,35 @@ const CreateServiceModal = ({
}: ContextModalProps<Props>) => {
const isEditing = 'onChange' in innerProps;
const initialValues: ServiceSchema = isEditing ? {
id: innerProps.element.id,
name: innerProps.element.name,
price: innerProps.element.price,
category: innerProps.element.category,
} : {
const initialValues: ServiceSchema = isEditing ? innerProps.element : {
id: -1,
name: '',
price: 0,
category: {
id: -1,
name: ''
}
},
serviceType: -1,
priceRanges: [] as ServicePriceRangeSchema[]
}
const form = useForm<ServiceSchema>({
initialValues: initialValues,
validate: {
name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название услуги",
price: (price: number) => price > 0 ? null : "Цена должна быть больше 0",
category: (category: {
id: number,
name: string
}) => category.id !== -1 ? null : "Необходимо выбрать категорию"
}) => category.id !== -1 ? null : "Необходимо выбрать категорию",
serviceType: (serviceType: number) => serviceType !== -1 ? null : "Необходимо выбрать тип услуги",
priceRanges: (value, values) => value.length > 0 || values.price > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
price: (value, values) => value > 0 || values.priceRanges.length > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги"
}
})
console.log(form.values)
const onCancelClick = () => {
context.closeContextModal(id);
}
@@ -62,12 +68,21 @@ const CreateServiceModal = ({
label={"Название услуги"}
{...form.getInputProps('name')}
/>
<NumberInput
placeholder={"Введите стоимость услуги"}
label={"Стоимость услуги"}
hideControls
decimalScale={2}
{...form.getInputProps('price')}
<ServiceTypeSelect
placeholder={"Выберите тип услуги"}
label={"Тип услуги"}
{...form.getInputProps('serviceType')}
/>
<ServicePriceInput
singlePriceInputProps={{
hideControls: true,
label: "Цена за единицу услуги",
placeholder: "Введите цену за одну услугу",
...form.getInputProps('price'),
}}
priceRangeInputProps={{
...form.getInputProps('priceRanges')
} as PriceRangeInputType}
/>
</>
</BaseFormModal.Body>

31
src/routes/test.lazy.tsx
View File

@@ -1,26 +1,31 @@
import {createLazyFileRoute} from "@tanstack/react-router";
import {useEffect} from "react";
import {openContextModal} from "@mantine/modals";
import ServiceSelectNew from "../components/Selects/ServiceSelectNew/ServiceSelectNew.tsx";
import {ServiceType} from "../shared/enums/ServiceType.ts";
export const Route = createLazyFileRoute('/test')({
component: TestPage
})
const data = [{
label: "test",
value: '0'
},
{
label: "test2",
value: '1'
}
]
function TestPage() {
useEffect(() => {
openContextModal({
modal: "barcodeTemplateFormModal",
withCloseButton: false,
innerProps: {
onCreate: () => {
}
}
})
}, []);
return (
<>
<ServiceSelectNew
filterType={ServiceType.PRODUCT_SERVICE}
onChange={() => {
}}
/>
</>
);
}

4
src/shared/enums/ServiceType.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum ServiceType {
DEAL_SERVICE,
PRODUCT_SERVICE
}

6
src/types/utils.ts
View File

@@ -2,3 +2,9 @@ export type ObjectWithNameAndId = {
id: number;
name: string;
}
export type BaseFormInputProps<T> = {
onChange: (value: T) => void;
value: T;
error?: string | null;
}