From 73a5de021d4625d7e2749aa2c5ad076ac21de68b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 20 Mar 2021 14:59:55 +0100
Subject: [PATCH] [pricelist][break] some cleanup code. update not work

---
 package.json                                  |   3 +-
 src/plugins/pricelist/altStore.ts             | 393 ------------------
 .../pricelist/components/CalculationTable.vue | 197 +--------
 .../DrinkPriceVolumeTable/NewVolume.vue       |  94 +++++
 .../DrinkPriceVolumesTable.vue                | 202 +++++++++
 .../CalculationTable/Ingredients.vue          |  48 ++-
 .../CalculationTable/PriceTable.vue           |  47 ++-
 src/plugins/pricelist/store.ts                |  76 +---
 yarn.lock                                     |  14 +-
 9 files changed, 383 insertions(+), 691 deletions(-)
 delete mode 100644 src/plugins/pricelist/altStore.ts
 create mode 100644 src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
 create mode 100644 src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue

diff --git a/package.json b/package.json
index 708e7b8..5826b11 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "eslint-plugin-vue": "^7.7.0",
     "eslint-webpack-plugin": "^2.5.2",
     "prettier": "^2.2.1",
-    "typescript": "^4.2.3"
+    "typescript": "^4.2.3",
+    "vue-typed-emit": "^1.1.0"
   },
   "browserslist": [
     "last 10 Chrome versions",
diff --git a/src/plugins/pricelist/altStore.ts b/src/plugins/pricelist/altStore.ts
deleted file mode 100644
index 6bf3718..0000000
--- a/src/plugins/pricelist/altStore.ts
+++ /dev/null
@@ -1,393 +0,0 @@
-import { reactive, computed, WritableComputedRef } from 'vue';
-import { api } from 'src/boot/axios';
-import { AxiosResponse } from 'axios';
-/*
-const state = reactive<{
-  drinks: Drink[];
-  tags: FG.Tag[];
-  drinkTypes: FG.DrinkType[];
-  extraIngredients: FG.ExtraIngredient[];
-  pricecalc_columns: Array<string>;
-}>({
-  drinks: [],
-  tags: [],
-  drinkTypes: [],
-  extraIngredients: [],
-  pricecalc_columns: [
-    'name',
-    'drink_type',
-    'volume_package',
-    'cost_price_package_netto',
-    'package_size',
-    'cost_price_pro_volume',
-    'volumes',
-    'volume',
-    'min_prices',
-    'prices',
-    'price',
-    'description',
-    'public',
-  ],
-});
-
-interface MinPrice extends Omit<FG.MinPrices, 'price'> {
-  price: WritableComputedRef<number> | null;
-}
-interface DrinkPriceVolume extends Omit<Omit<FG.DrinkPriceVolume, 'volume'>, 'min_prices'> {
-  _volume: number;
-  volume: WritableComputedRef<number> | null;
-  min_prices: MinPrice[];
-}
-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;
-}
-
-class DrinkPriceVolume {
-  constructor({ id, volume, min_prices, prices, ingredients }: FG.DrinkPriceVolume, drink: Drink) {
-    this.id = id;
-    this._volume = volume;
-    this.prices = prices;
-    this.ingredients = ingredients;
-    this.min_prices = [
-      {
-        percentage: 100,
-        price: create_min_prices(drink, this, 100),
-      },
-      {
-        percentage: 250,
-        price: create_min_prices(drink, this, 250),
-      },
-      {
-        percentage: 300,
-        price: create_min_prices(drink, this, 300),
-      },
-    ];
-    this.volume = computed<number>({
-      get: () => {
-        if (this.ingredients.some((ingredient) => !!ingredient.drink_ingredient)) {
-          let retVal = 0;
-          this.ingredients.forEach((ingredient) => {
-            if (ingredient.drink_ingredient?.volume) {
-              retVal += ingredient.drink_ingredient.volume;
-            }
-          });
-          this._volume = retVal;
-          return retVal;
-        } else {
-          return this._volume;
-        }
-      },
-      set: (val) => (this._volume = val),
-    });
-  }
-}
-
-class Drink {
-  constructor({
-    id,
-    article_id,
-    package_size,
-    name,
-    volume,
-    cost_price_pro_volume,
-    cost_price_package_netto,
-    tags,
-    type,
-    volumes,
-  }: FG.Drink) {
-    this.id = id;
-    this.article_id = article_id;
-    this.package_size = package_size;
-    this.name = name;
-    this.volume = volume;
-    this.cost_price_package_netto = cost_price_package_netto;
-    this._cost_price_pro_volume = cost_price_pro_volume;
-    this.cost_price_pro_volume = computed({
-      get: () => {
-        if (!!this.volume && !!this.package_size && !!this.cost_price_package_netto) {
-          const retVal =
-            ((this.cost_price_package_netto || 0) /
-              ((this.volume || 0) * (this.package_size || 0))) *
-            1.19;
-          this._cost_price_pro_volume = Math.round(retVal * 1000) / 1000;
-        }
-
-        return this._cost_price_pro_volume;
-      },
-      set: (val) => (this._cost_price_pro_volume = val),
-    });
-    this.tags = tags;
-    this.type = type;
-    this.volumes = [];
-    //volumes.forEach(volume => {
-    //  this.volumes.push(new DrinkPriceVolume(volume, this));
-    //});
-  }
-}
-
-const actions = {
-  getDrinks() {
-    api
-      .get('pricelist/drinks')
-      .then((response: AxiosResponse<FG.Drink[]>) => {
-        state.drinks = [];
-        response.data.forEach((drink) => {
-          state.drinks.push(new Drink(drink));
-        });
-        state.drinks.forEach((drink) => {
-          const _drink = response.data.find((a) => a.id === drink.id);
-          _drink?.volumes.forEach((volume) => {
-            drink.volumes.push(new DrinkPriceVolume(volume, drink));
-          });
-        });
-      })
-      .catch((err) => console.warn(err));
-  },
-  setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-    api
-      .post(`pricelist/volumes/${volume.id}/prices`, price)
-      .then((response: AxiosResponse<FG.DrinkPrice>) => {
-        volume.prices.push(response.data);
-        this.sortPrices(volume);
-      })
-      .catch((err) => console.warn(err));
-  },
-  sortPrices(volume: DrinkPriceVolume) {
-    volume.prices.sort((a, b) => {
-      if (a.price > b.price) return 1;
-      if (b.price > a.price) return -1;
-      return 0;
-    });
-  },
-  deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
-    api
-      .delete(`pricelist/prices/${price.id}`)
-      .then(() => {
-        const index = volume.prices.findIndex((a) => a.id == price.id);
-        if (index > -1) {
-          volume.prices.splice(index, 1);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-    api
-      .put(`pricelist/prices/${price.id}`, price)
-      .then((response: AxiosResponse<FG.DrinkPrice>) => {
-        const index = volume.prices.findIndex((a) => a.id === price.id);
-        if (index > -1) {
-          this.sortPrices(volume);
-        }
-      })
-      .catch((err) => console.log(err));
-  },
-  setVolume(volume: DrinkPriceVolume, drink: Drink) {
-    console.log(volume);
-    api
-      .post(`pricelist/drinks/${drink.id}/volumes`, {
-        ...volume,
-        volume: volume.volume,
-      })
-      .then((response: AxiosResponse<FG.DrinkPriceVolume>) => {
-        drink.volumes.push(new DrinkPriceVolume(response.data, drink));
-      })
-      .catch((err) => console.warn(err));
-  },
-  updateVolume(volume: DrinkPriceVolume, drink: Drink) {
-    api
-      .put(`pricelist/volumes/${volume.id}`, {
-        ...volume,
-        volume: volume.volume?.value,
-      })
-      .catch((err) => console.warn(err));
-  },
-  deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
-    api
-      .delete(`pricelist/volumes/${volume.id}`)
-      .then(() => {
-        const index = drink.volumes.findIndex((a) => a.id === volume.id);
-        if (index > -1) {
-          drink.volumes.splice(index, 1);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  getExtraIngredients() {
-    api
-      .get('pricelist/ingredients/extraIngredients')
-      .then((response: AxiosResponse<FG.ExtraIngredient[]>) => {
-        state.extraIngredients = response.data;
-      })
-      .catch((err) => console.log(err));
-  },
-  setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-    api
-      .post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
-      .then((response: AxiosResponse<FG.Ingredient>) => {
-        volume.ingredients.push(response.data);
-      })
-      .catch((err) => console.warn(err));
-  },
-  updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-    api
-      .put(`pricelist/ingredients/${ingredient.id}`, ingredient)
-      .then((response: AxiosResponse<FG.Ingredient>) => {
-        //const index = volume.ingredients.findIndex(a => a.id === response.data.id);
-        //if (index > -1) {
-        //  volume.ingredients[index] = response.data;
-        //}
-      })
-      .catch((err) => console.warn(err));
-  },
-  deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-    api
-      .delete(`pricelist/ingredients/${ingredient.id}`)
-      .then(() => {
-        const index = volume.ingredients.findIndex((a) => a.id === ingredient.id);
-        if (index > -1) {
-          volume.ingredients.splice(index, 1);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  getDrinkTypes() {
-    api
-      .get('pricelist/drink-types')
-      .then((response: AxiosResponse<FG.DrinkType[]>) => {
-        state.drinkTypes = response.data;
-      })
-      .catch((err) => console.warn(err));
-  },
-  setDrink(drink: FG.Drink) {
-    api
-      .post('pricelist/drinks', drink)
-      .then((response: AxiosResponse<FG.Drink>) => {
-        state.drinks.push(new Drink(response.data));
-        const drink = state.drinks.find((a) => a.id === response.data.id);
-        response.data.volumes.forEach((volume) => {
-          drink?.volumes.push(new DrinkPriceVolume(volume, drink));
-        });
-      })
-      .catch((err) => console.warn(err));
-  },
-  updateDrink(drink: Drink) {
-    api
-      .put(`pricelist/drinks/${drink.id}`, {
-        ...drink,
-        cost_price_pro_volume: drink.cost_price_pro_volume?.value,
-      })
-      .catch((err) => console.warn(err));
-  },
-  deleteDrink(drink: Drink) {
-    api
-      .delete(`pricelist/drinks/${drink.id}`)
-      .then(() => {
-        const index = state.drinks.findIndex((a) => a.id === drink.id);
-        if (index > -1) {
-          state.drinks.splice(index, 1);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  setExtraIngredient(ingredient: FG.ExtraIngredient) {
-    api
-      .post('pricelist/ingredients/extraIngredients', ingredient)
-      .then((response: AxiosResponse<FG.ExtraIngredient>) => {
-        state.extraIngredients.push(response.data);
-      })
-      .catch((err) => console.warn(err));
-  },
-  updateExtraIngredient(ingredient: FG.ExtraIngredient) {
-    api
-      .put(`pricelist/ingredients/extraIngredients/${ingredient.id}`, ingredient)
-      .then((response: AxiosResponse<FG.ExtraIngredient>) => {
-        const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
-        if (index > -1) {
-          state.extraIngredients[index] = response.data;
-        } else {
-          state.extraIngredients.push(response.data);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  deleteExtraIngredient(ingredient: FG.ExtraIngredient) {
-    api
-      .delete(`pricelist/ingredients/extraIngredients/${ingredient.id}`)
-      .then(() => {
-        const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
-        if (index > -1) {
-          state.extraIngredients.splice(index, 1);
-        }
-      })
-      .catch((err) => console.warn(err));
-  },
-  getPriceCalcColumn(userid: string) {
-    api
-      .get(`pricelist/users/${userid}/pricecalc_columns`)
-      .then(({ data }: AxiosResponse<Array<string>>) => {
-        if (data.length > 0) {
-          state.pricecalc_columns = data;
-        }
-      })
-      .catch((err) => console.log(err));
-  },
-  updatePriceCalcColumn(userid: string, data: Array<string>) {
-    api
-      .put(`pricelist/users/${userid}/pricecalc_columns`, data)
-      .then(() => {
-        state.pricecalc_columns = data;
-      })
-      .catch((err) => console.log(err));
-  },
-};
-
-const getters = {};
-
-function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: number) {
-  if (drink.cost_price_pro_volume?.value) {
-    if (volume.ingredients.every((ingredient) => !!ingredient.drink_ingredient)) {
-      return computed<number>(() => {
-        let retVal = (drink.cost_price_pro_volume?.value || 0) * (volume.volume?.value || 0);
-        volume.ingredients.forEach((ingredient) => {
-          if (ingredient.extra_ingredient) {
-            retVal += ingredient.extra_ingredient.price;
-          }
-        });
-        retVal = (retVal * percentage) / 100;
-        return retVal;
-      });
-    } else {
-      return computed<number>(
-        () =>
-          ((drink.cost_price_pro_volume?.value || 0) * (volume.volume?.value || 0) * percentage) /
-          100
-      );
-    }
-  } else {
-    return computed<number>(() => {
-      let retVal = 0;
-      volume.ingredients.forEach((ingredient) => {
-        if (ingredient.drink_ingredient) {
-          const _drink = state.drinks.find(
-            (a) => a.id === ingredient.drink_ingredient?.drink_ingredient_id
-          );
-          retVal += ingredient.drink_ingredient.volume * (_drink?.cost_price_pro_volume.value || 0);
-        }
-        if (ingredient.extra_ingredient) {
-          retVal += ingredient.extra_ingredient.price;
-        }
-      });
-      console.log(volume);
-      return (retVal * percentage) / 100;
-    });
-  }
-}
-export { create_min_prices, DrinkPriceVolume, MinPrice, Drink };
-export default {
-  state,
-  actions,
-  getters,
-};
-*/
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index 69ff0f1..190011d 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -271,159 +271,7 @@
           </q-popup-edit>
         </q-td>
         <q-td key="volumes" :props="drinks_props">
-          <q-table
-            :columns="column_calc"
-            :rows="drinks_props.row.volumes"
-            dense
-            :visible-columns="visibleColumn"
-            row-key="id"
-            flat
-          >
-            <template #header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  {{ col.label }}
-                </q-th>
-              </q-tr>
-            </template>
-
-            <template #body="props">
-              <q-tr :props="props">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="!drinks_props.row.cost_price_pro_volume"
-                    size="sm"
-                    color="accent"
-                    round
-                    dense
-                    :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                    @click="props.expand = !props.expand"
-                  />
-                  <q-btn
-                    v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
-                    size="xs"
-                    color="negative"
-                    round
-                    dense
-                    icon="mdi-delete"
-                    class="q-mx-sm"
-                    @click="deleteVolume(props.row, drinks_props.row)"
-                  />
-                </q-td>
-                <q-td key="volume" :props="props">
-                  {{ parseFloat(props.row.volume).toFixed(3) }}L
-                  <q-popup-edit
-                    v-if="drinks_props.row.cost_price_pro_volume"
-                    v-model="props.row.volume"
-                    buttons
-                    label-cancel="Abbrechen"
-                    label-set="Speichern"
-                    @save="updateVolume(props.row, drinks_props.row)"
-                  >
-                    <q-input
-                      v-model.number="props.row.volume"
-                      dense
-                      filled
-                      type="number"
-                      suffix="L"
-                    />
-                  </q-popup-edit>
-                </q-td>
-                <q-td key="min_prices" :props="props">
-                  <div
-                    v-for="(min_price, index) in props.row.min_prices"
-                    :key="`min_prices` + index"
-                    class="row justify-between"
-                  >
-                    <div class="col">
-                      <q-badge color="primary">{{ min_price.percentage }}%</q-badge>
-                    </div>
-                    <div class="col" style="text-align: end">
-                      {{ min_price.price.toFixed(3) }}€
-                    </div>
-                  </div>
-                </q-td>
-                <q-td key="prices" :props="props">
-                  <price-table
-                    :columns="column_prices"
-                    :rows="props.row.prices"
-                    :row="props.row"
-                    :visible-columns="visibleColumn"
-                  />
-                </q-td>
-              </q-tr>
-              <q-tr v-show="props.expand" :props="props">
-                <q-td colspan="100%">
-                  <ingredients :ingredients="props.row.ingredients" :volume="props.row" />
-                </q-td>
-              </q-tr>
-            </template>
-            <template #bottom>
-              <div class="full-width row justify-end">
-                <q-btn
-                  v-if="drinks_props.row.cost_price_pro_volume"
-                  color="positive"
-                  icon-right="add"
-                  label="Abgabe hinzufügen"
-                  size="xs"
-                >
-                  <q-menu anchor="center middle" self="center middle">
-                    <div class="row justify-around q-pa-sm">
-                      <q-input
-                        v-model.number="newVolume.volume"
-                        filled
-                        dense
-                        label="Liter"
-                        type="number"
-                      />
-                    </div>
-                    <div class="row justify-between q-pa-sm">
-                      <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
-                      <q-btn
-                        v-close-popup
-                        label="Speichern"
-                        color="primary"
-                        @click="addVolume(drinks_props.row)"
-                      />
-                    </div>
-                  </q-menu>
-                </q-btn>
-              </div>
-            </template>
-            <template #no-data>
-              <div class="full-width row justify-end">
-                <q-btn
-                  v-if="drinks_props.row.cost_price_pro_volume"
-                  color="positive"
-                  icon-right="add"
-                  label="Abgabe hinzufügen"
-                  size="xs"
-                >
-                  <q-menu anchor="center middle" self="center middle">
-                    <div class="row justify-around q-pa-sm">
-                      <q-input
-                        v-model.number="newVolume.volume"
-                        filled
-                        dense
-                        label="Liter"
-                        type="number"
-                      />
-                    </div>
-                    <div class="row justify-between q-pa-sm">
-                      <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
-                      <q-btn
-                        v-close-popup
-                        label="Speichern"
-                        color="primary"
-                        @click="addVolume(drinks_props.row)"
-                      />
-                    </div>
-                  </q-menu>
-                </q-btn>
-              </div>
-            </template>
-          </q-table>
+          <drink-price-volumes-table :rows='drinks_props.row.volumes' :visible-columns='visibleColumn' :columns='column_calc' :drink='drinks_props.row' @updateDrink="updateDrink(drinks_props.row)"/>
         </q-td>
       </q-tr>
     </template>
@@ -432,10 +280,9 @@
 
 <script lang="ts">
 import { defineComponent, onBeforeMount, ref, ComputedRef, computed } from 'vue';
-import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
-import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
+import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
 import {  useMainStore } from 'src/store';
-import { Drink, DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
+import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
 
 
 function sort(a: string | number, b: string | number) {
@@ -445,7 +292,7 @@ function sort(a: string | number, b: string | number) {
 }
 export default defineComponent({
   name: 'CalculationTable',
-  components: { PriceTable, Ingredients },
+  components: {DrinkPriceVolumesTable},
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
@@ -556,37 +403,6 @@ export default defineComponent({
         store.updatePriceCalcColumn(user, val);
       },
     });
-    const emptyVolume: DrinkPriceVolume = {
-      id: -1,
-      _volume: 0,
-      volume: null,
-      min_prices: [
-        { percentage: 100, price: null },
-        { percentage: 250, price: null },
-        { percentage: 300, price: null },
-      ],
-      prices: [],
-      ingredients: [],
-    };
-    const newVolume = ref<DrinkPriceVolume>(emptyVolume);
-    function addVolume(drink: Drink) {
-      store.setVolume(<DrinkPriceVolume>newVolume.value, drink);
-      cancelAddVolume();
-    }
-    function cancelAddVolume() {
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        newVolume.value = emptyVolume;
-      }, 200);
-    }
-    function updateVolume(volume: DrinkPriceVolume, drink: Drink) {
-      console.log(volume);
-      store.updateVolume(volume, drink);
-    }
-    function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
-      store.deleteVolume(volume, drink);
-    }
 
     // eslint-disable-next-line vue/return-in-computed-property
     const pagination = computed(() => {
@@ -653,11 +469,6 @@ export default defineComponent({
       column_calc,
       column_prices,
       visibleColumn,
-      addVolume,
-      cancelAddVolume,
-      newVolume,
-      updateVolume,
-      deleteVolume,
       newDrink,
       cost_price_pro_volume,
       calc_price_pro_volume,
diff --git a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
new file mode 100644
index 0000000..bcc703b
--- /dev/null
+++ b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
@@ -0,0 +1,94 @@
+<template>
+  <q-btn
+    v-if="cost_price_pro_volume"
+    color="positive"
+    icon-right="add"
+    label="Abgabe hinzufügen"
+    size="xs"
+  >
+    <q-menu anchor="center middle" self="center middle">
+      <div class="row justify-around q-pa-sm">
+        <q-input
+          v-model.number="newVolume.volume"
+          filled
+          dense
+          label="Liter"
+          type="number"
+          min='0'
+          step='0.01'
+        />
+      </div>
+      <div class="row justify-between q-pa-sm">
+        <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
+        <q-btn
+          v-close-popup
+          label="Speichern"
+          color="primary"
+          @click="addVolume(rows)"
+        />
+      </div>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script lang='ts'>
+import { DrinkPriceVolume } from '../../../store';
+import { ref } from 'vue';
+import {CompositionAPIEmit} from 'vue-typed-emit';
+import {SetupContext} from 'vue';
+
+interface Events {
+  addVolume: DrinkPriceVolume
+}
+
+interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
+  emit: CompositionAPIEmit<Events>
+}
+
+export default {
+  name: 'NewVolume',
+  props: {
+    cost_price_pro_volume: {
+      type: undefined,
+      required: true
+    }
+  },
+  emits: ["addVolume"],
+  setup(_: any, {emit}: ExtendedSetupContext) {
+    const emptyVolume: DrinkPriceVolume = {
+      id: -1,
+      _volume: 0,
+      volume: null,
+      min_prices: [
+        { percentage: 100, price: null },
+        { percentage: 250, price: null },
+        { percentage: 300, price: null },
+      ],
+      prices: [],
+      ingredients: [],
+    };
+    const newVolume = ref<DrinkPriceVolume>(emptyVolume);
+
+    function cancelAddVolume() {
+      setTimeout(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        newVolume.value = emptyVolume;
+      }, 200);
+    }
+    function addVolume() {
+      emit("addVolume", <DrinkPriceVolume>newVolume.value)
+    }
+
+    return {
+      addVolume,
+      cancelAddVolume,
+      newVolume,
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
new file mode 100644
index 0000000..268d91e
--- /dev/null
+++ b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
@@ -0,0 +1,202 @@
+<template>
+  <q-table
+    :columns="columns"
+    :rows="rows"
+    dense
+    :visible-columns="visibleColumns"
+    row-key="id"
+    flat
+  >
+    <template #header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.label }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template #body="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            v-if="!drink.cost_price_pro_volume"
+            size="sm"
+            color="accent"
+            round
+            dense
+            :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+            @click="props.expand = !props.expand"
+          />
+          <q-btn
+            v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
+            size="xs"
+            color="negative"
+            round
+            dense
+            icon="mdi-delete"
+            class="q-mx-sm"
+            @click="deleteVolume(props.row, drink)"
+          />
+        </q-td>
+        <q-td key="volume" :props="props">
+          {{ parseFloat(props.row.volume).toFixed(3) }}L
+          <q-popup-edit
+            v-if="rows.cost_price_pro_volume"
+            v-model="props.row.volume"
+            buttons
+            label-cancel="Abbrechen"
+            label-set="Speichern"
+            @save="updateVolume(props.row, drink)"
+          >
+            <q-input
+              v-model.number="props.row.volume"
+              dense
+              filled
+              type="number"
+              suffix="L"
+            />
+          </q-popup-edit>
+        </q-td>
+        <q-td key="min_prices" :props="props">
+          <div
+            v-for="(min_price, index) in props.row.min_prices"
+            :key="`min_prices` + index"
+            class="row justify-between"
+          >
+            <div class="col">
+              <q-badge color="primary">{{ min_price.percentage }}%</q-badge>
+            </div>
+            <div class="col" style="text-align: end">
+              {{ min_price.price ? min_price.price.toFixed(3) : Number(0).toFixed(2) }}€
+            </div>
+          </div>
+        </q-td>
+        <q-td key="prices" :props="props">
+          <price-table
+            :columns="column_prices"
+            :rows="props.row.prices"
+            :row="props.row"
+            :visible-columns="visibleColumns"
+            @updateDrink="updateDrink"
+          />
+        </q-td>
+      </q-tr>
+      <q-tr v-show="props.expand" :props="props">
+        <q-td colspan="100%">
+          <ingredients :ingredients="props.row.ingredients" :volume="props.row" @updateDrink="updateDrink"/>
+        </q-td>
+      </q-tr>
+    </template>
+    <template #bottom>
+      <div class="full-width row justify-end">
+        <new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
+      </div>
+    </template>
+    <template #no-data>
+      <div class="full-width row justify-end">
+        <new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<script lang='ts'>
+import { Drink, DrinkPriceVolume, usePricelistStore } from '../../store';
+import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
+import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
+import NewVolume from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue';
+import {CompositionAPIEmit} from 'vue-typed-emit';
+import {SetupContext} from 'vue'
+
+interface Events {
+  updateDrink: undefined
+}
+
+interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
+  emit: CompositionAPIEmit<Events>
+}
+
+const columns = [
+  {
+    name: 'volume',
+    label: 'Abgabe in l',
+    field: 'volume',
+  },
+  {
+    name: 'min_prices',
+    label: 'Minimal Preise',
+    field: 'min_prices',
+  },
+  {
+    name: 'prices',
+    label: 'Preise',
+    field: 'prices',
+  },
+]
+
+export default {
+  props: {
+    visibleColumns: {
+      type: Array,
+      default: columns
+    },
+    columns: {
+      type: Array,
+      default: columns
+    },
+    rows: {
+      type: [] as Array<DrinkPriceVolume>,
+      required: true,
+    },
+    drink: {
+      type: Object as () => Drink,
+      required: true
+    }
+
+  },
+  name: 'DrinkPriceVolumsTable',
+  components: { PriceTable, Ingredients, NewVolume },
+  setup(_: any, {emit}: ExtendedSetupContext) {
+    const store = usePricelistStore()
+
+    function addVolume(volume: DrinkPriceVolume, drink: Drink) {
+      drink.volumes.push(volume)
+      updateDrink()
+    }
+
+    function updateDrink() {
+      emit("updateDrink")
+    }
+    function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
+      store.deleteVolume(volume, drink);
+    }
+    const column_prices = [
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+        format: (val: number) => `${val.toFixed(2)}€`,
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+        field: 'description',
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+      },
+    ];
+
+    return {addVolume,
+      updateDrink,
+      deleteVolume, column_prices}
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
index 7ee0657..b7b42a4 100644
--- a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
+++ b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
@@ -15,7 +15,7 @@
                 buttons
                 label-cancel="Abbrechen"
                 label-set="Speichern"
-                @save="updateIngredient(ingredient, volume)"
+                @save="updateDrink"
               >
                 <q-select
                   v-model="ingredient.drink_ingredient.drink_ingredient_id"
@@ -38,7 +38,7 @@
                 buttons
                 label-cancel="Abbrechen"
                 label-set="Speichern"
-                @save="updateIngredient(ingredient, volume)"
+                @save="updateDrink"
               >
                 <q-input
                   v-model.number="ingredient.drink_ingredient.volume"
@@ -67,7 +67,7 @@
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateIngredient(ingredient, volume)"
+            @save="updateDrink"
           >
             <q-select
               v-model="ingredient.extra_ingredient"
@@ -112,7 +112,7 @@
                 dense
                 label="Volume"
                 type="number"
-                steps="0.01"
+                step="0.01"
                 min="0"
                 suffix="L"
               />
@@ -123,8 +123,10 @@
                 label="Preis"
                 disable
                 min="0"
-                steps="0.1"
-                :value="newIngredient.price.toFixed(3)"
+                step="0.1"
+                fill-mask="0"
+                mask="#.##"
+                v-model='newIngredient.price'
                 suffix="€"
               />
             </div>
@@ -148,6 +150,17 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { DrinkPriceVolume, usePricelistStore } from '../../store';
 
+import {CompositionAPIEmit} from 'vue-typed-emit';
+import {SetupContext} from 'vue';
+
+interface Events {
+  updateDrink: undefined
+}
+
+interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
+  emit: CompositionAPIEmit<Events>
+}
+
 export default defineComponent({
   name: 'Ingredients',
   props: {
@@ -160,7 +173,8 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  emits: ["updateDrink"],
+  setup(_:any, {emit}: ExtendedSetupContext) {
     const store = usePricelistStore();
 
     const emptyIngredient: FG.Ingredient = {
@@ -171,8 +185,9 @@ export default defineComponent({
     const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
     const newIngredientVolume = ref<number>(0);
     function addIngredient(volume: DrinkPriceVolume) {
+      let ingredient : FG.Ingredient
       if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
-        store.setIngredient(
+        volume.ingredients.push(
           {
             id: -1,
             drink_ingredient: {
@@ -182,34 +197,35 @@ export default defineComponent({
             },
             extra_ingredient: undefined,
           },
-          volume
         );
       } else if (newIngredient.value) {
-        store.setIngredient(
+        volume.ingredients.push(
           {
             id: -1,
             drink_ingredient: undefined,
             extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
           },
-          volume
         );
       }
+      updateDrink()
       cancelAddIngredient();
     }
+    function updateDrink() {
+      console.log("updateDrink from Ingredients")
+      emit("updateDrink")
+    }
     function cancelAddIngredient() {
       setTimeout(() => {
         (newIngredient.value = undefined), (newIngredientVolume.value = 0);
       }, 200);
     }
-    function updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-      store.updateIngredient(ingredient, volume);
-    }
     function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
       store.deleteIngredient(ingredient, volume);
     }
     const drinks = computed(() =>
       store.drinks.filter((drink) => {
-        return drink.cost_price_pro_volume.value;
+        console.log("computed drinks", drink.name, drink.cost_price_pro_volume)
+        return drink.cost_price_pro_volume;
       })
     );
     const extra_ingredients = computed(() => store.extraIngredients);
@@ -225,7 +241,7 @@ export default defineComponent({
       newIngredient,
       newIngredientVolume,
       cancelAddIngredient,
-      updateIngredient,
+      updateDrink,
       deleteIngredient,
       get_drink_ingredient_name,
     };
diff --git a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
index 4fe2e1e..e4afab6 100644
--- a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
@@ -5,7 +5,7 @@
     dense
     hide-header
     :columns="columns"
-    :data="data"
+    :rows="rows"
     :visible-columns="visibleColumns"
     flat
     virtual-scroll
@@ -20,7 +20,7 @@
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updatePrice(prices_props.row, row)"
+            @save="updateDrink"
           >
             <q-input
               v-model.number="prices_props.row.price"
@@ -42,7 +42,7 @@
             label="Beschreibung"
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updatePrice(prices_props.row, row)"
+            @save="updateDrink"
           >
             <q-input v-model="prices_props.row.description" dense autofocus filled clearable />
           </q-popup-edit>
@@ -51,7 +51,7 @@
           <q-toggle
             v-model="prices_props.row.public"
             dense
-            @input="updatePrice(prices_props.row, row)"
+            @update:modelValue="updateDrink"
           />
         </q-td>
 
@@ -140,7 +140,18 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { usePricelistStore } from '../../store';
+import { DrinkPriceVolume, usePricelistStore } from '../../store';
+
+import {CompositionAPIEmit} from 'vue-typed-emit';
+import {SetupContext} from 'vue';
+
+interface Events {
+  updateDrink: undefined
+}
+
+interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
+  emit: CompositionAPIEmit<Events>
+}
 
 export default defineComponent({
   name: 'PriceTable',
@@ -149,7 +160,7 @@ export default defineComponent({
       type: Array,
       required: true,
     },
-    data: {
+    rows: {
       type: Array,
       required: true,
     },
@@ -162,48 +173,48 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  emits: ["updateDrink"],
+  setup(props, {emit}: ExtendedSetupContext) {
     const store = usePricelistStore();
 
-    const emptyPrice = {
+    const emptyPrice: FG.DrinkPrice = {
       id: -1,
       price: 0,
       description: '',
       public: true,
     };
     const newPrice = ref(emptyPrice);
-    /*
     function addPrice(volume: DrinkPriceVolume) {
-      store.actions.setPrice({ ...newPrice.value }, volume);
+      volume.prices.push(newPrice.value)
+      updateDrink()
       cancelAddPrice();
     }
+    function updateDrink() {
+      emit("updateDrink")
+    }
     function cancelAddPrice() {
       setTimeout(() => {
         newPrice.value = emptyPrice;
       }, 200);
     }
-    function updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-      console.log(price);
-      store.actions.updatePrice(price, volume);
-    }
     function deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
       console.log(price, volume);
-      store.actions.deletePrice(price, volume);
+      store.deletePrice(price, volume);
     }
 
     const pagination = ref({
-      rowsPerPage: props.row.prices.length,
+      rowsPerPage: (<DrinkPriceVolume>props.row).prices.length,
     });
 
     return {
       newPrice,
       addPrice,
       cancelAddPrice,
-      updatePrice,
+      updateDrink,
       deletePrice,
       pagination,
       console,
-    };*/
+    };
   },
 });
 </script>
diff --git a/src/plugins/pricelist/store.ts b/src/plugins/pricelist/store.ts
index b36729f..e6ea2e8 100644
--- a/src/plugins/pricelist/store.ts
+++ b/src/plugins/pricelist/store.ts
@@ -205,13 +205,6 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    /*async getDrinks(force = false) {
-      if (force || this.drinks.length == 0) {
-        const { data } = await api.get<Array<FG.Drink>>('/pricelist/drinks');
-        this.drinks = data;
-      }
-      return this.drinks;
-    },*/
     getDrinks() {
       api
         .get('pricelist/drinks')
@@ -230,15 +223,6 @@ export const usePricelistStore = defineStore({
         })
         .catch((err) => console.warn(err));
     },
-    setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-      api
-        .post(`pricelist/volumes/${volume.id}/prices`, price)
-        .then((response: AxiosResponse<FG.DrinkPrice>) => {
-          volume.prices.push(response.data);
-          this.sortPrices(volume);
-        })
-        .catch((err) => console.warn(err));
-    },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {
         if (a.price > b.price) return 1;
@@ -257,37 +241,6 @@ export const usePricelistStore = defineStore({
         })
         .catch((err) => console.warn(err));
     },
-    updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-      api
-        .put(`pricelist/prices/${price.id}`, price)
-        .then((response: AxiosResponse<FG.DrinkPrice>) => {
-          const index = volume.prices.findIndex((a) => a.id === price.id);
-          if (index > -1) {
-            this.sortPrices(volume);
-          }
-        })
-        .catch((err) => console.log(err));
-    },
-    setVolume(volume: DrinkPriceVolume, drink: Drink) {
-      console.log(volume);
-      api
-        .post(`pricelist/drinks/${drink.id}/volumes`, {
-          ...volume,
-          volume: volume.volume,
-        })
-        .then((response: AxiosResponse<FG.DrinkPriceVolume>) => {
-          drink.volumes.push(new DrinkPriceVolume(response.data, drink));
-        })
-        .catch((err) => console.warn(err));
-    },
-    updateVolume(volume: DrinkPriceVolume, drink: Drink) {
-      api
-        .put(`pricelist/volumes/${volume.id}`, {
-          ...volume,
-          volume: volume.volume?.value,
-        })
-        .catch((err) => console.warn(err));
-    },
     deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
       api
         .delete(`pricelist/volumes/${volume.id}`)
@@ -299,25 +252,6 @@ export const usePricelistStore = defineStore({
         })
         .catch((err) => console.warn(err));
     },
-    setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-      api
-        .post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
-        .then((response: AxiosResponse<FG.Ingredient>) => {
-          volume.ingredients.push(response.data);
-        })
-        .catch((err) => console.warn(err));
-    },
-    updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-      api
-        .put(`pricelist/ingredients/${ingredient.id}`, ingredient)
-        .then((response: AxiosResponse<FG.Ingredient>) => {
-          //const index = volume.ingredients.findIndex(a => a.id === response.data.id);
-          //if (index > -1) {
-          //  volume.ingredients[index] = response.data;
-          //}
-        })
-        .catch((err) => console.warn(err));
-    },
     deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
       api
         .delete(`pricelist/ingredients/${ingredient.id}`)
@@ -347,6 +281,16 @@ export const usePricelistStore = defineStore({
           ...drink,
           cost_price_pro_volume: drink.cost_price_pro_volume?.value,
         })
+        .then(({ data }: AxiosResponse<FG.Drink>) => {
+          const index = this.drinks.findIndex((a) => a.id === data.id);
+          if (index > -1) {
+            this.drinks[index] = new Drink(data);
+            const drink = this.drinks.find((a) => a.id === data.id);
+            data.volumes.forEach((volume) => {
+              drink?.volumes.push(new DrinkPriceVolume(volume, drink));
+            });
+          }
+        })
         .catch((err) => console.warn(err));
     },
     deleteDrink(drink: Drink) {
diff --git a/yarn.lock b/yarn.lock
index b0e1ba5..b0eb6dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1148,11 +1148,12 @@
 "@quasar/quasar-app-extension-qcalendar@file:deps/quasar-ui-qcalendar/app-extension":
   version "4.0.0-alpha.1"
   dependencies:
-    "@quasar/quasar-ui-qcalendar" "link:../../../../../.cache/yarn/v6/npm-@quasar-quasar-app-extension-qcalendar-4.0.0-alpha.1-192d79cc-4593-44cf-a564-bed08599d4bf-1616167953691/node_modules/@quasar/ui"
+    "@quasar/quasar-ui-qcalendar" "^4.0.0-alpha.1"
 
-"@quasar/quasar-ui-qcalendar@link:deps/quasar-ui-qcalendar/ui":
-  version "0.0.0"
-  uid ""
+"@quasar/quasar-ui-qcalendar@^4.0.0-alpha.1":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@quasar/quasar-ui-qcalendar/-/quasar-ui-qcalendar-3.3.5.tgz#4fed965045a98fb5da6294acf1d1285dc9af8dc6"
+  integrity sha512-quNHMyPhxrATJ1pTpTYesLBc44C8vcbguk7ysjN68EKvEP3mn0HrSez28QeMKJqqUp3BZ8qD+TLEFVSmxhtRFA==
 
 "@quasar/ssr-helpers@1.0.0":
   version "1.0.0"
@@ -10132,6 +10133,11 @@ vue-style-loader@4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-typed-emit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vue-typed-emit/-/vue-typed-emit-1.1.0.tgz#32bc2519dc87d068d2657c8f14fedafabc7e535d"
+  integrity sha512-dfR6m9yJydUk3jHpdbwGuF3CvzL+jLO/L2douk00MJDEMLXcY5Ald/cozV8JRgQ/0hJR85m76G0Lyr04DTGl0g==
+
 vue@3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.6.tgz#2c16ed4bb66f16d6c6f6eaa3b7d5835a76598049"