[view][fix] enable, disable pic; fix reload drinks after update or delete

src/components/CalculationTable.vue

@@ -18,6 +18,7 @@
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="search_keys" />
         <slot></slot>
+        <q-toggle v-model="showPic" icon="mdi-camera-burst" />
         <q-btn v-if="!public && !nodetails" label="Aufpreise">
           <q-menu anchor="center middle" self="center middle">
             <min-price-setting />
@@ -37,7 +38,7 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img style="max-height: 256px" :src="image(props.row.uuid)">
+          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.uuid)">
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -82,6 +83,19 @@
               </div>
             </template>
           </q-img>
+          <q-card-section v-if="!showPic">
+            <div class="row">
+              <div class="col">
+                <div class="text-h4 text-center">
+                  {{ props.row.name }}
+                </div>
+                <div class="text-caption text-center">
+                  {{ props.row.type.name }}
+                </div>
+              </div>
+              <q-btn rounded icon="mdi-pencil" @click="editDrink = props.row" />
+            </div>
+          </q-card-section>
           <q-card-section>
             <q-badge
               v-for="tag in props.row.tags"
@@ -425,11 +439,12 @@ export default defineComponent({
       void store.updateDrink(drink);
     }
 
-    function deleteDrink() {
+    async function deleteDrink() {
       if (editDrink.value) {
-        store.deleteDrink(editDrink.value);
+        await store.deleteDrink(editDrink.value);
       }
       editDrink.value = undefined;
+      onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     const showNewDrink = ref(false);
@@ -522,6 +537,7 @@ export default defineComponent({
       }
       editDrink.value = undefined;
       notLoading.value = true;
+      onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     function get_volumes(drink_id: number) {
@@ -546,6 +562,8 @@ export default defineComponent({
       return 'no-image.svg';
     }
 
+    const showPic = ref(true);
+
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -574,6 +592,7 @@ export default defineComponent({
       image,
       loading,
       onRequest,
+      showPic,
     };
   },
 });