src/plugins/pricelist/pages/Reciepts.vue

@@ -1,11 +1,65 @@
 <template>
-  <h1>Hier kommen Rezepte hin.</h1>
+  <div class='q-pa-sm full-width full-height row q-gutter-sm'>
+    <q-card style='max-width: 256px; width: 256px' v-for='drink in drinks' :key='drink.id'>
+      <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?.drink_ingredient_id) || ingredient.extra_ingredient?.name}} {{ ingredient.drink_ingredient?.volume }}
+        </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>
+      </q-card-section>
+    </q-card>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+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) {
+      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>