meal plan context menu added, further progress

2026-01-01 04:10:06 -05:00 · 2021-09-22 20:03:03 +02:00
parent 2012ef9e46
commit 5c85369120
23 changed files with 442 additions and 219 deletions
--- a/vue/package.json
+++ b/vue/package.json
@@ -11,6 +11,7 @@
    "@babel/eslint-parser": "^7.13.14",
    "@kangc/v-md-editor": "^1.7.7",
    "@kevinfaguiar/vue-twemoji-picker": "^5.7.4",
+    "@popperjs/core": "^2.10.1",
    "@riophae/vue-treeselect": "^0.4.0",
    "axios": "^0.21.1",
    "bootstrap-vue": "^2.21.2",
@@ -20,6 +21,7 @@
    "prismjs": "^1.24.1",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
+    "vue-click-outside": "^1.1.0",
    "vue-clickaway": "^2.2.2",
    "vue-cookies": "^1.7.4",
    "vue-i18n": "^8.24.4",
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -1,7 +1,32 @@
 <template>
  <div>
    <div class="row">
-      <div class="col-md-2 calender-options">
+      <div class="col-12 calender-parent">
+        <calendar-view
+            :show-date="showDate" :enable-date-selection="true" class="theme-default"
+            @date-selection-finish="createEntryRange" :items="plan_items"
+            :display-period-uom="settings.displayPeriodUom"
+            :period-changed-callback="refreshData" :enable-drag-drop="true" :item-content-height="item_height"
+            @click-date="createEntryClick" @drop-on-date="moveEntry"
+            :display-period-count="settings.displayPeriodCount"
+            :starting-day-of-week="settings.startingDayOfWeek"
+            :display-week-numbers="settings.displayWeekNumbers">
+          <template #item="{ value, weekStartDate, top }">
+            <meal-plan-card :value="value" :week-start-date="weekStartDate" :top="top" :detailed="detailed_items"
+                            :item_height="item_height" @dragstart="dragged_item = value" @click-item="entryClick"/>
+          </template>
+
+          <template #header="{ headerProps }">
+            <calendar-view-header
+                :header-props="headerProps"
+                @input="setShowDate"/>
+          </template>
+        </calendar-view>
+      </div>
+    </div>
+    <div class="row mt-3">
+      <div class="col-3 calender-options">
+        <h5>{{ $t('CalenderSettings') }}</h5>
        <b-form>
          <b-form-group id="UomInput"
                        :label="$t('Period')"
@@ -34,53 +59,63 @@
            ></b-form-select>
          </b-form-group>
        </b-form>
+      </div>
+      <div class="col-6">
+        <h5>{{ $t('MealTypes') }}</h5>
+        <b-form>
+
+        </b-form>
        <recipe-card :recipe="recipe_viewed" v-if="false"></recipe-card>
      </div>
-      <div class="col-md-10 calender-parent">
-        <calendar-view
-            :show-date="showDate" :enable-date-selection="true" class="theme-default"
-            @date-selection-finish="createEntryRange" :items="plan_items"
-            :display-period-uom="settings.displayPeriodUom"
-            :period-changed-callback="refreshData" :enable-drag-drop="true" :item-content-height="item_height"
-            @click-item="entryClick" @click-date="createEntryClick" @drop-on-date="moveEntry"
-            :display-period-count="settings.displayPeriodCount"
-            :starting-day-of-week="settings.startingDayOfWeek"
-            :display-week-numbers="settings.displayWeekNumbers">
-          <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="moveEntryLeft(value)" @move-right="moveEntryRight(value)"
-                            @delete="deleteEntry(value)"/>
-          </template>
-
-          <template #header="{ headerProps }">
-            <calendar-view-header
-                :header-props="headerProps"
-                @input="setShowDate"/>
-          </template>
-        </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>
+    <ContextMenu ref="menu">
+      <template #menu="{ contextData }">
+        <ContextMenuItem @click="$refs.menu.close();openEntryEdit(contextData.originalItem.entry)">
+          <a class="dropdown-item p-2" href="#"><i class="fas fa-pen"></i> {{ $t("Edit") }}</a>
+        </ContextMenuItem>
+        <ContextMenuItem @click="$refs.menu.close();moveEntryLeft(contextData)">
+          <a class="dropdown-item p-2" href="#"><i class="fas fa-arrow-left"></i> {{ $t("DayBack") }}</a>
+        </ContextMenuItem>
+        <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)">
+          <a class="dropdown-item p-2" href="#"><i class="fas fa-copy"></i> {{ $t("Clone") }}</a>
+        </ContextMenuItem>
+        <ContextMenuItem @click="$refs.menu.close();deleteEntry(contextData)">
+          <a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a>
+        </ContextMenuItem>
+      </template>
+    </ContextMenu>
+    <meal-plan-edit-modal :entry="entryEditing" :entryEditing_initial_recipe="entryEditing_initial_recipe"
+                          :entry-editing_initial_meal_type="entryEditing_initial_meal_type"
+                          :edit_modal_show="edit_modal_show" @save-entry="editEntry"
+                          @delete-entry="deleteEntry"></meal-plan-edit-modal>
  </div>
 </template>

 <script>

+
+import ContextMenu from "@/components/ContextMenu/ContextMenu";
+import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
 import "vue-simple-calendar/static/css/default.css"
 import {CalendarView, CalendarViewHeader, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
 import Vue from "vue";
 import {BootstrapVue} from "bootstrap-vue";
-import {ApiApiFactory} from "../../utils/openapi/api";
+import {ApiApiFactory} from "@/utils/openapi/api";
 import RecipeCard from "../../components/RecipeCard";
 import MealPlanCard from "../../components/MealPlanCard";
 import moment from 'moment'
-import {ApiMixin, StandardToasts} from "../../utils/utils";
+import {ApiMixin, StandardToasts} from "@/utils/utils";
 import MealPlanEditModal from "../../components/MealPlanEditModal";
+import VueCookies from "vue-cookies";

 Vue.prototype.moment = moment
 Vue.use(BootstrapVue)
+Vue.use(VueCookies)
+
+let SETTINGS_COOKIE_NAME = 'mealplan_settings'

 export default {
  name: "MealPlanView",
@@ -89,7 +124,9 @@ export default {
    MealPlanCard,
    RecipeCard,
    CalendarView,
-    CalendarViewHeader
+    CalendarViewHeader,
+    ContextMenu,
+    ContextMenuItem
  },
  mixins: [CalendarMathMixin, ApiMixin],
  data: function () {
@@ -103,7 +140,9 @@ export default {
        startingDayOfWeek: 1,
        displayWeekNumbers: true
      },
+      dragged_item: null,
      meal_types: [],
+      current_context_menu_item: null,
      options: {
        displayPeriodUom: [{text: this.$t('Week'), value: 'week'}, {
          text: this.$t('Month'),
@@ -114,7 +153,6 @@ export default {
          date: null,
          id: -1,
          meal_type: null,
-          meal_type_name: null,
          note: "",
          note_markdown: "",
          recipe: null,
@@ -130,19 +168,26 @@ export default {
  },
  computed: {
    modal_title: function () {
-      if (this.entryEditing_initial.length === 0) {
+      if (this.entryEditing.id === -1) {
        return this.$t('CreateMealPlanEntry')
      } else {
        return this.$t('EditMealPlanEntry')
      }
    },
-    entryEditing_initial: function () {
+    entryEditing_initial_recipe: function () {
      if (this.entryEditing.recipe != null) {
        return [this.entryEditing.recipe]
      } else {
        return []
      }
    },
+    entryEditing_initial_meal_type: function () {
+      if (this.entryEditing.meal_type != null) {
+        return [this.entryEditing.meal_type]
+      } else {
+        return []
+      }
+    },
    plan_items: function () {
      let items = []
      this.plan_entries.forEach((entry) => {
@@ -171,6 +216,21 @@ export default {
      }
    },
  },
+  mounted() {
+    this.$nextTick(function () {
+      if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
+        this.settings = Object.assign({}, this.settings, this.$cookies.get(SETTINGS_COOKIE_NAME))
+      }
+    })
+  },
+  watch: {
+    settings: {
+      handler() {
+        this.$cookies.set(SETTINGS_COOKIE_NAME, this.settings, '360d')
+      },
+      deep: true
+    },
+  },
  methods: {
    editEntry(edit_entry) {
      if (edit_entry.id !== -1) {
@@ -193,6 +253,7 @@ export default {
    createEntryClick(data) {
      this.entryEditing = this.options.entryEditing
      this.entryEditing.date = moment(data).format('YYYY-MM-DD')
+      console.log(this.entryEditing)
      this.$bvModal.show(`edit-modal`)
    },
    findEntry(id) {
@@ -200,9 +261,9 @@ export default {
        return entry.id === id
      })[0]
    },
-    moveEntry(data, target_date) {
+    moveEntry(null_object, target_date) {
      this.plan_entries.forEach((entry) => {
-        if (entry.id === data.id) {
+        if (entry.id === this.dragged_item.id) {
          entry.date = target_date
          this.saveEntry(entry)
        }
@@ -217,6 +278,7 @@ export default {
      })
    },
    moveEntryRight(data) {
+      console.log(data)
      this.plan_entries.forEach((entry) => {
        if (entry.id === data.id) {
          entry.date = moment(entry.date).add(1, 'd')
@@ -239,6 +301,9 @@ export default {
    },
    entryClick(data) {
      let entry = this.findEntry(data.id)
+      this.openEntryEdit(entry)
+    },
+    openEntryEdit(entry) {
      this.$bvModal.show(`edit-modal`)
      this.entryEditing = entry
      this.entryEditing.date = moment(entry.date).format('YYYY-MM-DD')
@@ -277,10 +342,12 @@ export default {
      })
    },
    buildItem(plan_entry) {
+      //dirty hack to order items within a day
+      let date = moment(plan_entry.date).add(plan_entry.meal_type.order, 'm')
      return {
        id: plan_entry.id,
-        startDate: plan_entry.date,
-        endDate: plan_entry.date,
+        startDate: date,
+        endDate: date,
        entry: plan_entry
      }
    }
--- a/vue/src/components/ContextMenu/ContextMenu.vue
+++ b/vue/src/components/ContextMenu/ContextMenu.vue
@@ -0,0 +1,127 @@
+<template>
+  <div
+      class="context-menu"
+      ref="popper"
+      v-show="isVisible"
+      tabindex="-1"
+      v-click-outside="close"
+      @contextmenu.capture.prevent>
+    <ul class="dropdown-menu" role="menu">
+      <slot :contextData="contextData" name="menu"/>
+    </ul>
+  </div>
+</template>
+<script>
+import Popper from 'popper.js';
+
+Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false
+import ClickOutside from 'vue-click-outside'
+
+export default {
+  name: "ContextMenu.vue",
+  props: {
+    boundariesElement: {
+      type: String,
+      default: 'body',
+    },
+  },
+  components: {},
+  data() {
+    return {
+      opened: false,
+      contextData: {},
+    };
+  },
+  directives: {
+    ClickOutside,
+  },
+  computed: {
+    isVisible() {
+      return this.opened;
+    },
+  },
+  methods: {
+    open(evt, contextData) {
+      this.opened = true;
+      this.contextData = contextData;
+
+      if (this.popper) {
+        this.popper.destroy();
+      }
+
+      this.popper = new Popper(this.referenceObject(evt), this.$refs.popper, {
+        placement: 'right-start',
+        modifiers: {
+          preventOverflow: {
+            boundariesElement: document.querySelector(this.boundariesElement),
+          },
+        },
+      });
+      this.$nextTick(() => {
+        this.popper.scheduleUpdate();
+      });
+
+    },
+    close() {
+      this.opened = false;
+      this.contextData = null;
+    },
+    referenceObject(evt) {
+      const left = evt.clientX;
+      const top = evt.clientY;
+      const right = left + 1;
+      const bottom = top + 1;
+      const clientWidth = 1;
+      const clientHeight = 1;
+
+      function getBoundingClientRect() {
+        return {
+          left,
+          top,
+          right,
+          bottom,
+        };
+      }
+
+      const obj = {
+        getBoundingClientRect,
+        clientWidth,
+        clientHeight,
+      };
+      return obj;
+    },
+  },
+  beforeUnmount() {
+    if (this.popper !== undefined) {
+      this.popper.destroy();
+    }
+  },
+};
+
+</script>
+
+<style scoped>
+.context-menu {
+  position: fixed;
+  z-index: 999;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px 0 #eee;
+}
+
+.context-menu:focus {
+  outline: none;
+}
+
+.context-menu ul {
+  padding: 0px;
+  margin: 0px;
+}
+
+.dropdown-menu {
+  display: block;
+  position: relative;
+}
+
+</style>
--- a/vue/src/components/ContextMenu/ContextMenuItem.vue
+++ b/vue/src/components/ContextMenu/ContextMenuItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <li @click="$emit('click', $event)" role="presentation">
+    <slot/>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "ContextMenuItem.vue",
+}
+</script>
+
+<style scoped>
+
+</style>
+
--- a/vue/src/components/MealPlanCard.vue
+++ b/vue/src/components/MealPlanCard.vue
@@ -2,29 +2,43 @@
  <div v-hover class="card cv-item meal-plan-card p-0" :key="value.id" :draggable="true"
       :style="`top:${top};height:${item_height}`"
       @dragstart="onDragItemStart(value, $event)"
-       @click.stop="onClickItem(value, $event)"
+       @click="onClickItem(value, $event)"
       :aria-grabbed="value == currentDragItem"
-       :class="value.classes" :title="title">
-    <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed">
-      <span class="font-light">{{ entry.entry.meal_type_name }}</span>
+       :class="value.classes" :title="title"
+       @contextmenu.prevent="$parent.$parent.$refs.menu.open($event, value)">
+    <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed"
+         :style="`background-color: ${background_color}`">
+      <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
+          entry.entry.meal_type.icon
+        }}</span>
+      <span class="font-light">{{ entry.entry.meal_type.name }}</span>
    </div>
    <div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0"
         v-if="detailed">
      <a>
-        <meal-plan-card-context-menu :entry="entry.entry" @move-left="$emit('move-left')"
-                                     @move-right="$emit('move-right')" @delete="$emit('delete')"></meal-plan-card-context-menu>
+        <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>
+          </div>
+        </div>
+
      </a>
    </div>
-    <div class="card-header p-1 text-center" v-if="detailed">
+    <div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
      <span class="font-light">{{ title }}</span>
    </div>
    <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">
+    <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
+         :style="`background-color: ${background_color}`">
      <p>{{ entry.entry.note }}</p>
    </div>
-    <div class="row p-1 flex-nowrap" v-if="!detailed">
+    <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
      <div class="col-2">
-        <span class="font-light text-center">🍔</span>
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
+            entry.entry.meal_type.icon
+          }}</span>
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null">❓</span>
      </div>
      <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
        <span class="font-light">{{ title }}</span>
@@ -34,11 +48,9 @@
 </template>

 <script>
-import MealPlanCardContextMenu from "./MealPlanCardContextMenu";
-
 export default {
  name: "MealPlanCard.vue",
-  components: {MealPlanCardContextMenu},
+  components: {},
  props: {
    value: Object,
    weekStartDate: Date,
@@ -65,15 +77,24 @@ export default {
    },
    hasRecipe: function () {
      return this.entry.entry.recipe != null;
-    }
+    },
+    background_color: function () {
+      if (this.entry.entry.meal_type.color != null && this.entry.entry.meal_type.color !== '') {
+        return this.entry.entry.meal_type.color
+      } else {
+        return "#fff"
+      }
+    },
  },
  methods: {
-    onClickItem(calendarItem, windowEvent) {
-      this.$root.$emit("click-item", calendarItem, windowEvent)
-    },
    onDragItemStart(calendarItem, windowEvent) {
      windowEvent.dataTransfer.setData("text", calendarItem.id.toString())
-      this.$root.$emit("dragUpdate", calendarItem, windowEvent)
+      this.$emit("dragstart", calendarItem, windowEvent)
+      return true
+    },
+    onContextMenuOpen(calendarItem, windowEvent) {
+      windowEvent.dataTransfer.setData("text", calendarItem.id.toString())
+      this.$emit("dragstart", calendarItem, windowEvent)
      return true
    },
  },
--- a/vue/src/components/MealPlanCardContextMenu.vue
+++ b/vue/src/components/MealPlanCardContextMenu.vue
@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <b-dropdown variant="link" toggle-class="text-decoration-none text-body pr-1" right no-caret>
-      <template #button-content>
-        <i class="fas fa-ellipsis-v fa-lg"></i>
-      </template>
-      <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>
-          </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>
-</template>
-
-<script>
-export default {
-  name: 'MealPlanCardContextMenu',
-  props: {
-    entry: Object
-  },
-  methods: {
-    moveLeft: function () {
-      this.$emit('move-left')
-    },
-    moveRight: function () {
-      this.$emit('move-right')
-    },
-    deleteEntry: function () {
-      this.$emit('delete')
-    }
-  }
-}
-</script>
--- a/vue/src/components/MealPlanEditModal.vue
+++ b/vue/src/components/MealPlanEditModal.vue
@@ -3,18 +3,18 @@
    <div class="row">
      <div class="col col-md-12">
        <div class="row">
-          <div class="col-md-9">
+          <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>
+              <b-input-group-append class="d-none d-lg-block">
                <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">
+          <div class="col-6 col-lg-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>
@@ -24,7 +24,7 @@
            <b-form-group>
              <generic-multiselect
                  @change="selectRecipe"
-                  :initial_selection="entryEditing_initial"
+                  :initial_selection="entryEditing_initial_recipe"
                  :label="'name'"
                  :model="Models.RECIPE"
                  style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
@@ -32,35 +32,40 @@
                  :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>
+            <b-form-group class="mt-3">
              <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>
+                                   :multiple="false"
+                                   :initial_selection="entryEditing_initial_meal_type"></generic-multiselect>
              <small tabindex="-1" class="form-text text-muted">{{ $t("MealType") }}</small>
            </b-form-group>
+            <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-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>
          </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 class="row mt-3 mb-3">
+          <div class="col-12">
+            <b-button variant="danger" @click="deleteEntry">{{ $t('Delete') }}
+            </b-button>
+            <b-button class="float-right" variant="primary" @click="editEntry">{{ $t('Save') }}</b-button>
+          </div>
+        </div>
      </div>
    </div>
  </b-modal>
@@ -79,7 +84,8 @@ export default {
  name: "MealPlanEditModal",
  props: {
    entry: Object,
-    entryEditing_initial: Array,
+    entryEditing_initial_recipe: Array,
+    entryEditing_initial_meal_type: Array,
    modal_title: String
  },
  mixins: [ApiMixin],
@@ -93,30 +99,35 @@ export default {
    }
  },
  watch: {
-    entry: function () {
-      this.entryEditing = Object.assign({}, this.entry)
+    entry: {
+      handler() {
+        this.entryEditing = Object.assign({}, this.entry)
+      },
+      deep: true
    }
  },
  methods: {
    editEntry() {
-      if(this.entryEditing.meal_type == null) {
+      if (this.entryEditing.meal_type == null) {
        alert("Need Meal type")
        return
      }
-      if(this.entryEditing.recipe == null && this.entryEditing.title === '') {
+      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)
    },
+    deleteEntry() {
+      this.$bvModal.hide(`edit-modal`);
+      this.$emit('delete-entry', this.entryEditing)
+    },
    selectMealType(event) {
      if (event.val != null) {
-        this.entryEditing.meal_type = event.val.id;
-        this.entryEditing.meal_type_name = event.val.id;
+        this.entryEditing.meal_type = event.val;
      } else {
        this.entryEditing.meal_type = null;
-        this.entryEditing.meal_type_name = ""
      }
    },
    selectRecipe(event) {