new meal planner basic features implemented

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: {