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 class="col" v-if="ingredient.drink_ingredient">
          <div class="full-width row justify-evenly q-py-xs">
            <div class="col">
              {{ get_drink_ingredient_name(ingredient.drink_ingredient.drink_ingredient_id) }}
              <q-popup-edit
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                v-model="ingredient.drink_ingredient.drink_ingredient_id"
                @save="updateIngredient(ingredient, volume)"
              >
                <q-select
                  class="col q-px-sm"
                  label="Getränk"
                  filled
                  dense
                  :options="drinks"
                  option-label="name"
                  option-value="id"
                  v-model="ingredient.drink_ingredient.drink_ingredient_id"
                  emit-value
                  map-options
                />
              </q-popup-edit>
            </div>
            <div class="col">
              {{ ingredient.drink_ingredient.volume.toFixed(3) }}L
              <q-popup-edit
                buttons
                label-cancel="Abbrechen"
                label-set="Speichern"
                v-model="ingredient.drink_ingredient.volume"
                @save="updateIngredient(ingredient, volume)"
              >
                <q-input
                  class="col q-px-sm"
                  label="Volume"
                  type="number"
                  filled
                  dense
                  suffix="L"
                  v-model.number="ingredient.drink_ingredient.volume"
                  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="updateIngredient(ingredient, volume)"
          >
            <q-select
              filled
              dense
              v-model="ingredient.extra_ingredient"
              :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
                filled
                dense
                label="Zutat"
                :options="[...drinks, ...extra_ingredients]"
                option-label="name"
                v-model="newIngredient"
              />
            </div>
            <div class="col">
              <q-input
                filled
                dense
                label="Volume"
                type="number"
                steps="0.01"
                min="0"
                suffix="L"
                v-model.number="newIngredientVolume"
                v-if="newIngredient && newIngredient.volume"
              />
              <q-input
                v-else-if="newIngredient && newIngredient.price"
                filled
                dense
                label="Preis"
                disable
                min="0"
                steps="0.1"
                :value="newIngredient.price.toFixed(3)"
                suffix="€"
              />
            </div>
          </div>
          <div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
            <q-btn label="Abbrechen" @click="cancelAddIngredient" v-close-popup />
            <q-btn
              label="Speichern"
              color="positive"
              @click="addIngredient(volume)"
              v-close-popup
            />
          </div>
        </q-menu>
      </q-btn>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import store, { DrinkPriceVolume } from '../../store/altStore';
export default defineComponent({
  name: 'Ingredients',
  props: {
    ingredients: {
      type: Array as () => Array<FG.Ingredient>,
      required: true,
    },
    volume: {
      type: Object as () => DrinkPriceVolume,
      required: true,
    },
  },
  setup() {
    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) {
      if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
        store.actions.setIngredient(
          {
            id: -1,
            drink_ingredient: {
              id: -1,
              drink_ingredient_id: newIngredient.value.id,
              volume: newIngredientVolume.value,
            },
            extra_ingredient: undefined,
          },
          volume
        );
      } else if (newIngredient) {
        store.actions.setIngredient(
          {
            id: -1,
            drink_ingredient: undefined,
            extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
          },
          volume
        );
      }
      cancelAddIngredient();
    }
    function cancelAddIngredient() {
      setTimeout(() => {
        (newIngredient.value = undefined), (newIngredientVolume.value = 0);
      }, 200);
    }
    function updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
      store.actions.updateIngredient(ingredient, volume);
    }
    function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
      store.actions.deleteIngredient(ingredient, volume);
    }
    const drinks = computed(() =>
      store.state.drinks.filter((drink) => {
        return drink.cost_price_pro_volume.value;
      })
    );
    const extra_ingredients = computed(() => store.state.extraIngredients);

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

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

<style scoped></style>