add i18n, products, productors and forms as tables

2026-02-12 00:30:28 +01:00
parent 1813e2893e
commit 025b78d5dd
43 changed files with 1623 additions and 527 deletions
--- a/frontend/src/pages/Products/index.tsx
+++ b/frontend/src/pages/Products/index.tsx
@@ -0,0 +1,129 @@
+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 type { Product, 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 types = useMemo(() => {
+        return allProducts?.map((product: Product) => (product.type))
+            .filter((product, index, array) => array.indexOf(product) === index)
+    }, [allProducts])
+
+    const createProductMutation = createProduct();
+    const editProductMutation = editProduct();
+
+    const handleCreateProduct = useCallback(async (product: ProductInputs) => {
+        await createProductMutation.mutateAsync({
+            ...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
+                names={names || []}
+                types={types || []}
+                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>
+    );
+}