cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

meal plan context menu added, further progress

Browse Source
This commit is contained in:
Kaibu
2021-09-22 20:03:03 +02:00
parent 2012ef9e46
commit 5c85369120
23 changed files with 442 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
vue/src/components/ContextMenu/ContextMenu.vue Normal file
View File

@ -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>

16
vue/src/components/ContextMenu/ContextMenuItem.vue Normal file
View File

@ -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>

57
vue/src/components/MealPlanCard.vue
View File

@ -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
},
},

47
vue/src/components/MealPlanCardContextMenu.vue
View File

@ -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>

67
vue/src/components/MealPlanEditModal.vue
View File

@ -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) {