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-img :src="image" style="max-height: 256px" fit="contain" />
      <div class="full-width row">
        <div class="col-10 q-pa-sm">
          <q-file
            v-model="drinkPic"
            filled
            clearable
            dense
            @update:model-value="imagePreview"
            @clear="imgsrc = undefined"
          >
            <template #prepend>
              <q-icon name="mdi-image" />
            </template>
          </q-file>
        </div>
        <div class="col-2 q-pa-sm text-right">
          <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
            <q-tooltip> Bild entfernen </q-tooltip>
          </q-btn>
        </div>
      </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';
import config from 'src/config';
export default defineComponent({
  name: 'DrinkModify',
  components: { BuildManual, DrinkPriceVolumes },
  props: {
    drink: {
      type: Object as PropType<Drink>,
      required: true,
    },
  },
  emits: {
    save: (
      drink: Drink,
      toDeleteObjects: DeleteObjects,
      drinkPic: File | undefined,
      deletePic: boolean
    ) => drink && toDeleteObjects || drinkPic || deletePic,
    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, drinkPic.value, deletePic.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);
    }

    function deleteVolume(volume: DrinkPriceVolume) {
      toDeleteObjects.value.volumes.push(volume);
    }

    function deleteIngredient(ingredient: FG.Ingredient) {
      toDeleteObjects.value.ingredients.push(ingredient);
    }

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

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

    const drinkPic = ref();
    const imgsrc = ref();

    const deletePic = ref(false);

    function delete_pic() {
      deletePic.value = true;
      imgsrc.value = undefined;
      drinkPic.value = undefined;
      if (edit_drink.value) {
        edit_drink.value.uuid = '';
      }
    }

    function imagePreview() {
      if (drinkPic.value && drinkPic.value instanceof File) {
        let reader = new FileReader();

        reader.onload = (e) => {
          imgsrc.value = e.target?.result;
        };

        reader.readAsDataURL(drinkPic.value);
      }
    }

    const image = computed(() => {
      if (deletePic.value) {
        return 'no-image.svg';
      }
      if (imgsrc.value) {
        return <string>imgsrc.value;
      }
      if (edit_drink.value?.uuid) {
        return `${config.baseURL}/pricelist/picture/${edit_drink.value.uuid}?size=256`;
      }
      return 'no-image.svg';
    });

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