meal plan in search

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -137,6 +137,12 @@
         <div class="row" style="margin-top: 2vh">
           <div class="col col-md-12">
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
+
+              <template v-if="search_input === '' && search_keywords.length === 0 &&  search_foods.length === 0  && search_books.length === 0">
+                <recipe-card v-bind:key="`mp_${m.id}`" v-for="m in meal_plans" :recipe="m.recipe"
+                             :meal_plan="m"></recipe-card>
+              </template>
+
               <recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
             </div>
           </div>
@@ -171,7 +177,7 @@ import Vue from 'vue'
 import {BootstrapVue} from 'bootstrap-vue'
 
 import 'bootstrap-vue/dist/bootstrap-vue.css'
-
+import moment from 'moment'
 
 import {ResolveUrlMixin} from "@/utils/utils";
 
@@ -190,6 +196,8 @@ export default {
   data() {
     return {
       recipes: [],
+      meal_plans: [],
+
       search_input: '',
       search_internal: false,
       search_keywords: [],
@@ -209,6 +217,8 @@ export default {
   },
   mounted() {
     this.refreshData()
+
+    this.loadSpecialData()
   },
   methods: {
     refreshData: function () {
@@ -239,6 +249,18 @@ export default {
         this.pagination_count = result.data.count
       })
     },
+    loadSpecialData: function () {
+      let apiClient = new ApiApiFactory()
+
+      apiClient.listMealPlans({
+        query: {
+          from_date: moment().format('YYYY-MM-DD'),
+          to_date: moment().format('YYYY-MM-DD')
+        }
+      }).then(result => {
+        this.meal_plans = result.data
+      })
+    },
     genericSelectChanged: function (obj) {
       this[obj.var] = obj.val
       this.refreshData()
@@ -251,7 +273,7 @@ export default {
       this.search_books = []
       this.refreshData()
     },
-    pageChange: function (page){
+    pageChange: function (page) {
       this.pagination_page = page
       this.refreshData()
     }

vue/src/components/RecipeCard.vue

@@ -2,26 +2,36 @@
 
 
   <b-card no-body>
-    <a :href="resolveDjangoUrl('view_recipe', recipe.id)">
+    <a :href="clickUrl()">
       <b-card-img-lazy style="height: 15vh; object-fit: cover" :src=recipe_image v-bind:alt="$t('Recipe_Image')"
                        top></b-card-img-lazy>
 
       <div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
            style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
-        <recipe-context-menu :recipe="recipe" style="float:right"></recipe-context-menu>
+        <recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu>
       </div>
 
     </a>
 
     <b-card-body>
-      <h5><a :href="resolveDjangoUrl('view_recipe', recipe.id)">{{ recipe.name }}</a></h5>
+      <h5><a :href="clickUrl()">
+        <template v-if="recipe !== null">{{ recipe.name }}</template>
+        <template v-else>{{ meal_plan.title }}</template>
+      </a></h5>
 
       <b-card-text style="text-overflow: ellipsis">
-        {{ recipe.description }}
-        <keywords :recipe="recipe" style="margin-top: 4px"></keywords>
+        <template v-if="recipe !== null">
+          {{ recipe.description }}
+          <keywords :recipe="recipe" style="margin-top: 4px"></keywords>
+        </template>
+        <template v-else>{{ meal_plan.note }}</template>
       </b-card-text>
-
     </b-card-body>
+
+
+    <b-card-footer v-if="meal_plan !== undefined">
+      <i class="far fa-calendar-alt"></i> {{ meal_plan.meal_type_name }}
+    </b-card-footer>
   </b-card>
 
 </template>
@@ -29,7 +39,7 @@
 <script>
 import RecipeContextMenu from "@/components/RecipeContextMenu";
 import Keywords from "@/components/Keywords";
-import {ResolveUrlMixin} from "@/utils/utils";
+import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
 
 export default {
   name: "RecipeCard",
@@ -39,6 +49,7 @@ export default {
   components: {Keywords, RecipeContextMenu},
   props: {
     recipe: Object,
+    meal_plan: Object,
   },
   data() {
     return {
@@ -46,11 +57,21 @@ export default {
     }
   },
   mounted() {
-    if (this.recipe.image === null) {
+
+    if (this.recipe == null || this.recipe.image === null) {
       this.recipe_image = window.IMAGE_PLACEHOLDER
     } else {
       this.recipe_image = this.recipe.image
     }
+  },
+  methods: {
+    clickUrl: function () {
+      if (this.recipe !== null) {
+        return resolveDjangoUrl('view_recipe', this.recipe.id)
+      } else {
+        return resolveDjangoUrl('view_plan_entry', this.meal_plan.id)
+      }
+    }
   }
 }
 </script>