cleand up context menu code
This commit is contained in:
parent
1a84a8fe80
commit
d3b71e40c7
@ -54,14 +54,20 @@
|
|||||||
<div class="col-12 col-md-3 calender-options">
|
<div class="col-12 col-md-3 calender-options">
|
||||||
<h5>{{ $t("Planner_Settings") }}</h5>
|
<h5>{{ $t("Planner_Settings") }}</h5>
|
||||||
<b-form>
|
<b-form>
|
||||||
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')" label-for="UomInput">
|
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
|
||||||
<b-form-select id="UomInput" v-model="settings.displayPeriodUom" :options="options.displayPeriodUom"></b-form-select>
|
label-for="UomInput">
|
||||||
|
<b-form-select id="UomInput" v-model="settings.displayPeriodUom"
|
||||||
|
:options="options.displayPeriodUom"></b-form-select>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
<b-form-group id="PeriodInput" :label="$t('Periods')" :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
|
<b-form-group id="PeriodInput" :label="$t('Periods')"
|
||||||
<b-form-select id="PeriodInput" v-model="settings.displayPeriodCount" :options="options.displayPeriodCount"></b-form-select>
|
:description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
|
||||||
|
<b-form-select id="PeriodInput" v-model="settings.displayPeriodCount"
|
||||||
|
:options="options.displayPeriodCount"></b-form-select>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
<b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')" label-for="DaysInput">
|
<b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
|
||||||
<b-form-select id="DaysInput" v-model="settings.startingDayOfWeek" :options="dayNames"></b-form-select>
|
label-for="DaysInput">
|
||||||
|
<b-form-select id="DaysInput" v-model="settings.startingDayOfWeek"
|
||||||
|
:options="dayNames"></b-form-select>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
<b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
|
<b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
|
||||||
<b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
|
<b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
|
||||||
@ -73,19 +79,25 @@
|
|||||||
<div class="col-12 col-md-9 col-lg-6">
|
<div class="col-12 col-md-9 col-lg-6">
|
||||||
<h5>{{ $t("Meal_Types") }}</h5>
|
<h5>{{ $t("Meal_Types") }}</h5>
|
||||||
<div>
|
<div>
|
||||||
<draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" handle=".handle" @sort="sortMealTypes()">
|
<draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10"
|
||||||
<b-card no-body class="mt-1" v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id">
|
handle=".handle" @sort="sortMealTypes()">
|
||||||
|
<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">
|
<b-card-header class="p-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-2 handle">
|
<div class="col-2 handle">
|
||||||
<button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
|
<button type="button" class="btn btn-lg shadow-none"><i
|
||||||
|
class="fas fa-arrows-alt-v"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-10">
|
<div class="col-10">
|
||||||
<h5>
|
<h5>
|
||||||
{{ meal_type.icon }} {{ meal_type.name
|
{{ meal_type.icon }} {{
|
||||||
|
meal_type.name
|
||||||
}}<span class="float-right text-primary"
|
}}<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
|
><i class="fa"
|
||||||
></span>
|
v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
|
||||||
|
@click="editOrSaveMealType(index)" aria-hidden="true"></i
|
||||||
|
></span>
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -93,20 +105,29 @@
|
|||||||
<b-card-body class="p-4" v-if="meal_type.editing">
|
<b-card-body class="p-4" v-if="meal_type.editing">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>{{ $t("Name") }}</label>
|
<label>{{ $t("Name") }}</label>
|
||||||
<input class="form-control" placeholder="Name" v-model="meal_type.name" />
|
<input class="form-control" placeholder="Name" v-model="meal_type.name"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<emoji-input :field="'icon'" :label="$t('Icon')" :value="meal_type.icon"></emoji-input>
|
<emoji-input :field="'icon'" :label="$t('Icon')"
|
||||||
|
:value="meal_type.icon"></emoji-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>{{ $t("Color") }}</label>
|
<label>{{ $t("Color") }}</label>
|
||||||
<input class="form-control" type="color" name="Name" :value="meal_type.color" @change="meal_type.color = $event.target.value" />
|
<input class="form-control" type="color" name="Name"
|
||||||
|
:value="meal_type.color"
|
||||||
|
@change="meal_type.color = $event.target.value"/>
|
||||||
</div>
|
</div>
|
||||||
<b-form-checkbox id="checkbox-1" v-model="meal_type.default" name="default_checkbox" class="mb-2">
|
<b-form-checkbox id="checkbox-1" v-model="meal_type.default"
|
||||||
|
name="default_checkbox" class="mb-2">
|
||||||
{{ $t("Default") }}
|
{{ $t("Default") }}
|
||||||
</b-form-checkbox>
|
</b-form-checkbox>
|
||||||
<button class="btn btn-danger" @click="deleteMealType(index)">{{ $t("Delete") }}</button>
|
<button class="btn btn-danger" @click="deleteMealType(index)">{{
|
||||||
<button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">{{ $t("Save") }}</button>
|
$t("Delete")
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">
|
||||||
|
{{ $t("Save") }}
|
||||||
|
</button>
|
||||||
</b-card-body>
|
</b-card-body>
|
||||||
</b-card>
|
</b-card>
|
||||||
</draggable>
|
</draggable>
|
||||||
@ -127,18 +148,15 @@
|
|||||||
openEntryEdit(contextData.originalItem.entry)
|
openEntryEdit(contextData.originalItem.entry)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pen"></i> {{ $t("Edit") }}</a>
|
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pen"></i> {{
|
||||||
|
$t("Edit")
|
||||||
|
}}</a>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
v-if="contextData.originalItem.entry.recipe != null"
|
v-if="contextData.originalItem.entry.recipe != null"
|
||||||
@click="
|
@click="$refs.menu.close();openRecipe(contextData.originalItem.entry.recipe)">
|
||||||
$refs.menu.close()
|
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pizza-slice"></i>
|
||||||
recipe = contextData.originalItem.entry.recipe
|
{{ $t("Recipe") }}</a>
|
||||||
if (recipe != null) {
|
|
||||||
openReceipt(recipe)
|
|
||||||
}
|
|
||||||
">
|
|
||||||
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pizza-slice"></i> {{ $t("Recipe") }}</a>
|
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
@click="
|
@click="
|
||||||
@ -146,7 +164,8 @@
|
|||||||
moveEntryLeft(contextData)
|
moveEntryLeft(contextData)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-left"></i> {{ $t("Move") }}</a>
|
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-left"></i>
|
||||||
|
{{ $t("Move") }}</a>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
@click="
|
@click="
|
||||||
@ -154,7 +173,8 @@
|
|||||||
moveEntryRight(contextData)
|
moveEntryRight(contextData)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-right"></i> {{ $t("Move") }}</a>
|
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-right"></i>
|
||||||
|
{{ $t("Move") }}</a>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
@click="
|
@click="
|
||||||
@ -170,7 +190,8 @@
|
|||||||
addToShopping(contextData)
|
addToShopping(contextData)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-shopping-cart"></i> {{ $t("Add_to_Shopping") }}</a>
|
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-shopping-cart"></i>
|
||||||
|
{{ $t("Add_to_Shopping") }}</a>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
@click="
|
@click="
|
||||||
@ -178,7 +199,8 @@
|
|||||||
deleteEntry(contextData)
|
deleteEntry(contextData)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a class="dropdown-item p-2 text-danger" href="javascript:void(0)"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a>
|
<a class="dropdown-item p-2 text-danger" href="javascript:void(0)"><i class="fas fa-trash"></i>
|
||||||
|
{{ $t("Delete") }}</a>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
</template>
|
</template>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
@ -209,10 +231,12 @@
|
|||||||
<div class="col-12 mt-1" v-if="shopping_list.length > 0">
|
<div class="col-12 mt-1" v-if="shopping_list.length > 0">
|
||||||
<b-button-group>
|
<b-button-group>
|
||||||
<b-button variant="success" @click="saveShoppingList"
|
<b-button variant="success" @click="saveShoppingList"
|
||||||
><i class="fas fa-external-link-alt"></i>
|
><i class="fas fa-external-link-alt"></i>
|
||||||
{{ $t("Open") }}
|
{{ $t("Open") }}
|
||||||
</b-button>
|
</b-button>
|
||||||
<b-button variant="danger" @click="shopping_list = []"><i class="fa fa-trash"></i> {{ $t("Clear") }} </b-button>
|
<b-button variant="danger" @click="shopping_list = []"><i class="fa fa-trash"></i>
|
||||||
|
{{ $t("Clear") }}
|
||||||
|
</b-button>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -220,37 +244,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<transition name="slide-fade">
|
<transition name="slide-fade">
|
||||||
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background: rgba(255, 255, 255, 0.6)" v-if="current_tab === 0">
|
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background: rgba(255, 255, 255, 0.6)"
|
||||||
|
v-if="current_tab === 0">
|
||||||
<div class="col-md-3 col-6">
|
<div class="col-md-3 col-6">
|
||||||
<button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i class="fas fa-calendar-plus"></i> {{ $t("Create") }}</button>
|
<button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
|
||||||
|
class="fas fa-calendar-plus"></i> {{ $t("Create") }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-6">
|
<div class="col-md-3 col-6">
|
||||||
<button class="btn btn-block btn-primary shadow-none" v-b-toggle.sidebar-shopping><i class="fas fa-shopping-cart"></i> {{ $t("Shopping_list") }}</button>
|
<button class="btn btn-block btn-primary shadow-none" v-b-toggle.sidebar-shopping><i
|
||||||
|
class="fas fa-shopping-cart"></i> {{ $t("Shopping_list") }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-6">
|
<div class="col-md-3 col-6">
|
||||||
<a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
|
<a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
|
||||||
><i class="fas fa-download"></i>
|
><i class="fas fa-download"></i>
|
||||||
{{ $t("Export_To_ICal") }}
|
{{ $t("Export_To_ICal") }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-6">
|
<div class="col-md-3 col-6">
|
||||||
<button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top :title="$t('Coming_Soon')">
|
<button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top
|
||||||
|
:title="$t('Coming_Soon')">
|
||||||
{{ $t("Auto_Planner") }}
|
{{ $t("Auto_Planner") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
|
<div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
|
||||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||||
<b-button-group class="mx-1">
|
<b-button-group class="mx-1">
|
||||||
<b-button v-html="'<<'" @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
|
<b-button v-html="'<<'"
|
||||||
|
@click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
|
||||||
<b-button v-html="'<'" @click="setStartingDay(-1)"></b-button>
|
<b-button v-html="'<'" @click="setStartingDay(-1)"></b-button>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
<b-button-group class="mx-1">
|
<b-button-group class="mx-1">
|
||||||
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i class="fas fa-home"></i> </b-button>
|
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
|
||||||
|
class="fas fa-home"></i></b-button>
|
||||||
<b-form-datepicker button-only button-variant="secondary"></b-form-datepicker>
|
<b-form-datepicker button-only button-variant="secondary"></b-form-datepicker>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
<b-button-group class="mx-1">
|
<b-button-group class="mx-1">
|
||||||
<b-button v-html="'>'" @click="setStartingDay(1)"></b-button>
|
<b-button v-html="'>'" @click="setStartingDay(1)"></b-button>
|
||||||
<b-button v-html="'>>'" @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
|
<b-button v-html="'>>'"
|
||||||
|
@click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
</b-button-toolbar>
|
</b-button-toolbar>
|
||||||
</div>
|
</div>
|
||||||
@ -261,7 +294,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from "vue"
|
import Vue from "vue"
|
||||||
import { BootstrapVue } from "bootstrap-vue"
|
import {BootstrapVue} from "bootstrap-vue"
|
||||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||||
|
|
||||||
import ContextMenu from "@/components/ContextMenu/ContextMenu"
|
import ContextMenu from "@/components/ContextMenu/ContextMenu"
|
||||||
@ -275,11 +308,11 @@ import moment from "moment"
|
|||||||
import draggable from "vuedraggable"
|
import draggable from "vuedraggable"
|
||||||
import VueCookies from "vue-cookies"
|
import VueCookies from "vue-cookies"
|
||||||
|
|
||||||
import { ApiMixin, StandardToasts, ResolveUrlMixin } from "@/utils/utils"
|
import {ApiMixin, StandardToasts, ResolveUrlMixin} from "@/utils/utils"
|
||||||
import { CalendarView, CalendarMathMixin } from "vue-simple-calendar/src/components/bundle"
|
import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle"
|
||||||
import { ApiApiFactory } from "@/utils/openapi/api"
|
import {ApiApiFactory} from "@/utils/openapi/api"
|
||||||
|
|
||||||
const { makeToast } = require("@/utils/utils")
|
const {makeToast} = require("@/utils/utils")
|
||||||
|
|
||||||
Vue.prototype.moment = moment
|
Vue.prototype.moment = moment
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
@ -317,12 +350,12 @@ export default {
|
|||||||
current_context_menu_item: null,
|
current_context_menu_item: null,
|
||||||
options: {
|
options: {
|
||||||
displayPeriodUom: [
|
displayPeriodUom: [
|
||||||
{ text: this.$t("Week"), value: "week" },
|
{text: this.$t("Week"), value: "week"},
|
||||||
{
|
{
|
||||||
text: this.$t("Month"),
|
text: this.$t("Month"),
|
||||||
value: "month",
|
value: "month",
|
||||||
},
|
},
|
||||||
{ text: this.$t("Year"), value: "year" },
|
{text: this.$t("Year"), value: "year"},
|
||||||
],
|
],
|
||||||
displayPeriodCount: [1, 2, 3],
|
displayPeriodCount: [1, 2, 3],
|
||||||
entryEditing: {
|
entryEditing: {
|
||||||
@ -380,7 +413,7 @@ export default {
|
|||||||
dayNames: function () {
|
dayNames: function () {
|
||||||
let options = []
|
let options = []
|
||||||
this.getFormattedWeekdayNames(this.userLocale, "long", 0).forEach((day, index) => {
|
this.getFormattedWeekdayNames(this.userLocale, "long", 0).forEach((day, index) => {
|
||||||
options.push({ text: day, value: index })
|
options.push({text: day, value: index})
|
||||||
})
|
})
|
||||||
return options
|
return options
|
||||||
},
|
},
|
||||||
@ -422,7 +455,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openReceipt: function(recipe) {
|
openRecipe: function (recipe) {
|
||||||
window.open(this.resolveDjangoUrl('view_recipe', recipe.id))
|
window.open(this.resolveDjangoUrl('view_recipe', recipe.id))
|
||||||
},
|
},
|
||||||
addToShopping(entry) {
|
addToShopping(entry) {
|
||||||
@ -459,7 +492,7 @@ export default {
|
|||||||
let apiClient = new ApiApiFactory()
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
apiClient
|
apiClient
|
||||||
.createMealType({ name: this.$t("Meal_Type") })
|
.createMealType({name: this.$t("Meal_Type")})
|
||||||
.then((e) => {
|
.then((e) => {
|
||||||
this.periodChangedCallback(this.current_period)
|
this.periodChangedCallback(this.current_period)
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user