- if last character is ':' then is like a Title.

quasar.conf.js

@@ -153,7 +153,7 @@ module.exports = function (ctx) {
       ],
       directives: [
         'Ripple',
-        'CloseOverlay'
+        'CloseOverlay',
       ],
       // Quasar plugins
       plugins: [

src/components/todos/SingleTodo/SingleTodo.scss

@@ -26,7 +26,7 @@
 }
 
 .rowselected {
-  border-width: 1px 0px 1px 0px;
+  border-width: 2px 0px 2px 0px;
   border-style: solid;
   border-color: rgba(49, 68, 240, 0.6);
   //background-color: rgba(166, 153, 240, 0.7) !important;
@@ -53,6 +53,18 @@
 
 }
 
+.titleLista-item {
+  max-width: 92px;
+  min-width: 92px;
+  margin: 0 auto;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  // background-color: #ff4081;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
 
 .pos-item-popover{
   max-width: 24px;
@@ -98,8 +110,10 @@
   min-width: 24px;
 }
 
-
+.completed-item {
-
+  max-width: 24px;
+  min-width: 24px;
+}
 
 .myexpired {
   padding-top: 0px;
@@ -112,8 +126,15 @@
   min-width: 100px;
   display: block;
   visibility: initial;
+  color: #ccc;
 }
 
+
+.data-item .q-input-target{
+  color:red !important;
+}
+
+
 /*
 @media screen and (max-width: 600px) {
   .data-item {
@@ -124,13 +145,28 @@
 }
 */
 
-.div_descr {
+.div_descr, .div_descr_edit {
-  // background-color: green;
   margin: 2px;
   padding: 2px;
+  min-width: 100px;
   flex: 2 1 auto;
+  vertical-align: middle;
+  text-align: left;
+
+  height: 24px;
+  line-height: 24px; /* same as height! */
+
+  &.hide {
+    display: none !important;
+    visibility: hidden;
+  }
+  &.show {
+    visibility: visible;
+  }
 }
 
+
+
 .div_descr:hover {
   border-width: 1px 0px 1px 0px;
   border-color: rgba(125, 255, 125, 0.5);
@@ -183,6 +219,21 @@
 }
 
 .status_completed {
-  color:rgba(49, 68, 240, 0.7);;
+  color:rgba(49, 68, 240, 0.7);
 }
 
+.menuTitlePriority {
+  background-color: blue;
+  color:white;
+  padding: 2px;
+  margin: 2px;
+  font-weight: bold;
+}
+
+.test{
+  color: fuchsia;
+  &.mio1{
+
+    background-color: red;
+  }
+}

src/components/todos/SingleTodo/SingleTodo.ts

@@ -6,15 +6,18 @@ import { UserStore } from '@modules'
 
 import { ITodo } from '../../../model/index'
 
+import $ from 'jquery'
+
 @Component({
   name: 'SingleTodo'
 })
 export default class SingleTodo extends Vue {
   public selectPriority: [] = []
-  public menuPopupTodo: [] = []
+  public menuPopupTodo: any[] = []
   public iconCompleted: string = ''
   public classCompleted: string = ''
   public classDescr: string = ''
+  public classDescrEdit:string = ''
   public classExpiring: string = ''
   public classExpiringEx: string = ''
   public iconPriority: string = ''
@@ -22,23 +25,42 @@ export default class SingleTodo extends Vue {
   public popover_menu: boolean = false
   public classRow: string = ''
   public sel: boolean = false
-  public isover: boolean = false
+  public inEdit: boolean = false
-  public classPosItemPopup = 'pos-item-popover'
+  public descrtoEdit: string = ''
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
 
 
   @Watch('itemtodo.completed') valueChanged() {
-    this.$emit('eventupdate', this.itemtodo)
+    this.watchupdate()
-    this.updateicon()
+  }
+
+  @Watch('itemtodo.enableExpiring') valueChanged4() {
+    this.watchupdate()
   }
 
   @Watch('itemtodo.expiring_at') valueChanged2() {
-    this.$emit('eventupdate', this.itemtodo)
+    this.watchupdate()
   }
 
   @Watch('itemtodo.priority') valueChanged3() {
+    this.watchupdate()
+  }
+
+  @Watch('itemtodo.descr') valueChanged5() {
+    this.descrtoEdit = this.itemtodo.descr
+  }
+
+  isTodo () {
+    return this.isTodoByElem(this.itemtodo)
+  }
+
+  isTodoByElem (elem) {
+    return elem.descr.slice(-1) !== ':'
+  }
+
+  watchupdate() {
     this.$emit('eventupdate', this.itemtodo)
     this.updateicon()
   }
@@ -46,8 +68,11 @@ export default class SingleTodo extends Vue {
   updateClasses() {
     // this.classCompleted = 'completed-item'
     this.classCompleted = 'completed-item-popover'
-
     this.classDescr = 'flex-item div_descr'
+    this.classDescrEdit = 'flex-item div_descr_edit'
+    if (!this.isTodo())
+      this.classDescr += ' titleLista-item'
+
     this.classExpiring = 'flex-item data-item'
     this.classExpiringEx = ''
     if (this.itemtodo.completed) {
@@ -57,6 +82,26 @@ export default class SingleTodo extends Vue {
       this.classExpiringEx += ' status_completed'
     }
 
+    if (this.inEdit) {
+      this.classDescr += ' hide'
+      this.classDescrEdit += ' show'
+    } else {
+      this.classDescrEdit += ' hide'
+      this.classDescr += ' show'
+    }
+
+    // this.getinputdescr = 'inputdescr' + this.itemtodo.id
+
+    console.log('classDescrEdit = ', this.classDescrEdit)
+    console.log('classDescr', this.classDescr)
+
+    if (this.isTodo())
+      this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
+    else {
+      this.menuPopupTodo = []
+      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][0])
+    }
+
   }
 
   created() {
@@ -65,45 +110,91 @@ export default class SingleTodo extends Vue {
     this.updateClasses()
 
     this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
-    this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
 
 
   }
 
-  setclassPosItemPopup() {
-
-    if (this.isover)
-      this.classPosItemPopup = 'pos-item-popover'
-    else
-      this.classPosItemPopup = 'pos-item-popover'
-  }
-
   getClassRow() {
     return 'row flex-container2 ' + this.classRow
   }
 
   clickRiga () {
-    this.sel = false
+    console.log('CLICK RIGA ************')
-    if (this.classRow !== 'rowselected') {
+    if (!this.inEdit) {
-      this.sel = true
+      this.$emit('deselectAllRows', this.itemtodo, true)
+
+      if (!this.sel) {
+        this.selectRiga()
       } else {
-      this.sel = false
+        this.deselectRiga()
+      }
+    }
   }
-    this.$emit('click', this.itemtodo)
 
+  selectRiga() {
+    console.log('selectRiga', this.itemtodo.descr)
+    this.sel = true
     this.classRow = 'rowselected'
+    this.updateClasses()
+    console.log('FINE selectRiga', this.itemtodo.descr)
+  }
 
+  deselectRiga() {
+    console.log('DeselectRiga', this.itemtodo.descr)
+    this.sel = false
+    this.classRow = ''
+    this.inEdit = false
     this.updateClasses()
   }
 
-  mouseUp() {
+  deselectAndExitEdit () {
-
+    this.deselectRiga()
-    if (this.sel) {
+    this.exitEdit()
-      this.classRow = 'rowselected'
-    } else {
-      this.classRow = ''
   }
 
+  mouseUp() {
+    if (!this.inEdit) {
+      if (this.sel) {
+        this.selectRiga()
+      } else {
+        this.deselectRiga()
+      }
+    }
+  }
+
+  editTodo () {
+    console.log('INIZIO - editTodo')
+    this.$emit('click')
+    this.inEdit = true
+    if (!this.sel)
+      this.selectRiga()
+    else
+      this.updateClasses()
+
+    this.descrtoEdit = this.itemtodo.descr
+
+    let theField = <HTMLInputElement>this.$refs.inputdescr
+    theField.focus()
+    console.log('focus()')
+
+    console.log('FINE - editTodo')
+  }
+
+  exitEdit () {
+    if (this.inEdit) {
+      console.log('exitEdit')
+      this.inEdit = false
+      this.updateClasses
+      this.$emit('deselectAllRows', this.itemtodo, false)
+    }
+  }
+
+
+  updateTodo () {
+    this.watchupdate()
+    this.itemtodo.descr = this.descrtoEdit
+    this.inEdit = false
+    this.updateClasses()
   }
 
   setCompleted() {
@@ -135,6 +226,7 @@ export default class SingleTodo extends Vue {
     else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_LOW)
       this.iconPriority = 'expand_more'  // expand_more
 
+    this.updateClasses()
   }
 
 
@@ -142,10 +234,19 @@ export default class SingleTodo extends Vue {
     this.$emit('deleteitem', id)
   }
 
+  enableExpiring() {
+    this.itemtodo.enableExpiring = !this.itemtodo.enableExpiring
+
+  }
+
   clickMenu(action) {
     console.log('click menu: ', action)
-    if (action === rescodes.MenuAction.DELETE)
+    if (action === rescodes.MenuAction.DELETE) {
       this.removeitem(this.itemtodo.id)
+    } else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) {
+      this.enableExpiring()
+    }
+
   }
 
   setPriority(newpriority) {

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup.left="mouseUp">
+    <div :class="getClassRow()" @mouseup.left="mouseUp" @mousedown="clickRiga">
         <q-context-menu>
             <q-list link separator no-border class="todo-menu">
                 <q-item v-for="field in menuPopupTodo" :key="field.value"
@@ -9,10 +9,14 @@
                     <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>
             </q-list>
         </q-context-menu>
-        <div class="flex-item pos-item">
+        <div v-if="isTodo()" class="flex-item pos-item" >
             <q-btn flat
                    class="pos-item-popover"
                    icon="menu">
@@ -28,13 +32,16 @@
                             <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>
                     </q-list>
                 </q-popover>
             </q-btn>
         </div>
         <!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
-        <div class="flex-item priority-item">
+        <div v-if="isTodo()" class="flex-item priority-item">
             <q-btn push flat
                    class="priority-item-popover"
                    :icon="iconPriority">
@@ -44,6 +51,8 @@
 
                 >
                     <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"/>
@@ -55,7 +64,7 @@
                 </q-popover>
             </q-btn>
         </div>
-        <div class="flex-item completed-item">
+        <div v-if="isTodo()" class="flex-item completed-item">
             <q-btn push flat
                    :class="classCompleted"
                    :icon="iconCompleted"
@@ -64,16 +73,25 @@
             <!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
                     @click.native="setCompleted"/>-->
         </div>
-        <div :class="classDescr">
+
+        <q-input autofocus ref="inputdescr" :value="descrtoEdit" @change="val => descrtoEdit = val"
+                 :class="classDescrEdit"
+                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit"/>
+
+
+        <div :class="classDescr" @click="editTodo()">
             {{ itemtodo.descr }}
         </div>
 
+
+        <div v-if="itemtodo.enableExpiring">
             <div :class="classExpiring">
                 <q-datetime
                         :class="classExpiringEx"
                         v-model="itemtodo.expiring_at"
                         class="myexpired"/>
             </div>
+        </div>
         <!--<div class="flex-item btn-item">-->
         <!--{{classPosItemPopup}}-->
         <!--</div>-->

src/components/todos/todo/todo.ts

@@ -141,7 +141,7 @@ export default class Todo extends Vue {
 
     if ((elem1 !== null) && (elem2 !== null)) {
       if (elem1.completed === elem2.completed) {
-        return true
+        return elem1.completed
       } else {
         return elem1.completed
       }
@@ -179,7 +179,7 @@ export default class Todo extends Vue {
 
     let completed = this.getCompleted(indini, indfine)
     let changecompleted = false
-    if (completed) {
+    if (completed != null) {
       myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
       myobj.completed = completed
       changecompleted = true
@@ -259,6 +259,7 @@ export default class Todo extends Vue {
       created_at: new Date(),
       modify_at: new Date(),
       expiring_at: mydateexp,
+      enableExpiring: false,
       id_prev: 0,
       id_next: 0,
       pos: 0,
@@ -278,6 +279,8 @@ export default class Todo extends Vue {
   }
 
   async insertTodo() {
+    if (this.todo.trim() === '')
+      return
 
     const objtodo = this.initcat()
 
@@ -490,24 +493,20 @@ export default class Todo extends Vue {
   // }
   //
 
-  clickRiga(item) {
+  deselectAllRows(item, check) {
-    console.log('ClickRiga : ', item)
+    console.log('deselectAllRows : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {
-      // @ts-ignore
-      this.$refs.single[i].classRow = ''
-    }
 
-    // // Disattiva quella precedente
+
-    // if (this.selrowid > 0) {
+      let contr = <SingleTodo>this.$refs.single[i]
-    //   $('#' + this.getrefbyid(this.selrowid) + ' div').removeClass('rowselected')
+      // @ts-ignore
-    // }
+      let id = contr.itemtodo.id
-    //
+      // Don't deselect the actual clicked!
-    if (this.selrowid !== item.id) {
+      if ((check && (item.id !== id)) || (!check)) {
-      this.selrowid = item.id
+        // @ts-ignore
-    } else {
+        contr.deselectAndExitEdit()
-      // was already selected, so deselected
+      }
-      this.selrowid = -1
     }
   }
 
@@ -533,12 +532,14 @@ export default class Todo extends Vue {
     await this.$db.transaction('rw', [this.$db.todos], async () => {
       const miorec = await this.$db.todos.get(myobj.id)
 
+      this.modifyField(miorec, myobj, 'descr')
       this.modifyField(miorec, myobj, 'completed')
       this.modifyField(miorec, myobj, 'expiring_at')
       this.modifyField(miorec, myobj, 'priority')
       this.modifyField(miorec, myobj, 'id_prev')
       this.modifyField(miorec, myobj, 'id_next')
       this.modifyField(miorec, myobj, 'pos')
+      this.modifyField(miorec, myobj, 'enableExpiring')
 
       if (miorec.modified) {
         miorec.modify_at = new Date()

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="Inserisci il Todo"
+            <q-input v-model="todo" inverted :float-label="$t('todo.insert')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo"/>
 
@@ -24,7 +24,7 @@
                                     <div style="display: none">{{ priorcomplet = true }}</div>
                                 </div>
                                 <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
-                                            @click="clickRiga"
+                                            @deselectAllRows="deselectAllRows"
                                             :itemtodo='mytodo' />
 
                                 <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>

src/i18n.js

@@ -85,6 +85,9 @@ const messages = {
       }
     },
     todo: {
+      titleprioritymenu: 'Priorità:',
+      insert: 'Inserisci il Task',
+      edit: 'Descrizione Task:',
       completed: 'Completati'
     }
   },
@@ -174,6 +177,9 @@ const messages = {
       }
     },
     todo: {
+      titleprioritymenu: 'Priority:',
+      insert: 'Insert Task',
+      edit: 'Task Description:',
       completed: 'Completed'
     }
   },

src/model/Todos.ts

@@ -7,6 +7,7 @@ export interface ITodo {
   created_at: any,
   modify_at: any,
   expiring_at: any,
+  enableExpiring?: boolean,
   id_prev?: number,
   id_next?: number,
   modified?: boolean,

src/store/Modules/rescodes.ts

@@ -25,7 +25,8 @@ export const rescodes = {
   },
 
   MenuAction: {
-    DELETE: 100
+    DELETE: 100,
+    TOGGLE_EXPIRING: 101
   },
 
 
@@ -81,8 +82,8 @@ export const rescodes = {
       },
       {
         id: 2,
-        label: 'Attiva...',
+        label: 'Imposta Scadenza',
-        value: 101, // ATTIVA
+        value: 101, // TOGGLE_EXPIRING
         icon: 'expand_more'
       }
       ],
@@ -95,8 +96,8 @@ export const rescodes = {
       },
       {
         id: 2,
-        label: 'Attiva...',
+        label: 'Set Expiring',
-        value: 101, // ATTIVA
+        value: 101, // TOGGLE_EXPIRING
         icon: 'sun'
       }
       ]