new meal planner basic features implemented

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -49,7 +49,8 @@
           <template #item="{ value, weekStartDate, top }">
             <meal-plan-card :value="value" :week-start-date="weekStartDate" :top="top" :detailed="detailed_items"
                             :item_height="item_height"
-                            @move-left="moveLeft(value)" @move-right="moveRight(value)"/>
+                            @move-left="moveEntryLeft(value)" @move-right="moveEntryRight(value)"
+                            @delete="deleteEntry(value)"/>
           </template>
 
           <template #header="{ headerProps }">
@@ -60,6 +61,8 @@
         </calendar-view>
       </div>
     </div>
+    <meal-plan-edit-modal :entry="entryEditing" :entryEditing_initial="entryEditing_initial"
+                          :edit_modal_show="edit_modal_show" @save-entry="editEntry"></meal-plan-edit-modal>
   </div>
 </template>
 
@@ -73,7 +76,8 @@ import {ApiApiFactory} from "../../utils/openapi/api";
 import RecipeCard from "../../components/RecipeCard";
 import MealPlanCard from "../../components/MealPlanCard";
 import moment from 'moment'
-import {StandardToasts} from "../../utils/utils";
+import {ApiMixin, StandardToasts} from "../../utils/utils";
+import MealPlanEditModal from "../../components/MealPlanEditModal";
 
 Vue.prototype.moment = moment
 Vue.use(BootstrapVue)
@@ -81,12 +85,13 @@ Vue.use(BootstrapVue)
 export default {
   name: "MealPlanView",
   components: {
+    MealPlanEditModal,
     MealPlanCard,
     RecipeCard,
     CalendarView,
     CalendarViewHeader
   },
-  mixins: [CalendarMathMixin],
+  mixins: [CalendarMathMixin, ApiMixin],
   data: function () {
     return {
       showDate: new Date(),
@@ -105,10 +110,39 @@ export default {
           value: 'month'
         }, {text: this.$t('Year'), value: 'year'}],
         displayPeriodCount: [1, 2, 3],
-      }
+        entryEditing: {
+          date: null,
+          id: -1,
+          meal_type: null,
+          meal_type_name: null,
+          note: "",
+          note_markdown: "",
+          recipe: null,
+          servings: 1,
+          shared: [],
+          title: '',
+          title_placeholder: this.$t('Title')
+        }
+      },
+      entryEditing: {},
+      edit_modal_show: false
     }
   },
   computed: {
+    modal_title: function () {
+      if (this.entryEditing_initial.length === 0) {
+        return this.$t('CreateMealPlanEntry')
+      } else {
+        return this.$t('EditMealPlanEntry')
+      }
+    },
+    entryEditing_initial: function () {
+      if (this.entryEditing.recipe != null) {
+        return [this.entryEditing.recipe]
+      } else {
+        return []
+      }
+    },
     plan_items: function () {
       let items = []
       this.plan_entries.forEach((entry) => {
@@ -138,6 +172,18 @@ export default {
     },
   },
   methods: {
+    editEntry(edit_entry) {
+      if (edit_entry.id !== -1) {
+        this.plan_entries.forEach((entry, index) => {
+          if (entry.id === edit_entry.id) {
+            this.$set(this.plan_entries, index, edit_entry)
+            this.saveEntry(this.plan_entries[index])
+          }
+        })
+      } else {
+        this.createEntry(edit_entry)
+      }
+    },
     setShowDate(d) {
       this.showDate = d;
     },
@@ -145,8 +191,9 @@ export default {
       console.log(data)
     },
     createEntryClick(data) {
-
-      console.log(data)
+      this.entryEditing = this.options.entryEditing
+      this.entryEditing.date = moment(data).format('YYYY-MM-DD')
+      this.$bvModal.show(`edit-modal`)
     },
     findEntry(id) {
       return this.plan_entries.filter(entry => {
@@ -161,7 +208,7 @@ export default {
         }
       })
     },
-    moveLeft(data) {
+    moveEntryLeft(data) {
       this.plan_entries.forEach((entry) => {
         if (entry.id === data.id) {
           entry.date = moment(entry.date).subtract(1, 'd')
@@ -169,7 +216,7 @@ export default {
         }
       })
     },
-    moveRight(data) {
+    moveEntryRight(data) {
       this.plan_entries.forEach((entry) => {
         if (entry.id === data.id) {
           entry.date = moment(entry.date).add(1, 'd')
@@ -177,10 +224,27 @@ export default {
         }
       })
     },
+    deleteEntry(data) {
+      this.plan_entries.forEach((entry, index, list) => {
+        if (entry.id === data.id) {
+          let apiClient = new ApiApiFactory()
+
+          apiClient.destroyMealPlan(entry.id).then(e => {
+            list.splice(index, 1)
+          }).catch(error => {
+            StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
+          })
+        }
+      })
+    },
     entryClick(data) {
-      console.log(data)
       let entry = this.findEntry(data.id)
-      this.recipe_viewed = entry.recipe
+      this.$bvModal.show(`edit-modal`)
+      this.entryEditing = entry
+      this.entryEditing.date = moment(entry.date).format('YYYY-MM-DD')
+      if (this.entryEditing.recipe != null) {
+        this.entryEditing.title_placeholder = this.entryEditing.recipe.name
+      }
     },
     refreshData() {
       let apiClient = new ApiApiFactory()
@@ -201,6 +265,17 @@ export default {
         StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
       })
     },
+    createEntry(entry) {
+      entry.date = moment(entry.date).format("YYYY-MM-DD")
+
+      let apiClient = new ApiApiFactory()
+
+      apiClient.createMealPlan(entry).catch(error => {
+        StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
+      }).then((entry_result) => {
+        this.plan_entries.push(entry_result.data)
+      })
+    },
     buildItem(plan_entry) {
       return {
         id: plan_entry.id,
@@ -235,4 +310,8 @@ export default {
 .cv-day.draghover {
   box-shadow: inset 0 0 0.2em 0.2em grey !important;
 }
+
+.modal-backdrop {
+  opacity: 0.5;
+}
 </style>

vue/src/components/MealPlanCard.vue

@@ -12,15 +12,15 @@
          v-if="detailed">
       <a>
         <meal-plan-card-context-menu :entry="entry.entry" @move-left="$emit('move-left')"
-                                     @move-right="$emit('move-right')"></meal-plan-card-context-menu>
+                                     @move-right="$emit('move-right')" @delete="$emit('delete')"></meal-plan-card-context-menu>
       </a>
     </div>
     <div class="card-header p-1 text-center" v-if="detailed">
       <span class="font-light">{{ title }}</span>
     </div>
-    <b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="isRecipe && detailed"></b-img>
-    <div class="card-body p-1" v-if="!isRecipe && detailed">
-      {{ entry.entry.note }}
+    <b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
+    <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null">
+      <p>{{ entry.entry.note }}</p>
     </div>
     <div class="row p-1 flex-nowrap" v-if="!detailed">
       <div class="col-2">
@@ -57,15 +57,15 @@ export default {
       return this.value.originalItem
     },
     title: function () {
-      if (this.isRecipe) {
-        return this.entry.entry.recipe_name
-      } else {
+      if (this.entry.entry.title != null && this.entry.entry.title !== '') {
         return this.entry.entry.title
+      } else {
+        return this.entry.entry.recipe_name
       }
     },
-    isRecipe: function () {
-      return ('recipe_name' in this.entry.entry)
-    },
+    hasRecipe: function () {
+      return this.entry.entry.recipe != null;
+    }
   },
   methods: {
     onClickItem(calendarItem, windowEvent) {

vue/src/components/MealPlanCardContextMenu.vue

@@ -4,11 +4,23 @@
       <template #button-content>
         <i class="fas fa-ellipsis-v fa-lg"></i>
       </template>
-      <b-dropdown-form class="p-1">
-        <b-button variant="primary" size="sm" @click="moveLeft" class="float-left"><i
+      <b-dropdown-form class="p-1" form-class="m-0">
+        <div class="row no-gutters">
+          <div class="col-md-6 text-center">
+            <b-button variant="danger" size="sm" @click="deleteEntry"><i
+            class="fas fa-trash fa-lg"></i></b-button>
+          </div>
+        </div>
+        <div class="row pt-1  no-gutters">
+          <div class="col-md-6 text-center">
+            <b-button variant="primary" size="sm" @click="moveLeft"><i
             class="fas fa-arrow-left fa-lg"></i></b-button>
-        <b-button variant="primary" size="sm" @click="moveRight" class="float-right"><i
+          </div>
+          <div class="col-md-6 text-center">
+            <b-button variant="primary" size="sm" @click="moveRight"><i
             class="fas fa-arrow-right fa-lg"></i></b-button>
+          </div>
+        </div>
       </b-dropdown-form>
     </b-dropdown>
   </div>
@@ -26,6 +38,9 @@ export default {
     },
     moveRight: function () {
       this.$emit('move-right')
+    },
+    deleteEntry: function () {
+      this.$emit('delete')
     }
   }
 }

vue/src/components/MealPlanEditModal.vue

@@ -0,0 +1,139 @@
+<template>
+  <b-modal id="edit-modal" size="lg" :title="modal_title" hide-footer aria-label="">
+    <div class="row">
+      <div class="col col-md-12">
+        <div class="row">
+          <div class="col-md-9">
+            <b-input-group>
+
+              <b-form-input id="TitleInput" v-model="entryEditing.title"
+                            :placeholder="entryEditing.title_placeholder"></b-form-input>
+              <b-input-group-append>
+                <b-button variant="primary" @click="entryEditing.title = ''"><i class="fa fa-eraser"></i></b-button>
+              </b-input-group-append>
+            </b-input-group>
+            <small tabindex="-1" class="form-text text-muted">{{ $t("Title") }}</small>
+          </div>
+          <div class="col-md-3">
+            <input type="date" id="DateInput" class="form-control" v-model="entryEditing.date">
+            <small tabindex="-1" class="form-text text-muted">{{ $t("Date") }}</small>
+          </div>
+        </div>
+        <div class="row mt-3">
+          <div class="col-12 col-lg-6 col-xl-6">
+            <b-form-group>
+              <generic-multiselect
+                  @change="selectRecipe"
+                  :initial_selection="entryEditing_initial"
+                  :label="'name'"
+                  :model="Models.RECIPE"
+                  style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                  v-bind:placeholder="$t('Recipe')" :limit="10"
+                  :multiple="false"></generic-multiselect>
+              <small tabindex="-1" class="form-text text-muted">{{ $t("Recipe") }}</small>
+            </b-form-group>
+            <b-input-group>
+              <b-form-input id="ServingsInput" v-model="entryEditing.servings"
+                            :placeholder="$t('Servings')"></b-form-input>
+            </b-input-group>
+            <small tabindex="-1" class="form-text text-muted">{{ $t("Servings") }}</small>
+            <b-form-group
+                label-for="NoteInput"
+                :description="$t('Note')" class="mt-3">
+              <textarea class="form-control" id="NoteInput" v-model="entryEditing.note"
+                        :placeholder="$t('Note')"></textarea>
+            </b-form-group>
+            <b-form-group>
+              <generic-multiselect required
+                                   @change="selectMealType"
+                                   :label="'name'"
+                                   :model="Models.MEAL_TYPE"
+                                   style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                   v-bind:placeholder="$t('MealType')" :limit="10"
+                                   :multiple="false"></generic-multiselect>
+              <small tabindex="-1" class="form-text text-muted">{{ $t("MealType") }}</small>
+            </b-form-group>
+          </div>
+          <div class="col-lg-6 d-none d-lg-block d-xl-block">
+            <recipe-card :recipe="entryEditing.recipe" v-if="entryEditing.recipe != null"></recipe-card>
+          </div>
+        </div>
+        <b-button class="mt-2 mb-3 ml-md-2" variant="danger">{{ $t('Delete') }}
+        </b-button>
+        <b-button class="mt-2 mb-3 ml-2 float-right" variant="primary" @click="editEntry">{{ $t('Save') }}</b-button>
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+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)
+
+export default {
+  name: "MealPlanEditModal",
+  props: {
+    entry: Object,
+    entryEditing_initial: Array,
+    modal_title: String
+  },
+  mixins: [ApiMixin],
+  components: {
+    GenericMultiselect,
+    RecipeCard
+  },
+  data() {
+    return {
+      entryEditing: {}
+    }
+  },
+  watch: {
+    entry: function () {
+      this.entryEditing = Object.assign({}, this.entry)
+    }
+  },
+  methods: {
+    editEntry() {
+      if(this.entryEditing.meal_type == null) {
+        alert("Need Meal type")
+        return
+      }
+      if(this.entryEditing.recipe == null && this.entryEditing.title === '') {
+        alert("Need title or recipe")
+        return
+      }
+      this.$bvModal.hide(`edit-modal`);
+      this.$emit('save-entry', this.entryEditing)
+    },
+    selectMealType(event) {
+      if (event.val != null) {
+        this.entryEditing.meal_type = event.val.id;
+        this.entryEditing.meal_type_name = event.val.id;
+      } else {
+        this.entryEditing.meal_type = null;
+        this.entryEditing.meal_type_name = ""
+      }
+    },
+    selectRecipe(event) {
+      if (event.val != null) {
+        this.entryEditing.recipe = event.val;
+        this.entryEditing.title_placeholder = this.entryEditing.recipe.name
+        this.entryEditing.servings = this.entryEditing.recipe.servings
+      } else {
+        this.entryEditing.recipe = null;
+        this.entryEditing.title_placeholder = ""
+        this.entryEditing.servings = 1
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/components/RecipeCard.vue

@@ -102,11 +102,6 @@ export default {
     footer_text: String,
     footer_icon: String
   },
-  data() {
-    return {
-      recipe_image: '',
-    }
-  },
   computed: {
     detailed: function () {
       return this.recipe.steps !== undefined;
@@ -117,14 +112,13 @@ export default {
       } else {
         return 120
       }
-    }
-  },
-  mounted() {
-
-    if (this.recipe == null || this.recipe.image === null) {
-      this.recipe_image = window.IMAGE_PLACEHOLDER
-    } else {
-      this.recipe_image = this.recipe.image
+    },
+    recipe_image: function () {
+      if (this.recipe == null || this.recipe.image === null) {
+        return window.IMAGE_PLACEHOLDER
+      } else {
+        return this.recipe.image
+      }
     }
   },
   methods: {

vue/src/utils/models.js

@@ -370,6 +370,15 @@ export class Models {
 
     }
 
+    static MEAL_TYPE = {
+        'name': i18n.t('Meal_Type'),
+        'apiName': 'MealType',
+        'list': {
+            'params': ['filter_list'],
+        },
+
+    }
+
     static MEAL_PLAN = {
         'name': i18n.t('Meal_Plan'),
         'apiName': 'MealPlan',