fix: refs #7283 use vnAvatar & add optional zoom

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') }}

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>

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"

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, Boolean], default: null },
-    title: { type: String, default: null },
+    color: { type: String, default: null },
-    color: { type: Boolean, default: true },
 });
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 const { t } = useI18n();
-
+const src = computed(
-const title = computed(() => $props.title ?? t('globals.system'));
+    () => `/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"
+            v-bind="$attrs"
-            :title="title"
+            :title="title !== false ? title : undefined"
         >
-            <template v-if="showLetter">{{ title.charAt(0) }}</template>
+            <template v-if="showLetter && title !== false">
-            <QImg
+                {{ title.charAt(0) }}
-                v-else
+            </template>
-                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
+            <QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
-                spinner-color="white"
-                @error="showLetter = true"
-            />
         </QAvatar>
         <div class="description">
-            <slot name="description" v-if="$props.description">
+            <slot name="description" v-if="description">
-                <p>
+                <p v-text="description" />
-                    {{ $props.description }}
-                </p>
             </slot>
         </div>
     </div>

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">
+    <QDialog v-if="$props.zoom" v-model="show">
-        <QImg :src="getUrl(true)" size="full" v-bind="$attrs" spinner-color="primary" />
+        <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>

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"

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 VnAvatar from 'src/components/ui/VnAvatar.vue';
-import VnImg from 'src/components/ui/VnImg.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">
+                        <VnAvatar
-                            <VnImg
+                            :worker-id="data.workerFk"
-                                v-if="data.workerFk"
+                            size="160x160"
-                                :size="'160x160'"
+                            :title="false"
-                                :id="data.workerFk"
+                            color="orange"
-                                collection="user"
-                                spinner-color="white"
                         />
-                        </QAvatar>
                     </template>
                 </VnSelect>
                 <QSelect

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">
+                        <VnAvatar
-                            <VnImg
+                            :worker-id="data.salesPersonFk"
-                                v-if="data.salesPersonFk"
+                            color="orange"
-                                :id="data.salesPersonFk"
+                            :title="false"
-                                collection="user"
-                                spinner-color="white"
                         />
-                        </QAvatar>
                     </template>
                 </VnSelect>
                 <QSelect

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -64,12 +64,7 @@ const handlePhotoUpdated = (evt = false) => {
 
 <template>
     <div class="relative-position">
-        <VnImg
+        <VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
-            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>

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">

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>