From ee6cf47c2931709c62e08ff138b0dc8a5a162786 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Sat, 16 Feb 2019 03:49:16 +0100
Subject: [PATCH] fixed UI dropdown menu. - eliminate contextmenu.

---
 src/components/Header.vue                     |  4 +-
 .../todos/SingleTodo/SingleTodo.scss          | 31 +++++++--
 src/components/todos/SingleTodo/SingleTodo.ts | 66 ++++++++++++++-----
 .../todos/SingleTodo/SingleTodo.vue           | 22 +++++--
 src/components/todos/todo/todo.ts             |  4 ++
 src/components/todos/todo/todo.vue            |  4 ++
 src/statics/i18n.js                           |  2 +-
 7 files changed, 98 insertions(+), 35 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 812769e..56c7732 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -165,8 +165,8 @@
     public selectOpLang = [
       { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
       { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
-      { label: 'Spanish', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'SP' },
-      { label: 'Italian', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
+      { label: 'Italian', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' },
+      { label: 'Spanish', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'SP' }
     ]
 
     get leftDrawerOpen() {
diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss
index 1721016..84d64eb 100644
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -2,6 +2,8 @@
 
 $colcompleted: #a2a2a2;
 $heightitem: 19px;
+$heightcounter: 26px;
+$heightdescr: 22px;
 
 .flex-item{
    // background-color: #d5e2eb;
@@ -46,6 +48,18 @@ $heightitem: 19px;
   max-width: 24px;
 }
 
+.counter-item {
+  margin: auto auto auto 2px;
+  padding: 2px;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 1.10rem;
+  //color: blue !important;
+
+  //order: 2;
+  //height: 24px;
+  //line-height: 24px; /* same as height! */
+}
 
 .pos-item {
   max-width: 24px;
@@ -59,6 +73,9 @@ $heightitem: 19px;
   text-align: center;
   // background-color: #ff4081;
   font-size: 0.75rem;
+  order: 2;
+  flex: 1;
+
 }
 
 
@@ -198,16 +215,16 @@ $heightitem: 19px;
 */
 
 .div_descr, .div_descr_edit {
-  margin: 2px;
-  padding: 2px;
+  margin: auto auto auto 2px;
+  //padding: 2px;
   min-width: 200px;
   vertical-align: middle;
   text-align: left;
+  color: blue !important;
 
   flex: 1;
   //order: 2;
-  //height: 24px;
-  //line-height: 24px; /* same as height! */
+  line-height: $heightdescr; /* same as height! */
 
   &.hide {
     display: none !important;
@@ -221,9 +238,9 @@ $heightitem: 19px;
 
 
 .div_descr:hover {
-  border-width: 1px 0px 1px 0px;
+  //border-width: 1px 0px 1px 0px;
   border-color: rgba(125, 255, 125, 0.5);
-  padding: 1px;
+  //padding: 1px;
 }
 
 
@@ -272,7 +289,7 @@ $heightitem: 19px;
 }
 
 .status_completed {
-  color: $colcompleted
+  color: $colcompleted !important;
 }
 
 .menuTitlePriority {
diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts
index 788900b..a98198d 100644
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -41,6 +41,7 @@ export default class SingleTodo extends Vue {
   public percentageProgress: number = 0
   public itemtodoPrec: ITodo
   public clButtPopover: string = 'pos-item-popover'
+  public numpos: number = 0
 
   $q: any
 
@@ -95,8 +96,10 @@ export default class SingleTodo extends Vue {
     this.classCompleted = 'completed-item-popover'
     this.classDescr = 'flex-item div_descr show'
     this.classDescrEdit = 'flex-item div_descr_edit'
-    if (!this.isTodo())
+    if (!this.isTodo()) {
       this.classDescr += ' titleLista-item'
+      this.classDescrEdit += ' titleLista-item'
+    }
 
     this.classExpiring = 'flex-item data-item'
     this.classExpiringEx = ''
@@ -104,6 +107,7 @@ export default class SingleTodo extends Vue {
       this.percentageProgress = 100
       this.classCompleted += ' icon_completed'
       this.classDescr += ' status_completed'
+      this.classDescrEdit += ' status_completed'
       this.classExpiring += ' status_completed'
       this.classExpiringEx += ' status_completed'
     } else {
@@ -172,13 +176,15 @@ export default class SingleTodo extends Vue {
 
   clickRiga() {
     // console.log('CLICK RIGA ************')
-    if (!this.inEdit) {
-      this.$emit('deselectAllRows', this.itemtodo, true)
+    if (!this.sel) {
+      if (!this.inEdit) {
+        this.$emit('deselectAllRows', this.itemtodo, true)
 
-      if (!this.sel) {
-        this.selectRiga()
-      } else {
-        this.deselectRiga()
+        if (!this.sel) {
+          this.selectRiga()
+        } else {
+          this.deselectRiga()
+        }
       }
     }
   }
@@ -214,17 +220,23 @@ export default class SingleTodo extends Vue {
     }
   }
 
-  editTodo() {
-    // console.log('INIZIO - editTodo')
-    this.$emit('click')
-    this.precDescr = this.itemtodo.descr
-    this.inEdit = true
-    if (!this.sel)
-      this.selectRiga()
-    else
-      this.updateClasses()
+  clickRow() {
+    this.clickRiga()
+  }
 
-    this.faiFocus('inputdescr')
+  editTodo() {
+    if (!this.itemtodo.completed) {
+      // console.log('INIZIO - editTodo')
+      this.$emit('click')
+      this.precDescr = this.itemtodo.descr
+      this.inEdit = true
+      if (!this.sel)
+        this.selectRiga()
+      else
+        this.updateClasses()
+
+      this.faiFocus('inputdescr')
+    }
 
 
     // console.log('FINE - editTodo')
@@ -255,7 +267,23 @@ export default class SingleTodo extends Vue {
   }
 
 
+  keyDownRow(e) {
+    console.log('keyDownRow')
+    // Delete Key or Backspage
+    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
+      e.preventDefault()
+      this.deselectRiga()
+      this.clickMenu(rescodes.MenuAction.DELETE)
+        .then(() => {
+          this.faiFocus('insertTask', true)
+          return
+        })
+    }
+
+  }
+
   keyDownArea(e) {
+    console.log('keyDownArea')
 /*
     if ((e.key === 'ArrowUp') && !e.shiftKey) {
       e.key = 'Tab'
@@ -295,7 +323,7 @@ export default class SingleTodo extends Vue {
     // console.log('keyDownArea', e)
     if (e.key === 'Escape') {
       this.deselectRiga()
-      this.faiFocus('insertTask', true)
+      // this.faiFocus('insertTask', true)
       console.log('LOAD this.precDescr', this.precDescr)
       this.precDescr = this.itemtodo.descr
     }
@@ -324,6 +352,8 @@ export default class SingleTodo extends Vue {
     this.updateicon()
 
     this.updatedata()
+
+    this.deselectAndExitEdit()
   }
 
   updatedata() {
diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue
index 9cbaa6f..f7c9ff1 100644
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -1,5 +1,6 @@
 <template>
-    <div :class="getClassRow()">
+    <div :class="getClassRow()" @click="clickRow">
+        <!--<div v-if="isTodo()" class="flex-item counter-item">{{itemtodo.counter}}</div>-->
         <!--<div v-if="isFirst">-->
             <!--<q-context-menu ref="contextMenu">-->
                 <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
@@ -14,10 +15,17 @@
             </q-btn>
         </div>
 
-        <q-input hide-underline type="textarea" ref="inputdescr" v-model.trim="precDescr"
-                 :class="classDescr" :max-height="50"
+        <q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr" v-model.trim="precDescr"
+                 :class="classDescrEdit" :max-height="50"
                  @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
 
+        <div v-else :class="classDescr"
+             @keydown="keyDownRow">{{itemtodo.descr}}</div>
+
+        <!--<q-field dark v-else :label="itemtodo.descr"-->
+                 <!--:class="classDescr"-->
+                 <!--@keydown="keyDownRow"></q-field>-->
+
         <!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
 
         <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
@@ -37,7 +45,7 @@
         </div>
 
 
-        <div v-if="itemtodo.enableExpiring">
+        <div v-if="itemtodo.enableExpiring" class="flex-item">
             <div :class="classExpiring">
                 <q-datetime
                         type="date"
@@ -54,9 +62,9 @@
             <q-btn push
                    :class="clButtPopover"
                    icon="menu" >
-                <!--<q-popover self="top right">-->
-                    <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
-                <!--</q-popover>-->
+                <q-popover v-if="sel" self="top right">
+                    <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
+                </q-popover>
 
             </q-btn>
         </div>
diff --git a/src/components/todos/todo/todo.ts b/src/components/todos/todo/todo.ts
index bdfe149..bd6d766 100644
--- a/src/components/todos/todo/todo.ts
+++ b/src/components/todos/todo/todo.ts
@@ -122,6 +122,10 @@ export default class Todo extends Vue {
     // this.updatetable(true, 'testPao')
   }
 
+  isTodoByElem(elem) {
+    return elem.descr.slice(-1) !== ':'
+  }
+
   getArrTodos() {
 
     let mystr = ''
diff --git a/src/components/todos/todo/todo.vue b/src/components/todos/todo/todo.vue
index dcf1264..6cd6f29 100644
--- a/src/components/todos/todo/todo.vue
+++ b/src/components/todos/todo/todo.vue
@@ -13,8 +13,12 @@
                 <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
                            @start="onStart" @end="onEnd" class="dragArea">
                     <!--<transition-group :name="mytypetransgroup">-->
+                        <div style="display: none">{{counter = 0}} </div>
                         <div :id="getmyid(mytodo._id)" :key="mytodo._id" v-for="mytodo in todos_arr" class="myitemdrag">
 
+                            <!--<div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++ = (mytodo.counter === undefined) ? 0: mytodo.counter++}} </div>-->
+                            <div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++, mytodo.counter = counter}} </div>
+
                             <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
                                 <label>{{getPriorityByInd(mytodo.priority)}}</label>
                             </div>
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index 76fe093..ea3d7ec 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -272,7 +272,7 @@ const messages = {
       myDescriz: ''
     },
     pages: {
-      home: 'Dashboard One',
+      home: 'Dashboard',
       SignUp: 'SignUp',
       SignIn: 'SignIn',
       vreg: 'Verify Reg',