src/plugins/pricelist/components/CalculationTable.vue

@@ -59,23 +59,34 @@
             @click="deleteDrink(drinks_props.row)"
           />
         </q-td>
-        <q-td key="picture" :props="drinks_props" style="width: 128px">
+        <q-td key="picture" :props="drinks_props" style="min-width: 256px">
           <q-img
-            :src="`http://localhost/api/pricelist/drinks/${drinks_props.row.id}/picture?size=128`"
+            v-if="!drinks_props.row.loading"
+            :src="`http://localhost/api/pricelist/drinks/${drinks_props.row.id}/picture?size=256`"
           />
-          <q-popup-edit
-            v-slot="scope"
-            v-model="drinkPic"
-            buttons
-            label-set="Speichern"
-            label-cancel="Abbrechen"
-            @update:modelValue="savePicture(drinks_props.row)"
-          >
-            <q-file v-model="scope.value" filled>
-              <template #prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
+          <q-popup-edit v-model="drinkPic" @update:modelValue="savePicture(drinks_props.row)">
+            <template #default="scope">
+              <div class="full-width row">
+                <q-file v-model="scope.value" filled>
+                  <template #prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <div class="full-width row justify-between">
+                  <q-btn label="Abbrechen" flat color="primary" @click="scope.cancel" />
+                  <q-btn
+                    label="Löschen"
+                    flat
+                    color="primary"
+                    @click="
+                      scope.cancel();
+                      deletePicture(drinks_props.row);
+                    "
+                  />
+                  <q-btn label="Speichern" flat color="primary" @click="scope.set" />
+                </div>
+              </div>
+            </template>
           </q-popup-edit>
         </q-td>
         <q-td key="name" :props="drinks_props">
@@ -446,20 +457,31 @@ export default defineComponent({
       });
       drinkPic.value = undefined;
     }
-
+    interface Row extends Drink {
+      expand: boolean;
+    }
     function savePicture(drink: Drink) {
       console.log('hier bin ich!!!', drinkPic.value);
-      if (drinkPic.value && drinkPic.value instanceof File)
+      drink.loading = true;
+      if (drinkPic.value && drinkPic.value instanceof File) {
         store
           .upload_drink_picture(drink, drinkPic.value)
-          .then(() => {
-            root?.$forceUpdate();
-          })
           .catch((response: Response) => {
             if (response && response.status == 400) {
               onPictureRejected();
             }
+          })
+          .finally(() => {
+            drink.loading = false;
           });
+      }
+    }
+
+    function deletePicture(drink: Row) {
+      drink.loading = true;
+      void store.delete_drink_picture(drink).finally(() => {
+        drink.loading = false;
+      });
     }
 
     return {
@@ -475,6 +497,7 @@ export default defineComponent({
       showNewDrink,
       drinkPic,
       savePicture,
+      deletePicture,
       console,
     };
   },

src/plugins/pricelist/components/DrinkTypes.vue

@@ -70,14 +70,14 @@ export default defineComponent({
         label: 'Getränkeart',
         field: 'name',
         align: 'left',
-        sortable: true
+        sortable: true,
       },
       {
         name: 'actions',
         label: 'Aktionen',
         field: 'actions',
-        align: 'right'
-      }
+        align: 'right',
+      },
     ];
 
     async function addType() {
@@ -94,7 +94,7 @@ export default defineComponent({
       try {
         await store.changeDrinkTypeName({
           id: actualDrinkType.value.id,
-          name: newDrinkTypeName.value
+          name: newDrinkTypeName.value,
         });
       } catch (e) {}
       discardChanges();
@@ -121,9 +121,9 @@ export default defineComponent({
       actualDrinkType,
       newDrinkTypeName,
       discardChanges,
-      saveChanges
+      saveChanges,
     };
-  }
+  },
 });
 </script>
 

src/plugins/pricelist/store.ts

@@ -15,6 +15,7 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'>
   volumes: DrinkPriceVolume[];
   cost_price_pro_volume: WritableComputedRef<number | undefined>;
   _cost_price_pro_volume?: number;
+  loading: boolean;
 }
 
 class DrinkPriceVolume implements DrinkPriceVolume {
@@ -80,6 +81,7 @@ class Drink {
     this.tags = tags;
     this.type = type;
     this.volumes = [];
+    this.loading = false;
   }
 }
 
@@ -309,6 +311,9 @@ export const usePricelistStore = defineStore({
         },
       });
     },
+    async delete_drink_picture(drink: Drink) {
+      await api.delete(`pricelist/drinks/${drink.id}/picture`);
+    },
   },
 });