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;
    interface EmptyDrink {
      name: string;
      volume: number | null;
      cost_price: number | null;
      discount: number | null;
      extra_charge: number | null;
      prices: EmptyPrice[];
      ingredients: [];
    }
    const emptyDrink: EmptyDrink = {
      name: '',
      volume: null,
      cost_price: null,
      discount: null,
      extra_charge: null,
      prices: [],
      ingredients: []
    };
    const drink = ref<EmptyDrink>(emptyDrink);
    interface EmptyPrice {
      volume: string;
      price: number | null;
      description: string;
      no_auto: boolean;
      round_step: number | null;
      public: boolean;
    }
    const emptyPrice: EmptyPrice = {
      volume: '',
      price: null,
      description: '',
      no_auto: false,
      round_step: null,
      public: true
    };

    function addPrice() {
      const test = { ...emptyPrice };
      drink.value.prices.unshift(test);
    }
    function save() {
      console.log(drink);

      drink.value.prices.forEach((price: EmptyPrice) => {
        price.no_auto = !price.no_auto;
      });
      void store.dispatch('drink/createDrink', drink.value);
    }
    return { drink, addPrice, save };
  }
});
</script>

<style scoped></style>