[pricelist][styling] style up receipts

This commit is contained in:
Tim Gröger 2021-03-30 15:40:02 +02:00
parent 1b478d7680
commit a7d32d6f7c
5 changed files with 100 additions and 31 deletions

View File

@ -0,0 +1,43 @@
<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 volumes" :key="volume.id" :name="volume.id">
<build-manual-volume-part :volume="volume" />
</q-carousel-slide>
</q-carousel>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue';
import { DrinkPriceVolume, usePricelistStore } from '../../store';
import BuildManualVolumePart from './BuildManualVolumePart.vue';
export default defineComponent({
name: 'BuildManualVolume',
components: { BuildManualVolumePart },
props: {
volumes: {
type: Array as PropType<Array<DrinkPriceVolume>>,
required: true,
},
},
setup(props) {
const store = usePricelistStore();
const volume = ref(props.volumes[0].id);
const options = computed(() => {
let ret: Array<{ label: number; value: number }> = [];
props.volumes.forEach((volume: DrinkPriceVolume) => {
ret.push({ label: volume.id, value: volume.id });
});
return ret;
});
return { volume, options };
},
});
</script>

View File

@ -0,0 +1,48 @@
<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>

View File

@ -24,8 +24,8 @@ export default defineComponent({
}, },
}, },
emits: { emits: {
deleteStep: (index: number) => true, deleteStep: (index: number) => index,
addStep: (val: string) => true, addStep: (val: string) => val,
}, },
setup(_, { emit }) { setup(_, { emit }) {
const newStep = ref(''); const newStep = ref('');

View File

@ -78,7 +78,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, onBeforeMount, computed, ref } from 'vue'; import { defineComponent, onBeforeMount, computed, ref } from 'vue';
import { usePricelistStore } from '../store'; import { usePricelistStore } from '../store';
import { useMainStore } from 'src/store'; import { useMainStore } from 'src/stores';
export default defineComponent({ export default defineComponent({
name: 'Pricelist', name: 'Pricelist',

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="q-pa-sm full-width full-height row q-gutter-sm"> <div class="q-pa-sm full-width full-height row q-gutter-sm">
<q-card v-for="drink in drinks" :key="drink.id" style="max-width: 256px; width: 256px"> <q-card v-for="drink in drinks" :key="drink.id" style="max-width: 400px; width: 400px">
<q-img <q-img
style="max-width: 256px" style="max-height: 256px"
loading="lazy" loading="lazy"
:src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'" :src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
placeholder-src="no-image.svg" placeholder-src="no-image.svg"
@ -11,27 +11,7 @@
{{ drink.name }} {{ drink.name }}
</div> </div>
</q-img> </q-img>
<q-card-section> <build-manual-volume :volumes="drink.volumes" />
<div class="text-h6">Zutaten</div>
<div v-for="ingredient in drink.volumes[0].ingredients" :key="ingredient.id">
{{
name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
}}
{{
ingredient.drink_ingredient?.volume
? `${ingredient.drink_ingredient?.volume * 100} cl`
: ''
}}
</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 drink.volumes[0].prices" :key="price.id">
{{ price.price.toFixed(2) }}
</div>
</div>
</q-card-section>
<q-card-section> <q-card-section>
<div class="text-h6">Anleitung</div> <div class="text-h6">Anleitung</div>
<build-manual :steps="drink.receipt" :editable="false" /> <build-manual :steps="drink.receipt" :editable="false" />
@ -44,24 +24,22 @@
import { computed, defineComponent, onBeforeMount } from 'vue'; import { computed, defineComponent, onBeforeMount } from 'vue';
import { usePricelistStore } from 'src/plugins/pricelist/store'; import { usePricelistStore } from 'src/plugins/pricelist/store';
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue'; import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
export default defineComponent({ export default defineComponent({
name: 'Reciepts', name: 'Reciepts',
components: { BuildManual }, components: { BuildManual, BuildManualVolume },
setup() { setup() {
const store = usePricelistStore(); const store = usePricelistStore();
onBeforeMount(() => { onBeforeMount(() => {
void store.getDrinks(); void store.getDrinks();
}); });
function name(id: number) {
return store.drinks.find((a) => a.id === id)?.name;
}
const drinks = computed(() => const drinks = computed(() =>
store.drinks.filter((drink) => { store.drinks.filter((drink) => {
return drink.volumes.some((volume) => volume.ingredients.length > 0); return drink.volumes.some((volume) => volume.ingredients.length > 0);
}) })
); );
return { drinks, name }; return { drinks };
}, },
}); });
</script> </script>