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

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

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

@ -28,33 +28,59 @@
<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>
<q-input <div class="full-width row q-gutter-sm">
v-model="newExtraIngredient.name" <q-input
class="q-px-sm" v-model="newExtraIngredient.name"
dense dense
placeholder="Neue Zutatenbezeichnung" placeholder="Neue Zutatenbezeichnung"
label="Neue Zutatenbezeichnung" label="Neue Zutatenbezeichnung"
filled filled
/> />
<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" filled
filled type="number"
type="number" min="0"
min="0" step="0.1"
step="0.1" suffix="€"
suffix="€" />
/> <q-btn color="primary" icon="mdi-plus" round @click="addExtraIngredient">
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @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-td> <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> </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);
async function saveChanges() { }
await store.updateExtraIngredient(actualExtraIngredient.value); }, 50);
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,
}; };