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
        v-model="volume.ingredients"
        class="q-pa-sm"
        editable
        @update:modelValue="update"
      />
    </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 { defineComponent, onBeforeMount, ref } from 'vue';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
import { DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
import { calc_min_prices } from '../utils/utils';
export default defineComponent({
  name: 'CocktailBuilder',
  components: { Ingredients },
  setup() {
    onBeforeMount(() => {
      void store.get_min_prices().finally(() => {
        volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
      });
      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 update() {
      volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
    }

    return { volume, update };
  },
});
</script>

<style scoped></style>