121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
|
||
import {FC, useEffect, useState} from "react";
|
||
import styles from './ProductsPage.module.css';
|
||
import {Button, Text, Pagination} from "@mantine/core";
|
||
import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
|
||
import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
|
||
import {modals} from "@mantine/modals";
|
||
import {notifications} from "../../../shared/lib/notifications.ts";
|
||
import {CreateProductRequest} from "../types.ts";
|
||
import {ProductSchema, ProductService} from "../../../client";
|
||
import ServiceSelect from "../../../components/ServiceSelect/ServiceSelect.tsx";
|
||
import useProductsList from "../hooks/useProductsList.tsx";
|
||
import useServicesList from "../../ServicesPage/hooks/useServicesList.tsx";
|
||
|
||
export const ProductsPage: FC = () => {
|
||
const [clientId, setClientId] = useState(-1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
|
||
const {products, paginationInfo, refetch} = useProductsList({
|
||
clientId,
|
||
page: currentPage - 1,
|
||
itemsPerPage: 10
|
||
});
|
||
const onProductCreate = (request: CreateProductRequest) => {
|
||
ProductService.createProduct({requestBody: request})
|
||
.then(async ({ok, message}) => {
|
||
notifications.guess(ok, {message: message});
|
||
if (!ok) return;
|
||
await refetch();
|
||
});
|
||
}
|
||
|
||
const onProductChange = (product: ProductSchema) => {
|
||
ProductService.updateProduct({requestBody: {product}})
|
||
.then(async ({ok, message}) => {
|
||
notifications.guess(ok, {message});
|
||
if (!ok) return;
|
||
await refetch();
|
||
})
|
||
}
|
||
|
||
const onCreateProductClick = () => {
|
||
if (clientId < 0) {
|
||
notifications.error({message: "Необходимо выбрать клиента"});
|
||
return
|
||
}
|
||
modals.openContextModal({
|
||
modal: "createProduct",
|
||
title: 'Создание товара',
|
||
withCloseButton: false,
|
||
innerProps: {
|
||
clientId,
|
||
onCreate: onProductCreate
|
||
}
|
||
})
|
||
}
|
||
|
||
const onDeleteClick = (product: ProductSchema) => {
|
||
modals.openConfirmModal({
|
||
title: 'Удаление товара',
|
||
centered: true,
|
||
children: (
|
||
<Text size="sm">
|
||
Вы уверены что хотите удалить товар {product.name}
|
||
</Text>
|
||
),
|
||
labels: {confirm: 'Да', cancel: "Нет"},
|
||
confirmProps: {color: 'red'},
|
||
onConfirm: () =>
|
||
ProductService.deleteProduct({requestBody: {productId: product.id}})
|
||
.then(async ({ok, message}) => {
|
||
notifications.guess(ok, {message: message});
|
||
if (!ok) return;
|
||
await refetch();
|
||
})
|
||
});
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!paginationInfo) return;
|
||
setTotalPages(paginationInfo.totalPages);
|
||
}, [paginationInfo]);
|
||
return (
|
||
<>
|
||
<div className={styles['container']}>
|
||
<PageBlock>
|
||
<div className={styles['top-panel']}>
|
||
<ClientSelect onChange={event => setClientId(event.id)}/>
|
||
<Button
|
||
onClick={() => onCreateProductClick()}
|
||
variant={"default"}
|
||
>Создать</Button>
|
||
{/*<ServiceSelect*/}
|
||
{/* value={selectedService}*/}
|
||
{/* onChange={setSelectedService}/>*/}
|
||
</div>
|
||
</PageBlock>
|
||
<PageBlock>
|
||
<div className={styles['body-container']}>
|
||
<div className={styles['table-container']}>
|
||
<ProductsTable
|
||
onChange={onProductChange}
|
||
onDelete={onDeleteClick}
|
||
items={products}
|
||
/>
|
||
<Pagination
|
||
className={styles['table-pagination']}
|
||
withEdges
|
||
onChange={event => setCurrentPage(event)}
|
||
total={totalPages}
|
||
value={currentPage}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</PageBlock>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|