127 lines
5.0 KiB
TypeScript
127 lines
5.0 KiB
TypeScript
import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
|
|
import { t } from "@/config/i18n";
|
|
import { createProduct, editProduct, getProducts } from "@/services/api";
|
|
import { IconPlus } from "@tabler/icons-react";
|
|
import ProductRow from "@/components/Products/Row";
|
|
import { useLocation, useNavigate, useSearchParams } from "react-router";
|
|
import { ProductModal } from "@/components/Products/Modal";
|
|
import { useCallback, useMemo } from "react";
|
|
import { productCreateFromProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
|
|
import ProductsFilters from "@/components/Products/Filter";
|
|
|
|
export default function Products() {
|
|
const [ searchParams, setSearchParams ] = useSearchParams();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const isCreate = location.pathname === "/dashboard/products/create";
|
|
const isEdit = location.pathname.includes("/edit");
|
|
|
|
const closeModal = () => {
|
|
navigate("/dashboard/products");
|
|
};
|
|
|
|
const {data: products, isPending} = getProducts(searchParams);
|
|
const {data: allProducts } = getProducts();
|
|
|
|
const names = useMemo(() => {
|
|
return allProducts?.map((product: Product) => (product.name))
|
|
.filter((season, index, array) => array.indexOf(season) === index)
|
|
}, [allProducts])
|
|
|
|
const productors = useMemo(() => {
|
|
return allProducts?.map((form: Product) => (form.productor.name))
|
|
.filter((productor, index, array) => array.indexOf(productor) === index)
|
|
}, [allProducts])
|
|
|
|
const createProductMutation = createProduct();
|
|
const editProductMutation = editProduct();
|
|
|
|
const handleCreateProduct = useCallback(async (product: ProductInputs) => {
|
|
await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
|
|
closeModal();
|
|
}, [createProductMutation]);
|
|
|
|
const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
|
|
if (!id)
|
|
return;
|
|
await editProductMutation.mutateAsync({
|
|
id: id,
|
|
product: product
|
|
});
|
|
closeModal();
|
|
}, []);
|
|
|
|
const onFilterChange = useCallback((values: string[], filter: string) => {
|
|
setSearchParams(prev => {
|
|
const params = new URLSearchParams(prev);
|
|
params.delete(filter);
|
|
|
|
values.forEach(value => {
|
|
params.append(filter, value);
|
|
});
|
|
|
|
return params;
|
|
});
|
|
}, [searchParams, setSearchParams])
|
|
|
|
if (!products || isPending)
|
|
return <Loader/>
|
|
|
|
return (
|
|
<Stack>
|
|
<Group justify="space-between">
|
|
<Title order={2}>{t("all products", {capfirst: true})}</Title>
|
|
<Tooltip label={t("create product", {capfirst: true})}>
|
|
<ActionIcon
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigate(`/dashboard/products/create`);
|
|
}}
|
|
>
|
|
<IconPlus/>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<ProductModal
|
|
opened={isCreate}
|
|
onClose={closeModal}
|
|
handleSubmit={handleCreateProduct}
|
|
/>
|
|
</Group>
|
|
<ProductsFilters
|
|
productors = {productors || []}
|
|
names={names || []}
|
|
filters={searchParams}
|
|
onFilterChange={onFilterChange}
|
|
/>
|
|
<ScrollArea type="auto">
|
|
<Table striped>
|
|
<Table.Thead>
|
|
<Table.Tr>
|
|
<Table.Th>{t("name", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("type", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("price", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("priceKg", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("weight", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("unit", {capfirst: true})}</Table.Th>
|
|
<Table.Th>{t("actions", {capfirst: true})}</Table.Th>
|
|
</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>
|
|
{
|
|
products.map((product) => (
|
|
<ProductRow
|
|
product={product}
|
|
isEdit={isEdit}
|
|
closeModal={closeModal}
|
|
handleSubmit={handleEditProduct}
|
|
|
|
/>
|
|
))
|
|
}
|
|
</Table.Tbody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</Stack>
|
|
);
|
|
} |