From 68f97f24c7b0eac5f7ea2f54b8f727f28e341261 Mon Sep 17 00:00:00 2001
From: Crumb Owl <crumbowl@proton.me>
Date: Mon, 14 Jul 2025 21:22:44 +0000
Subject: [PATCH] ProductBarcode: fix various remarks from Tonya

---
 frontend/components/Item/BarcodeModal.vue | 21 +++++++++++++--------
 frontend/locales/en.json                  |  3 ++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/components/Item/BarcodeModal.vue b/frontend/components/Item/BarcodeModal.vue
index eb69b08c..63a03517 100644
--- a/frontend/components/Item/BarcodeModal.vue
+++ b/frontend/components/Item/BarcodeModal.vue
@@ -5,7 +5,7 @@
         <DialogTitle>{{ $t("components.item.product_import.title") }}</DialogTitle>
       </DialogHeader>
 
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center gap-3">
         <FormTextField
           :disabled="searching"
           class="w-[30%]"
@@ -15,19 +15,20 @@
         />
         <Button
           :variant="searching ? 'destructive' : 'default'"
-          style="margin-top: auto"
+          class="mt-auto h-10"
           @click="retrieveProductInfo(barcode)"
         >
-          <div class="relative mx-2">
+          <MdiLoading v-if="searching" class="animate-spin" />
+          <div class="relative mx-2" v-if="!searching">
             <div class="absolute inset-0 flex items-center justify-center">
               <MdiBarcode class="size-5 group-hover:hidden" />
             </div>
           </div>
-          {{ searching ? "Cancel" : "Search product" }}
+          {{ searching ? $t('global.cancel') : $t("components.item.product_import.search_item") }}
         </Button>
       </div>
 
-      <div class="divide-y border-t" />
+      <Separator/>
 
       <BaseCard>
         <Table class="w-full">
@@ -76,6 +77,9 @@
                     </span>
                   </div>
                 </template>
+                <template v-else-if="h.type === 'url'">
+                  <NuxtLink class="underline" :to="'https://' + extractValue(p, h.value)"  target="_blank">{{ extractValue(p, h.value) }}</NuxtLink>
+                </template>
 
                 <slot v-else :name="cell(h)">
                   {{ extractValue(p, h.value) }}
@@ -99,6 +103,7 @@
   import type { BarcodeProduct } from "~~/lib/api/types/data-contracts";
   import { useDialog } from "~/components/ui/dialog-provider";
   import MdiBarcode from "~icons/mdi/barcode";
+  import MdiLoading from "~icons/mdi/loading";
   import type { TableData } from "~/components/Item/View/Table.types";
 
   const { openDialog, registerOpenDialogCallback } = useDialog();
@@ -112,19 +117,19 @@
     text: string;
     value: string;
     align?: "left" | "center" | "right";
-    type?: "name";
+    type?: "name" | "url";
   };
 
   const defaultHeaders = [
     {
       text: "items.name",
       value: "name",
-      align: "left",
+      align: "center",
       type: "name",
     },
     { text: "items.manufacturer", value: "manufacturer", align: "center" },
     { text: "items.model_number", value: "modelNumber", align: "center" },
-    { text: "DB source", value: "search_engine_name", align: "center" },
+    { text: "DB source", value: "search_engine_name", align: "center", type: "url" },
   ] satisfies BarcodeTableHeader[];
 
   // Need for later filtering
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 1bda7828..a7a3ebc3 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -130,7 +130,8 @@
             },
             "product_import": {
                 "title": "Import product",
-                "barcode": "Product's barcode"
+                "barcode": "Product's barcode",
+                "search_item": "Search product"
             },
             "view": {
                 "selectable": {