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

src/components/CalculationTable/DrinkPriceVolumes.vue

@@ -42,8 +42,8 @@
         </div>
       </div>
       <div class="q-pa-sm">
-        <div v-for="(price, index) in volume.prices" :key="price.id">
-          <div v-if="isPublic(price, volume)" class="fit row justify-around q-py-sm">
+        <div v-for="(price, index) in filterPublic(volume.prices)" :key="price.id">
+          <div class="fit row justify-around q-py-sm">
             <div
               v-if="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
               class="text-body1 col-3"
@@ -93,7 +93,7 @@
               </q-btn>
             </div>
           </div>
-          <q-separator v-if="index < volume.prices.length - 1" />
+          <q-separator v-if="index < filterPublic(volume.prices).length - 1" />
         </div>
         <div
           v-if="!public && !nodetails && isUnderMinPrice"
@@ -294,13 +294,11 @@ export default defineComponent({
       emit('update:modelValue', volumes.value);
     }
 
-    function isPublic(price: FG.DrinkPrice, drink) {
-      console.log('drink', drink);
+    function filterPublic(prices: Array<FG.DrinkPrice>) {
       if (props.public) {
-        console.log(price);
-        return price.public;
+        return prices.filter((price) => price.public);
       }
-      return true;
+      return prices;
     }
 
     const isUnderMinPrice = computed(() => {
@@ -337,7 +335,7 @@ export default defineComponent({
       isUnderMinPrice,
       hasPermission,
       PERMISSIONS,
-      isPublic,
+      filterPublic,
     };
   },
 });

test.ts

@@ -1,93 +0,0 @@
-declare namespace FG {
-  interface Notification {
-    id: number;
-    plugin: string;
-    text: string;
-    data?: any;
-    time: Date;
-  }
-  interface User {
-    userid: string;
-    display_name: string;
-    firstname: string;
-    lastname: string;
-    mail: string;
-    birthday?: Date;
-    roles: Array<string>;
-    permissions?: Array<string>;
-    avatar_url?: string;
-  }
-  interface Session {
-    expires: Date;
-    token: string;
-    lifetime: number;
-    browser: string;
-    platform: string;
-    userid: string;
-  }
-  type Permission = string;
-  interface Role {
-    id: number;
-    name: string;
-    permissions: Array<Permission>;
-  }
-  interface Drink {
-    id: number;
-    article_id?: string;
-    package_size?: number;
-    name: string;
-    volume?: number;
-    cost_per_volume?: number;
-    cost_per_package?: number;
-    uuid: string;
-    receipt?: Array<string>;
-    tags?: Array<Tag>;
-    type?: DrinkType;
-    volumes: Array<DrinkPriceVolume>;
-  }
-  interface DrinkIngredient {
-    id: number;
-    volume: number;
-    ingredient_id: number;
-    cost_per_volume: number;
-    name: string;
-  }
-  interface DrinkPrice {
-    id: number;
-    price: number;
-    volume: DrinkPriceVolume;
-    public: boolean;
-    description?: string;
-  }
-  interface DrinkPriceVolume {
-    id: number;
-    drink: Drink;
-    volume: number;
-    min_prices: Array<MinPrices>;
-    prices: Array<DrinkPrice>;
-    ingredients: Array<Ingredient>;
-  }
-  interface DrinkType {
-    id: number;
-    name: string;
-  }
-  interface ExtraIngredient {
-    id: number;
-    name: string;
-    price: number;
-  }
-  interface Ingredient {
-    id: number;
-    drink_ingredient?: DrinkIngredient;
-    extra_ingredient?: ExtraIngredient;
-  }
-  interface MinPrices {
-    percentage: number;
-    price: number;
-  }
-  interface Tag {
-    id: number;
-    name: string;
-    color: string;
-  }
-}