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

<template>
  <div>
    <q-card>
      <q-card-section>
        <div class="text-h4">Neues Getränk</div>
      </q-card-section>
      <q-form @submit="save">
        <q-card-section>
          <div class="text-h5">Getränkinformationen</div>
          <div class="row">
            <q-input class="col-12 col-sm-6 q-px-sm q-py-md" v-model="drink.name" filled label="Name" />
            <q-input
              class="col-12 col-sm-6 q-px-sm q-py-md"
              v-model="drink.volume"
              filled
              label="Inhalt in Liter"
              type="number"
              step="0.01"
            />
            <q-input
              class="col-12 col-sm-6 q-px-sm q-py-md"
              v-model="drink.cost_price"
              filled
              label="Einkaufspreis"
              type="number"
              step="0.01"
            />
            <q-input
              class="col-12 col-sm-6 q-px-sm q-py-md"
              v-model="drink.discount"
              filled
              label="Aufschlag in Prozent"
              type="number"
              hint="Wenn nicht gesetzt wird default-wert genommen."
              step="0.01"
            />
            <q-input 
              class="col-12 col-sm-6 q-px-sm q-py-md"
              v-model="drink.extra_charge"
              filled
              label="Extra Aufschlag in Euro"
              type="number"
              step="0.1"
            />

            <q-input class="col-12 col-sm-6 q-px-sm q-py-md" filled label="Tags" />
          </div>
        </q-card-section>
        <q-card-section>
            <div class="row justify-between">
          <div class="text-h5">
            Preise
          </div>
          <q-btn round icon="mdi-plus" @click="addPrice" color="primary" />
          </div>
          <q-card class="q-ma-sm" v-for="(price,index) in drink.prices" :key="index">
            <div class="row">
            <q-input class="col-12 col-sm-6 q-px-sm q-py-md" v-model="price.volume" label="Inhalt in Liter" filled type="number" step="0.01" />
            <q-input class="col-12 col-sm-6 q-px-sm q-py-md" v-model="price.price" label="Preis in €" filled :disable="price.no_auto" type="number" step="0.1"/>
            <q-toggle class="col-12 col-sm-6 q-px-sm q-py-md"  v-model="price.no_auto" label="Automatische Preiskalkulation" color="primary" />
            <q-input class="col-12 col-sm-6 q-px-sm q-py-md"  v-model="price.round_step" label="Rundungsschritt" type="number" filled step="0.1"/>
            <q-toggle class="col-12 col-sm-6 q-px-sm q-py-md" v-model="price.public" label="Öffentlich" color="primary" />
            <q-input class="col-12 col-sm-6 q-px-sm q-py-md" v-model="price.description" label="Beschreibung" filled />
            </div>
          </q-card>
        </q-card-section>
        <q-card-section>
            <div class="row justify-between">
          <div class="text-h5">
            Zutaten
          </div>
          <q-btn round icon="mdi-plus" color="primary" />
          </div>
        </q-card-section>
        <q-card-actions align="right">
            <q-btn type="submit" label="Speichern" color="primary" />
        </q-card-actions>
      </q-form>
    </q-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api';
import { StateInterface } from 'src/store';
import { Store } from 'vuex';

export default defineComponent({
  name: 'Drink',
  setup(_, {root}) {
    const store = <Store<StateInterface>>root.$store;
  const drink = ref({
    name: '',
    volume: '',
    cost_price: '',
    discount: '',
    extra_charge: '',
    prices: [],
    ingredients: []
          })
  const emptyPrice = {
   volume: '',
   price: '',
   description: '',
   no_auto: false,
   round_step: '',
   public: true
  }

  function addPrice() {
    drink.value.prices.unshift({...emptyPrice})
  }
  function save() {
    console.log(drink)
        drink.value.prices.forEach((price: FG.DrinkPrice) => {
        price.no_auto = !price.no_auto
                })
    void store.dispatch('drink/createDrink', drink.value)
  }
    return {drink, addPrice, save};
  }
});
</script>

<style scoped></style>