68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<q-table
|
||
|
|
title="Getränke"
|
||
|
|
:columns="columns"
|
||
|
|
:data="drinks"
|
||
|
|
row-key="name"
|
||
|
|
>
|
||
|
|
<template v-slot:body-cell-prices="{row: {prices}}">
|
||
|
|
<q-td>
|
||
|
|
<div v-for="price in prices" :key="price.id" class="row">
|
||
|
|
<div class="col">
|
||
|
|
{{price.volume | setVolume}}
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
{{price.price | setCurrency}}
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
{{price.description}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-td>
|
||
|
|
</template>
|
||
|
|
</q-table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, onBeforeMount, ref} from '@vue/composition-api';
|
||
|
|
import {StateInterface} from 'src/store';
|
||
|
|
import {DrinkInterface} from '../store/drinks';
|
||
|
|
import {Store} from 'vuex';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'Pricelist',
|
||
|
|
filters: {
|
||
|
|
setVolume(volume: number) {
|
||
|
|
if (volume*10 > 1) {
|
||
|
|
return `${volume}l`
|
||
|
|
}
|
||
|
|
return `${volume*100}cl`
|
||
|
|
},
|
||
|
|
setCurrency(price: number) {
|
||
|
|
return `${price.toFixed(2)}€`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(_, {root}) {
|
||
|
|
const store = <Store<StateInterface>>root.$store;
|
||
|
|
const state = <DrinkInterface>store.state.drink;
|
||
|
|
const drinks = ref(state.drinks)
|
||
|
|
onBeforeMount(() => {
|
||
|
|
void store.dispatch('drink/getDrinks');
|
||
|
|
})
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
name: 'name',
|
||
|
|
label: 'Getränk',
|
||
|
|
field: 'name'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'prices',
|
||
|
|
label: 'Preise',
|
||
|
|
field: 'prices'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
return {columns, drinks}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|