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

[pricelist] simple pricelist

This commit is contained in:
Tim Gröger 2021-03-21 23:25:22 +01:00
parent 14206d9117
commit 6097e510c5
1 changed files with 69 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/plugins/pricelist/components/Pricelist.vue
View File

@ -1,19 +1,33 @@
<template> <template>
<div> <div>
<q-table title="Getränke" :columns="columns" :rows="drinks" row-key="name"> <q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
<template #body-cell-prices="{ row: { prices } }"> <template #body-cell-volumes="props">
<q-td> <q-td :props="props">
<div v-for="price in prices" :key="price.id" class="row"> <q-table
<div class="col"> :columns="columns_volumes"
{{ setVolume(price.volume) }} :rows="props.row.volumes"
</div> hide-header
<div class="col"> :hide-bottom="props.row.volumes.length < 5"
{{ setCurrency(price.price) }} flat
</div> >
<div class="col"> <template #body-cell-prices="props_volumes">
{{ price.description }} <q-td :props="props_volumes">
</div> <q-table
</div> :columns="columns_prices"
:rows="props_volumes.row.prices"
hide-header
:hide-bottom="props_volumes.row.prices.length < 5"
flat
>
<template #body-cell-public="props_prices">
<q-td :props="props_prices">
<q-toggle v-model="props_prices.row.public" disable />
</q-td>
</template>
</q-table>
</q-td>
</template>
</q-table>
</q-td> </q-td>
</template> </template>
</q-table> </q-table>
@ -34,7 +48,7 @@ export default defineComponent({
}, },
setCurrency(price: number) { setCurrency(price: number) {
return `${price.toFixed(2)}€`; return `${price.toFixed(2)}€`;
} },
}, },
setup() { setup() {
const store = usePricelistStore(); const store = usePricelistStore();
@ -43,19 +57,53 @@ export default defineComponent({
void store.getDrinks(); void store.getDrinks();
}); });
const drinks = computed(() => store.drinks); const drinks = computed(() => store.drinks);
const columns = [ const columns_drinks = [
{ {
name: 'name', name: 'name',
label: 'Getränk', label: 'Getränk',
field: 'name' field: 'name',
align: 'center',
},
{
name: 'volumes',
label: 'Preise',
field: 'volumes',
align: 'center',
},
];
const columns_volumes = [
{
name: 'volume',
label: 'Inhalt',
field: 'volume',
format: (val: number) => `${val.toFixed(3)}L`,
align: 'left',
}, },
{ {
name: 'prices', name: 'prices',
label: 'Preise', label: 'Preise',
field: 'prices' field: 'prices',
} },
]; ];
return { columns, drinks }; const columns_prices = [
} {
name: 'price',
label: 'Preis',
field: 'price',
format: (val: number) => `${val.toFixed(2)}€`,
},
{
name: 'description',
label: 'Beschreibung',
field: 'description',
},
{
name: 'public',
label: 'Öffentlich',
field: 'public',
},
];
return { columns_drinks, columns_volumes, columns_prices, drinks };
},
}); });
</script> </script>