meal plan refactor progress

- added paginated loading
- tab panes
- default meal type selection
- image placeholder
- drang and drop delete area

vue/src/components/MealPlanCard.vue

@@ -5,7 +5,7 @@
        @click="onClickItem(value, $event)"
        :aria-grabbed="value == currentDragItem"
        :class="value.classes" :title="title"
-       @contextmenu.prevent="$parent.$parent.$refs.menu.open($event, value)">
+       @contextmenu.prevent="$emit('open-context-menu', $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">{{
@@ -20,7 +20,7 @@
           <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>
+                    @click.stop="$emit('open-context-menu', $event, value)"><i class="fas fa-ellipsis-v fa-lg"></i>
             </button>
           </div>
         </div>
@@ -31,6 +31,7 @@
       <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>
+    <b-img fluid class="card-img-bottom" :src="image_placeholder" v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
     <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
          :style="`background-color: ${background_color}`">
       <p>{{ entry.entry.note }}</p>
@@ -63,7 +64,8 @@ export default {
   data: function () {
     return {
       dateSelectionOrigin: null,
-      currentDragItem: null
+      currentDragItem: null,
+      image_placeholder: window.IMAGE_PLACEHOLDER
     }
   },
   computed: {