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

@@ -82,6 +82,8 @@
             :ingredients="props.row.ingredients"
             :volume="props.row"
             @updateDrink="updateDrink"
+            @addIngredient="addIngredient"
+            @deleteIngredient="deleteIngredient"
           />
         </q-td>
       </q-tr>
@@ -185,7 +187,15 @@ export default defineComponent({
       },
     ];
 
-    return { addVolume, updateDrink, deleteVolume, column_prices };
+    function addIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
+      volume.ingredients.push(ingredient);
+      updateDrink();
+    }
+    function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
+      store.deleteIngredient(ingredient, volume);
+    }
+
+    return { addVolume, updateDrink, deleteVolume, column_prices, addIngredient, deleteIngredient };
   },
 });
 </script>

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

@@ -162,20 +162,22 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: { updateDrink: () => true },
+  emits: {
+    updateDrink: () => true,
+    addIngredient: (val: FG.Ingredient, volume: DrinkPriceVolume) =>
+      (val.drink_ingredient || val.extra_ingredient) && volume,
+    deleteIngredient: (ingredient: FG.Ingredient, volume: DrinkPriceVolume) =>
+      (ingredient.drink_ingredient || ingredient.extra_ingredient) && volume,
+  },
   setup(_, { emit }) {
     const store = usePricelistStore();
 
-    /*const emptyIngredient: FG.Ingredient = {
-      id: -1,
-      drink_ingredient: undefined,
-      extra_ingredient: undefined,
-    };*/
     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) {
-        volume.ingredients.push({
+        _ingredient = {
           id: -1,
           drink_ingredient: {
             id: -1,
@@ -183,15 +185,15 @@ export default defineComponent({
             volume: newIngredientVolume.value,
           },
           extra_ingredient: undefined,
-        });
-      } else if (newIngredient.value) {
-        volume.ingredients.push({
+        };
+      } else {
+        _ingredient = {
           id: -1,
           drink_ingredient: undefined,
           extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
-        });
+        };
       }
-      updateDrink();
+      emit('addIngredient', _ingredient, volume);
       cancelAddIngredient();
     }
     function updateDrink() {
@@ -204,7 +206,7 @@ export default defineComponent({
       }, 200);
     }
     function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-      store.deleteIngredient(ingredient, volume);
+      emit('deleteIngredient', ingredient, volume);
     }
     const drinks = computed(() =>
       store.drinks.filter((drink) => {

src/plugins/pricelist/components/Pricelist.vue

@@ -99,7 +99,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props) {
+  setup() {
     let user: string | null;
     onBeforeMount(() => {
       if (user) {

src/plugins/pricelist/pages/CocktailBuilder.vue

@@ -0,0 +1,93 @@
+<template>
+  <q-card>
+    <q-card-section>
+      <div class="q-table__title">Cocktailbuilder</div>
+    </q-card-section>
+    <q-card-section>
+      <ingredients
+        class="q-pa-sm"
+        :volume="volume"
+        :ingredients="volume.ingredients"
+        @addIngredient="addIngredient"
+        @deleteIngredient="deleteIngredient"
+      />
+    </q-card-section>
+    <q-card-section>
+      <div class="q-table__title">Du solltest mindest sowiel verlangen oder bezahlen:</div>
+      <div class="full-width row q-gutter-sm justify-around">
+        <div v-for="min_price in volume.min_prices" :key="min_price.percentage">
+          <div>
+            <q-badge class="text-h6" color="primary"> {{ min_price.percentage }}% </q-badge>
+          </div>
+          <div>{{ min_price.price.toFixed(2) }}€</div>
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
+import { DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
+export default defineComponent({
+  name: 'CocktailBuilder',
+  components: { Ingredients },
+  setup() {
+    onBeforeMount(() => {
+      void store.get_min_prices().finally(() => {
+        store.min_prices.forEach((min_price) => {
+          (<DrinkPriceVolume>volume.value).min_prices.push({
+            percentage: min_price,
+            price: computed<number>(() => {
+              let retVal = 0;
+              let extraIngredientPrice = 0;
+              volume.value.ingredients.forEach((ingredient) => {
+                if (ingredient.drink_ingredient) {
+                  const _drink = store.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;
+            }),
+          });
+        });
+      });
+      void store.getDrinks();
+      void store.getDrinkTypes();
+      void store.getExtraIngredients();
+    });
+    const store = usePricelistStore();
+
+    const emptyVolume: DrinkPriceVolume = {
+      id: -1,
+      _volume: 0,
+      min_prices: [],
+      prices: [],
+      ingredients: [],
+    };
+    const volume = ref(emptyVolume);
+
+    function addIngredient(ingredient: FG.Ingredient) {
+      volume.value.ingredients.push(ingredient);
+    }
+    function deleteIngredient(ingredient: FG.Ingredient) {
+      const index = volume.value.ingredients.findIndex((a) => a.id === ingredient.id);
+      if (index > -1) {
+        volume.value.ingredients.splice(index, 1);
+      }
+    }
+
+    return { volume, addIngredient, deleteIngredient };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/pages/Reciepts.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>Hier kommen Rezepte hin.</h1>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'Reciepts',
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/routes/index.ts

@@ -22,6 +22,28 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
           component: () => import('../pages/PricelistP.vue'),
         },
       },
+      {
+        title: 'Rezepte',
+        shortcut: false,
+        icon: '',
+        permissions: ['user'],
+        route: {
+          path: 'reciepts',
+          name: 'reciepts',
+          component: () => import('../pages/Reciepts.vue')
+        }
+      },
+      {
+        title: 'Cocktailbuilder',
+        shortcut: false,
+        icon: 'mdi-glass-cocktail',
+        permissions: ['user'],
+        route: {
+          path: 'cocktail-builder',
+          name: 'cocktail-builder',
+          component: () => import('../pages/CocktailBuilder.vue')
+        }
+      },
       {
         title: 'Einstellungen',
         icon: 'mdi-coffee-to-go',

src/plugins/pricelist/store.ts

@@ -322,4 +322,6 @@ export const usePricelistStore = defineStore({
   },
 });
 
+
+
 export { DrinkPriceVolume, MinPrice, Drink };