From a81bac1193139dda4e0eeac267eda4cac6ded9d7 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 19 Feb 2023 16:37:32 +0100
Subject: [PATCH] styling and fixes for mealplan and search plan

---
 vue/src/apps/MealPlanView/MealPlanView.vue    | 12 +++++-----
 .../RecipeSearchView/RecipeSearchView.vue     | 22 +++++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index bc201dd95..da986b97a 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -56,15 +56,13 @@
                                     <b-button-group class="mx-1">
                                         <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
                                                   @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
-                                        <b-button v-html="'<'" @click="setStartingDay(-1)" class="p-2 pr-3 pl-3"></b-button>
                                     </b-button-group>
                                     <b-button-group class="mx-1">
                                         <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
                                             class="fas fa-home"></i></b-button>
-                                        <b-form-datepicker button-only button-variant="secondary"></b-form-datepicker> <!-- TODO datepicker not working -->
+                                        <b-form-datepicker button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
                                     </b-button-group>
                                     <b-button-group class="mx-1">
-                                        <b-button v-html="'>'" @click="setStartingDay(1)" class="p-2 pr-3 pl-3"></b-button>
                                         <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
                                                   @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
                                     </b-button-group>
@@ -101,7 +99,7 @@
                                                         <span v-else>{{ plan.title }}</span>
                                                     </span><br/>
                                                 <span v-if="plan.note">
-                                                    <small>{{ plan.note}}</small> <br/>
+                                                    <small>{{ plan.note }}</small> <br/>
                                                 </span>
                                                 <small class="text-muted">{{ plan.meal_type_name }}
                                                     <span v-if="plan.recipe">
@@ -432,7 +430,7 @@ export default {
                     grid.push({
                         date: moment_date,
                         create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
-                        date_label: moment_date.format('DD.MM'),
+                        date_label: moment_date.format('ddd DD.MM'),
                         plan_entries: useMealPlanStore().plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
                     })
                 }
@@ -448,6 +446,7 @@ export default {
         })
         this.$root.$on("change", this.updateEmoji)
         this.$i18n.locale = window.CUSTOM_LOCALE
+        moment.locale(window.CUSTOM_LOCALE)
     },
     watch: {
         settings: {
@@ -545,6 +544,9 @@ export default {
                 }
             })
         },
+        datePickerChanged(ctx) {
+            this.setShowDate(ctx.selectedDate)
+        },
         setShowDate(d) {
             this.showDate = d
         },
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 010c9b02f..6adeb7c4d 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -841,10 +841,10 @@
                                         <b-list-group-item class="hover-div pb-0">
                                             <div class="d-flex flex-row align-items-center">
                                                 <div>
-                                                    <h4>{{ day.date_label }}</h4>
+                                                    <h6>{{ day.date_label }}</h6>
                                                 </div>
                                                 <div class="flex-grow-1 text-right">
-                                                    <b-button class="hover-button" @click="showMealPlanEditModal(null, day.create_default_date)"><i
+                                                    <b-button class="hover-button btn-outline-primary btn-sm" @click="showMealPlanEditModal(null, day.create_default_date)"><i
                                                         class="fa fa-plus"></i></b-button>
                                                 </div>
                                             </div>
@@ -854,17 +854,19 @@
                                             <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>
+                                                       :src="plan.recipe.image" rounded="circle" v-if="plan.recipe?.image"></b-img>
+                                                <b-img style="height: 50px; width: 50px; object-fit: cover"
+                                                       :src="image_placeholder" rounded="circle" v-else></b-img>
                                                 </div>
                                                 <div class="flex-grow-1 ml-2"
                                                      style="text-overflow: ellipsis; overflow-wrap: anywhere;">
-                                                    <span class="two-row-text"><a
-                                                        :href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{
-                                                            plan.recipe.name
-                                                        }}</a></span>
+                                                    <span class="two-row-text">
+                                                        <a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)" v-if="plan.recipe">{{ plan.recipe.name }}</a>
+                                                        <span v-else>{{ plan.title }}</span>
+                                                    </span>
                                                 </div>
                                                 <div class="hover-button">
-                                                    <b-button @click="showMealPlanEditModal(plan,null)"><i class="fas fa-pencil-alt"></i></b-button>
+                                                    <b-button @click="showMealPlanEditModal(plan,null)" class="btn-outline-primary btn-sm"><i class="fas fa-pencil-alt"></i></b-button>
                                                 </div>
                                             </div>
                                         </b-list-group-item>
@@ -1087,6 +1089,7 @@ export default {
             debug: false,
             mealplan_default_date: null,
             mealplan_entry_edit: null,
+            image_placeholder: window.IMAGE_PLACEHOLDER,
         }
     },
     computed: {
@@ -1098,7 +1101,7 @@ export default {
                     grid.push({
                         date: moment_date,
                         create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
-                        date_label: moment_date.format('DD.MM'),
+                        date_label: moment_date.format('ddd DD.MM'),
                         plan_entries: this.meal_plan_store.plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
                     })
                 }
@@ -1262,6 +1265,7 @@ export default {
             this.use_plural = r.data.use_plural
         })
         this.$i18n.locale = window.CUSTOM_LOCALE
+        moment.locale(window.CUSTOM_LOCALE)
         this.debug = localStorage.getItem("DEBUG") == "True" || false
     },
     watch: {