src/components/ui/VnImg.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useImagesStore } from 'src/stores/useImagesStore';
+
+const $props = defineProps({
+    collection: {
+        type: [String, Number],
+        default: 'Images',
+    },
+    size: {
+        type: String,
+        default: '200x200',
+    },
+    zoomSize: {
+        type: String,
+        required: true,
+        default: 'lg',
+    },
+    id: {
+        type: Boolean,
+        default: false,
+    },
+});
+const show = ref(false);
+const token = useSession().getTokenMultimedia();
+const timeStamp = ref(`timestamp=${Date.now()}`);
+const url = computed(
+    () =>
+        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+);
+const emits = defineEmits(['refresh']);
+const reload = (newURL = null) => {
+    if (newURL) url.value = newURL;
+    else {
+        timeStamp.value = `timestamp=${Date.now()}`;
+        store.setImage(url.value);
+    }
+};
+const store = useImagesStore();
+defineExpose({
+    reload,
+    store,
+});
+onMounted(() => {
+    store.setImage(url.value);
+});
+</script>
+<template>
+    <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" />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.q-img {
+    cursor: zoom-in;
+}
+.rounded {
+    border-radius: 50%;
+}
+.img_zoom {
+    width: 100%;
+    height: auto;
+    border-radius: 0%;
+}
+</style>

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -3,8 +3,7 @@ import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
-
-import { useSession } from 'src/composables/useSession';
+import VnImg from 'src/components/ui/VnImg.vue';
 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,20 @@ const getWarehouseName = async (warehouseFk) => {
 };
 
 onMounted(async () => {
-    getItemAvatar();
     getItemConfigs();
+    image.value.store.$subscribe((x, v) => {
+        handlePhotoUpdated(x.events.effect.newValue);
+    });
 });
+
+const handlePhotoUpdated = (url = null) => {
+    image.value.reload(url);
+};
 </script>
 
 <template>
     <div class="relative-position">
-        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+        <VnImg ref="image" :id="$props.entityId">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -82,7 +80,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </template>
-        </QImg>
+        </VnImg>
         <QBtn
             v-if="showEditButton"
             color="primary"
@@ -97,7 +95,7 @@ onMounted(async () => {
                     collection="catalog"
                     :id="entityId"
                     @close-form="toggleEditPictureForm()"
-                    @on-photo-uploaded="getItemAvatar()"
+                    @on-photo-uploaded="handlePhotoUpdated"
                 />
             </QDialog>
         </QBtn>

src/stores/useImagesStore.js

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+
+export const useImagesStore = defineStore('imagesStore', {
+    state: () => ({
+        images: new Map(),
+    }),
+    getters: {
+        get: (state) => () => state.images(),
+    },
+    actions: {
+        setImage(value) {
+            const [url, query] = value.split('?');
+            this.images.set(url, value);
+        },
+    },
+});