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

<template>
  <div>
    <q-dialog v-model="edittype">
      <q-card>
        <q-card-section>
          <div class="text-h6">Editere Extrazutaten {{ actualExtraIngredient.name }}</div>
        </q-card-section>
        <q-card-section>
          <q-input dense label="Name" filled v-model="actualExtraIngredient.name" />
          <q-input
            dense
            label="Preis"
            filled
            v-model.number="actualExtraIngredient.price"
            type="number"
            min="0"
            step="0.1"
            suffix="€"
          />
        </q-card-section>
        <q-card-actions>
          <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
          <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-page padding>
      <q-table title="Getränkearten" :data="rows" :row-key="(row) => row.id" :columns="columns">
        <template v-slot:top-right>
          <q-input
            class="q-px-sm"
            dense
            v-model="newExtraIngredient.name"
            placeholder="Neue Zutatenbezeichnung"
            label="Neue Zutatenbezeichnung"
            filled
          />
          <q-input
            class="q-px-sm"
            dense
            v-model.number="newExtraIngredient.price"
            placeholder="Preis"
            label="Preis"
            filled
            type="number"
            min="0"
            step="0.1"
            suffix="€"
          />
          <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addExtraIngredient" />
        </template>
        <template v-slot:body-cell-actions="props">
          <q-td :props="props" align="right" :auto-width="true">
            <q-btn round flat icon="mdi-pencil" @click="editType(props.row)" />
            <q-btn round flat icon="mdi-delete" @click="deleteType(props.row)" />
          </q-td>
        </template>
      </q-table>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from '@vue/composition-api';
import store from '../store/altStore';

export default defineComponent({
  name: 'DrinkTypes',
  setup(_, { root }) {
    const emptyExtraIngredient: FG.ExtraIngredient = {
      name: '',
      price: 0,
      id: -1,
    };
    const newExtraIngredient = ref(emptyExtraIngredient);
    const newDrinkTypeName = ref('');
    const edittype = ref(false);
    const actualExtraIngredient = ref(emptyExtraIngredient);

    const rows = computed(() => store.state.extraIngredients);
    const columns = [
      {
        name: 'name',
        label: 'Bezeichnung',
        field: 'name',
        align: 'left',
        sortable: true,
      },
      {
        name: 'price',
        label: 'Preis',
        field: 'price',
        sortable: true,
        format: (val: number) => `${val.toFixed(2)}€`,
      },
      {
        name: 'actions',
        label: 'Aktionen',
        field: 'actions',
        align: 'right',
      },
    ];

    function addExtraIngredient() {
      store.actions.setExtraIngredient(newExtraIngredient.value);
      newExtraIngredient.value = emptyExtraIngredient;
    }

    function editType(extraIngredient: FG.ExtraIngredient) {
      edittype.value = true;
      actualExtraIngredient.value = extraIngredient;
    }

    function saveChanges() {
      store.actions.updateExtraIngredient(actualExtraIngredient.value);
      setTimeout(() => discardChanges(), 200);
    }

    function discardChanges() {
      actualExtraIngredient.value = emptyExtraIngredient;
      newExtraIngredient.value = emptyExtraIngredient;
      edittype.value = false;
    }

    function deleteType(extraIngredient: FG.ExtraIngredient) {
      store.actions.deleteExtraIngredient(extraIngredient);
    }

    return {
      columns,
      rows,
      addExtraIngredient,
      newExtraIngredient,
      deleteType,
      edittype,
      editType,
      actualExtraIngredient,
      discardChanges,
      saveChanges,
    };
  },
});
</script>

<style scoped></style>