[pricelist] clean styele extraIngredients

This commit is contained in:
Tim Gröger 2021-04-17 13:58:27 +02:00
parent ae5212bbfc
commit 6e74105f38
2 changed files with 66 additions and 47 deletions

View File

@ -7,12 +7,12 @@
style="height: 100%"
>
<template #top-right>
<q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
<div></div>
<q-btn round color="primary" icon="mdi-plus" @click="addType">
<q-tooltip> Getränkeart hinzufügen </q-tooltip>
</q-btn>
<div class="full-width row q-gutter-sm">
<q-input v-model="newDrinkType" dense placeholder="Neue Getränkeart" filled />
<q-btn round color="primary" icon="mdi-plus" @click="addType">
<q-tooltip> Getränkeart hinzufügen </q-tooltip>
</q-btn>
</div>
</template>
<template #body="props">
<q-tr :props="props">

View File

@ -28,33 +28,59 @@
<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" />
<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-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 #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>
@ -75,8 +101,6 @@ export default defineComponent({
id: -1,
};
const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
const edittype = ref(false);
const actualExtraIngredient = ref(emptyExtraIngredient);
const rows = computed(() => store.extraIngredients);
const columns = [
@ -93,6 +117,7 @@ export default defineComponent({
field: 'price',
sortable: true,
format: (val: number) => `${val.toFixed(2)}`,
align: 'right',
},
{
name: 'actions',
@ -108,21 +133,18 @@ export default defineComponent({
discardChanges();
}
function editType(extraIngredient: FG.ExtraIngredient) {
edittype.value = true;
actualExtraIngredient.value = extraIngredient;
}
async function saveChanges() {
await store.updateExtraIngredient(actualExtraIngredient.value);
setTimeout(() => discardChanges(), 200);
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() {
actualExtraIngredient.value = emptyExtraIngredient;
newExtraIngredient.value.name = '';
newExtraIngredient.value.price = 0;
edittype.value = false;
}
function deleteType(extraIngredient: FG.ExtraIngredient) {
@ -135,9 +157,6 @@ export default defineComponent({
addExtraIngredient,
newExtraIngredient,
deleteType,
edittype,
editType,
actualExtraIngredient,
discardChanges,
saveChanges,
};