[pricelist][vue3] now it works

src/plugins/pricelist/components/CalculationTable.vue

@@ -20,6 +20,11 @@
     </template>
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
+        <q-btn label="Aufpreise">
+          <q-menu anchor="center middle" self="center middle">
+            <min-price-setting />
+          </q-menu>
+        </q-btn>
         <q-btn label="neues Getränk" color="positive" icon-right="add">
           <q-menu anchor="center middle" self="center middle">
             <div class="q-pa-sm">
@@ -113,44 +118,62 @@
         <q-td key="name" :props="drinks_props">
           {{ drinks_props.row.name }}
           <q-popup-edit
+            v-slot="scope"
             v-model="drinks_props.row.name"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
-            <q-input v-model="drinks_props.row.name" filled dense autofocus clearable />
+            <q-input
+              v-model="scope.value"
+              filled
+              dense
+              autofocus
+              clearable
+              @keyup.enter="scope.set"
+            />
           </q-popup-edit>
         </q-td>
         <q-td key="drink_type" :props="drinks_props">
           {{ drinks_props.row.type.name }}
           <q-popup-edit
+            v-slot="scope"
             v-model="drinks_props.row.type"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
             <q-select
-              v-model="drinks_props.row.type"
+              v-model="scope.value"
               :options="drinkTypes"
               option-label="name"
               filled
               dense
               autofocus
+              @keyup.enter="scope.set"
             />
           </q-popup-edit>
         </q-td>
         <q-td key="article_id" :props="drinks_props">
           {{ drinks_props.row.article_id || 'o.A.' }}
           <q-popup-edit
+            v-slot="scope"
             v-model="drinks_props.row.article_id"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
-            <q-input v-model="drinks_props.row.article_id" filled dense autofocus clearable />
+            <q-input
+              v-model="scope.value"
+              filled
+              dense
+              autofocus
+              clearable
+              @keyup.enter="scope.set"
+            />
           </q-popup-edit>
         </q-td>
         <q-td key="volume_package" :props="drinks_props">
@@ -161,14 +184,15 @@
                 volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
               )
             "
+            v-slot="scope"
             v-model.number="drinks_props.row.volume"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
             <q-input
-              v-model.number="drinks_props.row.volume"
+              v-model.number="scope.value"
               filled
               dense
               autofocus
@@ -177,6 +201,7 @@
               step="0.01"
               min="0"
               suffix="L"
+              @keyup.enter="scope.set"
             />
           </q-popup-edit>
         </q-td>
@@ -188,26 +213,28 @@
                 volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
               )
             "
+            v-slot="scope"
             v-model="drinks_props.row.package_size"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
             <q-input
-              v-model.number="drinks_props.row.package_size"
+              v-model.number="scope.value"
               filled
               dense
               autofocus
               type="number"
               min="0"
+              @keyup.enter="scope.set"
             />
           </q-popup-edit>
         </q-td>
         <q-td key="cost_price_package_netto" :props="drinks_props">
           {{
             drinks_props.row.cost_price_package_netto
-              ? `${drinks_props.row.cost_price_package_netto}€`
+              ? `${drinks_props.row.cost_price_package_netto.toFixed(2)}€`
               : 'o.A.'
           }}
           <q-popup-edit
@@ -216,14 +243,15 @@
                 volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
               )
             "
+            v-slot="scope"
             v-model="drinks_props.row.cost_price_package_netto"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
             <q-input
-              v-model.number="drinks_props.row.cost_price_package_netto"
+              v-model.number="scope.value"
               filled
               dense
               autofocus
@@ -231,7 +259,7 @@
               step="0.01"
               min="0"
               suffix="€"
-              @change="console.log(drinks_props.row)"
+              @keyup.enter="scope.set"
             />
           </q-popup-edit>
         </q-td>
@@ -252,14 +280,15 @@
                 volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
               )
             "
+            v-slot="scope"
             v-model="drinks_props.row.cost_price_pro_volume"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink(drinks_props.row)"
+            @update:modelValue="updateDrink(drinks_props.row)"
           >
             <q-input
-              v-model.number="drinks_props.row.cost_price_pro_volume"
+              v-model.number="scope.value"
               filled
               dense
               autofocus
@@ -267,11 +296,18 @@
               min="0"
               step="0.1"
               suffix="€"
+              @keyup.enter="scope.set"
             />
           </q-popup-edit>
         </q-td>
         <q-td key="volumes" :props="drinks_props">
-          <drink-price-volumes-table :rows='drinks_props.row.volumes' :visible-columns='visibleColumn' :columns='column_calc' :drink='drinks_props.row' @updateDrink="updateDrink(drinks_props.row)"/>
+          <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>
@@ -283,7 +319,7 @@ import { defineComponent, onBeforeMount, ref, ComputedRef, computed } 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';
 
 function sort(a: string | number, b: string | number) {
   if (a > b) return 1;
@@ -292,7 +328,7 @@ function sort(a: string | number, b: string | number) {
 }
 export default defineComponent({
   name: 'CalculationTable',
-  components: {DrinkPriceVolumesTable},
+  components: { MinPriceSetting, DrinkPriceVolumesTable },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
@@ -449,14 +485,14 @@ export default defineComponent({
     const drinkTypes = computed(() => store.drinkTypes);
 
     function addDrink() {
-      store.setDrink(newDrink.value);
+      void store.setDrink(newDrink.value);
       cancelAddDrink();
     }
     function cancelAddDrink() {
       setTimeout(() => (newDrink.value = emptyDrink), 200);
     }
     function updateDrink(drink: Drink) {
-      store.updateDrink(drink);
+      void store.updateDrink(drink);
     }
     function deleteDrink(drink: Drink) {
       store.deleteDrink(drink);

src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue

@@ -34,7 +34,7 @@ export default defineComponent({
   name: 'NewVolume',
   props: {
     pricePerVolume: {
-      type: Number,
+      type: undefined,
       required: true,
     },
   },

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

@@ -89,7 +89,7 @@
     <template #bottom>
       <div class="full-width row justify-end">
         <new-volume
-          :cost_price_pro_volume="drink.cost_price_pro_volume"
+          :price-per-volume="drink.cost_price_pro_volume"
           @addVolume="addVolume($event, drink)"
         />
       </div>
@@ -97,7 +97,7 @@
     <template #no-data>
       <div class="full-width row justify-end">
         <new-volume
-          :cost_price_pro_volume="drink.cost_price_pro_volume"
+          :price-per-volume="drink.cost_price_pro_volume"
           @addVolume="addVolume($event, drink)"
         />
       </div>

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

@@ -16,14 +16,15 @@
         <q-td key="price" :props="prices_props">
           {{ prices_props.row.price.toFixed(2) }}€
           <q-popup-edit
+            v-slot="scope"
             v-model="prices_props.row.price"
             buttons
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink"
+            @update:modelValue="updateDrink"
           >
             <q-input
-              v-model.number="prices_props.row.price"
+              v-model.number="scope.value"
               type="number"
               label="Preis"
               dense
@@ -32,19 +33,28 @@
               min="0"
               step="0.1"
               suffix="€"
+              @keyup.enter="scope.set"
             /> </q-popup-edit
         ></q-td>
         <q-td key="description" :props="prices_props">
           {{ prices_props.row.description }}
           <q-popup-edit
+            v-slot="scope"
             v-model="prices_props.row.description"
             buttons
             label="Beschreibung"
             label-cancel="Abbrechen"
             label-set="Speichern"
-            @save="updateDrink"
+            @update:modelValue="updateDrink"
           >
-            <q-input v-model="prices_props.row.description" dense autofocus filled clearable />
+            <q-input
+              v-model="scope.value"
+              dense
+              autofocus
+              filled
+              clearable
+              @keyup.enter="scope.set"
+            />
           </q-popup-edit>
         </q-td>
         <q-td key="public" :props="prices_props">

src/plugins/pricelist/components/ExtraIngredients.vue

@@ -75,7 +75,6 @@ export default defineComponent({
       id: -1,
     };
     const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
-    /*const newDrinkTypeName = ref<string>('');*/
     const edittype = ref(false);
     const actualExtraIngredient = ref(emptyExtraIngredient);
 
@@ -105,7 +104,8 @@ export default defineComponent({
 
     async function addExtraIngredient() {
       await store.setExtraIngredient((<ComputedRef>newExtraIngredient).value);
-      newExtraIngredient.value = emptyExtraIngredient;
+      newExtraIngredient.value = Object.assign({}, emptyExtraIngredient);
+      discardChanges();
     }
 
     function editType(extraIngredient: FG.ExtraIngredient) {
@@ -120,7 +120,8 @@ export default defineComponent({
 
     function discardChanges() {
       actualExtraIngredient.value = emptyExtraIngredient;
-      newExtraIngredient.value = emptyExtraIngredient;
+      newExtraIngredient.value.name = '';
+      newExtraIngredient.value.price = 0;
       edittype.value = false;
     }
 

src/plugins/pricelist/components/MinPriceSetting.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-list>
+    <div v-for="(min_price, index) in min_prices" :key="index">
+      <q-item>
+        <q-item-section>{{ min_price }}%</q-item-section>
+        <q-btn
+          round
+          icon="mdi-delete"
+          size="sm"
+          color="negative"
+          @click="delete_min_price(min_price)"
+        />
+      </q-item>
+      <q-separator />
+    </div>
+  </q-list>
+  <q-input v-model.number="new_min_price" class="q-pa-sm" type="number" suffix="%" filled dense />
+  <q-btn class="full-width" label="speichern" @click="save_min_prices"></q-btn>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { usePricelistStore } from 'src/plugins/pricelist/store';
+export default defineComponent({
+  name: 'MinPriceSetting',
+  setup() {
+    const store = usePricelistStore();
+    const min_prices = computed(() => store.min_prices);
+    const new_min_price = ref<number>();
+    function save_min_prices() {
+      const index = min_prices.value.findIndex((a) => a === new_min_price.value);
+      if (index < 0) {
+        min_prices.value.push(<number>new_min_price.value);
+        void store.set_min_prices();
+        new_min_price.value = undefined;
+      }
+    }
+    function delete_min_price(min_price: number) {
+      const index = min_prices.value.findIndex((a) => a === min_price);
+      if (index > -1) {
+        min_prices.value.splice(index, 1);
+        void store.set_min_prices();
+      }
+    }
+    return {
+      min_prices,
+      new_min_price,
+      save_min_prices,
+      delete_min_price,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/pages/Settings.vue

@@ -55,7 +55,6 @@ import { usePricelistStore } from 'src/plugins/pricelist/store';
 
 export default defineComponent({
   name: 'Settings',
-  //components: { DrinkTypes, ExtraIngredients, CalculationTable },
   components: { ExtraIngredients, DrinkTypes, CalculationTable },
   setup() {
     interface Tab {
@@ -71,7 +70,8 @@ export default defineComponent({
         })
         .catch((err) => console.log(err));
       void store.getDrinkTypes();
-      store.getDrinks();
+      void store.getDrinks();
+      void store.get_min_prices();
     });
 
     const drawer = ref<boolean>(false);

src/plugins/pricelist/store.ts

@@ -1,7 +1,7 @@
 import { api } from 'src/boot/axios';
 import { defineStore } from 'pinia';
 import { AxiosResponse } from 'axios';
-import { computed, WritableComputedRef } from 'vue';
+import { computed, ComputedRef, WritableComputedRef } from 'vue';
 
 interface MinPrice extends Omit<FG.MinPrices, 'price'> {
   price?: WritableComputedRef<number>;
@@ -18,28 +18,12 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'>
 }
 
 class DrinkPriceVolume implements DrinkPriceVolume {
-  constructor(
+  constructor({ id, volume, prices, ingredients }: FG.DrinkPriceVolume) {
-    { 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 = [
+    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)) {
@@ -71,8 +55,7 @@ class Drink {
     cost_price_package_netto,
     tags,
     type,
-  }: /*volumes,*/
+  }: FG.Drink) {
-  FG.Drink) {
     this.id = id;
     this.article_id = article_id;
     this.package_size = package_size;
@@ -97,13 +80,13 @@ class Drink {
     this.tags = tags;
     this.type = type;
     this.volumes = [];
-    //volumes.forEach(volume => {
-    //  this.volumes.push(new DrinkPriceVolume(volume, this));
-    //});
   }
 }
 
 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>(() => {
@@ -126,6 +109,7 @@ function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: n
   } else {
     return computed<number>(() => {
       let retVal = 0;
+      let extraIngredientPrice = 0;
       volume.ingredients.forEach((ingredient) => {
         if (ingredient.drink_ingredient) {
           const _drink = usePricelistStore().drinks.find(
@@ -135,11 +119,10 @@ function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: n
             ingredient.drink_ingredient.volume * (_drink?.cost_price_pro_volume?.value || 0);
         }
         if (ingredient.extra_ingredient) {
-          retVal += ingredient.extra_ingredient.price;
+          extraIngredientPrice += ingredient.extra_ingredient.price;
         }
       });
-      console.log(volume);
+      return (retVal * percentage) / 100 + extraIngredientPrice;
-      return (retVal * percentage) / 100;
     });
   }
 }
@@ -152,6 +135,7 @@ export const usePricelistStore = defineStore({
     drinks: [] as Array<Drink>,
     extraIngredients: [] as Array<FG.ExtraIngredient>,
     pricecalc_columns: [] as Array<string>,
+    min_prices: [] as Array<number>,
   }),
 
   actions: {
@@ -208,23 +192,18 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    getDrinks() {
+    async getDrinks() {
-      api
+      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
-        .get('pricelist/drinks')
-        .then((response: AxiosResponse<FG.Drink[]>) => {
       this.drinks = [];
-          response.data.forEach((drink) => {
+      data.forEach((drink) => {
-            this.drinks.push(new Drink(drink));
+        const _drink = new Drink(drink);
+        drink.volumes.forEach((volume) => {
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
         });
-          this.drinks.forEach((drink) => {
+        this.drinks.push(_drink);
-            const _drink = response.data.find((a) => a.id === drink.id);
-            _drink?.volumes.forEach((volume) => {
-              drink.volumes.push(new DrinkPriceVolume(volume, drink));
       });
-          });
+      this.create_min_prices();
-          console.log(this.drinks);
-        })
-        .catch((err) => console.warn(err));
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {
@@ -266,35 +245,28 @@ export const usePricelistStore = defineStore({
         })
         .catch((err) => console.warn(err));
     },
-    setDrink(drink: FG.Drink) {
+    async setDrink(drink: FG.Drink) {
-      api
+      const { data } = await api.post<FG.Drink>('pricelist/drinks', drink);
-        .post('pricelist/drinks', drink)
+      const _drink = new Drink(data);
-        .then((response: AxiosResponse<FG.Drink>) => {
+      data.volumes.forEach((volume) => {
-          this.drinks.push(new Drink(response.data));
+        const _volume = new DrinkPriceVolume(volume);
-          const drink = this.drinks.find((a) => a.id === response.data.id);
+        _drink.volumes.push(_volume);
-          response.data.volumes.forEach((volume) => {
-            drink?.volumes.push(new DrinkPriceVolume(volume, drink));
       });
-        })
+      this.drinks.push(_drink);
-        .catch((err) => console.warn(err));
+      this.create_min_prices();
     },
-    updateDrink(drink: Drink) {
+    async updateDrink(drink: Drink) {
-      api
+      const { data } = await api.put<FG.Drink>(`pricelist/drinks/${drink.id}`, drink);
-        .put(`pricelist/drinks/${drink.id}`, {
-          ...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 = new Drink(data);
-            const drink = this.drinks.find((a) => a.id === data.id);
         data.volumes.forEach((volume) => {
-              drink?.volumes.push(new DrinkPriceVolume(volume, drink));
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
         });
+        this.drinks[index] = _drink;
       }
-        })
+      this.create_min_prices();
-        .catch((err) => console.warn(err));
     },
     deleteDrink(drink: Drink) {
       api
@@ -325,6 +297,56 @@ export const usePricelistStore = defineStore({
         })
         .catch((err) => console.log(err));
     },
+    async get_min_prices() {
+      const { data } = await api.get<Array<number>>('pricelist/settings/min_prices');
+      this.min_prices = data;
+    },
+    async set_min_prices() {
+      await api.post<Array<number>>('pricelist/settings/min_prices', this.min_prices);
+      this.create_min_prices();
+    },
+    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;
+            if (drink.cost_price_pro_volume) {
+              computedMinPrice = computed<number>(
+                () =>
+                  (<number>(<unknown>drink.cost_price_pro_volume) *
+                    <number>(<unknown>volume.volume) *
+                    min_price) /
+                  100
+              );
+            } else {
+              computedMinPrice = 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 *
+                      <number>(<unknown>_drink?.cost_price_pro_volume);
+                  }
+                  if (ingredient.extra_ingredient) {
+                    extraIngredientPrice += ingredient.extra_ingredient.price;
+                  }
+                });
+                return (retVal * min_price) / 100 + extraIngredientPrice;
+              });
+            }
+            volume.min_prices.push({ percentage: min_price, price: computedMinPrice });
+          });
+        });
+      });
+    },
   },
 });