90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<q-carousel
|
||
|
|
v-model="volume"
|
||
|
|
transition-prev="slide-right"
|
||
|
|
transition-next="slide-left"
|
||
|
|
animated
|
||
|
|
swipeable
|
||
|
|
control-color="primary"
|
||
|
|
navigation
|
||
|
|
arrows
|
||
|
|
>
|
||
|
|
<q-carousel-slide v-for="volume in props.volumes" :key="volume.id" :name="volume.id">
|
||
|
|
<q-input
|
||
|
|
class="q-pa-sm"
|
||
|
|
:model-value="volume.volume"
|
||
|
|
outlined
|
||
|
|
readonly
|
||
|
|
dense
|
||
|
|
label="Inhalt"
|
||
|
|
mask="#.###"
|
||
|
|
fill-mask="0"
|
||
|
|
suffix="L"
|
||
|
|
/>
|
||
|
|
<div class="full-width row q-gutter-sm q-pa-sm justify-around">
|
||
|
|
<div v-for="(min_price, index) in volume.min_prices" :key="index">
|
||
|
|
<q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
|
||
|
|
<div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-pa-sm">
|
||
|
|
<div v-for="(price, index) in volume.prices" :key="price.id">
|
||
|
|
<div class="fit row justify-around q-py-sm">
|
||
|
|
<div class="text-body1 col-xs-12 col-md-4">{{ price.price.toFixed(2) }}€</div>
|
||
|
|
<div class="text-body1 col-xs-12 col-md-4">
|
||
|
|
<q-toggle
|
||
|
|
:model-value="price.public"
|
||
|
|
disable
|
||
|
|
checked-icon="mdi-earth"
|
||
|
|
unchecked-icon="mdi-earth-off"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="text-body1 col-xs-12 col-md-4">
|
||
|
|
{{ price.description }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-separator v-if="index < volume.prices.length - 1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-pa-sm">
|
||
|
|
<ingredients :ingredients="volume.ingredients" :volume="volume" />
|
||
|
|
</div>
|
||
|
|
</q-carousel-slide>
|
||
|
|
</q-carousel>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent, PropType, ref } from 'vue';
|
||
|
|
import { Drink } from 'src/plugins/pricelist/store';
|
||
|
|
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'DrinkPriceVolume',
|
||
|
|
components: { Ingredients },
|
||
|
|
props: {
|
||
|
|
props: {
|
||
|
|
type: Object as PropType<Drink>,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const _volume = ref<number>();
|
||
|
|
const volume = computed({
|
||
|
|
get: () => {
|
||
|
|
if (_volume.value !== undefined) {
|
||
|
|
return _volume.value;
|
||
|
|
}
|
||
|
|
if (props.props.volumes.length > 0) {
|
||
|
|
return props.props.volumes[0].id;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
set: (val: number) => (_volume.value = val),
|
||
|
|
});
|
||
|
|
return { volume };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|