[pricelist] clean style drinkType

This commit is contained in:
Tim Gröger 2021-04-17 13:40:03 +02:00
parent 2a11964c4b
commit ae5212bbfc
2 changed files with 39 additions and 60 deletions

View File

@ -33,10 +33,7 @@
<template #item="props"> <template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4"> <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
<q-card> <q-card>
<q-img <q-img style="max-height: 256px" :src="image(props.row.uuid)">
style="max-height: 256px"
:src="image(props.row.uuid)"
>
<div <div
v-if="!public && !nodetails && editable" v-if="!public && !nodetails && editable"
class="absolute-top-right justify-end" class="absolute-top-right justify-end"
@ -477,7 +474,7 @@ export default defineComponent({
function image(uuid: string | undefined) { function image(uuid: string | undefined) {
if (uuid) { if (uuid) {
console.log(baseURL.value) console.log(baseURL.value);
return `${baseURL.value}/pricelist/picture/${uuid}?size=256`; return `${baseURL.value}/pricelist/picture/${uuid}?size=256`;
} }
return 'no-image.svg'; return 'no-image.svg';
@ -509,7 +506,7 @@ export default defineComponent({
newDrink, newDrink,
hasPermission, hasPermission,
PERMISSIONS, PERMISSIONS,
image image,
}; };
}, },
}); });

View File

@ -1,19 +1,4 @@
<template> <template>
<q-dialog v-model="edittype">
<q-card>
<q-card-section>
<div class="text-h6">Editere Getränkeart {{ actualDrinkType.name }}</div>
</q-card-section>
<q-card-section>
<q-input v-model="newDrinkTypeName" dense label="name" filled />
</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-table <q-table
title="Getränkearten" title="Getränkearten"
:rows="rows" :rows="rows"
@ -25,18 +10,36 @@
<q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled /> <q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
<div></div> <div></div>
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" /> <q-btn round color="primary" icon="mdi-plus" @click="addType">
<q-tooltip> Getränkeart hinzufügen </q-tooltip>
</q-btn>
</template> </template>
<template #body-cell-actions="props"> <template #body="props">
<q-td :props="props" align="right" :auto-width="true"> <q-tr :props="props">
<q-td key="drinkTypeName" :props="props">
{{ 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="actions" :props="props">
<q-btn <q-btn
round round
flat icon="mdi-delete"
icon="mdi-pencil" color="negative"
@click="editType({ id: props.row.id, name: props.row.name })" size="sm"
@click="deleteType(props.row.id)"
/> />
<q-btn round flat icon="mdi-delete" @click="deleteType(props.row.id)" />
</q-td> </q-td>
</q-tr>
</template> </template>
</q-table> </q-table>
</template> </template>
@ -50,10 +53,6 @@ export default defineComponent({
setup() { setup() {
const store = usePricelistStore(); const store = usePricelistStore();
const newDrinkType = ref(''); const newDrinkType = ref('');
const newDrinkTypeName = ref('');
const edittype = ref(false);
const emptyDrinkType: FG.DrinkType = { id: -1, name: '' };
const actualDrinkType = ref(emptyDrinkType);
onBeforeMount(() => { onBeforeMount(() => {
void store.getDrinkTypes(true); void store.getDrinkTypes(true);
@ -80,25 +79,13 @@ export default defineComponent({
newDrinkType.value = ''; newDrinkType.value = '';
} }
function editType(drinkType: FG.DrinkType) { function saveChanges(drinkType: FG.DrinkType) {
edittype.value = true; setTimeout(() => {
actualDrinkType.value = drinkType; const _drinkType = store.drinkTypes.find((a) => a.id === drinkType.id);
if (_drinkType) {
void store.changeDrinkTypeName(drinkType);
} }
}, 50);
async function saveChanges() {
try {
await store.changeDrinkTypeName({
id: actualDrinkType.value.id,
name: newDrinkTypeName.value,
});
} catch (e) {}
discardChanges();
}
function discardChanges() {
actualDrinkType.value = emptyDrinkType;
newDrinkTypeName.value = '';
edittype.value = false;
} }
function deleteType(id: number) { function deleteType(id: number) {
@ -111,11 +98,6 @@ export default defineComponent({
addType, addType,
newDrinkType, newDrinkType,
deleteType, deleteType,
edittype,
editType,
actualDrinkType,
newDrinkTypeName,
discardChanges,
saveChanges, saveChanges,
}; };
}, },