<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>