flaschengeist-frontend/src/plugins/pricelist/components/DrinkModify.vue

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Getränk Bearbeiten</div>
    </q-card-section>
    <q-card-section>
      <q-select
        v-model="edit_drink.tags"
        multiple
        :options="tags"
        label="Tags"
        option-label="name"
        filled
        dense
      >
        <template #selected-item="item">
          <q-chip
            removable
            :tabindex="item.tabindex"
            :style="`background-color: ${item.opt.color}`"
            @remove="item.removeAtIndex(item.index)"
          >
            {{ item.opt.name }}
          </q-chip>
        </template>
        <template #option="item">
          <q-item v-bind="item.itemProps" v-on="item.itemEvents">
            <q-chip :style="`background-color: ${item.opt.color}`">
              <q-avatar v-if="item.selected" icon="mdi-check" color="positive" text-color="white" />
              {{ item.opt.name }}
            </q-chip>
          </q-item>
        </template>
      </q-select>
    </q-card-section>
    <q-card-section>
      <div class="fit row">
        <q-input
          v-model="edit_drink.article_id"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Artikelnummer"
          dense
        />
        <q-input
          v-model="edit_drink.volume"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Inhalt"
          dense
          suffix="L"
        />
        <q-input
          v-model="edit_drink.package_size"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Gebindegröße"
          dense
        />
        <q-input
          v-model="edit_drink.cost_per_package"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Preis Gebinde"
          suffix="€"
          dense
        />
        <q-input
          v-model="edit_drink.cost_per_volume"
          class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
          filled
          label="Preis pro L"
          hint="Inkl. 19% Mehrwertsteuer"
          suffix="€"
          dense
        />
      </div>
    </q-card-section>
    <q-card-section>
      <drink-price-volumes
        v-model="edit_drink.volumes"
        editable
        @update="updateVolume"
        @delete-volume="deleteVolume"
        @delete-price="deletePrice"
        @delete-ingredient="deleteIngredient"
      />
    </q-card-section>
    <q-card-section>
      <build-manual :steps="edit_drink.receipt" @deleteStep="deleteStep" @addStep="addStep" />
    </q-card-section>
    <q-card-actions class="justify-around">
      <q-btn label="Abbrechen" @click="cancel" />
      <q-btn label="Speichern" color="primary" @click="save" />
    </q-card-actions>
  </q-card>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
import { Drink, DrinkPriceVolume, usePricelistStore } from '../store';
import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
import { clone, calc_min_prices, DeleteObjects } from '../utils/utils';
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
export default defineComponent({
  name: 'DrinkModify',
  components: { BuildManual, DrinkPriceVolumes },
  props: {
    drink: {
      type: Object as PropType<Drink>,
      required: true,
    },
  },
  emits: {
    save: (drink: Drink, toDeleteObjects: DeleteObjects) => drink && toDeleteObjects,
    cancel: () => true,
  },
  setup(props, { emit }) {
    onBeforeMount(() => {
      //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
      edit_drink.value = clone(props.drink);
    });

    const store = usePricelistStore();

    const toDeleteObjects = ref<DeleteObjects>({
      prices: [],
      volumes: [],
      ingredients: [],
    });

    const edit_drink = ref<Drink>();
    function save() {
      emit('save', <Drink>edit_drink.value, toDeleteObjects.value);
    }
    function cancel() {
      emit('cancel');
    }
    function updateVolume(index: number) {
      if (index > -1 && edit_drink.value) {
        edit_drink.value.volumes[index].min_prices = calc_min_prices(
          edit_drink.value.volumes[index],
          edit_drink.value.cost_per_volume,
          store.min_prices
        );
      }
    }

    function deletePrice(price: FG.DrinkPrice) {
      toDeleteObjects.value.prices.push(price);
      console.log('toDelete', toDeleteObjects.value);
    }

    function deleteVolume(volume: DrinkPriceVolume) {
      toDeleteObjects.value.volumes.push(volume);
      console.log('toDelete', toDeleteObjects.value);
    }

    function deleteIngredient(ingredient: FG.Ingredient) {
      toDeleteObjects.value.ingredients.push(ingredient);
      console.log('toDelete', toDeleteObjects.value);
    }

    function addStep(event: string) {
      edit_drink.value?.receipt?.push(event);
    }

    function deleteStep(event: number) {
      edit_drink.value?.receipt?.splice(event, 1);
    }

    return {
      edit_drink,
      save,
      cancel,
      updateVolume,
      deletePrice,
      deleteIngredient,
      deleteVolume,
      addStep,
      deleteStep,
      tags: computed(() => store.tags),
    };
  },
});
</script>