flaschengeist-frontend/src/plugins/pricelist/pages/CocktailBuilder.vue

<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?.ingredient_id
                  );
                  retVal +=
                    ingredient.drink_ingredient.volume * <number>(<unknown>_drink?.cost_per_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>