new meal type edit
This commit is contained in:
parent
38c0d01dc1
commit
4b1443a705
1
.gitignore
vendored
1
.gitignore
vendored
@ -83,3 +83,4 @@ vue/yarn.lock
|
|||||||
vetur.config.js
|
vetur.config.js
|
||||||
cookbook/static/vue
|
cookbook/static/vue
|
||||||
vue/webpack-stats.json
|
vue/webpack-stats.json
|
||||||
|
cookbook/templates/sw.js
|
||||||
|
File diff suppressed because one or more lines are too long
@ -22,7 +22,8 @@
|
|||||||
<template #header="{ headerProps }">
|
<template #header="{ headerProps }">
|
||||||
<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())"/>
|
||||||
</template>
|
</template>
|
||||||
</calendar-view>
|
</calendar-view>
|
||||||
</div>
|
</div>
|
||||||
@ -67,10 +68,57 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<h5>{{ $t('Meal_Types') }}</h5>
|
<h5>{{ $t('Meal_Types') }}</h5>
|
||||||
<b-form>
|
<div>
|
||||||
|
<draggable :list="meal_types" group="meal_types"
|
||||||
</b-form>
|
:empty-insert-threshold="10" handle=".handle" @sort="sortMealTypes()">
|
||||||
<recipe-card :recipe="recipe_viewed" v-if="false"></recipe-card>
|
<b-card no-body class="mt-1" v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id">
|
||||||
|
<b-card-header class="p-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2 handle">
|
||||||
|
<button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v "></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<h5>{{ meal_type.icon }} {{ meal_type.name }}<span class="float-right text-primary"><i
|
||||||
|
class="fa" v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
|
||||||
|
@click="editOrSaveMealType(index)"
|
||||||
|
aria-hidden="true"></i></span></h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-card-header>
|
||||||
|
<b-card-body class="p-4" v-if="meal_type.editing">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>{{ $t('Name') }}</label>
|
||||||
|
<input class="form-control"
|
||||||
|
placeholder="Name" v-model="meal_type.name">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<emoji-input :field="'icon'" :label="$t('Icon')" :value="meal_type.icon"></emoji-input>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>{{ $t('Color') }}</label>
|
||||||
|
<input class="form-control" type="color"
|
||||||
|
name="Name" :value="meal_type.color" @change="meal_type.color = $event.target.value">
|
||||||
|
</div>
|
||||||
|
<b-form-checkbox
|
||||||
|
id="checkbox-1"
|
||||||
|
v-model="meal_type.default"
|
||||||
|
name="default_checkbox"
|
||||||
|
class="mb-2">
|
||||||
|
{{ $t('Default') }}
|
||||||
|
</b-form-checkbox>
|
||||||
|
<button class="btn btn-danger" @click="deleteMealType(index)">{{ $t('Delete') }}</button>
|
||||||
|
<button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">{{
|
||||||
|
$t('Save')
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</b-card-body>
|
||||||
|
</b-card>
|
||||||
|
</draggable>
|
||||||
|
<button class="btn btn-success float-right mt-1" @click="newMealType"><i class="fas fa-plus"></i>
|
||||||
|
{{ $t('New_Meal_Type') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</b-tab>
|
</b-tab>
|
||||||
@ -119,6 +167,8 @@ import {ApiMixin, StandardToasts} from "@/utils/utils";
|
|||||||
import MealPlanEditModal from "../../components/MealPlanEditModal";
|
import MealPlanEditModal from "../../components/MealPlanEditModal";
|
||||||
import VueCookies from "vue-cookies";
|
import VueCookies from "vue-cookies";
|
||||||
import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader";
|
import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader";
|
||||||
|
import EmojiInput from "../../components/Modals/EmojiInput";
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
|
||||||
Vue.prototype.moment = moment
|
Vue.prototype.moment = moment
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
@ -131,11 +181,12 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
MealPlanEditModal,
|
MealPlanEditModal,
|
||||||
MealPlanCard,
|
MealPlanCard,
|
||||||
RecipeCard,
|
|
||||||
CalendarView,
|
CalendarView,
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
ContextMenuItem,
|
ContextMenuItem,
|
||||||
MealPlanCalenderHeader
|
MealPlanCalenderHeader,
|
||||||
|
EmojiInput,
|
||||||
|
draggable
|
||||||
},
|
},
|
||||||
mixins: [CalendarMathMixin, ApiMixin],
|
mixins: [CalendarMathMixin, ApiMixin],
|
||||||
data: function () {
|
data: function () {
|
||||||
@ -171,6 +222,7 @@ export default {
|
|||||||
title_placeholder: this.$t('Title')
|
title_placeholder: this.$t('Title')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
current_period: null,
|
||||||
entryEditing: {},
|
entryEditing: {},
|
||||||
edit_modal_show: false
|
edit_modal_show: false
|
||||||
}
|
}
|
||||||
@ -231,6 +283,7 @@ export default {
|
|||||||
this.settings = Object.assign({}, this.settings, this.$cookies.get(SETTINGS_COOKIE_NAME))
|
this.settings = Object.assign({}, this.settings, this.$cookies.get(SETTINGS_COOKIE_NAME))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
this.$root.$on('change', this.updateEmoji);
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
settings: {
|
settings: {
|
||||||
@ -241,6 +294,69 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
newMealType() {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.createMealType({name: "Mealtype"}).then(e => {
|
||||||
|
this.periodChangedCallback(this.current_period)
|
||||||
|
}).catch(error => {
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.refreshMealTypes()
|
||||||
|
},
|
||||||
|
sortMealTypes() {
|
||||||
|
this.meal_types.forEach(function (element, index) {
|
||||||
|
element.order = index
|
||||||
|
});
|
||||||
|
let updated = 0
|
||||||
|
this.meal_types.forEach((meal_type) => {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.updateMealType(meal_type.id, meal_type).then(e => {
|
||||||
|
if (updated === (this.meal_types.length - 1)) {
|
||||||
|
this.periodChangedCallback(this.current_period)
|
||||||
|
} else {
|
||||||
|
updated++
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
editOrSaveMealType(index) {
|
||||||
|
let meal_type = this.meal_types[index]
|
||||||
|
if (meal_type.editing) {
|
||||||
|
this.$set(this.meal_types[index], 'editing', false)
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.updateMealType(this.meal_types[index].id, this.meal_types[index]).then(e => {
|
||||||
|
this.periodChangedCallback(this.current_period)
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
|
||||||
|
}).catch(error => {
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$set(this.meal_types[index], 'editing', true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteMealType(index) {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.destroyMealType(this.meal_types[index].id).then(e => {
|
||||||
|
this.periodChangedCallback(this.current_period)
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
|
||||||
|
}).catch(error => {
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
updateEmoji: function (field, value) {
|
||||||
|
this.meal_types.forEach((meal_type) => {
|
||||||
|
if (meal_type.editing) {
|
||||||
|
meal_type.icon = value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
editEntry(edit_entry) {
|
editEntry(edit_entry) {
|
||||||
if (edit_entry.id !== -1) {
|
if (edit_entry.id !== -1) {
|
||||||
this.plan_entries.forEach((entry, index) => {
|
this.plan_entries.forEach((entry, index) => {
|
||||||
@ -322,6 +438,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
periodChangedCallback(date) {
|
periodChangedCallback(date) {
|
||||||
|
this.current_period = date
|
||||||
let apiClient = new ApiApiFactory()
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
apiClient.listMealPlans({
|
apiClient.listMealPlans({
|
||||||
@ -338,6 +455,9 @@ export default {
|
|||||||
let apiClient = new ApiApiFactory()
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
apiClient.listMealTypes().then(result => {
|
apiClient.listMealTypes().then(result => {
|
||||||
|
result.data.forEach((meal_type) => {
|
||||||
|
meal_type.editing = false
|
||||||
|
})
|
||||||
this.meal_types = result.data
|
this.meal_types = result.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -371,6 +491,18 @@ export default {
|
|||||||
entry: plan_entry
|
entry: plan_entry
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
hover: {
|
||||||
|
inserted: function (el) {
|
||||||
|
el.addEventListener('mouseenter', () => {
|
||||||
|
el.classList.add("shadow")
|
||||||
|
});
|
||||||
|
el.addEventListener('mouseleave', () => {
|
||||||
|
el.classList.remove("shadow")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -43,7 +43,8 @@
|
|||||||
<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 d-none d-sm-flex">
|
||||||
<span class="delete-area text-danger p-1 mr-2" @drop.prevent="onDeleteDrop($event)"
|
<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)"
|
||||||
@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>
|
||||||
@ -107,6 +108,13 @@ export default {
|
|||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.plus-button {
|
||||||
|
border-style: dotted;
|
||||||
|
margin-left: auto;
|
||||||
|
order: 1;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
.delete-area {
|
.delete-area {
|
||||||
border-style: dotted;
|
border-style: dotted;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<b-form-group
|
<b-form-group
|
||||||
v-bind:label="label"
|
v-bind:label="label"
|
||||||
class="mb-3">
|
class="mb-3">
|
||||||
<twemoji-textarea
|
<twemoji-textarea
|
||||||
:ref="'_edit_' + id"
|
:ref="'_edit_' + id"
|
||||||
:initialContent="value"
|
:initialContent="value"
|
||||||
:emojiData="emojiDataAll"
|
:emojiData="emojiDataAll"
|
||||||
:emojiGroups="emojiGroups"
|
:emojiGroups="emojiGroups"
|
||||||
triggerType="hover"
|
triggerType="hover"
|
||||||
recentEmojisFeat="true"
|
:recentEmojisFeat="true"
|
||||||
recentEmojisStorage="local"
|
recentEmojisStorage="local"
|
||||||
@contentChanged="setIcon"
|
@contentChanged="setIcon"
|
||||||
/>
|
/>
|
||||||
@ -59,7 +59,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
prepareEmoji: function() {
|
prepareEmoji: function() {
|
||||||
this.$refs['_edit_' + this.id].addText(this.this_item.icon || '');
|
this.$refs['_edit_' + this.id].addText(this.this_item.icon || '');
|
||||||
this.$refs['_edit_' + this.id].blur()
|
this.$refs['_edit_' + this.id].blur()
|
||||||
document.getElementById('btn-emoji-default').disabled = true;
|
document.getElementById('btn-emoji-default').disabled = true;
|
||||||
},
|
},
|
||||||
|
@ -181,5 +181,7 @@
|
|||||||
"Clone": "Clone",
|
"Clone": "Clone",
|
||||||
"Drag_Here_To_Delete": "Drag here to delete",
|
"Drag_Here_To_Delete": "Drag here to delete",
|
||||||
"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",
|
||||||
|
"New_Meal_Type": "New Meal type"
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user