From a3312e0d05198b7a926af5da1128ac1735664a72 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Wed, 30 Jan 2019 02:01:04 +0100
Subject: [PATCH] - 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>
---
 src/components/todos/SingleTodo/SingleTodo.ts | 11 ++-
 .../todos/SingleTodo/SingleTodo.vue           | 67 +++----------------
 src/components/todos/SubMenus/SubMenus.ts     | 16 ++++-
 src/components/todos/SubMenus/SubMenus.vue    | 17 +++--
 4 files changed, 37 insertions(+), 74 deletions(-)

diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts
index 63bbee3..436ac1c 100644
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -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')
diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue
index 16a3048..bbc070f 100644
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -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>
 
diff --git a/src/components/todos/SubMenus/SubMenus.ts b/src/components/todos/SubMenus/SubMenus.ts
index 2eda29b..2f18756 100644
--- a/src/components/todos/SubMenus/SubMenus.ts
+++ b/src/components/todos/SubMenus/SubMenus.ts
@@ -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')
   }
diff --git a/src/components/todos/SubMenus/SubMenus.vue b/src/components/todos/SubMenus/SubMenus.vue
index 6ee853b..f6fda08 100644
--- a/src/components/todos/SubMenus/SubMenus.vue
+++ b/src/components/todos/SubMenus/SubMenus.vue
@@ -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"