From b8d38f15e40d91663064dcfdd905215ce8de9c79 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 5 Aug 2024 17:13:15 +0200
Subject: [PATCH] fix: refs #7283 use vnAvatar & add optional zoom

---
 src/components/NavBar.vue                     |  2 +-
 src/components/UserPanel.vue                  |  2 +-
 src/components/ui/CatalogItem.vue             |  2 +-
 src/components/ui/VnAvatar.vue                | 42 +++++++++----------
 src/components/ui/VnImg.vue                   | 37 +++++++++++-----
 src/pages/Account/Card/AccountDescriptor.vue  |  2 +-
 src/pages/Claim/Card/ClaimBasicData.vue       | 20 ++++-----
 src/pages/Customer/Card/CustomerBasicData.vue | 15 +++----
 src/pages/Item/Card/ItemDescriptorImage.vue   |  7 +---
 src/pages/Wagon/WagonCounter.vue              |  7 +++-
 src/pages/Worker/Card/WorkerDescriptor.vue    |  2 +-
 11 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index bb64d2f35..e80a293c6 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -77,7 +77,7 @@ const pinnedModulesRef = ref();
                         :worker-id="user.id"
                         :title="user.name"
                         size="lg"
-                        :color="false"
+                        color="transparent"
                     />
                     <QTooltip bottom>
                         {{ t('globals.userPanel') }}
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index a0ba6bb8e..690739d75 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -157,7 +157,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     :worker-id="user.id"
                     :title="user.name"
                     size="80px"
-                    :color="false"
+                    color="transparent"
                 />
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
diff --git a/src/components/ui/CatalogItem.vue b/src/components/ui/CatalogItem.vue
index 5c5d71018..ef722483b 100644
--- a/src/components/ui/CatalogItem.vue
+++ b/src/components/ui/CatalogItem.vue
@@ -31,7 +31,7 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <VnImg :id="item.id" zoom-size="lg" class="image" />
+                <VnImg :id="item.id" class="image" />
                 <div v-if="item.hex && isCatalog" class="item-color-container">
                     <div
                         class="item-color"
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index 1cc6ef795..6a51fef2a 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import { useColor } from 'src/composables/useColor';
@@ -7,39 +7,39 @@ import { useColor } from 'src/composables/useColor';
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    size: { type: String, default: null },
-    title: { type: String, default: null },
-    color: { type: Boolean, default: true },
+    title: { type: [String, Boolean], default: null },
+    color: { type: String, default: null },
 });
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 const { t } = useI18n();
-
-const title = computed(() => $props.title ?? t('globals.system'));
+const src = computed(
+    () => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`
+);
+const title = computed(() =>
+    $props.title !== false ? $props.title || t('globals.system') : false
+);
 const showLetter = ref(false);
+
+watch(src, () => (showLetter.value = false));
 </script>
 <template>
-    <div class="avatar-picture column items-center">
+    <div class="column items-center">
         <QAvatar
             :style="{
-                backgroundColor: color ? useColor(title) : 'transparent',
+                backgroundColor: color ? color : useColor(title),
             }"
-            :size="$props.size"
-            :title="title"
+            v-bind="$attrs"
+            :title="title !== false ? title : undefined"
         >
-            <template v-if="showLetter">{{ title.charAt(0) }}</template>
-            <QImg
-                v-else
-                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
-                spinner-color="white"
-                @error="showLetter = true"
-            />
+            <template v-if="showLetter && title !== false">
+                {{ title.charAt(0) }}
+            </template>
+            <QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
         </QAvatar>
         <div class="description">
-            <slot name="description" v-if="$props.description">
-                <p>
-                    {{ $props.description }}
-                </p>
+            <slot name="description" v-if="description">
+                <p v-text="description" />
             </slot>
         </div>
     </div>
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 2a2df5aed..e9044466e 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -13,13 +13,17 @@ const $props = defineProps({
         type: String,
         default: 'catalog',
     },
-    size: {
+    resolution: {
         type: String,
         default: '200x200',
     },
-    zoomSize: {
+    zoomResolution: {
         type: String,
-        default: '520x520',
+        default: null,
+    },
+    zoom: {
+        type: Boolean,
+        default: true,
     },
     id: {
         type: Number,
@@ -29,13 +33,14 @@ const $props = defineProps({
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
-
 const isEmployee = useRole().isEmployee();
 
 const getUrl = (zoom = false) => {
-    const size = zoom ? $props.zoomSize : $props.size;
+    const curResolution = zoom
+        ? $props.zoomResolution || $props.resolution
+        : $props.resolution;
     return isEmployee
-        ? `/api/${$props.storage}/${$props.collection}/${size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        ? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
         : noImage;
 };
 const reload = () => {
@@ -47,21 +52,31 @@ defineExpose({
 </script>
 <template>
     <QImg
-        :class="{ zoomIn: $props.zoomSize }"
+        :class="{ zoomIn: zoom }"
         :src="getUrl()"
         v-bind="$attrs"
-        @click="show = !show"
+        @click.stop="show = $props.zoom ? true : false"
         spinner-color="primary"
     />
-    <QDialog v-model="show" v-if="$props.zoomSize">
-        <QImg :src="getUrl(true)" size="full" v-bind="$attrs" spinner-color="primary" />
+    <QDialog v-if="$props.zoom" v-model="show">
+        <QImg
+            :src="getUrl(true)"
+            v-bind="$attrs"
+            spinner-color="primary"
+            class="img_zoom"
+        />
     </QDialog>
 </template>
-
 <style lang="scss" scoped>
 .q-img {
     &.zoomIn {
         cursor: zoom-in;
     }
 }
+.rounded {
+    border-radius: 50%;
+}
+.img_zoom {
+    border-radius: 0%;
+}
 </style>
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index d43266172..bc0c8c713 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -54,7 +54,7 @@ const hasAccount = ref(false);
         </template>
         <template #before>
             <!-- falla id :id="entityId.value" collection="user" size="160x160" -->
-            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
+            <VnImg :id="entityId" collection="user" resolution="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index d29ed139e..ac312e958 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -10,13 +10,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 import axios from 'axios';
-// import { useSession } from 'src/composables/useSession';
-import VnImg from 'src/components/ui/VnImg.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-// const { getTokenMultimedia } = useSession();
-// const token = getTokenMultimedia();
 
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
@@ -94,15 +91,12 @@ const statesFilter = {
                     :rules="validate('claim.claimStateFk')"
                 >
                     <template #before>
-                        <QAvatar color="orange">
-                            <VnImg
-                                v-if="data.workerFk"
-                                :size="'160x160'"
-                                :id="data.workerFk"
-                                collection="user"
-                                spinner-color="white"
-                            />
-                        </QAvatar>
+                        <VnAvatar
+                            :worker-id="data.workerFk"
+                            size="160x160"
+                            :title="false"
+                            color="orange"
+                        />
                     </template>
                 </VnSelect>
                 <QSelect
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 296c48012..ce5c593d7 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -97,14 +97,11 @@ const contactChannels = ref([]);
                     :use-like="false"
                 >
                     <template #prepend>
-                        <QAvatar color="orange">
-                            <VnImg
-                                v-if="data.salesPersonFk"
-                                :id="data.salesPersonFk"
-                                collection="user"
-                                spinner-color="white"
-                            />
-                        </QAvatar>
+                        <VnAvatar
+                            :worker-id="data.salesPersonFk"
+                            color="orange"
+                            :title="false"
+                        />
                     </template>
                 </VnSelect>
                 <QSelect
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index b1bf7fdeb..d923dd28f 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -64,12 +64,7 @@ const handlePhotoUpdated = (evt = false) => {
 
 <template>
     <div class="relative-position">
-        <VnImg
-            ref="image"
-            :id="$props.entityId"
-            @refresh="handlePhotoUpdated(true)"
-            zoom-size="1600x900"
-        >
+        <VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 70bbc9803..505cbba28 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -64,7 +64,12 @@ function confirm() {
     <QList class="row q-mx-auto q-mt-xl">
         <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
+                <VnImg
+                    :id="props.id"
+                    width="130px"
+                    @click="handleEvent(name, 'add')"
+                    :zoom="false"
+                />
                 <p class="title">{{ props.title }}</p>
             </QItemSection>
             <QItemSection class="q-ma-none">
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index e8dc7d878..8fbb23ef8 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -147,7 +147,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             <VnImg
                 :id="parseInt(entityId)"
                 collection="user"
-                size="520x520"
+                resolution="520x520"
                 class="photo"
             >
                 <template #error>