From 0161e6c7e97e9be19b16836ec9a8bf497b84de46 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Mon, 28 Jan 2019 20:39:40 +0100
Subject: [PATCH] - fix: width to 100%

  flex: 1;  // get all space
  order: 1;
- focus to InsertTask
---
 src/components/Header.vue                     |  4 +
 .../todos/SingleTodo/SingleTodo.scss          | 25 ++++--
 src/components/todos/SingleTodo/SingleTodo.ts | 83 ++++++++++++++-----
 .../todos/SingleTodo/SingleTodo.vue           |  9 +-
 src/components/todos/todo/todo.scss           |  1 +
 src/components/todos/todo/todo.vue            |  2 +-
 src/layouts/drawer/drawer.vue                 |  4 +
 7 files changed, 94 insertions(+), 34 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 1447da4..579ae73 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -130,6 +130,10 @@
         }
     }
 
+    .fixed-left:hover{
+        cursor: ew-resize;
+    }
+
     /*
     @-webkit-keyframes moveFromLeftFade {
         from {
diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss
index b7de83f..3cd7a9f 100644
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -12,6 +12,7 @@
 .flex-container2 {
   flex-flow: row nowrap;
   justify-content: space-between;
+  margin: 2px 5px 2px 5px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover
@@ -86,7 +87,7 @@
 
 
 .pos-item:hover, .pos-item-popover:hover {
-  cursor: col-resize;
+  cursor: grab;
 }
 
 .priority-item-popover {
@@ -128,11 +129,13 @@
 }
 
 .data-item {
-  max-width: 100px;
-  min-width: 100px;
-  display: block;
-  visibility: initial;
+  //max-width: 100px;
+  //min-width: 100px;
+  //display: flex;
+  //visibility: initial;
   color: #ccc;
+  order: 1;
+  flex: 1;
 }
 
 
@@ -159,7 +162,7 @@
   text-align: left;
 
   flex: 1;
-  order: 1;
+  //order: 2;
   //height: 24px;
   //line-height: 24px; /* same as height! */
 
@@ -245,6 +248,14 @@
   }
 }
 
+.after_textarea {
+  display: none;
+  visibility: hidden;
+}
+
+.after_textarea:hover {
+  visibility: visible;
+}
 
 
 /*
@@ -269,3 +280,5 @@
   flex: 1;
 }
 */
+
+
diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts
index 9bf3e23..86df520 100644
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -17,7 +17,7 @@ export default class SingleTodo extends Vue {
   public iconCompleted: string = ''
   public classCompleted: string = ''
   public classDescr: string = ''
-  public classDescrEdit:string = ''
+  public classDescrEdit: string = ''
   public classExpiring: string = ''
   public classExpiringEx: string = ''
   public iconPriority: string = ''
@@ -26,6 +26,7 @@ export default class SingleTodo extends Vue {
   public classRow: string = ''
   public sel: boolean = false
   public inEdit: boolean = false
+  public precDescr: string = ''
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -47,11 +48,15 @@ export default class SingleTodo extends Vue {
     this.watchupdate()
   }
 
-  isTodo () {
+  @Watch('itemtodo.descr') valueChanged5() {
+    this.precDescr = this.itemtodo.descr
+  }
+
+  isTodo() {
     return this.isTodoByElem(this.itemtodo)
   }
 
-  isTodoByElem (elem) {
+  isTodoByElem(elem) {
     return elem.descr.slice(-1) !== ':'
   }
 
@@ -87,8 +92,8 @@ export default class SingleTodo extends Vue {
 
     // this.getinputdescr = 'inputdescr' + this.itemtodo.id
 
-    console.log('classDescrEdit = ', this.classDescrEdit)
-    console.log('classDescr', this.classDescr)
+    // console.log('classDescrEdit = ', this.classDescrEdit)
+    // console.log('classDescr', this.classDescr)
 
     if (this.isTodo())
       this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
@@ -100,6 +105,7 @@ export default class SingleTodo extends Vue {
   }
 
   created() {
+    this.precDescr = this.itemtodo.descr
     this.updateicon()
 
     this.updateClasses()
@@ -113,8 +119,8 @@ export default class SingleTodo extends Vue {
     return 'row flex-container2 ' + this.classRow
   }
 
-  clickRiga () {
-    console.log('CLICK RIGA ************')
+  clickRiga() {
+    // console.log('CLICK RIGA ************')
     if (!this.inEdit) {
       this.$emit('deselectAllRows', this.itemtodo, true)
 
@@ -127,22 +133,22 @@ export default class SingleTodo extends Vue {
   }
 
   selectRiga() {
-    console.log('selectRiga', this.itemtodo.descr)
+    // console.log('selectRiga', this.itemtodo.descr)
     this.sel = true
     this.classRow = 'rowselected'
     this.updateClasses()
-    console.log('FINE selectRiga', this.itemtodo.descr)
+    // console.log('FINE selectRiga', this.itemtodo.descr)
   }
 
   deselectRiga() {
-    console.log('DeselectRiga', this.itemtodo.descr)
+    // console.log('DeselectRiga', this.itemtodo.descr)
     this.sel = false
     this.classRow = ''
     this.inEdit = false
     this.updateClasses()
   }
 
-  deselectAndExitEdit () {
+  deselectAndExitEdit() {
     this.deselectRiga()
     this.exitEdit()
   }
@@ -157,28 +163,38 @@ export default class SingleTodo extends Vue {
     }
   }
 
-  editTodo () {
-    console.log('INIZIO - editTodo')
+  editTodo() {
+    // console.log('INIZIO - editTodo')
     this.$emit('click')
+    this.precDescr = this.itemtodo.descr
     this.inEdit = true
     if (!this.sel)
       this.selectRiga()
     else
       this.updateClasses()
 
-    let mythis = this
-    setTimeout(() => {
-      let theField = <HTMLInputElement>mythis.$refs.inputdescr
-      theField.focus()
-      console.log('focus()')
-    }, 100)
+    this.faiFocus('inputdescr')
 
-    console.log('FINE - editTodo')
+
+    // console.log('FINE - editTodo')
   }
 
-  exitEdit (singola: boolean = false) {
+  faiFocus(elem, isparent: boolean = false) {
+    let mythis = this
+    setTimeout(() => {
+      let theField = null
+      if (isparent)
+        theField = <HTMLInputElement>mythis.$parent.$parent.$parent.$parent.$refs[elem]
+      else
+        theField = <HTMLInputElement>mythis.$refs[elem]
+      theField.focus()
+      // console.log('focus()')
+    }, 100)
+  }
+
+  exitEdit(singola: boolean = false) {
     if (this.inEdit) {
-      console.log('exitEdit')
+      // console.log('exitEdit')
       this.inEdit = false
       this.updateClasses
       this.$emit('deselectAllRows', this.itemtodo, false, singola)
@@ -186,9 +202,30 @@ export default class SingleTodo extends Vue {
   }
 
 
-  updateTodo () {
+  keyDownArea(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      this.updateTodo()
+      this.deselectRiga()
+      this.faiFocus('insertTask', true)
+    }
+
+    // console.log('keyDownArea', e)
+    if (e.key === 'Escape') {
+      this.deselectRiga()
+      this.faiFocus('insertTask', true)
+      console.log('LOAD this.precDescr', this.precDescr)
+      this.precDescr = this.itemtodo.descr
+    }
+
+  }
+
+  updateTodo() {
+    this.itemtodo.descr = this.precDescr
+    console.log('updateTodo', this.precDescr, this.itemtodo.descr)
     this.watchupdate()
     this.inEdit = false
+    // this.precDescr = this.itemtodo.descr
     this.updateClasses()
   }
 
diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue
index 221821d..f6dab78 100644
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="getClassRow()" @mouseup.left="mouseUp" @mousedown="clickRiga">
+    <div :class="getClassRow()" >
         <q-context-menu>
             <q-list link separator no-border class="todo-menu">
                 <q-item v-for="field in menuPopupTodo" :key="field.value"
@@ -19,7 +19,7 @@
                 </q-item>
             </q-list>
         </q-context-menu>
-        <div v-if="isTodo()" class="flex-item pos-item" >
+        <div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
             <q-btn flat
                    class="pos-item-popover"
                    icon="menu">
@@ -80,10 +80,11 @@
                     @click.native="setCompleted"/>-->
         </div>
 
-        <q-input type="textarea" autofocus ref="inputdescr" :value="itemtodo.descr" @change="val => itemtodo.descr = val"
+        <q-input type="textarea" ref="inputdescr" v-model="precDescr"
                  :class="classDescr" :max-height="50"
-                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @mousedown.left="editTodo()"/>
+                 @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
 
+        <!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
 
         <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
             <!--<q-field>{{ itemtodo.descr }}</q-field>-->
diff --git a/src/components/todos/todo/todo.scss b/src/components/todos/todo/todo.scss
index 706a954..169f796 100644
--- a/src/components/todos/todo/todo.scss
+++ b/src/components/todos/todo/todo.scss
@@ -58,3 +58,4 @@
 .dragArea {
   min-height: 10px;
 }
+
diff --git a/src/components/todos/todo/todo.vue b/src/components/todos/todo/todo.vue
index fb46bf1..a83d67d 100644
--- a/src/components/todos/todo/todo.vue
+++ b/src/components/todos/todo/todo.vue
@@ -3,7 +3,7 @@
         <div class="panel">
             <p class="caption"></p>
 
-            <q-input v-model="todo" inverted :float-label="$t('todo.insert')"
+            <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo"/>
 
diff --git a/src/layouts/drawer/drawer.vue b/src/layouts/drawer/drawer.vue
index 3036516..de1627c 100644
--- a/src/layouts/drawer/drawer.vue
+++ b/src/layouts/drawer/drawer.vue
@@ -140,6 +140,10 @@
         margin-top: 5%;
     }
 
+    .fixed-left:hover{
+        cursor: ew-resize;
+    }
+
     footer {
         small {
             color: red;