48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<template>
|
|
<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: 400px; width: 400px">
|
|
<q-img
|
|
style="max-height: 256px"
|
|
loading="lazy"
|
|
:src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
|
|
placeholder-src="no-image.svg"
|
|
>
|
|
<div class="absolute-bottom-right text-subtitle2">
|
|
{{ drink.name }}
|
|
</div>
|
|
</q-img>
|
|
<build-manual-volume :volumes="drink.volumes" />
|
|
<q-card-section>
|
|
<div class="text-h6">Anleitung</div>
|
|
<build-manual :steps="drink.receipt" :editable="false" />
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, onBeforeMount } from 'vue';
|
|
import { usePricelistStore } from 'src/plugins/pricelist/store';
|
|
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
|
|
import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
|
|
export default defineComponent({
|
|
name: 'Reciepts',
|
|
components: { BuildManual, BuildManualVolume },
|
|
setup() {
|
|
const store = usePricelistStore();
|
|
onBeforeMount(() => {
|
|
void store.getDrinks();
|
|
});
|
|
const drinks = computed(() =>
|
|
store.drinks.filter((drink) => {
|
|
return drink.volumes.some((volume) => volume.ingredients.length > 0);
|
|
})
|
|
);
|
|
|
|
return { drinks };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|