[pricelist] some more style

This commit is contained in:
Tim Gröger 2021-04-17 14:44:25 +02:00
parent e2b46d96b9
commit be347225c4
9 changed files with 78 additions and 64 deletions

View File

@ -6,13 +6,17 @@
animated animated
swipeable swipeable
control-color="primary" control-color="primary"
navigation
arrows arrows
> >
<q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id"> <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
<build-manual-volume-part :volume="volume" /> <build-manual-volume-part :volume="volume" />
</q-carousel-slide> </q-carousel-slide>
</q-carousel> </q-carousel>
<div class="full-width row justify-center q-pa-sm">
<div class="q-px-sm">
<q-btn-toggle v-model="volume" :options="btn_options" rounded />
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue'; import { defineComponent, PropType, ref, computed } from 'vue';
@ -45,7 +49,14 @@ export default defineComponent({
}); });
return ret; return ret;
}); });
return { volume, options }; const btn_options = computed<Array<{ label: string; value: number }>>(() => {
const retVal: Array<{ label: string; value: number }> = [];
props.volumes.forEach((volume: DrinkPriceVolume) => {
retVal.push({ label: `${(<number>volume.volume).toFixed(3)}L`, value: volume.id });
});
return retVal;
});
return { volume, options, btn_options };
}, },
}); });
</script> </script>

View File

@ -438,7 +438,6 @@ export default defineComponent({
for (const volume of toDeleteObjects.volumes) { for (const volume of toDeleteObjects.volumes) {
await store.deleteVolume(volume, drink); await store.deleteVolume(volume, drink);
} }
console.log(drink);
if (drink.id > 0) { if (drink.id > 0) {
await store.updateDrink(drink); await store.updateDrink(drink);
} else { } else {
@ -474,7 +473,6 @@ export default defineComponent({
function image(uuid: string | undefined) { function image(uuid: string | undefined) {
if (uuid) { if (uuid) {
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';
@ -493,7 +491,6 @@ export default defineComponent({
drinkPic, drinkPic,
savePicture, savePicture,
deletePicture, deletePicture,
console,
search, search,
filter, filter,
search_keys, search_keys,

View File

@ -126,7 +126,7 @@
</q-carousel> </q-carousel>
<div class="full-width row justify-center q-pa-sm"> <div class="full-width row justify-center q-pa-sm">
<div class="q-px-sm"> <div class="q-px-sm">
<q-btn-toggle v-model="volume" :options="options" /> <q-btn-toggle v-model="volume" :options="options" rounded />
</div> </div>
<div v-if="editable" class="q-px-sm"> <div v-if="editable" class="q-px-sm">
<q-btn class="q-px-sm" round icon="mdi-plus" color="primary" size="sm" @click="newVolume"> <q-btn class="q-px-sm" round icon="mdi-plus" color="primary" size="sm" @click="newVolume">

View File

@ -100,7 +100,7 @@
<div v-if="editable" class="full-width row justify-end q-py-xs"> <div v-if="editable" class="full-width row justify-end q-py-xs">
<q-btn size="sm" round icon="mdi-plus" color="primary"> <q-btn size="sm" round icon="mdi-plus" color="primary">
<q-tooltip> Neue Zutat hinzufügen </q-tooltip> <q-tooltip> Neue Zutat hinzufügen </q-tooltip>
<q-menu anchor="center middle" self="center middle"> <q-menu anchor="center middle" self="center middle" persistent>
<div class="full-width row justify-around q-gutter-sm q-pa-sm"> <div class="full-width row justify-around q-gutter-sm q-pa-sm">
<div class="col"> <div class="col">
<q-select <q-select
@ -113,6 +113,7 @@
/> />
</div> </div>
<div class="col"> <div class="col">
<q-slide-transition>
<q-input <q-input
v-if="newIngredient && newIngredient.volume" v-if="newIngredient && newIngredient.volume"
v-model.number="newIngredientVolume" v-model.number="newIngredientVolume"
@ -124,8 +125,10 @@
min="0" min="0"
suffix="L" suffix="L"
/> />
</q-slide-transition>
<q-slide-transition>
<q-input <q-input
v-else-if="newIngredient && newIngredient.price" v-if="newIngredient && newIngredient.price"
v-model="newIngredient.price" v-model="newIngredient.price"
filled filled
dense dense
@ -137,11 +140,12 @@
mask="#.##" mask="#.##"
suffix="€" suffix="€"
/> />
</q-slide-transition>
</div> </div>
</div> </div>
<div class="full-width row jusitfy-between q-gutter-sm q-pa-sm"> <div class="full-width row justify-around q-gutter-sm q-pa-sm">
<q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" /> <q-btn v-close-popup flat label="Abbrechen" @click="cancelAddIngredient" />
<q-btn v-close-popup label="Speichern" color="primary" @click="addIngredient" /> <q-btn v-close-popup flat label="Speichern" color="primary" @click="addIngredient" />
</div> </div>
</q-menu> </q-menu>
</q-btn> </q-btn>

View File

@ -5,6 +5,7 @@
:row-key="(row) => row.id" :row-key="(row) => row.id"
:columns="columns" :columns="columns"
style="height: 100%" style="height: 100%"
:pagination="pagination"
> >
<template #top-right> <template #top-right>
<div class="full-width row q-gutter-sm"> <div class="full-width row q-gutter-sm">
@ -91,6 +92,10 @@ export default defineComponent({
function deleteType(id: number) { function deleteType(id: number) {
void store.removeDrinkType(id); void store.removeDrinkType(id);
} }
const pagination = ref({
sortBy: 'name',
rowsPerPage: 10,
});
return { return {
columns, columns,
@ -99,6 +104,7 @@ export default defineComponent({
newDrinkType, newDrinkType,
deleteType, deleteType,
saveChanges, saveChanges,
pagination,
}; };
}, },
}); });

View File

@ -1,32 +1,13 @@
<template> <template>
<div> <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 v-model="actualExtraIngredient.name" dense label="Name" filled />
<q-input
v-model.number="actualExtraIngredient.price"
dense
label="Preis"
filled
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-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"
:pagination="pagination"
>
<template #top-right> <template #top-right>
<div class="full-width row q-gutter-sm"> <div class="full-width row q-gutter-sm">
<q-input <q-input
@ -151,6 +132,11 @@ export default defineComponent({
void store.deleteExtraIngredient(extraIngredient); void store.deleteExtraIngredient(extraIngredient);
} }
const pagination = ref({
sortBy: 'name',
rowsPerPage: 10,
});
return { return {
columns, columns,
rows, rows,
@ -159,6 +145,7 @@ export default defineComponent({
deleteType, deleteType,
discardChanges, discardChanges,
saveChanges, saveChanges,
pagination,
}; };
}, },
}); });

View File

@ -96,6 +96,7 @@ export default defineComponent({
field: 'name', field: 'name',
sortable: true, sortable: true,
filterable: true, filterable: true,
align: 'left',
}, },
{ {
name: 'type', name: 'type',

View File

@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<q-page padding> <q-page padding>
<q-table title="Tags" :rows="rows" :row-key="(row) => row.id" :columns="columns"> <q-table
title="Tags"
:rows="rows"
:row-key="(row) => row.id"
:columns="columns"
:pagination="pagination"
>
<template #top-right> <template #top-right>
<q-btn color="primary" icon="mdi-plus" round> <q-btn color="primary" icon="mdi-plus" round>
<q-tooltip> Tag hinzufügen </q-tooltip> <q-tooltip> Tag hinzufügen </q-tooltip>
@ -143,6 +149,10 @@ export default defineComponent({
} }
return true; return true;
} }
const pagination = ref({
sortBy: 'name',
rowsPerPage: 10,
});
return { return {
columns, columns,
rows, rows,
@ -152,6 +162,7 @@ export default defineComponent({
updateTag: store.updateTag, updateTag: store.updateTag,
notExists, notExists,
deleteTag: store.deleteTag, deleteTag: store.deleteTag,
pagination,
}; };
}, },
}); });

View File

@ -147,7 +147,6 @@ export const usePricelistStore = defineStore({
this.drinks.push(_drink); this.drinks.push(_drink);
}); });
calc_all_min_prices(this.drinks, this.min_prices); calc_all_min_prices(this.drinks, this.min_prices);
console.log(this.drinks);
}, },
sortPrices(volume: DrinkPriceVolume) { sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => { volume.prices.sort((a, b) => {
@ -196,7 +195,6 @@ export const usePricelistStore = defineStore({
this.drinks[index] = _drink; this.drinks[index] = _drink;
} }
calc_all_min_prices(this.drinks, this.min_prices); calc_all_min_prices(this.drinks, this.min_prices);
console.log('update drink', drink);
}, },
deleteDrink(drink: Drink) { deleteDrink(drink: Drink) {
api api
@ -291,7 +289,6 @@ export const usePricelistStore = defineStore({
}); });
}); });
}); });
console.log(retVal);
return retVal; return retVal;
}, },
}, },