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
              v-model="drink.name"
              class="col-12 col-sm-6 q-px-sm q-py-md"
              filled
              label="Name"
            />
            <q-input
              v-model="drink.volume"
              class="col-12 col-sm-6 q-px-sm q-py-md"
              filled
              label="Inhalt in Liter"
              type="number"
              step="0.01"
            />
            <q-input
              v-model="drink.cost_price"
              class="col-12 col-sm-6 q-px-sm q-py-md"
              filled
              label="Einkaufspreis"
              type="number"
              step="0.01"
            />
            <q-input
              v-model="drink.discount"
              class="col-12 col-sm-6 q-px-sm q-py-md"
              filled
              label="Aufschlag in Prozent"
              type="number"
              hint="Wenn nicht gesetzt wird default-wert genommen."
              step="0.01"
            />
            <q-input
              v-model="drink.extra_charge"
              class="col-12 col-sm-6 q-px-sm q-py-md"
              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" color="primary" @click="addPrice" />
          </div>
          <q-card v-for="(price, index) in drink.prices" :key="index" class="q-ma-sm">
            <div class="row">
              <q-input
                v-model="price.volume"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                label="Inhalt in Liter"
                filled
                type="number"
                step="0.01"
              />
              <q-input
                v-model="price.price"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                label="Preis in €"
                filled
                :disable="price.no_auto"
                type="number"
                step="0.1"
              />
              <q-toggle
                v-model="price.no_auto"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                label="Automatische Preiskalkulation"
                color="primary"
              />
              <q-input
                v-model="price.round_step"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                label="Rundungsschritt"
                type="number"
                filled
                step="0.1"
              />
              <q-toggle
                v-model="price.public"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                label="Öffentlich"
                color="primary"
              />
              <q-input
                v-model="price.description"
                class="col-12 col-sm-6 q-px-sm q-py-md"
                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 } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'Drink',
  setup() {
    const store = useStore();
    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>