flaschengeist-frontend/src/plugins/pricelist/components/CalculationTable/Ingredients.vue

<template>
  <div class="full-width">
    <div
      v-for="ingredient in ingredients"
      :key="`volume:${volume.id},ingredient:${ingredient.id}`"
      class="full-width row justify-evenly q-py-xs"
    >
      <div class="full-width row justify-evenly">
        <div v-if="ingredient.drink_ingredient" class="col">
          <div class="full-width row justify-evenly q-py-xs">
            <div class="col">
              {{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}
              <q-popup-edit
                v-model="ingredient.drink_ingredient.ingredient_id"
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                @save="updateDrink"
              >
                <q-select
                  v-model="ingredient.drink_ingredient.ingredient_id"
                  class="col q-px-sm"
                  label="Getränk"
                  filled
                  dense
                  :options="drinks"
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                />
              </q-popup-edit>
            </div>
            <div class="col">
              {{ ingredient.drink_ingredient.volume.toFixed(3) }}L
              <q-popup-edit
                v-model="ingredient.drink_ingredient.volume"
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                @save="updateDrink"
              >
                <q-input
                  v-model.number="ingredient.drink_ingredient.volume"
                  class="col q-px-sm"
                  label="Volume"
                  type="number"
                  filled
                  dense
                  suffix="L"
                  step="0.01"
                  min="0"
                />
              </q-popup-edit>
            </div>
          </div>
        </div>
        <div v-else-if="ingredient.extra_ingredient" class="col">
          <div class="full-width row justify-evenly q-py-xs">
            <div class="col">
              {{ ingredient.extra_ingredient.name }}
            </div>
            <div class="col">{{ ingredient.extra_ingredient.price.toFixed(3) }}€</div>
          </div>
          <q-popup-edit
            v-model="ingredient.extra_ingredient"
            buttons
            label-cancel="Abbrechen"
            label-set="Speichern"
            @save="updateDrink"
          >
            <q-select
              v-model="ingredient.extra_ingredient"
              filled
              dense
              :options="extra_ingredients"
              option-label="name"
            />
          </q-popup-edit>
        </div>
        <div class="col-1 row justify-end q-pa-xs">
          <q-btn
            icon="mdi-delete"
            round
            size="xs"
            color="negative"
            @click="deleteIngredient(ingredient, volume)"
          />
        </div>
      </div>
      <q-separator />
    </div>
    <div class="full-width row justify-end q-py-xs">
      <q-btn size="sm" icon-right="add" color="positive" label="Zutat hinzufügen">
        <q-menu anchor="center middle" self="center middle">
          <div class="full-width row justify-around q-gutter-sm q-pa-sm">
            <div class="col">
              <q-select
                v-model="newIngredient"
                filled
                dense
                label="Zutat"
                :options="[...drinks, ...extra_ingredients]"
                option-label="name"
              />
            </div>
            <div class="col">
              <q-input
                v-if="newIngredient && newIngredient.volume"
                v-model.number="newIngredientVolume"
                filled
                dense
                label="Volume"
                type="number"
                step="0.01"
                min="0"
                suffix="L"
              />
              <q-input
                v-else-if="newIngredient && newIngredient.price"
                v-model="newIngredient.price"
                filled
                dense
                label="Preis"
                disable
                min="0"
                step="0.1"
                fill-mask="0"
                mask="#.##"
                suffix="€"
              />
            </div>
          </div>
          <div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
            <q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
            <q-btn
              v-close-popup
              label="Speichern"
              color="positive"
              @click="addIngredient(volume)"
            />
          </div>
        </q-menu>
      </q-btn>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue';
import { DrinkPriceVolume, usePricelistStore } from '../../store';

export default defineComponent({
  name: 'Ingredients',
  props: {
    ingredients: {
      type: Array as PropType<FG.Ingredient[]>,
      required: true,
    },
    volume: {
      type: Object /*as PropType<DrinkPriceVolume>*/,
      required: 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 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) {
        _ingredient = {
          id: -1,
          drink_ingredient: {
            id: -1,
            ingredient_id: newIngredient.value.id,
            volume: newIngredientVolume.value,
          },
          extra_ingredient: undefined,
        };
      } else {
        _ingredient = {
          id: -1,
          drink_ingredient: undefined,
          extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
        };
      }
      emit('addIngredient', _ingredient, volume);
      cancelAddIngredient();
    }
    function updateDrink() {
      console.log('updateDrink from Ingredients');
      emit('updateDrink');
    }
    function cancelAddIngredient() {
      setTimeout(() => {
        (newIngredient.value = undefined), (newIngredientVolume.value = 0);
      }, 200);
    }
    function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
      emit('deleteIngredient', ingredient, volume);
    }
    const drinks = computed(() =>
      store.drinks.filter((drink) => {
        console.log('computed drinks', drink.name, drink.cost_per_volume);
        return drink.cost_per_volume;
      })
    );
    const extra_ingredients = computed(() => store.extraIngredients);

    function get_drink_ingredient_name(id: number) {
      return store.drinks.find((a) => a.id === id)?.name;
    }

    return {
      addIngredient,
      drinks,
      extra_ingredients,
      newIngredient,
      newIngredientVolume,
      cancelAddIngredient,
      updateDrink,
      deleteIngredient,
      get_drink_ingredient_name,
    };
  },
});
</script>

<style scoped></style>