[chore] load new picture only if updated

src/components/CalculationTable.vue

@@ -37,8 +37,9 @@
     </template>
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+
         <q-card>
-          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.id)">
+          <q-img v-if="showPic && props.row.has_image" style="max-height: 256px" :src="image(props.row.id)" fit="contain">
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -83,6 +84,28 @@
               </div>
             </template>
           </q-img>
+          <q-img v-if="showPic && !props.row.has_image" class="bg-white" style="max-height: 256px" src="no-image.svg">
+            <div
+              v-if="!public && !nodetails && editable"
+              class="absolute-top-right justify-end"
+              style="background-color: transparent"
+            >
+              <q-btn
+                round
+                icon="mdi-pencil"
+                style="background-color: rgba(0, 0, 0, 0.5)"
+                @click="editDrink = props.row"
+              />
+            </div>
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
+            </div>
+          </q-img>
           <q-card-section v-if="!showPic">
             <div class="row">
               <div class="col">
@@ -191,8 +214,8 @@ import { filter, Search } from '../utils/filter';
 import SearchInput from './SearchInput.vue';
 import DrinkModify from './DrinkModify.vue';
 import { DeleteObjects } from '../utils/utils';
+import { setNewImage, getNewImage} from '../utils/image';
 import { PERMISSIONS } from '../permissions';
-import { sort } from '../utils/sort';
 import { Notify } from 'quasar';
 
 export default defineComponent({
@@ -222,7 +245,7 @@ export default defineComponent({
 
     onBeforeMount(() => {
       //void store.getDrinks();
-      onRequest({
+      void onRequest({
         pagination: pagination.value,
         filter: undefined,
       });
@@ -237,8 +260,6 @@ export default defineComponent({
         name: 'name',
         label: 'Name',
         field: 'name',
-        sortable: true,
-        sort,
         filterable: true,
         public: true,
       },
@@ -248,8 +269,6 @@ export default defineComponent({
         label: 'Kategorie',
         field: 'type',
         format: (val: FG.DrinkType) => `${val.name}`,
-        sortable: true,
-        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
         filterable: true,
         public: true,
       },
@@ -275,7 +294,6 @@ export default defineComponent({
         label: 'Artikelnummer',
         field: 'article_id',
         sortable: true,
-        sort,
         filterable: true,
         public: false,
       },
@@ -284,7 +302,6 @@ export default defineComponent({
         label: 'Inhalt in l des Gebinde',
         field: 'volume',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -292,7 +309,6 @@ export default defineComponent({
         label: 'Gebindegröße',
         field: 'package_size',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -301,7 +317,6 @@ export default defineComponent({
         field: 'cost_per_package',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -310,7 +325,6 @@ export default defineComponent({
         field: 'cost_per_volume',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
-        sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
       },
       {
         name: 'volumes',
@@ -439,12 +453,12 @@ export default defineComponent({
       void store.updateDrink(drink);
     }
 
-    async function deleteDrink() {
+    function deleteDrink() {
       if (editDrink.value) {
-        await store.deleteDrink(editDrink.value);
+        store.deleteDrink(editDrink.value);
       }
       editDrink.value = undefined;
-      onRequest({ pagination: pagination.value, filter: search.value });
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     const showNewDrink = ref(false);
@@ -534,10 +548,13 @@ export default defineComponent({
       }
       if (drinkPic instanceof File) {
         await savePicture(drinkPic);
+        if (drink.id > 0) {
+          setNewImage(drink.id)
+        }
       }
       editDrink.value = undefined;
       notLoading.value = true;
-      onRequest({ pagination: pagination.value, filter: search.value });
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     function get_volumes(drink_id: number) {
@@ -546,20 +563,17 @@ export default defineComponent({
 
     const notLoading = ref(true);
 
-    const imageloading = ref<Array<{ id: number; loading: boolean }>>([]);
-    function getImageLoading(id: number) {
-      const loading = imageloading.value.find((a) => a.id === id);
-      if (loading) {
-        return loading.loading;
-      }
-      return false;
-    }
-
     function image(id: number | undefined) {
       if (id) {
+        const _newImage = getNewImage(id)
+        if (_newImage) {
           return `${
             api.defaults.baseURL || ''
-        }/pricelist/drinks/${id}/picture?thumbnail?t=${new Date()}`;
+          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`
+        }
+        return `${
+          api.defaults.baseURL || ''
+        }/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }
@@ -587,7 +601,6 @@ export default defineComponent({
       editing_drink,
       get_volumes,
       notLoading,
-      getImageLoading,
       newDrink,
       hasPermission,
       PERMISSIONS,

src/components/DrinkModify.vue

@@ -146,6 +146,7 @@
 </template>
 <script lang="ts">
 import { clone, calc_min_prices, DeleteObjects, calc_cost_per_volume } from '../utils/utils';
+import { getNewImage } from '../utils/image';
 import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
 import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
 import BuildManual from '../components/CalculationTable/BuildManual.vue';
@@ -268,9 +269,6 @@ export default defineComponent({
 
     const image = computed(() => {
       console.log(imgsrc.value, deletePic.value, edit_drink.value);
-      if (deletePic.value) {
-        return 'no-image.svg';
-      }
       if (imgsrc.value) {
         return <string>imgsrc.value;
       }
@@ -278,9 +276,13 @@ export default defineComponent({
         return 'no-image.svg';
       }
       if (edit_drink.value?.has_image) {
+        const _image = getNewImage(edit_drink.value?.id)
+        if (_image) {
+          return `${api.defaults.baseURL || ''}/pricelist/drinks/${edit_drink.value.id}/picture?thumbnail?t=${_image.lastModified.toString()}`
+        }
         return `${api.defaults.baseURL || ''}/pricelist/drinks/${
           edit_drink.value.id
-        }/picture?thumbnail?t=${new Date()}`;
+        }/picture?thumbnail`;
       }
       return 'no-image.svg';
     });

src/utils/image.ts

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+
+const newImage = ref<Array<{ id: number; lastModified: Date }>>([]);
+
+export function getNewImage(id: number) {
+  const image = newImage.value.find((a) => a.id === id);
+  if (image) {
+    return image;
+  }
+  return null;
+}
+
+export function setNewImage(id: number) {
+  const image = newImage.value.find((a) => a.id === id);
+  if (image) {
+    image.lastModified = new Date()
+  } else {
+    newImage.value.push({id, lastModified: new Date()})
+  }
+}