ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/pricelist/components/DrinkTypes.vue
View File

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

61
src/plugins/pricelist/components/ExtraIngredients.vue
View File

@ -28,9 +28,9 @@
<q-page padding> <q-page padding>
<q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns"> <q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns">
<template #top-right> <template #top-right>
<div class="full-width row q-gutter-sm">
<q-input <q-input
v-model="newExtraIngredient.name" v-model="newExtraIngredient.name"
class="q-px-sm"
dense dense
placeholder="Neue Zutatenbezeichnung" placeholder="Neue Zutatenbezeichnung"
label="Neue Zutatenbezeichnung" label="Neue Zutatenbezeichnung"
@ -38,7 +38,6 @@
/> />
<q-input <q-input
v-model.number="newExtraIngredient.price" v-model.number="newExtraIngredient.price"
class="q-px-sm"
dense dense
placeholder="Preis" placeholder="Preis"
label="Preis" label="Preis"
@ -48,13 +47,40 @@
step="0.1" step="0.1"
suffix="€" suffix="€"
/> />
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addExtraIngredient" /> <q-btn color="primary" icon="mdi-plus" round @click="addExtraIngredient">
<q-tooltip> Zutat hinzufügen </q-tooltip>
</q-btn>
</div>
</template> </template>
<template #body-cell-actions="props"> <template #body="props">
<q-td :props="props" align="right" :auto-width="true"> <q-tr :props="props">
<q-btn round flat icon="mdi-pencil" @click="editType(props.row)" /> <q-td key="name" :props="props" align="left">
<q-btn round flat icon="mdi-delete" @click="deleteType(props.row)" /> {{ 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>
<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> </template>
</q-table> </q-table>
</q-page> </q-page>
@ -75,8 +101,6 @@ export default defineComponent({
id: -1, id: -1,
}; };
const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient); const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
const edittype = ref(false);
const actualExtraIngredient = ref(emptyExtraIngredient);
const rows = computed(() => store.extraIngredients); const rows = computed(() => store.extraIngredients);
const columns = [ const columns = [
@ -93,6 +117,7 @@ export default defineComponent({
field: 'price', field: 'price',
sortable: true, sortable: true,
format: (val: number) => `${val.toFixed(2)}€`, format: (val: number) => `${val.toFixed(2)}€`,
align: 'right',
}, },
{ {
name: 'actions', name: 'actions',
@ -108,21 +133,18 @@ export default defineComponent({
discardChanges(); discardChanges();
} }
function editType(extraIngredient: FG.ExtraIngredient) { function saveChanges(ingredient: FG.ExtraIngredient) {
edittype.value = true; setTimeout(() => {
actualExtraIngredient.value = extraIngredient; const _ingredient = store.extraIngredients.find((a) => a.id === ingredient.id);
if (_ingredient) {
void store.updateExtraIngredient(_ingredient);
} }
}, 50);
async function saveChanges() {
await store.updateExtraIngredient(actualExtraIngredient.value);
setTimeout(() => discardChanges(), 200);
} }
function discardChanges() { function discardChanges() {
actualExtraIngredient.value = emptyExtraIngredient;
newExtraIngredient.value.name = ''; newExtraIngredient.value.name = '';
newExtraIngredient.value.price = 0; newExtraIngredient.value.price = 0;
edittype.value = false;
} }
function deleteType(extraIngredient: FG.ExtraIngredient) { function deleteType(extraIngredient: FG.ExtraIngredient) {
@ -135,9 +157,6 @@ export default defineComponent({
addExtraIngredient, addExtraIngredient,
newExtraIngredient, newExtraIngredient,
deleteType, deleteType,
edittype,
editType,
actualExtraIngredient,
discardChanges, discardChanges,
saveChanges, saveChanges,
}; };