[pricelist] some styling on pricelist

This commit is contained in:
Tim Gröger 2021-03-30 22:32:18 +02:00
parent 7089ee4d62
commit 6cdc143aa9
6 changed files with 32 additions and 105 deletions

View File

@ -37,8 +37,7 @@
<div class="text-body1">{{ price.price.toFixed(2) }}</div>
<q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
<div class="text-caption text-weight-thin">
{{ price.description
}}
{{ price.description }}
</div>
</div>
</div>

View File

@ -79,7 +79,11 @@
import { defineComponent, onBeforeMount, computed, ref } from 'vue';
import { usePricelistStore } from '../store';
import { useMainStore } from 'src/stores';
function sort(a: string | number, b: string | number) {
if (a > b) return 1;
if (b > a) return -1;
return 0;
}
export default defineComponent({
name: 'Pricelist',
filters: {
@ -120,12 +124,22 @@ export default defineComponent({
{
name: 'picture',
label: 'Bild',
align: 'center',
},
{
name: 'name',
label: 'Getränk',
field: 'name',
align: 'center',
sortable: true,
},
{
name: 'drink_type',
label: 'Kategorie',
field: 'type',
format: (val: FG.DrinkType) => `${val.name}`,
sortable: true,
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
},
{
name: 'volumes',

View File

@ -0,0 +1,14 @@
<template>
<pricelist />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Pricelist from '../components/Pricelist.vue';
export default defineComponent({
name: 'InnerPricelist',
components: { Pricelist },
setup() {
return {};
},
});
</script>

View File

@ -1,100 +0,0 @@
<template>
<q-page padding>
<q-card>
<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>
</q-card>
</q-page>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import { usePricelistStore } from '../store';
export default defineComponent({
name: 'Pricelist',
setup() {
const store = usePricelistStore();
onBeforeMount(() => {
void store.getDrinks();
});
const drinks = computed(() => store.drinks);
const columns_drinks = [
{
name: 'name',
label: 'Getränk',
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',
},
];
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>

View File

@ -19,7 +19,7 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
route: {
path: 'pricelist',
name: 'drinks-pricelist',
component: () => import('../pages/Pricelist.vue'),
component: () => import('../pages/InnerPricelist.vue'),
},
},
{