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: 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>