- Created component SubMenus to permit to call menu with:
- right click
<q-context-menu ref="contextMenu">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
</q-context-menu>
- click on btn:
<q-btn flat
class="pos-item-popover"
icon="menu" >
<q-popover self="top right">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
</q-popover>
</q-btn>
This commit is contained in:
Paolo Arena
@@ -38,6 +38,7 @@ export default class SingleTodo extends Vue {
|
||||
public percProgress: string = 'percProgress'
|
||||
public colProgress: string = 'blue'
|
||||
public togglemenu: boolean = false
|
||||
public percentageProgress: number = 0
|
||||
$q: any
|
||||
|
||||
@Prop({ required: true }) itemtodo: ITodo
|
||||
@@ -92,10 +93,13 @@ export default class SingleTodo extends Vue {
|
||||
this.classExpiring = 'flex-item data-item'
|
||||
this.classExpiringEx = ''
|
||||
if (this.itemtodo.completed) {
|
||||
this.percentageProgress = 100
|
||||
this.classCompleted += ' icon_completed'
|
||||
this.classDescr += ' status_completed'
|
||||
this.classExpiring += ' status_completed'
|
||||
this.classExpiringEx += ' status_completed'
|
||||
} else {
|
||||
this.percentageProgress = this.itemtodo.progress
|
||||
}
|
||||
|
||||
this.menuProgress = 'menuProgress'
|
||||
@@ -332,13 +336,6 @@ export default class SingleTodo extends Vue {
|
||||
// this.$q.notify('setPriority: ' + elem)
|
||||
}
|
||||
|
||||
getPercentageProgress() {
|
||||
if (this.itemtodo.completed)
|
||||
return 100
|
||||
else
|
||||
return this.itemtodo.progress
|
||||
}
|
||||
|
||||
askConfirmDelete() {
|
||||
const deletestr = this.$t('dialog.delete')
|
||||
const cancelstr = this.$t('dialog.cancel')
|
||||
|
||||
@@ -1,65 +1,16 @@
|
||||
<template>
|
||||
<div :class="getClassRow()">
|
||||
<q-context-menu ref="popover">
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<div v-for="field in menuPopupTodo" :key="field.value">
|
||||
<q-item v-if="(field.value !== 130)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
<q-item-side :icon="field.icon"/>
|
||||
|
||||
<q-item-main v-if="field.value !== 120">
|
||||
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
|
||||
</q-item-main>
|
||||
|
||||
<q-item-side v-if="field.value === 101">
|
||||
<q-checkbox v-model="itemtodo.enableExpiring"/>
|
||||
</q-item-side>
|
||||
<q-item-side v-if="field.value === 110">
|
||||
<q-checkbox v-model="itemtodo.completed"/>
|
||||
</q-item-side>
|
||||
|
||||
<q-item-main v-if="field.value === 120">
|
||||
<q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
|
||||
</q-item-main>
|
||||
<q-item-side v-if="field.value === 120">
|
||||
<div :class="percProgress">
|
||||
{{getPercentageProgress()}}%
|
||||
</div>
|
||||
</q-item-side>
|
||||
|
||||
</q-item>
|
||||
<q-item v-else :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
|
||||
<q-item-side :icon="iconPriority"/>
|
||||
|
||||
<q-item-main>
|
||||
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
|
||||
>
|
||||
<q-list link>
|
||||
<q-item v-close-overlay v-for="field in selectPriority" :key="field.value"
|
||||
@click.native="setPriority(field.value)">
|
||||
<q-item-side :icon="field.icon" inverted color="primary"/>
|
||||
<q-item-main>
|
||||
<q-item-tile label>{{field.label}}</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-item-main>
|
||||
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
<q-context-menu ref="contextMenu">
|
||||
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
|
||||
</q-context-menu>
|
||||
|
||||
<div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
|
||||
<q-btn flat
|
||||
class="pos-item-popover"
|
||||
icon="menu"
|
||||
@click.native="$refs.popover.$refs.popup.show()"
|
||||
|
||||
>
|
||||
icon="menu" >
|
||||
<q-popover self="top right">
|
||||
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
|
||||
</q-popover>
|
||||
|
||||
</q-btn>
|
||||
</div>
|
||||
@@ -70,8 +21,6 @@
|
||||
:icon="iconCompleted"
|
||||
@click.native="setCompleted">
|
||||
</q-btn>
|
||||
<!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
|
||||
@click.native="setCompleted"/>-->
|
||||
</div>
|
||||
|
||||
<q-input type="textarea" ref="inputdescr" v-model="precDescr"
|
||||
@@ -86,13 +35,13 @@
|
||||
|
||||
<div v-if="isTodo()" class="flex-item progress-item">
|
||||
<q-progress
|
||||
:percentage="getPercentageProgress()"
|
||||
:percentage="percentageProgress"
|
||||
class="progress-item"
|
||||
:color="colProgress"
|
||||
>
|
||||
</q-progress>
|
||||
<div :class="percProgress">
|
||||
{{getPercentageProgress()}}%
|
||||
{{percentageProgress}}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@ import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
|
||||
import { ITodo } from '../../../model/index'
|
||||
import { rescodes } from "@src/store/Modules/rescodes"
|
||||
import { UserStore } from "@store"
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -9,12 +11,22 @@ import { ITodo } from '../../../model/index'
|
||||
})
|
||||
|
||||
export default class SubMenus extends Vue {
|
||||
public selectPriority: [] = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
@Prop({ required: true }) menuPopupTodo: any[] = []
|
||||
@Prop({ required: true }) itemtodo: ITodo[] = []
|
||||
@Prop({ required: false }) menuPopupTodo: any[]
|
||||
@Prop({ required: false }) itemtodo: ITodo[]
|
||||
$q: any
|
||||
|
||||
clickMenu (field) {
|
||||
this.$emit('clickMenu', field)
|
||||
}
|
||||
|
||||
setPriority (field) {
|
||||
this.$emit('setPriority', field)
|
||||
}
|
||||
|
||||
create () {
|
||||
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
console.log('CREAZIONE')
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<div v-for="field in menuPopupTodo" :key="field.value">
|
||||
<q-item v-if="(field.value !== 130)" :icon="field.icon"
|
||||
<q-item v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
<q-item-side :icon="field.icon"/>
|
||||
|
||||
@@ -18,19 +18,24 @@
|
||||
</q-item-side>
|
||||
|
||||
<q-item-main v-if="field.value === 120">
|
||||
<q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
|
||||
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
|
||||
</q-item-main>
|
||||
<q-item-side v-if="field.value === 120">
|
||||
<div :class="percProgress">
|
||||
{{getPercentageProgress()}}%
|
||||
<div :class="$parent.percProgress">
|
||||
{{$parent.percentageProgress}}%
|
||||
</div>
|
||||
</q-item-side>
|
||||
|
||||
</q-item>
|
||||
<q-item v-else :icon="field.icon"
|
||||
<q-item v-if="(field.value === 100)" :icon="field.icon" v-close-overlay
|
||||
@click.native="clickMenu(field.value)">
|
||||
<q-item-side :icon="field.icon"/>
|
||||
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
|
||||
</q-item>
|
||||
<q-item v-if="(field.value === 130)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
|
||||
<q-item-side :icon="iconPriority"/>
|
||||
<q-item-side :icon="$parent.iconPriority"/>
|
||||
|
||||
<q-item-main>
|
||||
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
|
||||
|
||||
Reference in New Issue
Block a user