- dialog confirm delete item

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

quasar.conf.js

@@ -159,6 +159,7 @@ module.exports = function (ctx) {
       ],
       // Quasar plugins
       plugins: [
+        'Dialog',
         'Notify',
         'Meta',
         'Cookies',

src/classes/routinestd.ts

@@ -0,0 +1,18 @@
+export async function askConfirm($q: any, mytitle, mytext, ok, cancel) {
+  try {
+    return await $q.dialog({
+      title: mytitle,
+      message: mytext,
+      ok: ok,
+      cancel: cancel
+    }).then((ris) => {
+      return true
+      // this.$q.notify('Agreed!')
+    }).catch(() => {
+      return false
+      // this.$q.notify('Disagreed...')
+    })
+  } catch (e) {
+    return false
+  }
+}

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"
+                <div v-for="field in menuPopupTodo" :key="field.value">
-                        v-close-overlay
+                    <q-item v-if="(field.value !== 130)" :icon="field.icon"
-                        @click.native="clickMenu(field.value), popover_menu = false">
+                            @click.native="clickMenu(field.value)">
-                    <q-item-side :icon="field.icon"/>
+                        <q-item-side :icon="field.icon"/>
-                    <q-item-main>
-                        <q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
-                    </q-item-main>
 
-                    <q-item-side v-if="field.value === 101">
+                        <q-item-main v-if="field.value !== 120">
-                        <q-checkbox v-model="itemtodo.enableExpiring"/>
+                            <q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
-                    </q-item-side>
+                        </q-item-main>
-                    <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-item-side v-if="field.value === 101">
-                        <q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
+                            <q-checkbox v-model="itemtodo.enableExpiring"/>
-                    </q-item-side>
+                        </q-item-side>
-                    <q-item-side v-if="field.value === 120">
+                        <q-item-side v-if="field.value === 110">
-                        <div :class="percProgress">
+                            <q-checkbox v-model="itemtodo.completed"/>
-                            {{getPercentageProgress()}}%
+                        </q-item-side>
-                        </div>
-                    </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>

src/i18n.js

@@ -1,5 +1,15 @@
 const messages = {
   it: {
+    dialog: {
+      yes: 'Si',
+      no: 'No',
+      delete: 'Elimina',
+      cancel: 'Annulla',
+      msg: {
+        titledeleteTask: 'Cancella Task',
+        deleteTask: 'Vuoi cancellare questo Task?'
+      }
+    },
     comp:{
       Conta: "Conta",
     },
@@ -16,6 +26,9 @@ const messages = {
       Test: 'Test',
       Category: 'Categorie',
       Todo: 'Todo',
+      personal: 'Personale',
+      work: 'Lavoro',
+      shopping: 'Spesa',
     },
     components: {
       authentication:{
@@ -92,6 +105,16 @@ const messages = {
     }
   },
   enUk: {
+    dialog: {
+      yes: 'Yes',
+      no: 'No',
+      delete: 'Delete',
+      cancel: 'Cancel',
+      msg: {
+        titledeleteTask: 'Delete Task',
+        deleteTask: 'Delete this Task?'
+      }
+    },
     comp:{
       Conta: "Count",
     },
@@ -108,6 +131,9 @@ const messages = {
       Test: 'Test',
       Category: 'Category',
       Todo: 'Todo',
+      personal: 'Personal',
+      work: 'Work',
+      shopping: 'Shopping',
     },
     components: {
       authentication:{

src/layouts/drawer/drawer.vue

@@ -38,6 +38,7 @@
   import { Store } from 'vuex'
   import { UserStore } from '@modules'
   import { GlobalStore } from '@modules'
+  import { ITodoList } from "../../model";
 
 
   @Component({
@@ -48,40 +49,48 @@
   export default class Drawer extends Vue {
     public $q
     $t: any
+    public arrlista = GlobalStore.state.listatodo
+    photo = ''
+    user = null
+    links
 
     created() {
       console.log('Drawer created...')
+
+      let listatodo = []
+
+      this.arrlista.forEach((elem: ITodoList) => {
+        let item = { route: '/todo/' + elem.namecat, faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.' + elem.description }
+        listatodo.push(item)
+
+      })
+
+      this.links = {
+        Dashboard: {
+          routes: [
+            { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
+            {
+              route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
+              routes2: listatodo
+            },
+            { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
+            { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
+            { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
+            /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
+          ],
+          show: true,
+        },
+        Forms: {
+          routes: [
+            { route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
+          ],
+          show: false
+        },
+      }
+
     }
 
-    Glo
 
-    photo = ''
-    user = null
-    links = {
-      Dashboard: {
-        routes: [
-          { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
-          {
-            route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
-            routes2: [
-              { route: '/todo/personal', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'Personal' },
-              { route: '/todo/work', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'Work' }
-            ]
-          },
-          { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
-          { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
-          { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
-          /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
-        ],
-        show: true,
-      },
-      Forms: {
-        routes: [
-          { route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
-        ],
-        show: false
-      },
-    }
 
     get MenuCollapse() {
       return GlobalStore.state.menuCollapse

src/model/GlobalStore.ts

@@ -10,5 +10,12 @@ export interface IGlobalState {
   menuCollapse: boolean
   leftDrawerOpen: boolean
   posts: IPost[]
+  listatodo: ITodoList[]
+}
+
+
+export interface ITodoList {
+  namecat: string
+  description: string
 }
 

src/plugins/dialog.js

@@ -0,0 +1,5 @@
+import Dialog from 'quasar'
+
+export default ({ Vue }) => {
+  Vue.use(Dialog)
+}

src/router/route-config.ts

@@ -27,7 +27,13 @@ export const RouteConfig: VueRouteConfig[] = [
   {
     path: '/todo/:category',
     component: () => import('@/components/todos/todo/todo.vue'),
-    meta: { name: 'Todos' }
+    meta: { name: 'Todos' },
+    children: [
+      {
+        path: '',
+        component: () => import('@/components/todos/SingleTodo/SingleTodo.vue')
+      }
+    ]
   },
   {
     path: '/category',

src/store/Modules/GlobalStore.ts

@@ -9,7 +9,12 @@ const state: IGlobalState = {
   mobileMode: false,
   menuCollapse: true,
   leftDrawerOpen: true,
-  posts: []
+  posts: [],
+  listatodo: [
+    {namecat: 'personal', description: 'personal'},
+    {namecat: 'work', description: 'work'},
+    {namecat: 'shopping', description: 'shopping'}
+    ]
 }
 
 const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
@@ -18,10 +23,15 @@ const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
 namespace Getters {
 
   const conta = b.read(state => state.conta, 'conta')
+  const listatodo = b.read(state => state.listatodo, 'listatodo')
 
   export const getters = {
     get conta() {
       return conta()
+    },
+
+    get listaTodo() {
+      return listatodo()
     }
   }
 }

src/store/Modules/rescodes.ts

@@ -28,7 +28,8 @@ export const rescodes = {
     DELETE: 100,
     TOGGLE_EXPIRING: 101,
     COMPLETED: 110,
-    PROGRESS_BAR: 120
+    PROGRESS_BAR: 120,
+    PRIORITY: 130
   },
 
 
@@ -79,28 +80,35 @@ export const rescodes = {
   menuPopupTodo: {
     'it': [
       {
-        id: 1,
+        id: 10,
-        label: 'Progressi',
+        label: '',
         value: 120, // PROGRESS_BAR
-        icon: 'check_circle',
+        icon: 'rowing',
         checked: true
       },
       {
-        id: 2,
+        id: 20,
+        label: 'Imposta Priorità',
+        value: 130, // PRIORITY
+        icon: 'rowing',
+        checked: false
+      },
+      {
+        id: 30,
         label: 'Completato',
         value: 110, // COMPLETED
         icon: 'check_circle',
         checked: true
       },
       {
-        id: 3,
+        id: 40,
         label: 'Imposta Scadenza',
         value: 101, // TOGGLE_EXPIRING
         icon: 'date_range',
         checked: true
       },
       {
-        id: 10,
+        id: 50,
         label: 'Cancella',
         value: 100, // DELETE
         icon: 'delete',
@@ -109,28 +117,35 @@ export const rescodes = {
       ],
     'enUk': [
       {
-        id: 1,
+        id: 10,
-        label: 'Progress',
+        label: '',
         value: 120, // PROGRESS_BAR
         icon: 'check_circle',
         checked: true
       },
       {
-        id: 2,
+        id: 20,
+        label: 'Set Priority',
+        value: 130, // PRIORITY
+        icon: 'high_priority',
+        checked: false
+      },
+      {
+        id: 30,
         label: 'Completed',
         value: 110, // COMPLETED
         icon: 'check_circle',
         checked: true
       },
       {
-        id: 3,
+        id: 40,
         label: 'Set Expiring',
         value: 101, // TOGGLE_EXPIRING
         icon: 'date_range',
         checked: true
       },
       {
-        id: 10,
+        id: 50,
         label: 'Delete',
         value: 100, // DELETE
         icon: 'trash',