- dialog confirm delete item

- fix: context-menu (right click) declared only once and using twice using:
  @click.native="$refs.popover.$refs.popup.show()"

src/components/todos/SingleTodo/SingleTodo.scss

@@ -145,7 +145,7 @@ $heightitem: 19px;
 }
 
 .menuProgress {
-  width:50px;
+
 }
 
 .colProgress {

src/components/todos/SingleTodo/SingleTodo.ts

@@ -6,12 +6,17 @@ import { UserStore } from '@modules'
 
 import { ITodo } from '../../../model/index'
 
+import { SubMenus } from '@components'
+
+
 import $ from 'jquery'
 
-import { debounce } from '../../../classes/debounce'
+// import { debounce } from '../../../classes/debounce'
+import { askConfirm } from '../../../classes/routinestd'
 
 @Component({
-  name: 'SingleTodo'
+  name: 'SingleTodo',
+  components: { SubMenus }
 })
 export default class SingleTodo extends Vue {
   public selectPriority: [] = []
@@ -32,6 +37,7 @@ export default class SingleTodo extends Vue {
   public menuProgress: string = 'menuprogress'
   public percProgress: string = 'percProgress'
   public colProgress: string = 'blue'
+  public togglemenu: boolean = false
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -304,7 +310,7 @@ export default class SingleTodo extends Vue {
   clickMenu(action) {
     console.log('click menu: ', action)
     if (action === rescodes.MenuAction.DELETE) {
-      this.removeitem(this.itemtodo.id)
+      this.askConfirmDelete()
     } else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) {
       this.enableExpiring()
     } else if (action === rescodes.MenuAction.COMPLETED) {
@@ -332,4 +338,19 @@ export default class SingleTodo extends Vue {
     else
       return this.itemtodo.progress
   }
+
+  askConfirmDelete() {
+    const deletestr = this.$t('dialog.delete')
+    const cancelstr = this.$t('dialog.cancel')
+
+    askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), this.$t('dialog.msg.deleteTask').toString(), deletestr, cancelstr)
+      .then(ris => {
+        console.log('ris', ris)
+        if (ris)
+          this.removeitem(this.itemtodo.id)
+      }).catch(err => {
+
+    })
+  }
+
 }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,93 +1,69 @@
 <template>
     <div :class="getClassRow()">
-        <q-context-menu>
+        <q-context-menu ref="popover">
             <q-list link separator no-border class="todo-menu">
-                <q-item v-for="field in menuPopupTodo" :key="field.value"
-                        v-close-overlay
-                        @click.native="clickMenu(field.value), popover_menu = false">
-                    <q-item-side :icon="field.icon"/>
-                    <q-item-main>
-                        <q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
-                    </q-item-main>
+                <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-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-item-tile label class="item-menu">{{field.label}}</q-item-tile>
+                        </q-item-main>
 
-                    <q-item-side v-if="field.value === 120">
-                        <q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
-                    </q-item-side>
-                    <q-item-side v-if="field.value === 120">
-                        <div :class="percProgress">
-                            {{getPercentageProgress()}}%
-                        </div>
-                    </q-item-side>
+                        <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>
+                        <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>
+
         <div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
             <q-btn flat
                    class="pos-item-popover"
-                   icon="menu">
+                   icon="menu"
+                   @click.native="$refs.popover.$refs.popup.show()"
+
+            >
 
-                <q-popover
-                        v-model="popover_menu"
-                        self="top left">
-                    <q-list link separator no-border class="todo-menu">
-                        <q-item v-for="field in menuPopupTodo" :key="field.value"
-                                v-close-overlay
-                                @click.native="clickMenu(field.value), popover_menu = false">
-                            <q-item-side :icon="field.icon"/>
-                            <q-item-main>
-                                <q-item-tile label>{{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-side v-if="field.value === 120">
-                                <q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
-                            </q-item-side>
-                            <q-item-side v-if="field.value === 120">
-                                <div :class="percProgress">
-                                    {{getPercentageProgress()}}%
-                                </div>
-                            </q-item-side>
-                        </q-item>
-                    </q-list>
-                </q-popover>
             </q-btn>
         </div>
-        <!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
-        <div v-if="isTodo()" class="flex-item priority-item">
-            <q-btn push flat
-                   class="priority-item-popover"
-                   :icon="iconPriority">
-                <q-popover
-                        v-model="popover"
-                        self="top left"
 
-                >
-                    <q-list link>
-                        <q-item-tile label inverted class="menuTitlePriority">{{$t('todo.titleprioritymenu')}}
-                        </q-item-tile>
-                        <q-item v-for="field in selectPriority" :key="field.value"
-                                @click.native="setPriority(field.value), popover = false">
-                            <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-popover>
-            </q-btn>
-        </div>
         <div v-if="isTodo()" class="flex-item completed-item">
             <q-btn push flat
                    :class="classCompleted"

src/components/todos/SubMenus/SubMenus.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+import { ITodo } from '../../../model/index'
+
+
+@Component({
+  name: 'SubMenus'
+})
+
+export default class SubMenus extends Vue {
+
+  @Prop({ required: true }) menuPopupTodo: any[] = []
+  @Prop({ required: true }) itemtodo: ITodo[] = []
+  $q: any
+
+  create () {
+
+    console.log('CREAZIONE')
+  }
+}

src/components/todos/SubMenus/SubMenus.vue

@@ -0,0 +1,57 @@
+<template>
+    <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"
+                        @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>
+    </div>
+</template>
+
+<script lang="ts" src="./SubMenus.ts">
+</script>

src/components/todos/SubMenus/index.ts

@@ -0,0 +1 @@
+export {default as SubMenus} from './SubMenus.vue'

src/components/todos/index.ts

@@ -1,2 +1,3 @@
 export * from './SingleTodo'
+export * from './SubMenus'
 export * from './todo'

src/components/todos/todo/todo.scss

@@ -59,9 +59,17 @@
   min-height: 10px;
 }
 
+.divtitlecat {
+  margin: 5px;
+  padding: 5px;
+}
+
 .categorytitle{
+  color:blue;
+  background-color: lightblue;
   font-size: 1.25rem;
   font-weight: bold;
+  text-align: center;
 }
 
 .titleSubMenu {

src/components/todos/todo/todo.ts

@@ -508,7 +508,7 @@ export default class Todo extends Vue {
   // }
   //
 
-  deselectAllRows(item, check, onlythis:boolean = false) {
+  deselectAllRows(item, check, onlythis: boolean = false) {
     console.log('deselectAllRows : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {

src/components/todos/todo/todo.vue

@@ -3,7 +3,9 @@
         <div class="panel">
             <p class="caption"></p>
 
-            <div class="categorytitle">{{ getCategory() }}</div>
+            <div class="divtitlecat">
+                <div class="categorytitle">{{ getCategory() }}</div>
+            </div>
 
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>