[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
swipeable
control-color="primary"
navigation
arrows
>
<q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
<build-manual-volume-part :volume="volume" />
</q-carousel-slide>
</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>
<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue';
@ -45,7 +49,14 @@ export default defineComponent({
});
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>

View File

@ -438,7 +438,6 @@ export default defineComponent({
for (const volume of toDeleteObjects.volumes) {
await store.deleteVolume(volume, drink);
}
console.log(drink);
if (drink.id > 0) {
await store.updateDrink(drink);
} else {
@ -474,7 +473,6 @@ export default defineComponent({
function image(uuid: string | undefined) {
if (uuid) {
console.log(baseURL.value);
return `${baseURL.value}/pricelist/picture/${uuid}?size=256`;
}
return 'no-image.svg';
@ -493,7 +491,6 @@ export default defineComponent({
drinkPic,
savePicture,
deletePicture,
console,
search,
filter,
search_keys,

View File

@ -126,7 +126,7 @@
</q-carousel>
<div class="full-width row justify-center q-pa-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 v-if="editable" class="q-px-sm">
<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">
<q-btn size="sm" round icon="mdi-plus" color="primary">
<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="col">
<q-select
@ -113,6 +113,7 @@
/>
</div>
<div class="col">
<q-slide-transition>
<q-input
v-if="newIngredient && newIngredient.volume"
v-model.number="newIngredientVolume"
@ -124,8 +125,10 @@
min="0"
suffix="L"
/>
</q-slide-transition>
<q-slide-transition>
<q-input
v-else-if="newIngredient && newIngredient.price"
v-if="newIngredient && newIngredient.price"
v-model="newIngredient.price"
filled
dense
@ -137,11 +140,12 @@
mask="#.##"
suffix="€"
/>
</q-slide-transition>
</div>
</div>
<div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
<q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
<q-btn v-close-popup label="Speichern" color="primary" @click="addIngredient" />
<div class="full-width row justify-around q-gutter-sm q-pa-sm">
<q-btn v-close-popup flat label="Abbrechen" @click="cancelAddIngredient" />
<q-btn v-close-popup flat label="Speichern" color="primary" @click="addIngredient" />
</div>
</q-menu>
</q-btn>

View File

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

View File

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

View File

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

View File

@ -1,7 +1,13 @@
<template>
<div>
<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>
<q-btn color="primary" icon="mdi-plus" round>
<q-tooltip> Tag hinzufügen </q-tooltip>
@ -143,6 +149,10 @@ export default defineComponent({
}
return true;
}
const pagination = ref({
sortBy: 'name',
rowsPerPage: 10,
});
return {
columns,
rows,
@ -152,6 +162,7 @@ export default defineComponent({
updateTag: store.updateTag,
notExists,
deleteTag: store.deleteTag,
pagination,
};
},
});

View File

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