[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

View File

@ -1,19 +1,33 @@
<template>
<div>
<q-table title="Getränke" :columns="columns" :rows="drinks" row-key="name">
<template #body-cell-prices="{ row: { prices } }">
<q-td>
<div v-for="price in prices" :key="price.id" class="row">
<div class="col">
{{ setVolume(price.volume) }}
</div>
<div class="col">
{{ setCurrency(price.price) }}
</div>
<div class="col">
{{ price.description }}
</div>
</div>
<q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
<template #body-cell-volumes="props">
<q-td :props="props">
<q-table
:columns="columns_volumes"
:rows="props.row.volumes"
hide-header
:hide-bottom="props.row.volumes.length < 5"
flat
>
<template #body-cell-prices="props_volumes">
<q-td :props="props_volumes">
<q-table
: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>
</template>
</q-table>
@ -34,7 +48,7 @@ export default defineComponent({
},
setCurrency(price: number) {
return `${price.toFixed(2)}`;
}
},
},
setup() {
const store = usePricelistStore();
@ -43,19 +57,53 @@ export default defineComponent({
void store.getDrinks();
});
const drinks = computed(() => store.drinks);
const columns = [
const columns_drinks = [
{
name: 'name',
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',
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>