From 51fcc6f9beb41115766aa0ef4ea6299c2c6a72df Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 19 Mar 2021 16:33:27 +0100
Subject: [PATCH] [Vue3][pinia] Make pricelist compile with vue3, needs more
 work!

---
 .vscode/settings.json                         |   1 -
 package.json                                  |   2 +-
 src/plugins/pricelist/{store => }/altStore.ts |  63 ++++-----
 .../pricelist/components/CalculationTable.vue | 125 +++++++++---------
 .../CalculationTable/Ingredients.vue          |  45 ++++---
 .../CalculationTable/PriceTable.vue           |  28 ++--
 .../pricelist/components/ExtraIngredients.vue |  20 +--
 yarn.lock                                     |   2 +-
 8 files changed, 148 insertions(+), 138 deletions(-)
 rename src/plugins/pricelist/{store => }/altStore.ts (94%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5041d4d..187d7a4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,6 +26,5 @@
   },
   "vetur.format.defaultFormatter.ts": "prettier-tslint",
   "typescript.format.enable": false,
-  "prettier.packageManager": "yarn",
   "prettier.configPath": "./package.json"
 }
diff --git a/package.json b/package.json
index 19bfc79..708e7b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flaschengeist-frontend",
-  "version": "0.0.1",
+  "version": "0.1.0-alpha.1",
   "description": "Dynamischen Managementsystem für Studentenclubs",
   "productName": "Flaschengeist",
   "author": "Tim Gröger <tim@groeger-clan.de>",
diff --git a/src/plugins/pricelist/store/altStore.ts b/src/plugins/pricelist/altStore.ts
similarity index 94%
rename from src/plugins/pricelist/store/altStore.ts
rename to src/plugins/pricelist/altStore.ts
index ef227c6..6bf3718 100644
--- a/src/plugins/pricelist/store/altStore.ts
+++ b/src/plugins/pricelist/altStore.ts
@@ -1,7 +1,7 @@
-import { reactive, computed, ComputedRef, WritableComputedRef } from '@vue/composition-api';
-import { axios } from 'src/boot/axios';
+import { reactive, computed, WritableComputedRef } from 'vue';
+import { api } from 'src/boot/axios';
 import { AxiosResponse } from 'axios';
-
+/*
 const state = reactive<{
   drinks: Drink[];
   tags: FG.Tag[];
@@ -121,15 +121,15 @@ class Drink {
     this.tags = tags;
     this.type = type;
     this.volumes = [];
-    /*volumes.forEach(volume => {
-      this.volumes.push(new DrinkPriceVolume(volume, this));
-    });*/
+    //volumes.forEach(volume => {
+    //  this.volumes.push(new DrinkPriceVolume(volume, this));
+    //});
   }
 }
 
 const actions = {
   getDrinks() {
-    axios
+    api
       .get('pricelist/drinks')
       .then((response: AxiosResponse<FG.Drink[]>) => {
         state.drinks = [];
@@ -146,7 +146,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-    axios
+    api
       .post(`pricelist/volumes/${volume.id}/prices`, price)
       .then((response: AxiosResponse<FG.DrinkPrice>) => {
         volume.prices.push(response.data);
@@ -162,7 +162,7 @@ const actions = {
     });
   },
   deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
-    axios
+    api
       .delete(`pricelist/prices/${price.id}`)
       .then(() => {
         const index = volume.prices.findIndex((a) => a.id == price.id);
@@ -173,7 +173,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
-    axios
+    api
       .put(`pricelist/prices/${price.id}`, price)
       .then((response: AxiosResponse<FG.DrinkPrice>) => {
         const index = volume.prices.findIndex((a) => a.id === price.id);
@@ -185,7 +185,7 @@ const actions = {
   },
   setVolume(volume: DrinkPriceVolume, drink: Drink) {
     console.log(volume);
-    axios
+    api
       .post(`pricelist/drinks/${drink.id}/volumes`, {
         ...volume,
         volume: volume.volume,
@@ -196,7 +196,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   updateVolume(volume: DrinkPriceVolume, drink: Drink) {
-    axios
+    api
       .put(`pricelist/volumes/${volume.id}`, {
         ...volume,
         volume: volume.volume?.value,
@@ -204,7 +204,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
-    axios
+    api
       .delete(`pricelist/volumes/${volume.id}`)
       .then(() => {
         const index = drink.volumes.findIndex((a) => a.id === volume.id);
@@ -215,7 +215,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   getExtraIngredients() {
-    axios
+    api
       .get('pricelist/ingredients/extraIngredients')
       .then((response: AxiosResponse<FG.ExtraIngredient[]>) => {
         state.extraIngredients = response.data;
@@ -223,7 +223,7 @@ const actions = {
       .catch((err) => console.log(err));
   },
   setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-    axios
+    api
       .post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
       .then((response: AxiosResponse<FG.Ingredient>) => {
         volume.ingredients.push(response.data);
@@ -231,18 +231,18 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-    axios
+    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;
-        }*/
+        //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) {
-    axios
+    api
       .delete(`pricelist/ingredients/${ingredient.id}`)
       .then(() => {
         const index = volume.ingredients.findIndex((a) => a.id === ingredient.id);
@@ -253,7 +253,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   getDrinkTypes() {
-    axios
+    api
       .get('pricelist/drink-types')
       .then((response: AxiosResponse<FG.DrinkType[]>) => {
         state.drinkTypes = response.data;
@@ -261,7 +261,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   setDrink(drink: FG.Drink) {
-    axios
+    api
       .post('pricelist/drinks', drink)
       .then((response: AxiosResponse<FG.Drink>) => {
         state.drinks.push(new Drink(response.data));
@@ -273,7 +273,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   updateDrink(drink: Drink) {
-    axios
+    api
       .put(`pricelist/drinks/${drink.id}`, {
         ...drink,
         cost_price_pro_volume: drink.cost_price_pro_volume?.value,
@@ -281,7 +281,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   deleteDrink(drink: Drink) {
-    axios
+    api
       .delete(`pricelist/drinks/${drink.id}`)
       .then(() => {
         const index = state.drinks.findIndex((a) => a.id === drink.id);
@@ -292,15 +292,15 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   setExtraIngredient(ingredient: FG.ExtraIngredient) {
-    axios
-      .post(`pricelist/ingredients/extraIngredients`, ingredient)
+    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) {
-    axios
+    api
       .put(`pricelist/ingredients/extraIngredients/${ingredient.id}`, ingredient)
       .then((response: AxiosResponse<FG.ExtraIngredient>) => {
         const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
@@ -313,7 +313,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   deleteExtraIngredient(ingredient: FG.ExtraIngredient) {
-    axios
+    api
       .delete(`pricelist/ingredients/extraIngredients/${ingredient.id}`)
       .then(() => {
         const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
@@ -324,7 +324,7 @@ const actions = {
       .catch((err) => console.warn(err));
   },
   getPriceCalcColumn(userid: string) {
-    axios
+    api
       .get(`pricelist/users/${userid}/pricecalc_columns`)
       .then(({ data }: AxiosResponse<Array<string>>) => {
         if (data.length > 0) {
@@ -334,7 +334,7 @@ const actions = {
       .catch((err) => console.log(err));
   },
   updatePriceCalcColumn(userid: string, data: Array<string>) {
-    axios
+    api
       .put(`pricelist/users/${userid}/pricecalc_columns`, data)
       .then(() => {
         state.pricecalc_columns = data;
@@ -390,3 +390,4 @@ export default {
   actions,
   getters,
 };
+*/
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index d49998a..82095e6 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -1,5 +1,6 @@
 <template>
   <q-table
+    v-model:pagination="pagination"
     title="Kalkulationstabelle"
     :columns="columns"
     :data="drinks"
@@ -7,10 +8,9 @@
     :dense="$q.screen.lt.md"
     row-key="id"
     virtual-scroll
-    :pagination.sync="pagination"
     :rows-per-page-options="[0]"
   >
-    <template v-slot:header="props">
+    <template #header="props">
       <q-tr :props="props">
         <q-th auto-width />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -18,7 +18,7 @@
         </q-th>
       </q-tr>
     </template>
-    <template v-slot:top-right>
+    <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <q-btn label="neues Getränk" color="positive" icon-right="add">
           <q-menu anchor="center middle" self="center middle">
@@ -26,57 +26,57 @@
               <div class="q-table__title q-pa-sm">Neues Getränk</div>
               <div class="row">
                 <q-input
+                  v-model="newDrink.name"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Getränkname"
-                  v-model="newDrink.name"
                 />
                 <q-input
+                  v-model="newDrink.article_id"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Artikelnummer"
-                  v-model="newDrink.article_id"
                 />
                 <q-select
+                  v-model="newDrink.type"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Kategorie"
                   :options="drinkTypes"
                   option-label="name"
-                  v-model="newDrink.type"
                 />
                 <q-input
+                  v-model.number="newDrink.volume"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Inhalt in L/Gebinde"
                   type="number"
-                  v-model.number="newDrink.volume"
                 />
                 <q-input
+                  v-model.number="newDrink.package_size"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Gebindegröße"
                   type="number"
-                  v-model.number="newDrink.package_size"
                 />
                 <q-input
+                  v-model.number="newDrink.cost_price_package_netto"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Preis Netto/Gebinde"
                   type="number"
-                  v-model.number="newDrink.cost_price_package_netto"
                 />
                 <q-input
+                  v-model="cost_price_pro_volume"
                   class="col-sm-4 col-xs-6 q-pa-sm"
                   filled
                   label="Preis mit 19%/Liter"
-                  v-model="cost_price_pro_volume"
                   :disable="calc_price_pro_volume"
                 />
               </div>
               <div class="row justify-between">
-                <q-btn label="Abbrechen" v-close-popup @click="cancelAddDrink" />
-                <q-btn label="Speichern" v-close-popup color="primary" @click="addDrink" />
+                <q-btn v-close-popup label="Abbrechen" @click="cancelAddDrink" />
+                <q-btn v-close-popup label="Speichern" color="primary" @click="addDrink" />
               </div>
             </div>
           </q-menu>
@@ -96,17 +96,17 @@
         />
       </div>
     </template>
-    <template v-slot:body="drinks_props">
+    <template #body="drinks_props">
       <q-tr :props="drinks_props">
         <q-td auto-width>
           <q-btn
+            v-if="drinks_props.row.volumes.length === 0"
             size="xs"
             color="negative"
             round
             dense
             icon="mdi-delete"
             class="q-mx-sm"
-            v-if="drinks_props.row.volumes.length === 0"
             @click="deleteDrink(drinks_props.row)"
           />
         </q-td>
@@ -279,7 +279,7 @@
             row-key="id"
             flat
           >
-            <template v-slot:header="props">
+            <template #header="props">
               <q-tr :props="props">
                 <q-th auto-width />
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -288,43 +288,43 @@
               </q-tr>
             </template>
 
-            <template v-slot:body="props">
+            <template #body="props">
               <q-tr :props="props">
                 <q-td auto-width>
                   <q-btn
+                    v-if="!drinks_props.row.cost_price_pro_volume.value"
                     size="sm"
                     color="accent"
                     round
                     dense
-                    @click="props.expand = !props.expand"
                     :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                    v-if="!drinks_props.row.cost_price_pro_volume.value"
+                    @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"
-                    v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
                     @click="deleteVolume(props.row, drinks_props.row)"
                   />
                 </q-td>
                 <q-td key="volume" :props="props">
                   {{ parseFloat(props.row.volume.value).toFixed(3) }}L
                   <q-popup-edit
+                    v-if="drinks_props.row.cost_price_pro_volume"
+                    v-model="props.row.volume.value"
                     buttons
                     label-cancel="Abbrechen"
                     label-set="Speichern"
-                    v-model="props.row.volume.value"
-                    v-if="drinks_props.row.cost_price_pro_volume"
                     @save="updateVolume(props.row, drinks_props.row)"
                   >
                     <q-input
+                      v-model.number="props.row.volume.value"
                       dense
                       filled
-                      v-model.number="props.row.volume.value"
                       type="number"
                       suffix="L"
                     />
@@ -359,64 +359,64 @@
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:bottom>
+            <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"
-                  v-if="drinks_props.row.cost_price_pro_volume"
                 >
                   <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"
-                        v-model.number="newVolume.volume"
                       />
                     </div>
                     <div class="row justify-between q-pa-sm">
-                      <q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
+                      <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
                       <q-btn
+                        v-close-popup
                         label="Speichern"
                         color="primary"
                         @click="addVolume(drinks_props.row)"
-                        v-close-popup
                       />
                     </div>
                   </q-menu>
                 </q-btn>
               </div>
             </template>
-            <template v-slot:no-data>
+            <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"
-                  v-if="drinks_props.row.cost_price_pro_volume"
                 >
                   <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"
-                        v-model.number="newVolume.volume"
                       />
                     </div>
                     <div class="row justify-between q-pa-sm">
-                      <q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
+                      <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
                       <q-btn
+                        v-close-popup
                         label="Speichern"
                         color="primary"
                         @click="addVolume(drinks_props.row)"
-                        v-close-popup
                       />
                     </div>
                   </q-menu>
@@ -427,7 +427,7 @@
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:body-cell-volumes="volumes">
+    <template #body-cell-volumes="volumes">
       <q-table
         :columns="column_calc"
         :data="volumes.value"
@@ -436,7 +436,7 @@
         row-key="id"
         flat
       >
-        <template v-slot:header="props">
+        <template #header="props">
           <q-tr :props="props">
             <q-th auto-width />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -445,29 +445,29 @@
           </q-tr>
         </template>
 
-        <template v-slot:body="props">
+        <template #body="props">
           <q-tr :props="props">
             <q-td auto-width>
               <q-btn
+                v-if="volumes.row.cost_price_pro_volume == null"
                 size="sm"
                 color="accent"
                 round
                 dense
+                :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                 @click="
                   props.expand = !props.expand;
                   console.log(volumes);
                 "
-                :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                v-if="volumes.row.cost_price_pro_volume == null"
               />
               <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"
-                v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
                 @click="deleteVolume(props.row, volumes.row)"
               />
             </q-td>
@@ -475,17 +475,17 @@
               {{ parseFloat(props.row.volume.value).toFixed(3) }}L
               <!--{{ props.row.volume }}-->
               <q-popup-edit
+                v-if="volumes.row.cost_price_pro_volume"
+                v-model="props.row.volume.value"
                 buttons
                 label-cancel="Abbrechen"
                 label-set="Speichern"
-                v-model="props.row.volume.value"
-                v-if="volumes.row.cost_price_pro_volume"
                 @save="updateVolume(props.row, volumes.row)"
               >
                 <q-input
+                  v-model.number="props.row.volume.value"
                   dense
                   filled
-                  v-model.number="props.row.volume.value"
                   type="number"
                   suffix="L"
                 />
@@ -521,18 +521,19 @@
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:bottom>
+        <template #bottom>
           <div class="full-width row justify-end">
             <q-btn
+              v-if="volumes.row.cost_price_pro_volume"
               color="positive"
               icon-right="add"
               label="Abgabe hinzufügen"
               size="xs"
-              v-if="volumes.row.cost_price_pro_volume"
             >
               <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"
@@ -540,34 +541,34 @@
                     min="0"
                     step="0.01"
                     suffix="L"
-                    v-model.number="newVolume.volume"
                   />
                 </div>
                 <div class="row justify-between q-pa-sm">
-                  <q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
+                  <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
                   <q-btn
+                    v-close-popup
                     label="Speichern"
                     color="primary"
                     @click="addVolume(volumes.row)"
-                    v-close-popup
                   />
                 </div>
               </q-menu>
             </q-btn>
           </div>
         </template>
-        <template v-slot:no-data>
+        <template #no-data>
           <div class="full-width row justify-end">
             <q-btn
+              v-if="volumes.row.cost_price_pro_volume"
               color="positive"
               icon-right="add"
               label="Abgabe hinzufügen"
               size="xs"
-              v-if="volumes.row.cost_price_pro_volume"
             >
               <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"
@@ -575,16 +576,15 @@
                     min="0"
                     step="0.01"
                     suffix="L"
-                    v-model.number="newVolume.volume"
                   />
                 </div>
                 <div class="row justify-between q-pa-sm">
-                  <q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
+                  <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
                   <q-btn
+                    v-close-popup
                     label="Speichern"
                     color="primary"
                     @click="addVolume(volumes.row)"
-                    v-close-popup
                   />
                 </div>
               </q-menu>
@@ -597,13 +597,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref, computed, ComputedRef } from '@vue/composition-api';
-import store, { DrinkPriceVolume, Drink } from '../store/altStore';
+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 { StateInterface } from 'src/store';
+import { StateInterface, useMainStore } from 'src/store';
 import { Store } from 'vuex';
-import { UserStateInterface } from 'src/plugins/user/store/user';
+
 function sort(a: string | number, b: string | number) {
   if (a > b) return 1;
   if (b > a) return -1;
@@ -612,12 +611,15 @@ function sort(a: string | number, b: string | number) {
 export default defineComponent({
   name: 'CalculationTable',
   components: { PriceTable, Ingredients },
-  setup(_, { root }) {
+  setup() {
+    const mainStore = useMainStore();
+
     onBeforeMount(() => {
-      store.actions.getPriceCalcColumn(user);
+      //store.actions.getPriceCalcColumn(user);
     });
-    const userstore = <Store<StateInterface>>root.$store;
-    const user = <string>userstore.state.user.currentUser?.userid;
+
+    const user = mainStore.currentUser.userid;
+
     const columns = [
       {
         name: 'name',
@@ -713,6 +715,7 @@ export default defineComponent({
         field: 'public',
       },
     ];
+    /*
     const visibleColumn = computed({
       get: () => store.state.pricecalc_columns,
       set: (val) => {
@@ -733,7 +736,7 @@ export default defineComponent({
     };
     const newVolume = ref<DrinkPriceVolume>(emptyVolume);
     function addVolume(drink: Drink) {
-      store.actions.setVolume(<DrinkPriceVolume>newVolume.value, drink);
+      store.actions.setVolume(>newVolume.value, drink);
       cancelAddVolume();
     }
     function cancelAddVolume() {
@@ -828,7 +831,7 @@ export default defineComponent({
       updateDrink,
       deleteDrink,
       console,
-    };
+    };*/
   },
 });
 </script>
diff --git a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
index 549df70..317bc13 100644
--- a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
+++ b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
@@ -6,18 +6,19 @@
       class="full-width row justify-evenly q-py-xs"
     >
       <div class="full-width row justify-evenly">
-        <div class="col" v-if="ingredient.drink_ingredient">
+        <div v-if="ingredient.drink_ingredient" class="col">
           <div class="full-width row justify-evenly q-py-xs">
             <div class="col">
               {{ get_drink_ingredient_name(ingredient.drink_ingredient.drink_ingredient_id) }}
               <q-popup-edit
+                v-model="ingredient.drink_ingredient.drink_ingredient_id"
                 buttons
                 label-cancel="Abbrechen"
                 label-set="Speichern"
-                v-model="ingredient.drink_ingredient.drink_ingredient_id"
                 @save="updateIngredient(ingredient, volume)"
               >
                 <q-select
+                  v-model="ingredient.drink_ingredient.drink_ingredient_id"
                   class="col q-px-sm"
                   label="Getränk"
                   filled
@@ -25,7 +26,6 @@
                   :options="drinks"
                   option-label="name"
                   option-value="id"
-                  v-model="ingredient.drink_ingredient.drink_ingredient_id"
                   emit-value
                   map-options
                 />
@@ -34,20 +34,20 @@
             <div class="col">
               {{ ingredient.drink_ingredient.volume.toFixed(3) }}L
               <q-popup-edit
+                v-model="ingredient.drink_ingredient.volume"
                 buttons
                 label-cancel="Abbrechen"
                 label-set="Speichern"
-                v-model="ingredient.drink_ingredient.volume"
                 @save="updateIngredient(ingredient, volume)"
               >
                 <q-input
+                  v-model.number="ingredient.drink_ingredient.volume"
                   class="col q-px-sm"
                   label="Volume"
                   type="number"
                   filled
                   dense
                   suffix="L"
-                  v-model.number="ingredient.drink_ingredient.volume"
                   step="0.01"
                   min="0"
                 />
@@ -70,9 +70,9 @@
             @save="updateIngredient(ingredient, volume)"
           >
             <q-select
+              v-model="ingredient.extra_ingredient"
               filled
               dense
-              v-model="ingredient.extra_ingredient"
               :options="extra_ingredients"
               option-label="name"
             />
@@ -96,16 +96,18 @@
           <div class="full-width row justify-around q-gutter-sm q-pa-sm">
             <div class="col">
               <q-select
+                v-model="newIngredient"
                 filled
                 dense
                 label="Zutat"
                 :options="[...drinks, ...extra_ingredients]"
                 option-label="name"
-                v-model="newIngredient"
               />
             </div>
             <div class="col">
               <q-input
+                v-if="newIngredient && newIngredient.volume"
+                v-model.number="newIngredientVolume"
                 filled
                 dense
                 label="Volume"
@@ -113,8 +115,6 @@
                 steps="0.01"
                 min="0"
                 suffix="L"
-                v-model.number="newIngredientVolume"
-                v-if="newIngredient && newIngredient.volume"
               />
               <q-input
                 v-else-if="newIngredient && newIngredient.price"
@@ -130,12 +130,12 @@
             </div>
           </div>
           <div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
-            <q-btn label="Abbrechen" @click="cancelAddIngredient" v-close-popup />
+            <q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
             <q-btn
+              v-close-popup
               label="Speichern"
               color="positive"
               @click="addIngredient(volume)"
-              v-close-popup
             />
           </div>
         </q-menu>
@@ -145,21 +145,24 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
-import store, { DrinkPriceVolume } from '../../store/altStore';
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { usePricelistStore } from '../../store';
+
 export default defineComponent({
   name: 'Ingredients',
   props: {
     ingredients: {
-      type: Array as () => Array<FG.Ingredient>,
+      type: Array as PropType<FG.Ingredient[]>,
       required: true,
     },
     volume: {
-      type: Object as () => DrinkPriceVolume,
+      type: Object /*as PropType<DrinkPriceVolume>*/,
       required: true,
     },
   },
   setup() {
+    const store = usePricelistStore();
+    /*
     const emptyIngredient: FG.Ingredient = {
       id: -1,
       drink_ingredient: undefined,
@@ -181,12 +184,12 @@ export default defineComponent({
           },
           volume
         );
-      } else if (newIngredient) {
+      } else if (newIngredient.value) {
         store.actions.setIngredient(
           {
             id: -1,
             drink_ingredient: undefined,
-            extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
+            extra_ingredient: >newIngredient.value,
           },
           volume
         );
@@ -205,14 +208,14 @@ export default defineComponent({
       store.actions.deleteIngredient(ingredient, volume);
     }
     const drinks = computed(() =>
-      store.state.drinks.filter((drink) => {
+      store.drinks.filter((drink) => {
         return drink.cost_price_pro_volume.value;
       })
     );
-    const extra_ingredients = computed(() => store.state.extraIngredients);
+    const extra_ingredients = computed(() => store.extraIngredients);
 
     function get_drink_ingredient_name(id: number) {
-      return store.state.drinks.find((a) => a.id === id)?.name;
+      return store.drinks.find((a) => a.id === id)?.name;
     }
 
     return {
@@ -225,7 +228,7 @@ export default defineComponent({
       updateIngredient,
       deleteIngredient,
       get_drink_ingredient_name,
-    };
+    };*/
   },
 });
 </script>
diff --git a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
index 2b4f6cd..4fe2e1e 100644
--- a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
@@ -1,5 +1,6 @@
 <template>
   <q-table
+    v-model:pagination="pagination"
     style="max-height: 130px"
     dense
     hide-header
@@ -8,10 +9,9 @@
     :visible-columns="visibleColumns"
     flat
     virtual-scroll
-    :pagination.sync="pagination"
     :rows-per-page-options="[0]"
   >
-    <template v-slot:body="prices_props">
+    <template #body="prices_props">
       <q-tr :props="prices_props">
         <q-td key="price" :props="prices_props">
           {{ prices_props.row.price.toFixed(2) }}€
@@ -67,7 +67,7 @@
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:bottom>
+    <template #bottom>
       <div class="full-width row justify-end">
         <q-btn size="xs" icon-right="add" color="positive" label="Preis hinzufügen">
           <q-menu anchor="center middle" self="center middle">
@@ -94,14 +94,14 @@
               <q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
             </div>
             <div class="row justify-between q-pa-sm">
-              <q-btn label="Abbrechen" @click="cancelAddPrice" v-close-popup />
-              <q-btn label="Speichern" color="primary" @click="addPrice(row)" v-close-popup />
+              <q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
+              <q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
             </div>
           </q-menu>
         </q-btn>
       </div>
     </template>
-    <template v-slot:no-data class="justify-end">
+    <template #no-data class="justify-end">
       <div class="full-width row justify-end">
         <q-btn size="xs" icon-right="add" color="positive" label="Preis hinzufügen">
           <q-menu anchor="center middle" self="center middle">
@@ -128,8 +128,8 @@
               <q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
             </div>
             <div class="row justify-between q-pa-sm">
-              <q-btn label="Abbrechen" @click="cancelAddPrice" v-close-popup />
-              <q-btn label="Speichern" color="primary" @click="addPrice(row)" v-close-popup />
+              <q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
+              <q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
             </div>
           </q-menu>
         </q-btn>
@@ -139,8 +139,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
-import store, { DrinkPriceVolume } from '../../store/altStore';
+import { defineComponent, ref } from 'vue';
+import { usePricelistStore } from '../../store';
+
 export default defineComponent({
   name: 'PriceTable',
   props: {
@@ -153,7 +154,7 @@ export default defineComponent({
       required: true,
     },
     row: {
-      type: Object as () => DrinkPriceVolume,
+      type: Object /*as PropType<DrinkPriceVolume>*/,
       required: true,
     },
     visibleColumns: {
@@ -162,6 +163,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const store = usePricelistStore();
+
     const emptyPrice = {
       id: -1,
       price: 0,
@@ -169,6 +172,7 @@ export default defineComponent({
       public: true,
     };
     const newPrice = ref(emptyPrice);
+    /*
     function addPrice(volume: DrinkPriceVolume) {
       store.actions.setPrice({ ...newPrice.value }, volume);
       cancelAddPrice();
@@ -199,7 +203,7 @@ export default defineComponent({
       deletePrice,
       pagination,
       console,
-    };
+    };*/
   },
 });
 </script>
diff --git a/src/plugins/pricelist/components/ExtraIngredients.vue b/src/plugins/pricelist/components/ExtraIngredients.vue
index 41bbdfe..a90af46 100644
--- a/src/plugins/pricelist/components/ExtraIngredients.vue
+++ b/src/plugins/pricelist/components/ExtraIngredients.vue
@@ -6,12 +6,12 @@
           <div class="text-h6">Editere Extrazutaten {{ actualExtraIngredient.name }}</div>
         </q-card-section>
         <q-card-section>
-          <q-input dense label="Name" filled v-model="actualExtraIngredient.name" />
+          <q-input v-model="actualExtraIngredient.name" dense label="Name" filled />
           <q-input
+            v-model.number="actualExtraIngredient.price"
             dense
             label="Preis"
             filled
-            v-model.number="actualExtraIngredient.price"
             type="number"
             min="0"
             step="0.1"
@@ -27,19 +27,19 @@
 
     <q-page padding>
       <q-table title="Getränkearten" :data="rows" :row-key="(row) => row.id" :columns="columns">
-        <template v-slot:top-right>
+        <template #top-right>
           <q-input
+            v-model="newExtraIngredient.name"
             class="q-px-sm"
             dense
-            v-model="newExtraIngredient.name"
             placeholder="Neue Zutatenbezeichnung"
             label="Neue Zutatenbezeichnung"
             filled
           />
           <q-input
+            v-model.number="newExtraIngredient.price"
             class="q-px-sm"
             dense
-            v-model.number="newExtraIngredient.price"
             placeholder="Preis"
             label="Preis"
             filled
@@ -50,7 +50,7 @@
           />
           <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addExtraIngredient" />
         </template>
-        <template v-slot:body-cell-actions="props">
+        <template #body-cell-actions="props">
           <q-td :props="props" align="right" :auto-width="true">
             <q-btn round flat icon="mdi-pencil" @click="editType(props.row)" />
             <q-btn round flat icon="mdi-delete" @click="deleteType(props.row)" />
@@ -62,12 +62,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeMount, ref } from '@vue/composition-api';
-import store from '../store/altStore';
+import { computed, defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'DrinkTypes',
-  setup(_, { root }) {
+  setup() {
+    /*
     const emptyExtraIngredient: FG.ExtraIngredient = {
       name: '',
       price: 0,
@@ -138,7 +138,7 @@ export default defineComponent({
       actualExtraIngredient,
       discardChanges,
       saveChanges,
-    };
+    };*/
   },
 });
 </script>
diff --git a/yarn.lock b/yarn.lock
index 4be0af3..b0e1ba5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1148,7 +1148,7 @@
 "@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-f7cd77ac-407f-4b66-b4e0-b371d5331fa7-1616165544608/node_modules/@quasar/ui"
+    "@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@link:deps/quasar-ui-qcalendar/ui":
   version "0.0.0"