crap

2024-03-31 07:36:24 +03:00
parent 98a6dee996
commit 6328ac877a
38 changed files with 385 additions and 106 deletions
--- a/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx
+++ b/src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx
@@ -1,24 +1,56 @@
 import {ProductSchema} from "../../../../client";
-import {FC, RefObject} from "react";
-import {BaseTable, BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
+import {FC} from "react";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
 import {MRT_TableOptions} from "mantine-react-table";
 import {useProductsTableColumns} from "./columns.tsx";
+import {ActionIcon, Flex, Tooltip} from "@mantine/core";
+import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {modals} from "@mantine/modals";

-type Props = {
-    products: ProductSchema[];
-    tableRef?: RefObject<BaseTableRef<ProductSchema>>
-}
-const ProductsTable: FC<Props> = ({products, tableRef}) => {
+
+const ProductsTable: FC<CRUDTableProps<ProductSchema>> = ({items, onDelete, onChange, tableRef}) => {
    const columns = useProductsTableColumns();
+    const onEditClick = (product: ProductSchema) => {
+        if (!onChange) return;
+        modals.openContextModal({
+            modal: "createProduct",
+            title: 'Создание товара',
+            withCloseButton: false,
+            innerProps: {
+                onChange: (newProduct) => onChange(newProduct),
+                product: product,
+            }
+        })
+    }
    return (
-            <BaseTable
-                ref={tableRef}
-                data={products}
-                columns={columns}
-                restProps={{
-                    enableColumnActions: false,
-                } as MRT_TableOptions<ProductSchema>}
-            />
+        <BaseTable
+            ref={tableRef}
+            data={items}
+            columns={columns}
+            restProps={{
+                enableColumnActions: false,
+                enableRowActions: true,
+                renderRowActions: ({row}) => (
+                    <Flex gap="md">
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                onClick={() => onEditClick(row.original)}
+                                variant={"default"}>
+                                <IconEdit/>
+                            </ActionIcon>
+                        </Tooltip>
+                        <Tooltip label="Удалить">
+                            <ActionIcon onClick={() => {
+                                if (onDelete) onDelete(row.original);
+                            }} variant={"default"}>
+                                <IconTrash/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Flex>
+                )
+            } as MRT_TableOptions<ProductSchema>}
+        />
    )
 }

--- a/src/pages/ProductsPage/components/ProductsTable/columns.tsx
+++ b/src/pages/ProductsPage/components/ProductsTable/columns.tsx
@@ -1,8 +1,10 @@
 import {useMemo} from "react";
 import {MRT_ColumnDef} from "mantine-react-table";
 import {ProductSchema} from "../../../../client";
+import {List, Spoiler, useMantineTheme} from "@mantine/core";

 export const useProductsTableColumns = () => {
+    const theme = useMantineTheme();
    return useMemo<MRT_ColumnDef<ProductSchema>[]>(() => [
        {
            accessorKey: "article",
@@ -13,8 +15,27 @@ export const useProductsTableColumns = () => {
            accessorKey: "name",
            header: "Название",
            enableSorting: false,
-
        },
+        {
+            accessorKey: "barcodes",
+            header: "Штрихкоды",
+            Cell: ({cell}) => {
+                return (
+                    <List size={"sm"}>
+                        <Spoiler maxHeight={parseFloat(theme.lineHeights.sm) * 25}
+                                 showLabel={"Показать все"}
+                                 hideLabel={"Скрыть"}>
+                            {cell.getValue<string[]>().map(barcode => (
+                                <List.Item key={barcode}>
+                                    {barcode}
+                                </List.Item>
+                            ))}
+                        </Spoiler>
+
+                    </List>
+                )
+            }
+        }
    ], []);

 }
--- a/src/pages/ProductsPage/hooks/useProductsList.tsx
+++ b/src/pages/ProductsPage/hooks/useProductsList.tsx
@@ -8,12 +8,12 @@ type Props = {
 }
 const useServicesList = (props: Props) => {
    const {clientId, page, itemsPerPage} = props;
-    const {isPending, error, data, refetch} = useQuery({
+    const {data, refetch} = useQuery({
        queryKey: ['getAllServices', clientId, page, itemsPerPage],
        queryFn: () => ProductService.getProductsByClientId({clientId, page, itemsPerPage})
    });
-    const products = isPending || error || !data ? [] : data.products;
-    const paginationInfo = data?.pagination_info;
+    const products = !data ? [] : data.products;
+    const paginationInfo = data?.paginationInfo;
    return {products, paginationInfo, refetch}
 }
 export default useServicesList;
--- a/src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx
+++ b/src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx
@@ -0,0 +1,97 @@
+import {ContextModalProps} from "@mantine/modals";
+import {Button, Flex, rem, TagsInput, TextInput} from "@mantine/core";
+import {useForm} from "@mantine/form";
+import {BaseProduct, CreateProductRequest} from "../../types.ts";
+import {ProductSchema} from "../../../../client";
+
+type CreateProps = {
+    clientId: number;
+    onCreate: (values: CreateProductRequest) => void
+}
+
+type EditProps = {
+    product: ProductSchema,
+    onChange: (values: ProductSchema) => void
+}
+type Props = CreateProps | EditProps;
+
+
+const CreateProductModal = ({
+                                context,
+                                id,
+                                innerProps,
+                            }: ContextModalProps<Props>) => {
+    const isEditProps = 'product' in innerProps;
+    const isCreatingProps = 'clientId' in innerProps;
+    const initialValues = isEditProps ? {
+        name: innerProps.product.name,
+        article: innerProps.product.article,
+        barcodes: innerProps.product.barcodes
+    } : {
+        name: '',
+        article: '',
+        barcodes: []
+    };
+    const form = useForm({
+        initialValues: initialValues,
+        validate: {
+            name: (name) => name.trim() !== '' ? null : "Необходимо ввести название товара",
+            article: (article) => article.trim() !== '' ? null : "Необходимо ввести артикул",
+        }
+    })
+    const onCancelClick = () => {
+        context.closeContextModal(id);
+    }
+
+    const onSubmit = (values: BaseProduct) => {
+        if (isEditProps) innerProps.onChange({...innerProps.product, ...values})
+        if (isCreatingProps) {
+            innerProps.onCreate({...values, clientId: innerProps.clientId});
+            form.reset();
+        }
+    }
+    return (
+        <>
+            <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
+                <Flex gap={rem(10)} direction={"column"}>
+                    <TextInput
+                        placeholder={"Введите название товара"}
+                        label={"Название товара"}
+                        {...form.getInputProps('name')}
+                    />
+                    <TextInput
+                        placeholder={"Введите артикул"}
+                        label={"Артикул"}
+                        {...form.getInputProps('article')}
+                    />
+                    <TagsInput
+                        placeholder={!form.values.barcodes.length ? "Добавьте штрихкоды к товару" : ""}
+                        label={"Штрихкоды"}
+                        {...form.getInputProps('barcodes')}
+                    />
+                    <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
+                        <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
+                        {isEditProps ?
+                            <Button
+                                onClick={() => context.closeContextModal(id)}
+                                type={"submit"}
+                                variant={"default"}
+                            >Сохранить и закрыть</Button> :
+                            <>
+                                <Button
+                                    onClick={() => context.closeContextModal(id)}
+                                    type={"submit"}
+                                    variant={"default"}
+                                >Создать и закрыть</Button>
+                                <Button
+                                    type={"submit"}
+                                    variant={"default"}
+                                >Создать</Button>
+                            </>}
+                    </Flex>
+                </Flex>
+            </form>
+        </>
+    )
+};
+export default CreateProductModal;
--- a/src/pages/ProductsPage/types.ts
+++ b/src/pages/ProductsPage/types.ts
@@ -0,0 +1,6 @@
+export type BaseProduct = {
+    name: string;
+    article: string;
+    barcodes: string[];
+}
+export type CreateProductRequest = BaseProduct & { clientId: number }
--- a/src/pages/ProductsPage/ui/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ui/ProductsPage.tsx
@@ -1,37 +1,83 @@
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import {FC, useEffect, useState} from "react";
 import styles from './ProductsPage.module.css';
-import {Button, Drawer, Pagination} from "@mantine/core";
-import {useDisclosure, usePagination} from "@mantine/hooks";
+import {Button, Text, Pagination} from "@mantine/core";
 import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
 import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
 import useProductsList from "../hooks/useProductsList.tsx";
-import {notifications} from "../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
+import {notifications} from "../../../shared/lib/notifications.ts";
+import {CreateProductRequest} from "../types.ts";
+import {ProductSchema, ProductService} from "../../../client";

 export const ProductsPage: FC = () => {
-    // const [opened, {open, close}] = useDisclosure(false);
    const [clientId, setClientId] = useState(-1);
    const [totalPages, setTotalPages] = useState(1);
-    const pagination = usePagination({total: totalPages});
-    const {products, paginationInfo} = useProductsList({
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const {products, paginationInfo, refetch} = useProductsList({
        clientId,
-        page: pagination.active - 1,
+        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: 'Создание категории',
+            title: 'Создание товара',
            withCloseButton: false,
            innerProps: {
-                clientId
+                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.total_pages);
+        setTotalPages(paginationInfo.totalPages);
    }, [paginationInfo]);


@@ -50,8 +96,18 @@ export const ProductsPage: FC = () => {
                <PageBlock>
                    <div className={styles['body-container']}>
                        <div className={styles['table-container']}>
-                            <ProductsTable products={products}/>
-                            <Pagination className={styles['table-pagination']} total={100}/>
+                            <ProductsTable
+                                onChange={onProductChange}
+                                onDelete={onDeleteClick}
+                                items={products}
+                            />
+                            <Pagination
+                                className={styles['table-pagination']}
+                                withEdges
+                                onChange={event => setCurrentPage(event)}
+                                total={totalPages}
+                                value={currentPage}
+                            />
                        </div>
                    </div>
                </PageBlock>