flaschengeist-frontend/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue

<template>
  <q-btn
    v-if="pricePerVolume"
    color="positive"
    icon-right="add"
    label="Abgabe hinzufügen"
    size="xs"
  >
    <q-menu anchor="center middle" self="center middle">
      <div class="row justify-around q-pa-sm">
        <q-input
          v-model.number="newVolume.volume"
          filled
          dense
          label="Liter"
          type="number"
          min="0"
          step="0.01"
        />
      </div>
      <div class="row justify-between q-pa-sm">
        <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
        <q-btn v-close-popup label="Speichern" color="primary" @click="addVolume(rows)" />
      </div>
    </q-menu>
  </q-btn>
</template>

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

export default defineComponent({
  name: 'NewVolume',
  props: {
    pricePerVolume: {
      type: Number,
      required: true,
    },
  },
  emits: { addVolume: (val: DrinkPriceVolume) => !!val },
  setup(_, { emit }) {
    const emptyVolume: DrinkPriceVolume = {
      id: -1,
      _volume: 0,
      min_prices: [{ percentage: 100 }, { percentage: 250 }, { percentage: 300 }],
      prices: [],
      ingredients: [],
    };
    const newVolume = ref<DrinkPriceVolume>(emptyVolume);

    function cancelAddVolume() {
      setTimeout(() => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        newVolume.value = emptyVolume;
      }, 200);
    }
    function addVolume() {
      emit('addVolume', <DrinkPriceVolume>newVolume.value);
    }

    return {
      addVolume,
      cancelAddVolume,
      newVolume,
    };
  },
});
</script>

<style scoped></style>