67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
<template>
|
|
<q-card-section>
|
|
<div class="text-h6">Zutaten</div>
|
|
<div v-for="ingredient in volume.ingredients" :key="ingredient.id">
|
|
<div v-if="ingredient.drink_ingredient">
|
|
<div class="full-width row q-gutter-sm q-py-sm">
|
|
<div class="col">
|
|
{{ name(ingredient.drink_ingredient?.ingredient_id) }}
|
|
</div>
|
|
<div class="col">
|
|
{{
|
|
ingredient.drink_ingredient?.volume
|
|
? `${ingredient.drink_ingredient?.volume * 100} cl`
|
|
: ''
|
|
}}
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
</div>
|
|
</div>
|
|
<div v-for="ingredient in volume.ingredients" :key="ingredient.id">
|
|
<div v-if="ingredient.extra_ingredient">
|
|
<div class="full-width row q-gutter-sm q-py-sm">
|
|
<div class="col">
|
|
{{ ingredient.extra_ingredient?.name }}
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<q-separator />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="text-h6">Preise</div>
|
|
<div class="full-width row q-gutter-sm justify-around">
|
|
<div v-for="price in volume.prices" :key="price.id">
|
|
<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 }}
|
|
</div>
|
|
</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>
|