ical export and tooltips for new meal plan

This commit is contained in:
Kaibu 2021-10-17 15:11:30 +02:00
parent a9d3267ca3
commit 2e2b79c093
5 changed files with 36 additions and 17 deletions

View File

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

View File

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

View File

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

View File

@ -4,7 +4,7 @@
@dragstart="onDragItemStart(value, $event)" @dragstart="onDragItemStart(value, $event)"
@click="onClickItem(value, $event)" @click="onClickItem(value, $event)"
:aria-grabbed="value == currentDragItem" :aria-grabbed="value == currentDragItem"
:class="value.classes" :title="title" :class="value.classes"
@contextmenu.prevent="$emit('open-context-menu', $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" <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed"
:style="`background-color: ${background_color}`"> :style="`background-color: ${background_color}`">
@ -24,24 +24,26 @@
</button> </button>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`"> <div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
<span class="font-light">{{ title }}</span> <span class="font-light">{{ title }}</span>
</div> </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="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" <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
:style="`background-color: ${background_color}`"> :style="`background-color: ${background_color}`">
<p>{{ entry.entry.note }}</p> <p>{{ entry.entry.note }}</p>
</div> </div>
<div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`"> <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
<div class="col-2"> <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 entry.entry.meal_type.icon
}}</span> }}</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>
<div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`"> <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
<span class="font-light">{{ title }}</span> <span class="font-light">{{ title }}</span>

View File

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