49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<q-card-section>
|
||
|
|
<div class="text-h6">Zutaten</div>
|
||
|
|
<div v-for="(ingredient, index) in volume.ingredients" :key="ingredient.id">
|
||
|
|
<div class="full-width row q-gutter-sm q-py-sm">
|
||
|
|
<div class="col">
|
||
|
|
{{
|
||
|
|
name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
{{
|
||
|
|
ingredient.drink_ingredient?.volume
|
||
|
|
? `${ingredient.drink_ingredient?.volume * 100} cl`
|
||
|
|
: ''
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-separator v-if="index < volume.ingredients.length - 1" />
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
<q-card-section>
|
||
|
|
<div class="text-h6">Preise</div>
|
||
|
|
<div class="full-width row q-gutter-sm">
|
||
|
|
<div v-for="price in volume.prices" :key="price.id">{{ price.price.toFixed(2) }}€</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, PropType } from 'vue';
|
||
|
|
import { DrinkPriceVolume, usePricelistStore } from '../../store';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BuildManualVolumePart',
|
||
|
|
props: {
|
||
|
|
volume: {
|
||
|
|
type: Object as PropType<DrinkPriceVolume>,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
const store = usePricelistStore();
|
||
|
|
function name(id: number) {
|
||
|
|
return store.drinks.find((a) => a.id === id)?.name;
|
||
|
|
}
|
||
|
|
return { name };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|