From d2919de8e8b53d3f7bac4870fac2a58052753ce4 Mon Sep 17 00:00:00 2001
From: Crumb Owl <crumbowl@proton.me>
Date: Fri, 4 Jul 2025 17:34:32 +0200
Subject: [PATCH] ProductBarcode: add barcode shortcuts in item/Createmodal.vue

---
 frontend/components/Item/CreateModal.vue | 46 +++++++++++++++++++++++-
 frontend/locales/en.json                 |  3 ++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 23761102..a7b0bad8 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -1,5 +1,37 @@
 <template>
   <BaseModal dialog-id="create-item" :title="$t('components.item.create_modal.title')">
+    <div class="flex flex-row-reverse">
+      <TooltipProvider :delay-duration="0">
+        <ButtonGroup>
+          <Tooltip>
+            <TooltipTrigger>
+              <Button variant="outline" :disabled="loading" data-pos="start" @click="openBarcodeDialog()">
+                <MdiBarcode class="size-5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ $t('components.item.create_modal.product_tooltip_input_barcode') }}</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger>
+              <Button variant="outline" :disabled="loading" data-pos="end" @click="openQrScannerPage()">
+              <MdiBarcodeScan class="size-5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ $t('components.item.create_modal.product_tooltip_scan_barcode') }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </ButtonGroup>
+      </TooltipProvider >
+      <div class= "items-center justify-center flex mx-2">
+        {{ $t('components.item.create_modal.product_autofill') }}
+      </div>
+    </div>
+
+    <div class=" border-t" />
+    
     <form class="flex flex-col gap-2" @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
       <ItemSelector
@@ -148,6 +180,8 @@
   import type { ItemCreate, LocationOut } from "~~/lib/api/types/data-contracts";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
+  import MdiBarcode from "~icons/mdi/barcode";
+  import MdiBarcodeScan from "~icons/mdi/barcode-scan";
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPackageVariantClosed from "~icons/mdi/package-variant-closed";
   import MdiDelete from "~icons/mdi/delete";
@@ -167,7 +201,7 @@
   }
 
   const { t } = useI18n();
-  const { activeDialog, closeDialog } = useDialog();
+  const { activeDialog, openDialog, closeDialog } = useDialog();
 
   useDialogHotkey("create-item", { code: "Digit1", shift: true });
 
@@ -482,4 +516,14 @@
       offScreenCanvas.height = 0;
     }
   }
+
+  async function openQrScannerPage() {
+    closeDialog("create-item");
+    openDialog("scanner")
+  }
+
+  async function openBarcodeDialog() {
+    closeDialog("create-item");
+    openDialog("product-import")
+  }
 </script>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 99a9032e..1bda7828 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -100,6 +100,9 @@
                 "item_photo": "Item Photo 📷",
                 "item_quantity": "Item Quantity",
                 "parent_item": "Parent Item",
+                "product_autofill": "Product autofill:",
+                "product_tooltip_input_barcode": "Manually input barcode",
+                "product_tooltip_scan_barcode": "Scan barcode with 📷",
                 "rotate_photo": "Rotate photo",
                 "set_as_primary_photo": "Set as { isPrimary, select, true {non-} false {} other {}}primary photo",
                 "title": "Create Item",