force item descriptor image upload

src/components/EditPictureForm.vue

@@ -12,7 +12,7 @@ import 'croppie/croppie.css';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
-const emit = defineEmits(['closeForm']);
+const emit = defineEmits(['closeForm', 'onPhotoUploaded']);
 
 const props = defineProps({
     id: {
@@ -175,8 +175,6 @@ const onUploadAccept = () => {
             .then(() => makeRequest());
     } catch (err) {
         console.error('Error uploading image');
-    } finally {
-        emit('closeForm');
     }
 };
 
@@ -194,6 +192,9 @@ const makeRequest = async () => {
         },
     });
 
+    emit('closeForm');
+    emit('onPhotoUploaded');
+
     notify(t('globals.dataSaved'), 'positive');
 };
 </script>

src/pages/Item/Card/ItemDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -43,6 +43,7 @@ const user = state.getUser();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const image = ref(null);
 const regularizeStockFormDialog = ref(null);
 const editPhotoFormDialog = ref(null);
 const item = ref(null);
@@ -65,14 +66,16 @@ const warehouseFk = computed({
 const showWarehouseIconTooltip = ref(true);
 const showEditPhotoForm = ref(false);
 
-onMounted(() => {
+onMounted(async () => {
+    await getItemAvatar();
     warehouseFk.value = user.value.warehouseFk;
 });
 
-function getItemAvatar() {
+const getItemAvatar = async () => {
     const token = getToken();
-    return `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}`;
-}
+    const timeStamp = `timestamp=${Date.now()}`;
+    image.value = `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}&${timeStamp}`;
+};
 
 const data = ref(useCardDescription());
 const setData = (entity) => {
@@ -189,7 +192,7 @@ const openCloneDialog = async () => {
         </template>
         <template #before>
             <div class="relative-position">
-                <QImg :src="getItemAvatar()" class="photo" style="position: relative">
+                <QImg :src="image" spinner-color="primary">
                     <template #error>
                         <div
                             class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -221,6 +224,7 @@ const openCloneDialog = async () => {
                             collection="catalog"
                             :id="entityId"
                             @close-form="toggleEditPictureForm()"
+                            @on-photo-uploaded="getItemAvatar()"
                         />
                     </QDialog>
                 </QBtn>