ical export and tooltips for new meal plan

cookbook/templates/meal_plan_new.html

@@ -27,6 +27,8 @@
         window.IMAGE_PLACEHOLDER = "{% static 'assets/recipe_no_image.svg' %}"
 
         window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
+
+        window.ICAL_URL = '{% url 'api_get_plan_ical' 12345 6789 %}'
     </script>
 
     {% render_bundle 'meal_plan_view' %}

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -23,7 +23,7 @@
                 <meal-plan-calender-header
                     :header-props="headerProps"
                     @input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
-                    @create-new="createEntryClick(new Date())"/>
+                    @create-new="createEntryClick(new Date())" :i-cal-url="iCalUrl"/>
               </template>
             </calendar-view>
           </div>
@@ -152,15 +152,15 @@
 
 <script>
 
+import {BootstrapVue} from 'bootstrap-vue'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import ContextMenu from "@/components/ContextMenu/ContextMenu";
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
 import "vue-simple-calendar/static/css/default.css"
 import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
 import Vue from "vue";
-import {BootstrapVue} from "bootstrap-vue";
 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";
@@ -224,7 +224,8 @@ export default {
       },
       current_period: null,
       entryEditing: {},
-      edit_modal_show: false
+      edit_modal_show: false,
+      ical_url: window.ICAL_URL
     }
   },
   computed: {
@@ -276,6 +277,11 @@ export default {
         return "1.6rem"
       }
     },
+    iCalUrl() {
+      let start = moment(this.current_period.periodStart).format('YYYY-MM-DD')
+      let end = moment(this.current_period.periodEnd).format('YYYY-MM-DD')
+      return this.ical_url.replace(/12345/, start).replace(/6789/, end)
+    }
   },
   mounted() {
     this.$nextTick(function () {

vue/src/components/MealPlanCalenderHeader.vue

@@ -42,9 +42,10 @@
     <div class="periodLabel">
       <slot name="label">{{ headerProps.periodLabel }}</slot>
     </div>
-    <div class="actionArea d-none d-sm-flex">
-      <button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i></button>
-      <span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
+    <div class="actionArea">
+      <button class="btn btn-secondary ical-button pt-1 pb-1 pl-3 pr-3 text-body" @click="exportiCal" v-b-tooltip.hover :title="$t('Export_As_ICal')"><i class="fas fa-calendar"></i></button>
+      <button class="btn btn-success plus-button pt-1 pb-1 pl-3 pr-3 mr-1 ml-1 text-body" @click="$emit('create-new')" v-b-tooltip.hover :title="$t('Create_Meal_Plan_Entry')"><i class="fas fa-plus"></i></button>
+      <span class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex" @drop.prevent="onDeleteDrop($event)"
             @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i
           class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
     </div>
@@ -62,8 +63,12 @@ export default {
     previousPeriodLabel: {type: String, default: "<"},
     nextPeriodLabel: {type: String, default: ">"},
     nextYearLabel: {type: String, default: ">>"},
+    iCalUrl: {type: String, default: ""},
   },
   methods: {
+    exportiCal() {
+      window.open(this.iCalUrl)
+    },
     onInput(d) {
       this.$emit("input", d)
     },
@@ -108,17 +113,20 @@ export default {
   font-size: 1.5em;
 }
 
-.plus-button {
-  border-style: dotted;
+.ical-button {
   margin-left: auto;
   order: 1;
   user-select: none
 }
 
+.plus-button {
+  order: 2;
+  user-select: none
+}
+
 .delete-area {
   border-style: dotted;
-  margin-left: auto;
-  order: 2;
+  order: 3;
   user-select: none
 }
 

vue/src/components/MealPlanCard.vue

@@ -4,7 +4,7 @@
        @dragstart="onDragItemStart(value, $event)"
        @click="onClickItem(value, $event)"
        :aria-grabbed="value == currentDragItem"
-       :class="value.classes" :title="title"
+       :class="value.classes"
        @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}`">
@@ -24,24 +24,26 @@
             </button>
           </div>
         </div>
-
       </a>
     </div>
     <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>
-    <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>
+    <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>
     </div>
     <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" v-if="entry.entry.meal_type.icon != null">{{
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left
+              :title=" entry.entry.meal_type.name">{{
             entry.entry.meal_type.icon
           }}</span>
-        <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null">❓</span>
+        <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left
+              :title=" entry.entry.meal_type.name">❓</span>
       </div>
       <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
         <span class="font-light">{{ title }}</span>

vue/src/locales/en.json

@@ -186,5 +186,6 @@
   "Meal_Type_Required": "Meal type is required",
   "Title_or_Recipe_Required": "Title or recipe selection required",
   "Color": "Color",
-  "New_Meal_Type": "New Meal type"
+  "New_Meal_Type": "New Meal type",
+  "Export_As_ICal": "Export current period to .ical format"
 }