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 v-model="actualExtraIngredient.name" dense label="Name" filled />
          <q-input
            v-model.number="actualExtraIngredient.price"
            dense
            label="Preis"
            filled
            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" :rows="rows" :row-key="(row) => row.id" :columns="columns">
        <template #top-right>
          <q-input
            v-model="newExtraIngredient.name"
            class="q-px-sm"
            dense
            placeholder="Neue Zutatenbezeichnung"
            label="Neue Zutatenbezeichnung"
            filled
          />
          <q-input
            v-model.number="newExtraIngredient.price"
            class="q-px-sm"
            dense
            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 #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, ComputedRef, defineComponent, ref} from 'vue';
import {usePricelistStore} from 'src/plugins/pricelist/store';

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

    const rows = computed(() => store.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',
      },
    ];

    async function addExtraIngredient() {
      await store.setExtraIngredient((<ComputedRef>newExtraIngredient).value);
      newExtraIngredient.value = emptyExtraIngredient;
    }

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

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

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

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

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

<style scoped></style>