feat: #7604 POC ImageStore to refresh

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

@@ -64,12 +64,26 @@ const getWarehouseName = async (warehouseFk) => {
 onMounted(async () => {
     getItemAvatar();
     getItemConfigs();
+    image.value.store.$subscribe((x, v) => {
+        handlePhotoUpdated(x.events.effect.newValue);
+    });
 });
+<<<<<<< Updated upstream
+=======
+
+const handlePhotoUpdated = (url = null) => {
+    image.value.reload(url);
+};
+>>>>>>> Stashed changes
 </script>
 
 <template>
     <div class="relative-position">
+<<<<<<< Updated upstream
         <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+=======
+        <VnImg ref="image" :id="$props.entityId">
+>>>>>>> Stashed changes
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>

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);
+        },
+    },
+});