src/plugins/pricelist/components/CalculationTable.vue

@@ -60,13 +60,16 @@
           />
         </q-td>
         <q-td key="picture" :props="drinks_props" style="min-width: 256px">
-
           <q-img
-            loading='lazy'
-            :src="drinks_props.row.uuid ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`: 'no-image.svg'"
-            placeholder-src='no-image.svg'
+            loading="lazy"
+            :src="
+              drinks_props.row.uuid
+                ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
+                : 'no-image.svg'
+            "
+            placeholder-src="no-image.svg"
           >
-            <template v-slot:error>
+            <template #error>
               <div class="absolute-full flex flex-center bg-negative text-white">
                 Cannot load image
               </div>
@@ -297,14 +300,7 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  onBeforeMount,
-  ComputedRef,
-  computed,
-  ref,
-  getCurrentInstance,
-} from 'vue';
+import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
 import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
 import { useMainStore } from 'src/store';
 import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
@@ -317,13 +313,13 @@ function sort(a: string | number, b: string | number) {
   if (b > a) return -1;
   return 0;
 }
+
 export default defineComponent({
   name: 'CalculationTable',
   components: { MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
-    const root = getCurrentInstance()?.proxy;
 
     onBeforeMount(() => {
       store.getPriceCalcColumn(user);
@@ -446,6 +442,7 @@ export default defineComponent({
     function updateDrink(drink: Drink) {
       void store.updateDrink(drink);
     }
+
     function deleteDrink(drink: Drink) {
       store.deleteDrink(drink);
     }
@@ -465,21 +462,20 @@ export default defineComponent({
       });
       drinkPic.value = undefined;
     }
+
     function savePicture(drink: Drink) {
       console.log('hier bin ich!!!', drinkPic.value);
       if (drinkPic.value && drinkPic.value instanceof File) {
-        store
-          .upload_drink_picture(drink, drinkPic.value)
-          .catch((response: Response) => {
-            if (response && response.status == 400) {
-              onPictureRejected();
-            }
-          })
+        store.upload_drink_picture(drink, drinkPic.value).catch((response: Response) => {
+          if (response && response.status == 400) {
+            onPictureRejected();
+          }
+        });
       }
     }
 
     function deletePicture(drink: Drink) {
-      void store.delete_drink_picture(drink)
+      void store.delete_drink_picture(drink);
     }
 
     return {

src/plugins/pricelist/components/CalculationTable/NewDrink.vue

@@ -83,7 +83,7 @@ export default defineComponent({
       tags: [],
       type: undefined,
       volumes: [],
-      uuid: ''
+      uuid: '',
     };
 
     const calc_price_pro_volume = computed(

src/plugins/pricelist/components/Pricelist.vue

@@ -1,6 +1,27 @@
 <template>
   <div>
-    <q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
+    <q-table
+      title="Getränke"
+      :columns="columns_drinks"
+      :rows="drinks"
+      row-key="name"
+      :visible-columns="visibleColumn"
+    >
+      <template #top-right>
+        <q-select
+          v-model="visibleColumn"
+          multiple
+          filled
+          dense
+          options-dense
+          display-value="Sichtbarkeit"
+          emit-value
+          map-options
+          :options="[...columns_drinks, ...columns_volumes, ...columns_prices]"
+          option-value="name"
+          options-cover
+        />
+      </template>
       <template #body-cell-volumes="props">
         <q-td :props="props">
           <q-table
@@ -30,12 +51,32 @@
           </q-table>
         </q-td>
       </template>
+      <template #body-cell-picture="drinks_props">
+        <q-td :props="drinks_props" style="min-width: 256px">
+          <q-img
+            loading="lazy"
+            :src="
+              drinks_props.row.uuid
+                ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
+                : 'no-image.svg'
+            "
+            placeholder-src="no-image.svg"
+          >
+            <template #error>
+              <div class="absolute-full flex flex-center bg-negative text-white">
+                Cannot load image
+              </div>
+            </template>
+          </q-img>
+        </q-td>
+      </template>
     </q-table>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, onBeforeMount, computed } from 'vue';
 import { usePricelistStore } from '../store';
+import { useMainStore } from 'src/store';
 
 export default defineComponent({
   name: 'Pricelist',
@@ -51,6 +92,9 @@ export default defineComponent({
     },
   },
   setup() {
+    onBeforeMount(() => {
+      store.getPriceCalcColumn(user);
+    });
     const store = usePricelistStore();
 
     onBeforeMount(() => {
@@ -58,6 +102,10 @@ export default defineComponent({
     });
     const drinks = computed(() => store.drinks);
     const columns_drinks = [
+      {
+        name: 'picture',
+        label: 'Bild',
+      },
       {
         name: 'name',
         label: 'Getränk',
@@ -103,7 +151,15 @@ export default defineComponent({
         field: 'public',
       },
     ];
-    return { columns_drinks, columns_volumes, columns_prices, drinks };
+    const visibleColumn = computed({
+      get: () => store.pricecalc_columns,
+      set: (val) => {
+        store.updatePriceCalcColumn(user, val);
+      },
+    });
+    const mainStore = useMainStore();
+    const user = mainStore.currentUser.userid;
+    return { columns_drinks, columns_volumes, columns_prices, drinks, visibleColumn };
   },
 });
 </script>

src/plugins/pricelist/store.ts

@@ -6,11 +6,13 @@ import { computed, ComputedRef, WritableComputedRef } from 'vue';
 interface MinPrice extends Omit<FG.MinPrices, 'price'> {
   price?: WritableComputedRef<number>;
 }
+
 interface DrinkPriceVolume extends Omit<Omit<FG.DrinkPriceVolume, 'volume'>, 'min_prices'> {
   _volume: number;
   volume?: WritableComputedRef<number>;
   min_prices: MinPrice[];
 }
+
 interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'> {
   volumes: DrinkPriceVolume[];
   cost_price_pro_volume: WritableComputedRef<number | undefined>;
@@ -55,7 +57,7 @@ class Drink {
     cost_price_package_netto,
     tags,
     type,
-    uuid
+    uuid,
   }: FG.Drink) {
     this.id = id;
     this.article_id = article_id;
@@ -162,7 +164,7 @@ export const usePricelistStore = defineStore({
         this.drinks.push(_drink);
       });
       this.create_min_prices();
-      console.log(this.drinks)
+      console.log(this.drinks);
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {
@@ -306,16 +308,16 @@ export const usePricelistStore = defineStore({
     async upload_drink_picture(drink: Drink, file: File) {
       const formData = new FormData();
       formData.append('file', file);
-      const {data} = await api.post<FG.Drink>(`pricelist/drinks/${drink.id}/picture`, formData, {
+      const { data } = await api.post<FG.Drink>(`pricelist/drinks/${drink.id}/picture`, formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },
       });
-      drink.uuid = data.uuid
+      drink.uuid = data.uuid;
     },
     async delete_drink_picture(drink: Drink) {
       await api.delete(`pricelist/drinks/${drink.id}/picture`);
-      drink.uuid = ''
+      drink.uuid = '';
     },
   },
 });