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

<template>
  <div class="full-width">
    <div
      v-for="ingredient in edit_ingredients"
      :key="`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-if="editable"
                v-slot="scope"
                v-model="ingredient.drink_ingredient.ingredient_id"
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                @save="updateValue"
              >
                <q-select
                  v-model="scope.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-if="editable"
                v-slot="scope"
                v-model="ingredient.drink_ingredient.volume"
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                @save="updateValue"
              >
                <q-input
                  v-model.number="scope.value"
                  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-if="editable"
            v-model="ingredient.extra_ingredient"
            buttons
            label-cancel="Abbrechen"
            label-set="Speichern"
            @save="updateValue"
          >
            <q-select
              v-model="ingredient.extra_ingredient"
              filled
              dense
              :options="extra_ingredients"
              option-label="name"
            />
          </q-popup-edit>
        </div>
        <div v-if="editable" class="col-1 row justify-end q-pa-xs">
          <q-btn
            icon="mdi-delete"
            round
            size="xs"
            color="negative"
            @click="deleteIngredient(ingredient)"
          />
        </div>
      </div>
      <q-separator />
    </div>
    <div v-if="editable" class="full-width row justify-end q-py-xs">
      <q-btn size="sm" icon-right="mdi-plus" 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" />
          </div>
        </q-menu>
      </q-btn>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'Ingredients',
  props: {
    modelValue: {
      type: Object as PropType<Array<FG.Ingredient>>,
      required: true,
    },
    editable: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    'update:modelValue': (val: Array<FG.Ingredient>) => val,
  },
  setup(props, { emit }) {
    onBeforeMount(() => {
      edit_ingredients.value = [];
      props.modelValue.forEach((a) => {
        edit_ingredients.value.push(Object.assign({}, a));
      });
      console.log(edit_ingredients);
    });

    const store = usePricelistStore();

    const edit_ingredients = ref<Array<FG.Ingredient>>([]);
    const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
    const newIngredientVolume = ref<number>(0);
    function addIngredient() {
      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,
        };
      }
      edit_ingredients.value.push(_ingredient);
      emit('update:modelValue', edit_ingredients.value);
      cancelAddIngredient();
    }

    function updateValue(value: number, initValue: number) {
      console.log('updateValue', value, initValue);
      emit('update:modelValue', edit_ingredients.value);
    }

    function cancelAddIngredient() {
      setTimeout(() => {
        (newIngredient.value = undefined), (newIngredientVolume.value = 0);
      }, 200);
    }
    function deleteIngredient(ingredient: FG.Ingredient) {
      const index = edit_ingredients.value.findIndex((a) => a.id === ingredient.id);
      if (index > -1) {
        edit_ingredients.value.splice(index, 1);
      }
      emit('update:modelValue', edit_ingredients.value);
    }
    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,
      updateValue,
      deleteIngredient,
      get_drink_ingredient_name,
      edit_ingredients,
    };
  },
});
</script>

<style scoped></style>