From 16cfd84fab6018f727268f4ca7154d915a876e5f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 5 Aug 2024 13:01:26 +0200
Subject: [PATCH] fix: refs #7283 itemTags & VnImg

---
 src/components/ui/VnImg.vue                 | 37 ++++++++-------------
 src/components/ui/VnRow.vue                 | 12 +++----
 src/pages/Item/Card/ItemBasicData.vue       | 13 ++------
 src/pages/Item/Card/ItemDescriptorImage.vue |  7 +++-
 src/pages/Item/Card/ItemTags.vue            | 23 ++++++-------
 5 files changed, 37 insertions(+), 55 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 985c9cc53..2a2df5aed 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useSession } from 'src/composables/useSession';
+import noImage from '/no-user.png';
+import { useRole } from 'src/composables/useRole';
 
 const $props = defineProps({
     storage: {
@@ -17,8 +19,7 @@ const $props = defineProps({
     },
     zoomSize: {
         type: String,
-        required: false,
-        default: 'lg',
+        default: '520x520',
     },
     id: {
         type: Number,
@@ -28,14 +29,15 @@ const $props = defineProps({
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
-import noImage from '/no-user.png';
-import { useRole } from 'src/composables/useRole';
-const url = computed(() => {
-    const isEmployee = useRole().isEmployee();
+
+const isEmployee = useRole().isEmployee();
+
+const getUrl = (zoom = false) => {
+    const size = zoom ? $props.zoomSize : $props.size;
     return isEmployee
-        ? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        ? `/api/${$props.storage}/${$props.collection}/${size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
         : noImage;
-});
+};
 const reload = () => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };
@@ -46,19 +48,13 @@ defineExpose({
 <template>
     <QImg
         :class="{ zoomIn: $props.zoomSize }"
-        :src="url"
+        :src="getUrl()"
         v-bind="$attrs"
         @click="show = !show"
         spinner-color="primary"
     />
     <QDialog v-model="show" v-if="$props.zoomSize">
-        <QImg
-            :src="url"
-            size="full"
-            class="img_zoom"
-            v-bind="$attrs"
-            spinner-color="primary"
-        />
+        <QImg :src="getUrl(true)" size="full" v-bind="$attrs" spinner-color="primary" />
     </QDialog>
 </template>
 
@@ -67,12 +63,5 @@ defineExpose({
     &.zoomIn {
         cursor: zoom-in;
     }
-    min-width: 50px;
-}
-.rounded {
-    border-radius: 50%;
-}
-.img_zoom {
-    border-radius: 0%;
 }
 </style>
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index f68052455..9b5968f4b 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,15 +1,13 @@
-<script setup>
-defineProps({ wrap: { type: Boolean, default: false } });
-</script>
+<script setup></script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
-        <slot></slot>
+    <div class="vn-row q-gutter-md q-mb-md">
+        <slot />
     </div>
 </template>
-<style lang="scss" scopped>
+<style lang="scss" scoped>
 .vn-row {
     display: flex;
-    > * {
+    > :deep(*) {
         flex: 1;
     }
 }
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
index 52d4e852e..89c883295 100644
--- a/src/pages/Item/Card/ItemBasicData.vue
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -36,15 +36,6 @@ const onIntrastatCreated = (response, formData) => {
         @on-fetch="(data) => (itemTypesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Items/withName"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id DESC',
-        }"
-        @on-fetch="(data) => (itemsWithNameOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Intrastats"
         :filter="{
@@ -104,7 +95,9 @@ const onIntrastatCreated = (response, formData) => {
                 <VnSelectDialog
                     :label="t('itemBasicData.generic')"
                     v-model="data.genericFk"
-                    :options="itemsWithNameOptions"
+                    url="Items/withName"
+                    :fields="['id', 'name']"
+                    sort-by="id DESC"
                     option-value="id"
                     option-label="name"
                     map-options
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index aceede880..b1bf7fdeb 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -64,7 +64,12 @@ const handlePhotoUpdated = (evt = false) => {
 
 <template>
     <div class="relative-position">
-        <VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
+        <VnImg
+            ref="image"
+            :id="$props.entityId"
+            @refresh="handlePhotoUpdated(true)"
+            zoom-size="1600x900"
+        >
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index b3cdfffb1..40c9941e9 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -42,9 +42,10 @@ const onItemTagsFetched = async (itemTags) => {
     });
 };
 
-const handleTagSelected = (rows, index, tag) => {
+const handleTagSelected = (rows, index, tagId) => {
+    const tag = tagOptions.value.find((t) => t.id === tagId);
     rows[index].tag = tag;
-    rows[index].tagFk = tag.id;
+    rows[index].tagFk = tagId;
     rows[index].value = null;
     getSelectedTagValues(rows[index]);
 };
@@ -94,7 +95,6 @@ const insertTag = (rows) => {
                 :filter="{
                     fields: ['id', 'itemFk', 'tagFk', 'value', 'priority'],
                     where: { itemFk: route.params.id },
-                    order: 'priority ASC',
                     include: {
                         relation: 'tag',
                         scope: {
@@ -102,16 +102,13 @@ const insertTag = (rows) => {
                         },
                     },
                 }"
+                order="priority"
                 auto-load
                 @on-fetch="onItemTagsFetched"
             >
                 <template #body="{ rows, validate }">
-                    <QCard class="q-pl-lg q-py-md">
-                        <VnRow
-                            v-for="(row, index) in rows"
-                            :key="index"
-                            class="row q-gutter-md q-mb-md"
-                        >
+                    <QCard class="q-px-lg q-pt-md q-pb-sm">
+                        <VnRow v-for="(row, index) in rows" :key="index">
                             <VnSelect
                                 :label="t('itemTags.tag')"
                                 :options="tagOptions"
@@ -119,7 +116,7 @@ const insertTag = (rows) => {
                                 option-label="name"
                                 hide-selected
                                 @update:model-value="
-                                    ($event) => handleTagSelected(rows, index, $event)
+                                    (val) => handleTagSelected(rows, index, val)
                                 "
                                 :required="true"
                                 :rules="validate('itemTag.tagFk')"
@@ -146,7 +143,6 @@ const insertTag = (rows) => {
                                 v-model="row.value"
                                 :label="t('itemTags.value')"
                                 :is-clearable="false"
-                                style="width: 100%"
                             />
                             <VnInput
                                 :label="t('itemTags.relevancy')"
@@ -155,7 +151,7 @@ const insertTag = (rows) => {
                                 :required="true"
                                 :rules="validate('itemTag.priority')"
                             />
-                            <div class="col-1 row justify-center items-center">
+                            <div class="row justify-center items-center" style="flex: 0">
                                 <QIcon
                                     @click="itemTagsRef.remove([row])"
                                     class="fill-icon-on-hover"
@@ -169,7 +165,7 @@ const insertTag = (rows) => {
                                 </QIcon>
                             </div>
                         </VnRow>
-                        <VnRow>
+                        <VnRow class="justify-center items-center">
                             <QIcon
                                 @click="insertTag(rows)"
                                 class="cursor-pointer"
@@ -177,6 +173,7 @@ const insertTag = (rows) => {
                                 color="primary"
                                 name="add"
                                 size="sm"
+                                style="flex: 0"
                             >
                                 <QTooltip>
                                     {{ t('itemTags.addTag') }}