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>
          <div class="full-width row q-gutter-sm">
            <q-input
              v-model="newExtraIngredient.name"
              dense
              placeholder="Neue Zutatenbezeichnung"
              label="Neue Zutatenbezeichnung"
              filled
            />
            <q-input
              v-model.number="newExtraIngredient.price"
              dense
              placeholder="Preis"
              label="Preis"
              filled
              type="number"
              min="0"
              step="0.1"
              suffix="€"
            />
            <q-btn color="primary" icon="mdi-plus" round @click="addExtraIngredient">
              <q-tooltip> Zutat hinzufügen </q-tooltip>
            </q-btn>
          </div>
        </template>
        <template #body="props">
          <q-tr :props="props">
            <q-td key="name" :props="props" align="left">
              {{ props.row.name }}
              <q-popup-edit
                v-model="props.row.name"
                buttons
                label-set="Speichern"
                label-cancel="Abbrechen"
                @save="saveChanges(props.row)"
              >
                <template #default="scope">
                  <q-input v-model="scope.value" dense label="name" filled />
                </template>
              </q-popup-edit>
            </q-td>
            <q-td key="price" :props="props" align="right">
              {{ props.row.price.toFixed(2) }}€
            </q-td>
            <q-td key="actions" :props="props" align="right" auto-width>
              <q-btn
                round
                icon="mdi-delete"
                color="negative"
                size="sm"
                @click="deleteType(props.row)"
              />
            </q-td>
          </q-tr>
        </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 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)}€`,
        align: 'right',
      },
      {
        name: 'actions',
        label: 'Aktionen',
        field: 'actions',
        align: 'right',
      },
    ];

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

    function saveChanges(ingredient: FG.ExtraIngredient) {
      setTimeout(() => {
        const _ingredient = store.extraIngredients.find((a) => a.id === ingredient.id);
        if (_ingredient) {
          void store.updateExtraIngredient(_ingredient);
        }
      }, 50);
    }

    function discardChanges() {
      newExtraIngredient.value.name = '';
      newExtraIngredient.value.price = 0;
    }

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

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

<style scoped></style>