From 77a454b5903dbdd030961b14de05df632228cb6b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 16 May 2024 20:59:51 +0000
Subject: [PATCH 1/8] feat: refactor template

---
 src/components/ui/FetchedTags.vue | 67 +++++++++++++------------------
 1 file changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 12bce9d4b..5d8d72efb 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const $props = defineProps({
     maxLength: {
         type: Number,
         required: true,
@@ -8,53 +10,38 @@ defineProps({
         type: Object,
         required: true,
     },
+    tag: {
+        type: String,
+        required: false,
+        default: 'tag',
+    },
+    value: {
+        type: String,
+        required: false,
+        default: 'value',
+    },
+});
+const tags = computed(() => {
+    return Object.keys($props.item)
+        .filter((i) => i.startsWith(`${$props.tag}`))
+        .reduce((acc, tag) => {
+            const n = tag.split(`${$props.tag}`)[1];
+            acc[$props.item[`${$props.tag}${n}`]] = $props.item[`${$props.value}${n}`];
+            return acc;
+        }, {});
 });
 </script>
 <template>
     <div class="fetchedTags">
         <div class="wrap">
             <div
+                v-for="(value, key) in tags"
+                :key="key"
                 class="inline-tag"
-                :class="{ empty: !$props.item.value5 }"
-                :title="$props.item.tag5 + ': ' + $props.item.value5"
+                :title="`${key}: ${value}`"
+                :class="{ empty: !value }"
             >
-                {{ $props.item.value5 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.tag6 }"
-                :title="$props.item.tag6 + ': ' + $props.item.value6"
-            >
-                {{ $props.item.value6 }}
-            </div>
-
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value7 }"
-                :title="$props.item.tag7 + ': ' + $props.item.value7"
-            >
-                {{ $props.item.value7 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value8 }"
-                :title="$props.item.tag8 + ': ' + $props.item.value8"
-            >
-                {{ $props.item.value8 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value9 }"
-                :title="$props.item.tag9 + ': ' + $props.item.value9"
-            >
-                {{ $props.item.value9 }}
-            </div>
-            <div
-                class="inline-tag"
-                :class="{ empty: !$props.item.value10 }"
-                :title="$props.item.tag10 + ': ' + $props.item.value10"
-            >
-                {{ $props.item.value10 }}
+                {{ value }}
             </div>
         </div>
     </div>

From 38d7c96c00fea40a344d50eb79fdf2a645d10cb1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 16 May 2024 23:00:57 +0200
Subject: [PATCH 2/8] feat: #6957: Rename FetchedTags instance tag

---
 src/pages/Entry/Card/EntryBuys.vue              | 2 +-
 src/pages/Entry/Card/EntrySummary.vue           | 2 +-
 src/pages/Entry/EntryLatestBuys.vue             | 2 +-
 src/pages/Item/ItemFixedPrice.vue               | 2 +-
 src/pages/Item/ItemList.vue                     | 2 +-
 src/pages/Order/Card/OrderSummary.vue           | 5 +----
 src/pages/Order/OrderLines.vue                  | 2 +-
 src/pages/Order/OrderVolume.vue                 | 2 +-
 src/pages/Supplier/Card/SupplierConsumption.vue | 2 +-
 src/pages/Ticket/Card/TicketSummary.vue         | 4 ++--
 10 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index fd431043f..a378266aa 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -410,7 +410,7 @@ const lockIconType = (groupingMode, mode) => {
                             <span v-if="props.row.item.subName" class="subName">
                                 {{ props.row.item.subName }}
                             </span>
-                            <fetched-tags :item="props.row.item" :max-length="5" />
+                            <FetchedTags :item="props.row.item" :max-length="5" />
                         </QTd>
                     </QTr>
                     <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index 766587bde..5c56146b9 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -338,7 +338,7 @@ const fetchEntryBuys = async () => {
                                 <span v-if="row.item.subName" class="subName">
                                     {{ row.item.subName }}
                                 </span>
-                                <fetched-tags :item="row.item" :max-length="5" />
+                                <FetchedTags :item="row.item" :max-length="5" />
                             </QTd>
                         </QTr>
                         <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index da4190a04..79d118b96 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -707,7 +707,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-tags="{ row }">
                 <QTd>
-                    <fetched-tags :item="row" :max-length="6" />
+                    <FetchedTags :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #body-cell-entryFk="{ row }">
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index e74f7f828..8412021e7 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -459,7 +459,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <fetched-tags :item="row" :max-length="6" />
+                    <FetchedTags :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #body-cell-groupingPrice="props">
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index 27acf3fdd..fb812258b 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -521,7 +521,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <template #body-cell-description="{ row }">
                         <QTd class="col">
                             <span>{{ row.name }} {{ row.subName }}</span>
-                            <fetched-tags :item="row" :max-length="6" />
+                            <FetchedTags :item="row" :max-length="6" />
                         </QTd>
                     </template>
                     <template #body-cell-isActive="{ row }">
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 426cdc712..d26b799df 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -176,10 +176,7 @@ const detailsColumns = ref([
                                             {{ props.row.item.subName }}
                                         </span>
                                     </div>
-                                    <fetched-tags
-                                        :item="props.row.item"
-                                        :max-length="5"
-                                    />
+                                    <FetchedTags :item="props.row.item" :max-length="5" />
                                 </QTd>
                                 <QTd key="quantity" :props="props">
                                     {{ props.row.quantity }}
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 5a31598e1..f089c0e85 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -160,7 +160,7 @@ async function confirmOrder() {
                                     <span class="text-uppercase subname">
                                         {{ row.item.subName }}
                                     </span>
-                                    <fetched-tags :item="row.item" :max-length="5" />
+                                    <FetchedTags :item="row.item" :max-length="5" />
                                 </div>
                                 <VnLv :label="t('item')" :value="String(row.item.id)" />
                                 <VnLv
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
index 67f409b45..35d68de16 100644
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@@ -77,7 +77,7 @@ const loadVolumes = async (rows) => {
                         >
                             <template #list-items>
                                 <div class="q-mb-sm">
-                                    <fetched-tags :item="row.item" :max-length="5" />
+                                    <FetchedTags :item="row.item" :max-length="5" />
                                 </div>
                                 <VnLv :label="t('item')" :value="row.item.id" />
                                 <VnLv :label="t('subName')">
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 4eac24469..dea720a61 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -204,7 +204,7 @@ onMounted(async () => {
 
                     <QTd no-hover>
                         <span>{{ buy.subName }}</span>
-                        <fetched-tags :item="buy" :max-length="5" />
+                        <FetchedTags :item="buy" :max-length="5" />
                     </QTd>
                     <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
                     <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index af501240b..5750223be 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -371,10 +371,10 @@ async function changeState(value) {
                                         props.row.item.subName
                                     }}</span>
                                 </div>
-                                <fetched-tags
+                                <FetchedTags
                                     :item="props.row.item"
                                     :max-length="5"
-                                ></fetched-tags>
+                                ></FetchedTags>
                             </QTd>
                             <QTd>{{ props.row.price }}</QTd>
                             <QTd>{{ props.row.discount }} %</QTd>

From dba42a6001bf8f0dd74020e09796fafc4b175f40 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 16 May 2024 23:02:49 +0200
Subject: [PATCH 3/8] feat: #6957: Rename FetchedTags instance tag

---
 src/components/ui/FetchedTags.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 5d8d72efb..8a01c1e79 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -35,13 +35,13 @@ const tags = computed(() => {
     <div class="fetchedTags">
         <div class="wrap">
             <div
-                v-for="(value, key) in tags"
+                v-for="(val, key) in tags"
                 :key="key"
                 class="inline-tag"
-                :title="`${key}: ${value}`"
-                :class="{ empty: !value }"
+                :title="`${key}: ${val}`"
+                :class="{ empty: !val }"
             >
-                {{ value }}
+                {{ val }}
             </div>
         </div>
     </div>

From 24eeb5519ad8f0a0ef938a03f493a31f4d3ba520 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 17 May 2024 13:52:45 +0200
Subject: [PATCH 4/8] style updates

---
 src/components/ui/FetchedTags.vue | 32 +++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 8a01c1e79..2e2e9b6e3 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -26,7 +26,9 @@ const tags = computed(() => {
         .filter((i) => i.startsWith(`${$props.tag}`))
         .reduce((acc, tag) => {
             const n = tag.split(`${$props.tag}`)[1];
-            acc[$props.item[`${$props.tag}${n}`]] = $props.item[`${$props.value}${n}`];
+            const key = `${$props.tag}${n}`;
+            const value = `${$props.value}${n}`;
+            acc[$props.item[key] ?? key] = $props.item[value] ?? '';
             return acc;
         }, {});
 });
@@ -49,11 +51,29 @@ const tags = computed(() => {
 
 <style lang="scss" scoped>
 .fetchedTags {
-    align-items: center;
+    // display: flex;
+    /* width: 100%; */
+    /* flex: 2; */
+    /* flex-direction: column; */
+    /* flex-wrap: wrap; */
+    /* align-items: flex-start; */
+    /* align-content: flex-end; */
+    // justify-content: flex-start;
+    display: grid;
+    grid-template-columns: repeat(3, 0.15fr); /* Tres columnas de igual tamaño */
+    grid-template-rows: repeat(2, auto); /* Dos filas con alto automático */
+    // gap: 5px; /* Espacio entre las celdas */
     .wrap {
-        width: 100%;
-        flex-wrap: wrap;
-        display: flex;
+        /* width: 100%; */
+        /* flex-wrap: wrap; */
+        // display: flex;
+        /* flex-direction: row; */
+        /* flex: 1; */
+        //  flex: 0 50%;
+        /* padding: 5px; */
+        /* box-sizing: border-box; */
+        /* border: 1px solid #000;*/
+        display: contents;
     }
 
     .inline-tag {
@@ -67,7 +87,7 @@ const tags = computed(() => {
         border: 1px solid $color-spacer;
         text-overflow: ellipsis;
         overflow: hidden;
-        min-width: 4rem;
+        min-width: 7rem;
         max-width: 4rem;
     }
 

From 08e67038533e03ee2083c9fae698a0f8d2389da9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 17 May 2024 13:57:01 +0200
Subject: [PATCH 5/8] style updates

---
 src/components/ui/FetchedTags.vue | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 2e2e9b6e3..a2dbf0c16 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -51,28 +51,12 @@ const tags = computed(() => {
 
 <style lang="scss" scoped>
 .fetchedTags {
-    // display: flex;
-    /* width: 100%; */
-    /* flex: 2; */
-    /* flex-direction: column; */
-    /* flex-wrap: wrap; */
-    /* align-items: flex-start; */
-    /* align-content: flex-end; */
-    // justify-content: flex-start;
     display: grid;
-    grid-template-columns: repeat(3, 0.15fr); /* Tres columnas de igual tamaño */
-    grid-template-rows: repeat(2, auto); /* Dos filas con alto automático */
-    // gap: 5px; /* Espacio entre las celdas */
+    grid-template-columns: repeat(3, 0fr);
+    grid-template-rows: repeat(2, auto);
+
+    max-width: 300px;
     .wrap {
-        /* width: 100%; */
-        /* flex-wrap: wrap; */
-        // display: flex;
-        /* flex-direction: row; */
-        /* flex: 1; */
-        //  flex: 0 50%;
-        /* padding: 5px; */
-        /* box-sizing: border-box; */
-        /* border: 1px solid #000;*/
         display: contents;
     }
 

From 632acc13ac77371344c61f0b52f9f4b641c054c5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 08:53:08 +0200
Subject: [PATCH 6/8] style: reset poc style

---
 src/components/ui/FetchedTags.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index a2dbf0c16..709961a7f 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -51,13 +51,11 @@ const tags = computed(() => {
 
 <style lang="scss" scoped>
 .fetchedTags {
-    display: grid;
-    grid-template-columns: repeat(3, 0fr);
-    grid-template-rows: repeat(2, auto);
-
-    max-width: 300px;
+    align-items: center;
     .wrap {
-        display: contents;
+        width: 100%;
+        flex-wrap: wrap;
+        display: flex;
     }
 
     .inline-tag {
@@ -71,12 +69,8 @@ const tags = computed(() => {
         border: 1px solid $color-spacer;
         text-overflow: ellipsis;
         overflow: hidden;
-        min-width: 7rem;
+        min-width: 4rem;
         max-width: 4rem;
     }
-
-    .empty {
-        border: 1px solid $color-spacer-light;
-    }
 }
 </style>

From 7197881cdd3804596906c38d6eb8391be51861ec Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 08:53:46 +0200
Subject: [PATCH 7/8] style: reset poc style

---
 src/components/ui/FetchedTags.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 709961a7f..795e1ab4e 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -72,5 +72,8 @@ const tags = computed(() => {
         min-width: 4rem;
         max-width: 4rem;
     }
+    .empty {
+        border: 1px solid $color-spacer-light;
+    }
 }
 </style>

From febc88203d7b50d7c16da7c0dd3078da5f20bad1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 20 May 2024 11:16:05 +0200
Subject: [PATCH 8/8] style: fix color when is empty

---
 src/components/ui/FetchedTags.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index 795e1ab4e..d05e9c40f 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -73,7 +73,7 @@ const tags = computed(() => {
         max-width: 4rem;
     }
     .empty {
-        border: 1px solid $color-spacer-light;
+        border: 1px solid #2b2b2b;
     }
 }
 </style>