flaschengeist-frontend/src/plugins/pricelist/pages/Receipts.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: 256px; width: 256px">
      <q-img
        style="max-width: 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>
      <q-card-section>
        <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>
        <div class="text-h6">Anleitung</div>
        {{drink.receipt}}
        </q-card-section>
    </q-card>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount } from 'vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
  name: 'Reciepts',
  setup() {
    const store = usePricelistStore();
    onBeforeMount(() => {
      void store.getDrinks();
    });
    function name(id: number) {
      return store.drinks.find((a) => a.id === id)?.name;
    }
    const drinks = computed(() =>
      store.drinks.filter((drink) => {
        return drink.volumes.some((volume) => volume.ingredients.length > 0);
      })
    );

    return { drinks, name };
  },
});
</script>

<style scoped></style>