From 6af3d7c98fdb93b4b2b5c47a13219dbb0ec48bcc Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 16 Feb 2023 22:50:48 +0100
Subject: [PATCH] playing around with better meal plan view

---
 .../RecipeSearchView/RecipeSearchView.vue     |  64 ++++++++++-
 vue/src/apps/TestView/TestView.vue            | 107 ++++++------------
 2 files changed, 96 insertions(+), 75 deletions(-)

diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 780edafa..4a9b87cf 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -812,7 +812,7 @@
                             </b-dropdown>
 
                             <b-button variant="outline-primary" size="sm" class="shadow-none  ml-1"
-                                      @click="resetSearch()"><i class="fas fa-file-alt"></i> {{
+                                      @click="resetSearch()" v-if="searchFiltered()"><i class="fas fa-file-alt"></i> {{
                                     search.pagination_page
                                 }}/{{ Math.ceil(pagination_count / ui.page_size) }} {{ $t("Reset") }} <i
                                     class="fas fa-times-circle"></i>
@@ -828,11 +828,50 @@
                     </div>
                 </div>
 
+                <template v-if="!searchFiltered() && ui.show_meal_plan">
+                    <hr/>
+                    <div class="row" >
+
+                        <div class="col col-md-12">
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
+                                <b-list-group v-for="day in meal_plan_grid" v-bind:key="day.day">
+                                    <b-list-group-item>
+                                        <div class="d-flex flex-row align-items-center">
+                                            <div>
+                                                <h4>{{ day.date_label }}</h4>
+                                            </div>
+                                            <div class="flex-grow-1 text-right">
+                                                <b-button class=""><i class="fa fa-plus"></i></b-button>
+                                            </div>
+                                        </div>
+
+                                    </b-list-group-item>
+                                    <b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.id">
+                                        <div class="d-flex flex-row align-items-center">
+                                            <div>
+                                                <b-img style="height: 50px; width: 50px; object-fit: cover" :src="plan.recipe.image" rounded="circle"></b-img>
+                                            </div>
+                                            <div class="flex-grow-1 ml-2">
+                                                <span class="two-row-text">{{ plan.recipe.name }}</span>
+                                            </div>
+                                        </div>
+                                    </b-list-group-item>
+
+                                </b-list-group>
+
+                            </div>
+                        </div>
+
+                    </div>
+                    <hr/>
+                </template>
+
+
                 <div v-if="recipes.length > 0" class="mt-4">
                     <div class="row">
                         <div class="col col-md-12">
-                            <div
-                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
+
                                 <template v-if="!searchFiltered()">
                                     <recipe-card
                                         v-bind:key="`mp_${m.id}`"
@@ -844,6 +883,7 @@
                                         footer_icon="far fa-calendar-alt"
                                     ></recipe-card>
                                 </template>
+
                                 <recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
                                              :footer_text="isRecentOrNew(r)[0]"
                                              :footer_icon="isRecentOrNew(r)[1]"
@@ -1018,6 +1058,15 @@ export default {
         }
     },
     computed: {
+        meal_plan_grid: function () {
+            let grid = []
+            for (const x of Array(5).keys()) {
+                let moment_date = moment().add(x, "d")
+                grid.push({date: moment_date, date_label: moment_date.format('DD.MM'), plan_entries: this.meal_plans.filter((m) => moment(m.date).isSame(moment_date, 'day'))})
+            }
+
+            return grid
+        },
         locale: function () {
             return window.CUSTOM_LOCALE
         },
@@ -1579,4 +1628,13 @@ export default {
     width: 30px;
 }
 
+.two-row-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
 </style>
diff --git a/vue/src/apps/TestView/TestView.vue b/vue/src/apps/TestView/TestView.vue
index c6317487..14ade0c4 100644
--- a/vue/src/apps/TestView/TestView.vue
+++ b/vue/src/apps/TestView/TestView.vue
@@ -1,82 +1,48 @@
 <template>
 
     <div id="app">
-
-        DIV
+        <hr/>
 
         <div class="row">
-            <div class="col-md-12">
-                <div style="height: 25vh; width: 15vw;">
-                    <b-img style="height: 15vh; width: 15vw; object-fit: cover"
-                           src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
-                           rounded></b-img>
-                    <div style="height: 10vh">
-                        <span style="font-size: 18px" class="two-row-text"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span>
-                        <span style="font-size: 14px" class="two-row-text text-muted">
-                            <a href="#">Import 1</a> -
-                            <a href="#">Hauptgang</a> -
-                            <a href="#">Backen</a> </span>
-
-                        <i class="fas fa-ellipsis-v"></i>
-                    </div>
+            <div class="col col-md-12">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
+                    <b-list-group v-for="x in Array(5).keys()" v-bind:key="x">
+                        <b-list-group-item >
+                            <h4>Monday </h4>
+                        </b-list-group-item>
+                        <b-list-group-item v-for="y in Array(Math.round(Math.random()*4) ).keys()" v-bind:key="y">
+                            <div class="d-flex flex-row align-items-center">
+                                <div>
+                                    <b-img style="height: 50px; width: 50px; object-fit: cover" src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png" rounded="circle"></b-img>
+                                </div>
+                                <div class="flex-grow-1 ml-2">
+                                    <span class="two-row-text">{{ recipe.name }}</span>
+                                </div>
+                            </div>
+                        </b-list-group-item>
+                        <b-list-group-item class="justify-content-center text-center">
+                            <b-button><i class="fa fa-plus"></i></b-button>
+                        </b-list-group-item>
+                    </b-list-group>
 
                 </div>
             </div>
-
-            <div class="col-md-3">
-
-                <div class="row">
-                    <div class="col-12">
-                        <b-img style="height: 15vh; width: 15vw; object-fit: cover"
-                               src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
-                               rounded></b-img>
-                    </div>
-                </div>
-                <div class="row mt-3">
-                    <div class="col-1">
-
-                    </div>
-                    <div class="col-10">
-                        <span style="font-size: 18px"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span> <br/>
-                        <span style="font-size: 14px" class="text-muted text-small">
-                            <a href="#">Import 1</a> -
-                            <a href="#">Hauptgang</a> -
-                            <a href="#">Backen</a> </span>
-                    </div>
-                    <div class="col-1 align-items-end">
-                        <i class="fas fa-ellipsis-v"></i>
-                    </div>
-                </div>
-
-            </div>
-
-        </div>
-
-        <hr class="mt-3"/>
-
-        Recipe Card
-        <b-checkbox v-model="recipe_detailed"></b-checkbox>
-        <div class="row ">
-            <div class="col-md-3">
-                <recipe-card
-                    v-if="recipe !== undefined"
-                    :recipe="recipe"
-                    :detailed="recipe_detailed"
-                ></recipe-card>
-            </div>
         </div>
 
-        Meal Plan Card
+        <hr/>
+
         <div class="row">
-            <div class="col-md-3">
-                <recipe-card
-                    v-if="recipe !== undefined && meal_plan !== undefined"
-                    :recipe="recipe"
-                    :detailed="recipe_detailed"
-                    :meal_plan="meal_plan"
-                    :footer_text="meal_plan.meal_type_name"
-                    footer_icon="far fa-calendar-alt"
-                ></recipe-card>
+            <div class="col col-md-12">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+                    <recipe-card :recipe="recipe" :detailed="false"></recipe-card>
+
+                </div>
             </div>
         </div>
 
@@ -84,10 +50,6 @@
     </div>
 </template>
 
-<!--
-<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
-
--->
 
 <script>
 import Vue from "vue"
@@ -97,6 +59,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import RecipeCard from "@/components/RecipeCard.vue";
 
+
 Vue.use(BootstrapVue)