[pricelist] improved add drink

src/plugins/pricelist/components/CalculationTable.vue

@@ -26,64 +26,8 @@
           </q-menu>
         </q-btn>
         <q-btn label="neues Getränk" color="positive" icon-right="add">
-          <q-menu anchor="center middle" self="center middle">
+          <q-menu v-model="showNewDrink" anchor="center middle" self="center middle">
-            <div class="q-pa-sm">
+            <new-drink @close="showNewDrink = false" />
-              <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"
-                />
-                <q-input
-                  v-model="newDrink.article_id"
-                  class="col-sm-4 col-xs-6 q-pa-sm"
-                  filled
-                  label="Artikelnummer"
-                />
-                <q-select
-                  v-model="newDrink.type"
-                  class="col-sm-4 col-xs-6 q-pa-sm"
-                  filled
-                  label="Kategorie"
-                  :options="drinkTypes"
-                  option-label="name"
-                />
-                <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"
-                />
-                <q-input
-                  v-model.number="newDrink.package_size"
-                  class="col-sm-4 col-xs-6 q-pa-sm"
-                  filled
-                  label="Gebindegröße"
-                  type="number"
-                />
-                <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"
-                />
-                <q-input
-                  v-model="cost_price_pro_volume"
-                  class="col-sm-4 col-xs-6 q-pa-sm"
-                  filled
-                  label="Preis mit 19%/Liter"
-                  :disable="calc_price_pro_volume"
-                />
-              </div>
-              <div class="row justify-between">
-                <q-btn v-close-popup label="Abbrechen" @click="cancelAddDrink" />
-                <q-btn v-close-popup label="Speichern" color="primary" @click="addDrink" />
-              </div>
-            </div>
           </q-menu>
         </q-btn>
         <q-select
@@ -315,11 +259,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref, ComputedRef, computed } 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';
 import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
+import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
 
 function sort(a: string | number, b: string | number) {
   if (a > b) return 1;
@@ -328,7 +273,7 @@ function sort(a: string | number, b: string | number) {
 }
 export default defineComponent({
   name: 'CalculationTable',
-  components: { MinPriceSetting, DrinkPriceVolumesTable },
+  components: { MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
@@ -445,52 +390,8 @@ export default defineComponent({
       rowsPerPage: store.drinks.length;
     });
 
-    const emptyDrink: FG.Drink = {
-      id: -1,
-      article_id: undefined,
-      package_size: undefined,
-      name: '',
-      volume: undefined,
-      cost_price_pro_volume: undefined,
-      cost_price_package_netto: undefined,
-      tags: [],
-      type: undefined,
-      volumes: [],
-    };
-
-    const newDrink = ref<FG.Drink>(emptyDrink);
-    const calc_price_pro_volume = computed(
-      () =>
-        !!newDrink.value.cost_price_package_netto &&
-        !!newDrink.value.volume &&
-        !!newDrink.value.package_size
-    );
-    const cost_price_pro_volume = computed({
-      get: () => {
-        if (calc_price_pro_volume.value) {
-          const retVal =
-            ((newDrink.value.cost_price_package_netto || 0) /
-              ((newDrink.value.volume || 0) * (newDrink.value.package_size || 0))) *
-            1.19;
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          newDrink.value.cost_price_pro_volume = Math.round(retVal * 1000) / 1000;
-        }
-        return newDrink.value.cost_price_pro_volume;
-      },
-      set: (val) => {
-        newDrink.value.cost_price_pro_volume = val;
-      },
-    });
-
     const drinkTypes = computed(() => store.drinkTypes);
 
-    function addDrink() {
-      void store.setDrink(newDrink.value);
-      cancelAddDrink();
-    }
-    function cancelAddDrink() {
-      setTimeout(() => (newDrink.value = emptyDrink), 200);
-    }
     function updateDrink(drink: Drink) {
       void store.updateDrink(drink);
     }
@@ -498,6 +399,8 @@ export default defineComponent({
       store.deleteDrink(drink);
     }
 
+    const showNewDrink = ref(false);
+
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -505,14 +408,10 @@ export default defineComponent({
       column_calc,
       column_prices,
       visibleColumn,
-      newDrink,
-      cost_price_pro_volume,
-      calc_price_pro_volume,
       drinkTypes,
-      addDrink,
-      cancelAddDrink,
       updateDrink,
       deleteDrink,
+      showNewDrink,
       console,
     };
   },

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="q-pa-sm">
+    <div class="q-table__title q-pa-sm">Neues Getränk</div>
+    <q-form @submit="addDrink" @reset="cancelAddDrink">
+      <q-input
+        v-model="newDrink.name"
+        class="col-sm-4 col-xs-6 q-pa-sm"
+        filled
+        label="Getränkname"
+        lazy-rules
+        :rules="[notEmpty]"
+      />
+      <q-input
+        v-model="newDrink.article_id"
+        class="col-sm-4 col-xs-6 q-pa-sm"
+        filled
+        label="Artikelnummer"
+      />
+      <q-select
+        v-model="newDrink.type"
+        class="col-sm-4 col-xs-6 q-pa-sm"
+        filled
+        label="Kategorie"
+        :options="drinkTypes"
+        option-label="name"
+        lazy-rules
+        :rules="[notEmpty]"
+      />
+      <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"
+      />
+      <q-input
+        v-model.number="newDrink.package_size"
+        class="col-sm-4 col-xs-6 q-pa-sm"
+        filled
+        label="Gebindegröße"
+        type="number"
+      />
+      <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"
+      />
+      <q-input
+        v-model="cost_price_pro_volume"
+        class="col-sm-4 col-xs-6 q-pa-sm"
+        filled
+        label="Preis mit 19%/Liter"
+        :disable="calc_price_pro_volume"
+      />
+      <div class="row justify-between">
+        <q-btn v-close-popup label="Abbrechen" type="reset" />
+        <q-btn label="Speichern" type="submit" />
+      </div>
+    </q-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { usePricelistStore } from 'src/plugins/pricelist/store';
+import { notEmpty } from 'src/utils/validators';
+
+export default defineComponent({
+  name: 'NewDrink',
+  emits: { close },
+  setup(_, { emit }) {
+    const store = usePricelistStore();
+    const emptyDrink: FG.Drink = {
+      id: -1,
+      article_id: undefined,
+      package_size: undefined,
+      name: '',
+      volume: undefined,
+      cost_price_pro_volume: undefined,
+      cost_price_package_netto: undefined,
+      tags: [],
+      type: undefined,
+      volumes: [],
+    };
+
+    const calc_price_pro_volume = computed(
+      () =>
+        !!newDrink.value.cost_price_package_netto &&
+        !!newDrink.value.volume &&
+        !!newDrink.value.package_size
+    );
+    const cost_price_pro_volume = computed({
+      get: () => {
+        if (calc_price_pro_volume.value) {
+          const retVal =
+            ((newDrink.value.cost_price_package_netto || 0) /
+              ((newDrink.value.volume || 0) * (newDrink.value.package_size || 0))) *
+            1.19;
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          newDrink.value.cost_price_pro_volume = Math.round(retVal * 1000) / 1000;
+        }
+        return newDrink.value.cost_price_pro_volume;
+      },
+      set: (val) => {
+        newDrink.value.cost_price_pro_volume = val;
+      },
+    });
+
+    function addDrink() {
+      void store.setDrink(newDrink.value);
+      cancelAddDrink();
+      setTimeout(() => emit('close'), 200);
+    }
+    function cancelAddDrink() {
+      setTimeout(() => (newDrink.value = emptyDrink), 200);
+    }
+
+    const newDrink = ref<FG.Drink>(emptyDrink);
+    return {
+      drinkTypes: computed(() => store.drinkTypes),
+      newDrink,
+      calc_price_pro_volume,
+      cost_price_pro_volume,
+      addDrink,
+      cancelAddDrink,
+      notEmpty,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/store.ts

@@ -83,50 +83,6 @@ class Drink {
   }
 }
 
-function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: number) {
-  if (drink.name == 'Elbhang Rot') {
-    console.log(drink.name, drink.cost_price_pro_volume, volume.volume, drink, volume);
-  }
-  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;
-      let extraIngredientPrice = 0;
-      volume.ingredients.forEach((ingredient) => {
-        if (ingredient.drink_ingredient) {
-          const _drink = usePricelistStore().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) {
-          extraIngredientPrice += ingredient.extra_ingredient.price;
-        }
-      });
-      return (retVal * percentage) / 100 + extraIngredientPrice;
-    });
-  }
-}
-
 export const usePricelistStore = defineStore({
   id: 'pricelist',
 
@@ -308,9 +264,6 @@ export const usePricelistStore = defineStore({
     create_min_prices() {
       this.drinks.forEach((drink) => {
         drink.volumes.forEach((volume) => {
-          if (drink.name == 'Elbhang Rot2') {
-            console.log(drink.name, drink.cost_price_pro_volume, volume, drink);
-          }
           volume.min_prices = [];
           this.min_prices.forEach((min_price) => {
             let computedMinPrice: ComputedRef;
@@ -350,4 +303,4 @@ export const usePricelistStore = defineStore({
   },
 });
 
-export { create_min_prices, DrinkPriceVolume, MinPrice, Drink };
+export { DrinkPriceVolume, MinPrice, Drink };