tmp

src/client/index.ts

@@ -12,6 +12,8 @@ export type { AuthLoginResponse } from './models/AuthLoginResponse';
 export type { BarcodeTemplateAttributeSchema } from './models/BarcodeTemplateAttributeSchema';
 export type { BarcodeTemplateCreateRequest } from './models/BarcodeTemplateCreateRequest';
 export type { BarcodeTemplateCreateResponse } from './models/BarcodeTemplateCreateResponse';
+export type { BarcodeTemplateDeleteRequest } from './models/BarcodeTemplateDeleteRequest';
+export type { BarcodeTemplateDeleteResponse } from './models/BarcodeTemplateDeleteResponse';
 export type { BarcodeTemplateSchema } from './models/BarcodeTemplateSchema';
 export type { BarcodeTemplateUpdateRequest } from './models/BarcodeTemplateUpdateRequest';
 export type { BarcodeTemplateUpdateResponse } from './models/BarcodeTemplateUpdateResponse';

src/client/models/BarcodeTemplateDeleteRequest.ts

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

src/client/models/BarcodeTemplateDeleteResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type BarcodeTemplateDeleteResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/models/ClientSchema.ts

@@ -2,10 +2,12 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateSchema } from './BarcodeTemplateSchema';
 import type { ClientDetailsSchema } from './ClientDetailsSchema';
 export type ClientSchema = {
     id: number;
     name: string;
+    barcodeTemplate?: (BarcodeTemplateSchema | null);
     details?: (ClientDetailsSchema | null);
 };
 

src/client/services/BarcodeService.ts

@@ -4,6 +4,8 @@
 /* eslint-disable */
 import type { BarcodeTemplateCreateRequest } from '../models/BarcodeTemplateCreateRequest';
 import type { BarcodeTemplateCreateResponse } from '../models/BarcodeTemplateCreateResponse';
+import type { BarcodeTemplateDeleteRequest } from '../models/BarcodeTemplateDeleteRequest';
+import type { BarcodeTemplateDeleteResponse } from '../models/BarcodeTemplateDeleteResponse';
 import type { BarcodeTemplateUpdateRequest } from '../models/BarcodeTemplateUpdateRequest';
 import type { BarcodeTemplateUpdateResponse } from '../models/BarcodeTemplateUpdateResponse';
 import type { CreateBarcodeTemplateAttributeRequest } from '../models/CreateBarcodeTemplateAttributeRequest';
@@ -87,6 +89,26 @@ export class BarcodeService {
             },
         });
     }
+    /**
+     * Delete Barcode Template
+     * @returns BarcodeTemplateDeleteResponse Successful Response
+     * @throws ApiError
+     */
+    public static deleteBarcodeTemplate({
+        requestBody,
+    }: {
+        requestBody: BarcodeTemplateDeleteRequest,
+    }): CancelablePromise<BarcodeTemplateDeleteResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/barcode/template/delete',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
     /**
      * Get All Barcode Template Attributes
      * @returns GetAllBarcodeTemplateAttributesResponse Successful Response

src/components/Navbar/Navbar.tsx

@@ -1,5 +1,15 @@
 import {Center, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
-import {IconBarcode, IconBox, IconCash, IconHome2, IconLogout, IconMan, IconMoon, IconSun,} from '@tabler/icons-react';
+import {
+    IconBarcode,
+    IconBox,
+    IconCash,
+    IconFileBarcode,
+    IconHome2,
+    IconLogout,
+    IconMan,
+    IconMoon,
+    IconSun,
+} from '@tabler/icons-react';
 import classes from './Navbar.module.css';
 import {useAppDispatch} from "../../redux/store.ts";
 import {logout} from "../../features/authSlice.ts";
@@ -54,6 +64,11 @@ const mockdata = [
         icon: IconBarcode,
         label: 'Товары',
         href: '/products'
+    },
+    {
+        icon: IconFileBarcode,
+        label: 'Штрихкоды',
+        href: '/barcode'
     }
 ];
 

src/pages/BarcodePage/BarcodePage.tsx

@@ -1,24 +1,83 @@
 import styles from './BarcodePage.module.css';
 import PageBlock from "../../components/PageBlock/PageBlock.tsx";
 import {Button} from "@mantine/core";
+import BarcodeTemplatesTable from "./components/BarcodeTemplatesTable/BarcodeTemplatesTable.tsx";
+import useGetAllBarcodeTemplates from "../../api/barcode/useGetAllBarcodeTemplates.tsx";
+import {modals} from "@mantine/modals";
+import {BarcodeService, BarcodeTemplateSchema} from "../../client";
+import {notifications} from "../../shared/lib/notifications.ts";
 
 const BarcodePage = () => {
+    const {barcodeTemplates, refetch} = useGetAllBarcodeTemplates();
 
+    const onCreate = (template: BarcodeTemplateSchema) => {
+        BarcodeService.createBarcodeTemplate(({
+            requestBody: {
+                ...template,
+                attributeIds: template.attributes.map(attr => attr.id)
+            }
+        })).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await refetch()
+        })
+    }
+
+    const onChange = (template: BarcodeTemplateSchema) => {
+        BarcodeService.updateBarcodeTemplate({
+            requestBody: {
+                ...template,
+                attributeIds: template.attributes.map(attr => attr.id)
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await refetch()
+        })
+    }
+
+    const onDelete = (template: BarcodeTemplateSchema) => {
+        BarcodeService.deleteBarcodeTemplate({
+            requestBody: {
+                id: template.id
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await refetch()
+        })
+    }
+
+    const onCreateClick = () => {
+        modals.openContextModal({
+            modal: "barcodeTemplateFormModal",
+            title: 'Создание шаблона',
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onCreate
+            }
+        });
+    }
 
     return (
         <div className={styles['container']}>
             <PageBlock>
                 <div className={styles['top-panel']}>
                     <Button
+                        onClick={() => onCreateClick()}
                         variant={"default"}
                     >
-                        Создать клиента
+                        Создать шаблон
                     </Button>
                 </div>
 
             </PageBlock>
             <PageBlock>
-                <>dsad</>
+                <BarcodeTemplatesTable
+                    items={barcodeTemplates}
+                    onChange={onChange}
+                    onDelete={onDelete}
+                />
             </PageBlock>
         </div>
     )

src/pages/BarcodePage/components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx

@@ -0,0 +1,7 @@
+import {GetInputProps} from "@mantine/form/lib/types";
+import {FC} from "react";
+
+type Props = GetInputProps<Array<{ name:string,value:string }>>
+const BarcodeTemplateAdditionalFieldTable:FC<Props> = (props:Props) => {
+
+}

src/pages/BarcodePage/components/BarcodeTemplatesTable/BarcodeTemplatesTable.tsx

@@ -6,6 +6,7 @@ import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
 import {modals} from "@mantine/modals";
 import {ActionIcon, Flex, Tooltip} from "@mantine/core";
 import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {MRT_TableOptions} from "mantine-react-table";
 
 const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
                                                                               items,
@@ -39,8 +40,7 @@ const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
                             <Tooltip label="Редактировать">
                                 <ActionIcon
                                     onClick={() => onEditClick(row.original)}
-                                    variant={"default"}
+                                    variant={"default"}>
-                                >
                                     <IconEdit/>
                                 </ActionIcon>
                             </Tooltip>
@@ -53,7 +53,7 @@ const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
                             </Tooltip>
                         </Flex>
                     )
-                }}
+                } as MRT_TableOptions<BarcodeTemplateSchema>}
             />
         </>
     )

src/pages/BarcodePage/components/BarcodeTemplatesTable/columns.tsx

@@ -1,6 +1,7 @@
 import {BarcodeTemplateSchema} from "../../../../client";
 import {MRT_ColumnDef} from "mantine-react-table";
 import {useMemo} from "react";
+import {IconCheck, IconX} from "@tabler/icons-react";
 
 export const useBarcodeTemplatesTableColumns = () => {
     return useMemo<MRT_ColumnDef<BarcodeTemplateSchema>[]>(() => [
@@ -8,17 +9,19 @@ export const useBarcodeTemplatesTableColumns = () => {
             accessorKey: "name",
             header: "Название",
         },
-        {
-            accessorKey: "isDefault",
-            header: "По умолчанию",
-        },
         {
             accessorKey: "attributes",
             header: "Атрибуты",
+            Cell: ({row}) => <>{row.original.attributes.map(attr => attr.name).join(', ')}</>
         },
         {
             header: "Размер",
             Cell: ({row}) => <>{row.original.width}x{row.original.height}</>
+        },
+        {
+            accessorKey: "isDefault",
+            header: "По умолчанию",
+            Cell: ({row}) => row.original.isDefault ? <IconCheck/> : <IconX/>
         }
     ], []);
 }

src/pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx

@@ -5,7 +5,7 @@ import {useForm} from "@mantine/form";
 import {Checkbox, Fieldset, Flex, NumberInput, rem, TextInput} from "@mantine/core";
 import {IconX} from "@tabler/icons-react";
 import BarcodeTemplateAttributeMultiselect
-    from "../../component/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
+    from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
 
 type Props = CreateEditFormProps<BarcodeTemplateSchema>
 const BarcodeTemplateFormModal = ({
@@ -30,7 +30,7 @@ const BarcodeTemplateFormModal = ({
             name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
         }
     })
-    console.log(form.values);
+
     return (
         <BaseFormModal
             {...innerProps}
@@ -44,40 +44,33 @@ const BarcodeTemplateFormModal = ({
                     <Fieldset legend={"Шаблон штрихкода"}>
                         <Flex direction={"column"} gap={rem(10)}>
                             <TextInput
-                                label={"Название"}
+                                label={'Название'}
                                 placeholder={"Введите название шаблона"}
                                 {...form.getInputProps('name')}
                             />
-                            <Fieldset
+                            <Flex gap={10} align={"center"}>
-                                styles={{
+                                <NumberInput
-                                    legend: {
+                                    hideControls
-                                        marginBottom: 0,
+                                    label={'Ширина'}
-                                        fontWeight: 500
+                                    placeholder={"Ширина в мм"}
-                                    }
+                                    {...form.getInputProps('width')}
-                                }}
+                                />
-                                variant={"unstyled"}
+                                <IconX/>
-                                legend={"Размер"}>
+                                <NumberInput
-                                <Flex gap={10} align={"center"}>
+                                    hideControls
-                                    <NumberInput
+                                    label={'Высота'}
-                                        hideControls
+                                    placeholder={"Высота в мм"}
-                                        placeholder={"Ширина"}
+                                    {...form.getInputProps('height')}
-                                        {...form.getInputProps('width')}
+                                />
-                                    />
+                            </Flex>
-                                    <IconX/>
-                                    <NumberInput
-                                        hideControls
-                                        placeholder={"Высота"}
-                                        {...form.getInputProps('height')}
-                                    />
-                                </Flex>
-                            </Fieldset>
                             <BarcodeTemplateAttributeMultiselect
                                 label={"Атрибуты"}
-                                placeholder={"Выберите атрибуты"}
+                                placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
                                 {...form.getInputProps('attributes')}
                             />
                             <Checkbox
                                 label={"Использовать как стандартный шаблон"}
+                                checked={form.getInputProps('isDefault').value as boolean}
                                 {...form.getInputProps('isDefault')}/>
                         </Flex>
 

src/pages/ClientsPage/components/ClientsTable/columns.tsx

@@ -24,6 +24,10 @@ export const useClientsTableColumns = () => {
         {
             accessorKey: "details.inn",
             header: "ИНН"
+        },
+        {
+            accessorKey:"barcodeTemplate.name",
+            header:"Шаблон штрихкодов"
         }
     ], []);
 }

src/pages/ClientsPage/modals/ClientFormModal/ClientFormModal.tsx

@@ -3,6 +3,7 @@ import {Fieldset, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {ClientSchema} from "../../../../client";
 import BaseFormModal, {CreateEditFormProps} from "../BaseFormModal/BaseFormModal.tsx";
+import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
 
 
 type Props = CreateEditFormProps<ClientSchema>;
@@ -22,7 +23,8 @@ const ClientFormModal = ({
             phoneNumber: innerProps.element.details?.phoneNumber,
             email: innerProps.element.details?.email,
             inn: innerProps.element.details?.inn
-        }
+        },
+        barcodeTemplate: innerProps.element.barcodeTemplate
     } : {
         id: -1,
         name: '',
@@ -89,6 +91,13 @@ const ClientFormModal = ({
                             {...form.getInputProps('details.inn')}
                         />
                     </Fieldset>
+                    <Fieldset legend={'Настройки'}>
+                        <BarcodeTemplateSelect
+                            label={'Шаблон штрихкодов'}
+                            placeholder={'Выберите шаблон штрихкодов'}
+                            {...form.getInputProps('barcodeTemplate')}
+                        />
+                    </Fieldset>
                 </>
 
             </BaseFormModal.Body>