meal plan fixes

added the option to create entries from recipe card context menu

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -79,7 +79,7 @@
         <ContextMenuItem @click="$refs.menu.close();moveEntryRight(contextData)">
           <a class="dropdown-item p-2" href="#"><i class="fas fa-arrow-right"></i> {{ $t("DayForward") }}</a>
         </ContextMenuItem>
-         <ContextMenuItem @click="$refs.menu.close();createEntry(contextData.originalItem.entry)">
+        <ContextMenuItem @click="$refs.menu.close();createEntry(contextData.originalItem.entry)">
           <a class="dropdown-item p-2" href="#"><i class="fas fa-copy"></i> {{ $t("Clone") }}</a>
         </ContextMenuItem>
         <ContextMenuItem @click="$refs.menu.close();deleteEntry(contextData)">
@@ -88,7 +88,7 @@
       </template>
     </ContextMenu>
     <meal-plan-edit-modal :entry="entryEditing" :entryEditing_initial_recipe="entryEditing_initial_recipe"
-                          :entry-editing_initial_meal_type="entryEditing_initial_meal_type"
+                          :entry-editing_initial_meal_type="entryEditing_initial_meal_type" :modal_title="modal_title"
                           :edit_modal_show="edit_modal_show" @save-entry="editEntry"
                           @delete-entry="deleteEntry"></meal-plan-edit-modal>
   </div>

vue/src/components/MealPlanCard.vue

@@ -19,7 +19,9 @@
         <div style="position: static;">
           <div class="dropdown b-dropdown position-static btn-group">
             <button aria-haspopup="true" aria-expanded="false" type="button"
-                    class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" @click.stop="$parent.$parent.$refs.menu.open($event, value)"><i class="fas fa-ellipsis-v fa-lg"></i></button>
+                    class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
+                    @click.stop="$parent.$parent.$refs.menu.open($event, value)"><i class="fas fa-ellipsis-v fa-lg"></i>
+            </button>
           </div>
         </div>
 
@@ -97,6 +99,10 @@ export default {
       this.$emit("dragstart", calendarItem, windowEvent)
       return true
     },
+    onClickItem(calendarItem, windowEvent) {
+      this.$emit("click-item", calendarItem)
+      return true
+    },
   },
   directives: {
     hover: {

vue/src/components/MealPlanEditModal.vue

@@ -1,11 +1,10 @@
 <template>
-  <b-modal id="edit-modal" size="lg" :title="modal_title" hide-footer aria-label="">
+  <b-modal :id="modal_id" size="lg" :title="modal_title" hide-footer aria-label="">
     <div class="row">
       <div class="col col-md-12">
         <div class="row">
           <div class="col-6 col-lg-9">
             <b-input-group>
-
               <b-form-input id="TitleInput" v-model="entryEditing.title"
                             :placeholder="entryEditing.title_placeholder"></b-form-input>
               <b-input-group-append class="d-none d-lg-block">
@@ -61,7 +60,7 @@
         </div>
         <div class="row mt-3 mb-3">
           <div class="col-12">
-            <b-button variant="danger" @click="deleteEntry">{{ $t('Delete') }}
+            <b-button variant="danger" @click="deleteEntry" v-if="allow_delete">{{ $t('Delete') }}
             </b-button>
             <b-button class="float-right" variant="primary" @click="editEntry">{{ $t('Save') }}</b-button>
           </div>
@@ -75,7 +74,6 @@
 import Vue from "vue";
 import {BootstrapVue} from "bootstrap-vue";
 import GenericMultiselect from "./GenericMultiselect";
-import RecipeCard from "./RecipeCard";
 import {ApiMixin} from "../utils/utils";
 
 Vue.use(BootstrapVue)
@@ -86,12 +84,20 @@ export default {
     entry: Object,
     entryEditing_initial_recipe: Array,
     entryEditing_initial_meal_type: Array,
-    modal_title: String
+    modal_title: String,
+    modal_id: {
+      type: String,
+      default: "edit-modal"
+    },
+    allow_delete: {
+      type: Boolean,
+      default: true
+    },
   },
   mixins: [ApiMixin],
   components: {
     GenericMultiselect,
-    RecipeCard
+    RecipeCard: () => import('./RecipeCard.vue')
   },
   data() {
     return {

vue/src/components/RecipeContextMenu.vue

@@ -26,8 +26,7 @@
           <i class="fas fa-shopping-cart fa-fw"></i> {{ $t('Add_to_Shopping') }}
         </a>
 
-        <a class="dropdown-item" :href="`${resolveDjangoUrl('new_meal_plan') }?recipe=${recipe.id}`"
-           target="_blank" rel="noopener noreferrer"><i
+        <a class="dropdown-item" @click="createMealPlan" href="#"><i
             class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
         </a>
 
@@ -72,19 +71,26 @@
               class="fa fa-share-alt"></i></b-button>
         </div>
       </div>
-
     </b-modal>
 
-
+    <meal-plan-edit-modal :entry="entryEditing" :entryEditing_initial_recipe="[recipe]"
+                          :entry-editing_initial_meal_type="[]" @save-entry="saveMealPlan"
+                          :modal_id="`modal-meal-plan_${modal_id}`" :allow_delete="false" :modal_title="$t('CreateMealPlanEntry')"></meal-plan-edit-modal>
   </div>
 </template>
 
 <script>
 
-import {makeToast, resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
+import {makeToast, resolveDjangoUrl, ResolveUrlMixin, StandardToasts} from "@/utils/utils";
 import CookLog from "@/components/CookLog";
 import axios from "axios";
 import AddRecipeToBook from "./AddRecipeToBook";
+import MealPlanEditModal from "@/components/MealPlanEditModal";
+import moment from "moment";
+import Vue from "vue";
+import {ApiApiFactory} from "@/utils/openapi/api";
+
+Vue.prototype.moment = moment
 
 export default {
   name: 'RecipeContextMenu',
@@ -93,13 +99,29 @@ export default {
   ],
   components: {
     AddRecipeToBook,
-    CookLog
+    CookLog,
+    MealPlanEditModal
   },
   data() {
     return {
       servings_value: 0,
       recipe_share_link: undefined,
-      modal_id: this.recipe.id + Math.round(Math.random() * 100000)
+      modal_id: this.recipe.id + Math.round(Math.random() * 100000),
+      options: {
+        entryEditing: {
+          date: null,
+          id: -1,
+          meal_type: null,
+          note: "",
+          note_markdown: "",
+          recipe: null,
+          servings: 1,
+          shared: [],
+          title: '',
+          title_placeholder: this.$t('Title')
+        }
+      },
+      entryEditing: {},
     }
   },
   props: {
@@ -113,6 +135,24 @@ export default {
     this.servings_value = ((this.servings === -1) ? this.recipe.servings : this.servings)
   },
   methods: {
+    saveMealPlan: function (entry) {
+      entry.date = moment(entry.date).format("YYYY-MM-DD")
+
+      let apiClient = new ApiApiFactory()
+
+      apiClient.createMealPlan(entry).then(result => {
+        this.$bvModal.hide(`modal-meal-plan_${this.modal_id}`)
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+      }).catch(error => {
+        StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
+      })
+    },
+    createMealPlan(data) {
+      this.entryEditing = this.options.entryEditing
+      this.entryEditing.recipe = this.recipe
+      this.entryEditing.date = moment(new Date()).format('YYYY-MM-DD')
+      this.$bvModal.show(`modal-meal-plan_${this.modal_id}`)
+    },
     createShareLink: function () {
       axios.get(resolveDjangoUrl('api_share_link', this.recipe.id)).then(result => {
         this.$bvModal.show(`modal-share-link_${this.modal_id}`)

vue/webpack-stats.json

@@ -5,6 +5,10 @@
       "name": "../../templates/sw.js",
       "path": "..\\..\\templates\\sw.js"
     },
+    "js/chunk-2d0da313.js": {
+      "name": "js/chunk-2d0da313.js",
+      "path": "js\\chunk-2d0da313.js"
+    },
     "css/chunk-vendors.css": {
       "name": "css/chunk-vendors.css",
       "path": "css\\chunk-vendors.css"