From cf0f453b7c51433c0e8d22ab6155c901fd97ffb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 28 Mar 2021 20:34:06 +0200
Subject: [PATCH] [pricelist][reciepts] first try for reciepts

---
 src/plugins/pricelist/pages/Reciepts.vue | 58 +++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/plugins/pricelist/pages/Reciepts.vue b/src/plugins/pricelist/pages/Reciepts.vue
index 33455e9..7ca0bbc 100644
--- a/src/plugins/pricelist/pages/Reciepts.vue
+++ b/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>