feat: barcodes printing

src/app/products/components/shared/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx

@@ -15,6 +15,9 @@ const BarcodeTemplateSelect: FC<Props> = props => {
     return (
         <ObjectSelect
             data={barcodeTemplates}
+            getLabelFn={template =>
+                `${template.name} (${template.attributes.map(a => a.name).join(", ")})`
+            }
             {...props}
         />
     );

src/app/products/components/shared/ProductsTable/ProductsTable.tsx

@@ -10,11 +10,12 @@ const ProductsTable = () => {
     const isMobile = useIsMobile();
     const { productsCrud, products, productsFiltersForm, paginationInfo } =
         useProductsContext();
-    const { onChangeClick } = useProductsActions();
+    const { onChangeClick, onPrintBarcodeClick } = useProductsActions();
 
     const columns = useProductsTableColumns({
         onChange: onChangeClick,
         onDelete: productsCrud.onDelete,
+        onPrintBarcode: onPrintBarcodeClick,
     });
 
     return (

src/app/products/components/shared/ProductsTable/columns.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { IconEdit, IconTrash } from "@tabler/icons-react";
+import { IconBarcode, IconEdit, IconTrash } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
 import { Center, Flex, List, Spoiler, useMantineTheme } from "@mantine/core";
 import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
@@ -7,11 +7,16 @@ import useIsMobile from "@/hooks/utils/useIsMobile";
 import { ProductSchema } from "@/lib/client";
 
 type Props = {
+    onPrintBarcode: (product: ProductSchema) => void;
     onChange: (product: ProductSchema) => void;
     onDelete: (product: ProductSchema) => void;
 };
 
-export const useProductsTableColumns = ({ onChange, onDelete }: Props) => {
+export const useProductsTableColumns = ({
+    onChange,
+    onDelete,
+    onPrintBarcode,
+}: Props) => {
     const theme = useMantineTheme();
     const isMobile = useIsMobile();
 
@@ -24,11 +29,11 @@ export const useProductsTableColumns = ({ onChange, onDelete }: Props) => {
                     width: "0%",
                     render: product => (
                         <Flex gap={isMobile ? "sm" : "md"}>
-                            {/*<ActionIconWithTip*/}
-                            {/*    tipLabel={"Печать штрихкода"}*/}
-                            {/*    onClick={() => onPrintBarcodeClick(product)}>*/}
-                            {/*    <IconBarcode />*/}
-                            {/*</ActionIconWithTip>*/}
+                            <ActionIconWithTip
+                                tipLabel={"Печать штрихкода"}
+                                onClick={() => onPrintBarcode(product)}>
+                                <IconBarcode />
+                            </ActionIconWithTip>
                             <ActionIconWithTip
                                 tipLabel={"Редактировать"}
                                 onClick={() => onChange(product)}>

src/app/products/hooks/useProductsActions.ts

@@ -40,11 +40,12 @@ const useProductsActions = () => {
 
     const onPrintBarcodeClick = (product: ProductSchema) => {
         modals.openContextModal({
-            modal: "printBarcode",
-            title: "Печать штрихкода", // TODO
+            modal: "printBarcodeModal",
+            title: "Печать штрихкода",
             withCloseButton: true,
             innerProps: {
-                productId: product.id,
+                product,
+                defaultQuantity: 1,
             },
         });
     };