From 30232801083b40fbdf75e1fd01173bcb57ce742b Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Jun 2024 13:31:25 +0200
Subject: [PATCH] refactor: refs #6896 refactor VnImg

---
 src/boot/quasar.js                          |  7 ++++
 src/components/ui/VnImg.vue                 | 38 +++++++++------------
 src/pages/Item/Card/ItemDescriptorImage.vue | 17 ++++-----
 src/stores/useImagesStore.js                | 12 +++++++
 4 files changed, 42 insertions(+), 32 deletions(-)
 create mode 100644 src/stores/useImagesStore.js

diff --git a/src/boot/quasar.js b/src/boot/quasar.js
index a8d9b7ad9..b4d1044cf 100644
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@@ -3,4 +3,11 @@ import qFormMixin from './qformMixin';
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
+    app.config.globalProperties.$emitEvent = function (eventName, payload) {
+        app._instance?.emit(eventName, payload);
+    };
+
+    app.config.globalProperties.$onEvent = function (eventName, callback) {
+        app._instance?.on(eventName, callback);
+    };
 });
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 02cec5702..37072a69e 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 
 const $props = defineProps({
@@ -23,42 +23,38 @@ const $props = defineProps({
 });
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
-const timeStamp = `timestamp=${Date.now()}`;
+const timeStamp = ref(`timestamp=${Date.now()}`);
 const url = computed(
     () =>
-        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp}`
+        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
+const emits = defineEmits(['refresh']);
+const reload = (emit = false) => {
+    timeStamp.value = `timestamp=${Date.now()}`;
+};
+defineExpose({
+    reload,
+});
+
+onMounted(() => {});
 </script>
 <template>
-    <QImg
-        :src="url"
-        class="img"
-        v-bind="$attrs"
-        @click="show = !show"
-        spinner-color="primary"
-        :ratio="1"
-    />
+    <QImg :src="url" v-bind="$attrs" @click="show = !show" spinner-color="primary" />
     <QDialog v-model="show" v-if="$props.zoomSize">
-        <QImg
-            :src="url"
-            class="img_zoom"
-            v-bind="$attrs"
-            spinner-color="primary"
-            :ratio="1"
-            style="border-radius: 0%"
-        />
+        <QImg :src="url" class="img_zoom" v-bind="$attrs" spinner-color="primary" />
     </QDialog>
 </template>
 
 <style lang="scss" scoped>
-.img {
+.q-img {
     cursor: zoom-in;
 }
 .rounded {
     border-radius: 50%;
 }
 .img_zoom {
-    width: 72%;
+    width: 100%;
     height: auto;
+    border-radius: 0%;
 }
 </style>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index 5a0e84b45..aceede880 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
-import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -27,19 +26,12 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 
 const image = ref(null);
 const editPhotoFormDialog = ref(null);
 const showEditPhotoForm = ref(false);
 const warehouseName = ref(null);
 
-const getItemAvatar = async () => {
-    const token = getTokenMultimedia();
-    const timeStamp = `timestamp=${Date.now()}`;
-    image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
-};
-
 const toggleEditPictureForm = () => {
     showEditPhotoForm.value = !showEditPhotoForm.value;
 };
@@ -62,14 +54,17 @@ const getWarehouseName = async (warehouseFk) => {
 };
 
 onMounted(async () => {
-    getItemAvatar();
     getItemConfigs();
 });
+
+const handlePhotoUpdated = (evt = false) => {
+    image.value.reload(evt);
+};
 </script>
 
 <template>
     <div class="relative-position">
-        <VnImg :id="$props.entityId">
+        <VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -97,7 +92,7 @@ onMounted(async () => {
                     collection="catalog"
                     :id="entityId"
                     @close-form="toggleEditPictureForm()"
-                    @on-photo-uploaded="getItemAvatar()"
+                    @on-photo-uploaded="handlePhotoUpdated"
                 />
             </QDialog>
         </QBtn>
diff --git a/src/stores/useImagesStore.js b/src/stores/useImagesStore.js
new file mode 100644
index 000000000..b340a2798
--- /dev/null
+++ b/src/stores/useImagesStore.js
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useImagesStore = defineStore('imagesStore', {
+    state: () => ({
+        images: {},
+    }),
+    actions: {
+        async pushImage(url, data) {
+            this.images[url] = data;
+        },
+    },
+});