From a57b83c52d538650e7eb8744b87598f9dd7d1dd8 Mon Sep 17 00:00:00 2001
From: Crumb Owl <crumbowl@proton.me>
Date: Tue, 15 Jul 2025 13:21:19 +0000
Subject: [PATCH] ProductBarcode: various fix requested by Tonya

- fix many missing translations
- properly reset QR scanner when reopening
- add error message on BarcodeModal when no item is found
- fix icon size in item CreateModal
- remove useless closeDialog
---
 frontend/components/App/ScannerModal.vue  |  1 +
 frontend/components/Item/BarcodeModal.vue | 14 ++++++++++----
 frontend/components/Item/CreateModal.vue  |  6 ++----
 frontend/locales/en.json                  |  9 ++++++++-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/components/App/ScannerModal.vue b/frontend/components/App/ScannerModal.vue
index ef6ca129..a5ba56c5 100644
--- a/frontend/components/App/ScannerModal.vue
+++ b/frontend/components/App/ScannerModal.vue
@@ -137,6 +137,7 @@
 
   watch(open, async isOpen => {
     if (isOpen) {
+      detectedBarcode.value = "";
       await startScanner();
     } else {
       stopScanner();
diff --git a/frontend/components/Item/BarcodeModal.vue b/frontend/components/Item/BarcodeModal.vue
index a174b705..f2deee7f 100644
--- a/frontend/components/Item/BarcodeModal.vue
+++ b/frontend/components/Item/BarcodeModal.vue
@@ -107,6 +107,7 @@
 </template>
 
 <script setup lang="ts">
+  import { useI18n } from "vue-i18n";
   import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Button } from "~/components/ui/button";
   import type { BarcodeProduct } from "~~/lib/api/types/data-contracts";
@@ -117,6 +118,7 @@
   import type { TableData } from "~/components/Item/View/Table.types";
 
   const { openDialog, registerOpenDialogCallback } = useDialog();
+  const { t } = useI18n();
 
   const searching = ref(false);
   const barcode = ref<string>("");
@@ -140,7 +142,7 @@
     },
     { text: "items.manufacturer", value: "manufacturer", align: "center" },
     { text: "items.model_number", value: "modelNumber", align: "center" },
-    { text: "DB source", value: "search_engine_name", align: "center", type: "url" },
+    { text: "components.item.product_import.db_source", value: "search_engine_name", align: "center", type: "url" },
   ] satisfies BarcodeTableHeader[];
 
   // Need for later filtering
@@ -181,7 +183,7 @@
     errorMessage.value = null;
 
     if (!barcode || barcode.trim().length === 0 || !/^[0-9]+$/.test(barcode)) {
-      errorMessage.value = "Invalid barcode provided";
+      errorMessage.value = t("components.item.product_import.error_invalid_barcode");
       console.error(errorMessage.value);
       return;
     }
@@ -192,13 +194,17 @@
     try {
       const result = await api.products.searchFromBarcode(barcode.trim());
       if (result.error) {
-        errorMessage.value = "API Error: " + result.error;
+        errorMessage.value = t("errors.api_failure") + result.error;
         console.error(errorMessage.value);
       } else {
+        if (result.data === undefined || result.data.length === undefined || result.data.length === 0) {
+          errorMessage.value = t("components.item.product_import.error_not_found");
+        }
+
         products.value = result.data;
       }
     } catch (error) {
-      errorMessage.value = "Failed to retrieve product info: " + error;
+      errorMessage.value = t("components.item.product_import.error_exception") + error;
       console.error(errorMessage.value);
     } finally {
       searching.value = false;
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 57aafb15..132a1c60 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -6,7 +6,7 @@
           <ButtonGroup>
             <Tooltip>
               <TooltipTrigger>
-                <Button variant="outline" :disabled="loading" data-pos="start" @click="openQrScannerPage()">
+                <Button variant="outline" :disabled="loading" size="icon" data-pos="start" @click="openQrScannerPage()">
                   <MdiBarcodeScan class="size-5" />
                 </Button>
               </TooltipTrigger>
@@ -16,7 +16,7 @@
             </Tooltip>
             <Tooltip>
               <TooltipTrigger>
-                <Button variant="outline" :disabled="loading" data-pos="end" @click="openBarcodeDialog()">
+                <Button variant="outline" :disabled="loading" size="icon" data-pos="end" @click="openBarcodeDialog()">
                   <MdiBarcode class="size-5" />
                 </Button>
               </TooltipTrigger>
@@ -511,12 +511,10 @@
   }
 
   function openQrScannerPage() {
-    closeDialog(DialogID.CreateItem);
     openDialog(DialogID.Scanner);
   }
 
   function openBarcodeDialog() {
-    closeDialog(DialogID.CreateItem);
     openDialog(DialogID.ProductImport);
   }
 </script>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 9024299d..9c3aafcd 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -130,7 +130,11 @@
             "product_import": {
                 "title": "Import product",
                 "barcode": "Product's barcode",
-                "search_item": "Search product"
+                "db_source": "DB source",
+                "search_item": "Search product",
+                "error_invalid_barcode": "Invalid barcode provided",
+                "error_exception": "Exception occured while retrieving item barcode: ",
+                "error_not_found": "No product found with give barcode."
             },
             "view": {
                 "selectable": {
@@ -191,6 +195,9 @@
             "shortcut_hint": "Use the number keys to quickly select an action."
         }
     },
+    "errors": {
+        "api_failure": "Backend API call failed: "
+    },
     "global": {
         "add": "Add",
         "archived": "Archived",