Corrected some logic problems...

4 storing:
  - Array in Memory Global state.todos
  - Array temporary filtered arr_todos
  - IndexedDb
  - Database

src-pwa/custom-service-worker.js

@@ -137,7 +137,7 @@ if (workbox) {
           if (data) {
             if (data.todos) {
               console.log('***********************+++++++++++++++++++++++++++++++++++++++++++++++++++**********    Records TODOS Received from Server [', data.todos.length, 'record]', data.todos)
-              for (const key in data.todos) {
+              for (let key in data.todos) {
                 await writeData('todos', data.todos[key])
               }
             }
@@ -506,7 +506,9 @@ self.addEventListener('push', function (event) {
       badge: '/statics/icons/android-chrome-192x192.png',
       data: {
         url: data.url
-      }
+      },
+      tag: 'received',
+      renitify: true, // vibrate also with others messages.
     };
 
     event.waitUntil(

src/components/todos/SingleTodo/SingleTodo.scss

@@ -26,6 +26,10 @@ $heightitem: 19px;
   display: inline-block;
 }
 
+.comp_selected {
+  display: inline-block !important;
+}
+
 .flex-container2:hover{
   background-color: rgba(230, 230, 230, 0.8);
 }
@@ -87,6 +91,9 @@ $heightitem: 19px;
   //visibility: hidden;
 }
 
+//.q-popover.animate-scale {
+//  animation: none;
+//}
 
 .pos-item:hover, .pos-item-popover:hover {
   cursor: grab;

src/components/todos/SingleTodo/SingleTodo.ts

@@ -40,6 +40,8 @@ export default class SingleTodo extends Vue {
   public togglemenu: boolean = false
   public percentageProgress: number = 0
   public itemtodoPrec: ITodo
+  public clButtPopover: string = 'pos-item-popover'
+
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -128,6 +130,9 @@ export default class SingleTodo extends Vue {
     this.menuProgress += mycolcl
     this.percProgress += mycolcl
 
+    this.clButtPopover = this.sel ? 'pos-item-popover comp_selected' : 'pos-item-popover'
+
+
     // if (this.inEdit) {
     //   this.classDescr += ' hide'
     //   this.classDescrEdit += ' show'
@@ -264,6 +269,7 @@ export default class SingleTodo extends Vue {
       }
     }
 */
+    // Delete Key or Backspage
     if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
       e.preventDefault()
       this.deselectRiga()
@@ -382,11 +388,13 @@ export default class SingleTodo extends Vue {
     const deletestr = this.$t('dialog.delete')
     const cancelstr = this.$t('dialog.cancel')
 
-    await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), this.$t('dialog.msg.deleteTask').toString(), deletestr, cancelstr)
+    let msg = this.$t('dialog.msg.deleteTask', {'mytodo' : this.itemtodo.descr })
+    await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), msg, deletestr, cancelstr)
       .then(ris => {
         console.log('ris', ris)
-        if (ris)
+        if (ris) {
           this.removeitem(this.itemtodo._id)
+        }
       }).catch(err => {
 
     })

src/components/todos/SingleTodo/SingleTodo.vue

@@ -13,7 +13,7 @@
             </q-btn>
         </div>
 
-        <q-input type="textarea" ref="inputdescr" v-model.trim="precDescr"
+        <q-input hide-underline type="textarea" ref="inputdescr" v-model.trim="precDescr"
                  :class="classDescr" :max-height="50"
                  @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
 
@@ -50,8 +50,8 @@
             </div>
         </div>
         <div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
-            <q-btn flat
+            <q-btn push
-                   class="pos-item-popover"
+                   :class="clButtPopover"
                    icon="menu" >
                 <q-popover self="top right">
                     <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
@@ -59,6 +59,8 @@
 
             </q-btn>
         </div>
+        <!--clButtPopover: {{ clButtPopover }}-->
+        <!--Sel: {{ sel }}-->
         <!--<div class="flex-item btn-item">-->
         <!--{{itemtodo.expiring_at}}-->
         <!--</div>-->

src/components/todos/todo/todo.ts

@@ -105,7 +105,7 @@ export default class Todo extends Vue {
       // if (value) {
       Todos.actions.dbLoadTodo(false)
         .then(() => {
-          return Todos.actions.updateArrayInMemory()
+          // return Todos.actions.updatefromIndexedDbToStateTodo()
         })
     }
     // }
@@ -462,6 +462,7 @@ export default class Todo extends Vue {
       return
     }
 
+    // 1) Insert into the IndexedDb
     const id = await globalroutines(this, 'write', 'todos', objtodo)
     // update also the last elem
     if (lastelem !== null) {
@@ -470,15 +471,21 @@ export default class Todo extends Vue {
       // console.log('calling MODIFY 4', lastelem)
     }
 
+    // Create record in Memory
+    Todos.mutations.createNewItem(objtodo)
+
+    // Modify the record above to the new last
     await this.modify(lastelem, false)
 
-    await this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
-    await this.updatetable(false, 'insertTodo')
-
-    // console.log('ESCO.........')
-
     // empty the field
     this.todo = ''
+
+    this.updatetable(false, 'insertTodo')
+
+    this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
+
+    // console.log('ESCO.........')
+
   }
 
 
@@ -525,8 +532,10 @@ export default class Todo extends Vue {
                   // }
                 })
                 .then(function () {
+                  if (msg !== '') {
                     let data = { message: msg, position: 'bottom', timeout: 3000 }
                     mythis.$q.notify(data)
+                  }
                 })
                 .catch(function (err) {
                   console.error('Errore in globalroutines', table, err)
@@ -534,32 +543,36 @@ export default class Todo extends Vue {
             })
         })
 
-      if (update) {
+      // if (update) {
-        // // Update the array in memory, from todos table from IndexedDb
+      //   // // Update the array in memory, from IndexedDb update the todos array
-        await Todos.actions.updateArrayInMemory()
+      //   await Todos.actions.updatefromIndexedDbToStateTodo()
-          .then((ris) => {
+      //     .then((ris) => {
-            return ris
+      //       return ris
-          })
+      //     })
+      // }
+
     }
 
-    } else {
     if (cmd === rescodes.DB.CMD_SYNC_NEW_TODOS) {
       if (method === 'POST')
         await Todos.actions.dbInsertTodo(item)
       else if (method === 'PATCH')
         await Todos.actions.dbSaveTodo(item)
-      } else if (cmd === rescodes.DB.CMD_DELETE_TODOS)
+    } else if (cmd === rescodes.DB.CMD_DELETE_TODOS) {
       await Todos.actions.dbDeleteTodo(item)
     }
   }
 
   async saveItemToSyncAndDb(table: String, method, item: ITodo, update: boolean) {
+    // let msg = (method === 'PATCH') ? 'Modif: ' : '++Create: '
+    // msg = msg + item.descr
     return await this.cmdToSyncAndDb(rescodes.DB.CMD_SYNC_NEW_TODOS, table, method, item, 0, '', update)
   }
 
 
-  async deleteItemToSyncAndDb(table: String, item: ITodo, id, update: boolean) {
+  deleteItemToSyncAndDb(table: String, item: ITodo, id, update: boolean) {
-    return await this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', item, id, '', update)
+    // let msg = 'Delete: ' + item.descr
+    this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', item, id, '', update)
   }
 
   /*
@@ -591,6 +604,8 @@ export default class Todo extends Vue {
   async deleteitem(id) {
     console.log('deleteitem: KEY = ', id)
 
+
+
     let myobjtrov = this.getElemById(id)
 
     if (myobjtrov !== null) {
@@ -611,16 +626,23 @@ export default class Todo extends Vue {
         await this.modify(myobjnext, false)
       }
 
-      await this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id, true)
+      // 1) Delete from the Todos Array
+      Todos.mutations.deletemyitem(myobjtrov)
+      Todos.mutations.setTodos_changed()
 
-      const mythis = this
+      // 2) Delete from the IndexedDb
-      // Delete item
+      globalroutines(this, 'delete', 'todos', null, id)
-      await globalroutines(this, 'delete', 'todos', null, id)
         .then((ris) => {
-          mythis.updatetable(false, 'deleteitem')
+          // Update in to the UI
+          this.updatetable(true, 'deleteitem')
+
         }).catch((error) => {
           console.log('err: ', error)
         })
+
+      // 3) Delete from the Server (call)
+      this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id, true)
+
     }
 
     // console.log('FINE deleteitem')
@@ -646,7 +668,7 @@ export default class Todo extends Vue {
     return await Todos.actions.getTodosByCategory(this.getCategory())
       .then(arrris => {
 
-        this.todos_arr = []
+        // this.todos_arr = []
 
         let arrtemp = [...arrris]
 
@@ -663,7 +685,7 @@ export default class Todo extends Vue {
 
         this.todos_arr = [...arrtemp]  // make copy
 
-        console.log('AGGIORNA todos_arr')
+        console.log('AGGIORNA todos_arr [', this.todos_arr.length, ']')
 
       })
   }
@@ -797,9 +819,9 @@ export default class Todo extends Vue {
 
   modifyField(recOut, recIn, field) {
     if (String(recOut[field]) !== String(recIn[field])) {
-      console.log('***************  CAMPO ', field, 'MODIFICATO!')
+      // console.log('***************  CAMPO ', field, 'MODIFICATO!')
-      console.log(recOut[field])
+      // console.log(recOut[field])
-      console.log(recIn[field])
+      // console.log(recIn[field])
       recOut.modified = true
       recOut[field] = recIn[field]
       return true
@@ -833,19 +855,22 @@ export default class Todo extends Vue {
           miorec.modify_at = new Date().getDate()
           miorec.modified = false
 
-          // this.logelem('modify', miorec)
+          // 1) Modify on Global Memory
+          Todos.mutations.modifymyItem(miorec)
 
-          return globalroutines(this, 'write', 'todos', miorec)
+          if (update) {
+            // 4) Update the filter in Memory
+            this.updatetable(false, 'modify')
+          }
+
+          // this.logelem('modify', miorec)
+          // 2) Modify on IndexedDb
+          globalroutines(this, 'write', 'todos', miorec)
             .then(ris => {
 
-              return this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS_PATCH, 'PATCH', miorec, update)
+              // 3) Modify on the Server (call)
-                .then(() => {
+              this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS_PATCH, 'PATCH', miorec, update)
-                  // console.log('SET MODIFIED FALSE')
 
-                  if (update)
-                    return this.updatetable(false, 'modify')
-
-                })
             })
         }
       })

src/globalroutines/indexdb.js

@@ -63,7 +63,7 @@ export default async (context, cmd, table, datakey = null, id = '') => {
 
   } else if (cmd === 'write') {
     return await storage.setdata(table, datakey)
-  } else if (cmd === 'updateinMemory') {
+  } else if (cmd === 'updatefromIndexedDbToStateTodo') {
     return await readfromIndexDbToStateTodos(context, table)
   } else if (cmd === 'readall') {
     return await storage.getalldata(table)

src/root/home/home.ts

@@ -43,10 +43,10 @@ export default class Home extends Vue {
   set conta(valore) {
     GlobalStore.actions.setConta(valore)
     let my = this.$q.i18n.lang
-    this.showNotification(String(my))
+    this.showNotif(String(my))
   }
 
-  showNotification(message: string, color = 'primary', icon = '') {
+  showNotif(message: string, color = 'primary', icon = '') {
     this.$q.notify({
       color,
       icon,
@@ -158,15 +158,15 @@ export default class Home extends Vue {
   }
 
   askfornotification() {
-    this.showNotification(this.$t('notification.waitingconfirm'), 'positive', 'notifications')
+    this.showNotif(this.$t('notification.waitingconfirm'), 'positive', 'notifications')
 
     let mythis = this
     Notification.requestPermission(function (result) {
       console.log('User Choice', result)
       if (result === 'granted') {
-        mythis.showNotification(mythis.$t('notification.confirmed'), 'positive', 'notifications')
+        mythis.showNotif(mythis.$t('notification.confirmed'), 'positive', 'notifications')
       } else {
-        mythis.showNotification(mythis.$t('notification.denied'), 'negative', 'notifications')
+        mythis.showNotif(mythis.$t('notification.denied'), 'negative', 'notifications')
 
         // displayConfirmNotification();
       }

src/statics/i18n.js

@@ -8,7 +8,7 @@ const messages = {
       cancel: 'Annulla',
       msg: {
         titledeleteTask: 'Elimina Task',
-        deleteTask: 'Vuoi Eliminare questo Task?'
+        deleteTask: "Vuoi Eliminare {mytodo}?"
       }
     },
     comp:{
@@ -134,7 +134,7 @@ const messages = {
       cancel: 'Cancelar',
       msg: {
         titledeleteTask: 'Borrar Tarea',
-        deleteTask: 'Quieres borrar este tarea?'
+        deleteTask: 'Quieres borrar %s?'
       }
     },
     comp:{
@@ -260,7 +260,7 @@ const messages = {
       cancel: 'Cancel',
       msg: {
         titledeleteTask: 'Delete Task',
-        deleteTask: 'Delete this Task?'
+        deleteTask: 'Delete %s?'
       }
     },
     comp:{

src/store/Api/index.ts

@@ -132,7 +132,7 @@ export namespace ApiTool {
   }
 
   export async function syncAlternative(mystrparam) {
-    console.log('[ALTERNATIVE Background syncing', mystrparam)
+    // console.log('[ALTERNATIVE Background syncing', mystrparam)
 
     let multiparams = mystrparam.split('|')
     if (multiparams) {

src/store/Modules/Todos.ts

@@ -46,9 +46,45 @@ namespace Mutations {
     // console.log('*******  state.todos_changed', state.todos_changed)
   }
 
+  function findTodoById(state: ITodosState, id: string) {
+    for (let i = 0; i < state.todos.length; i++) {
+      if (state.todos[i]._id === id)
+        return i
+    }
+    return -1
+  }
+
+  function createNewItem(state: ITodosState, myitem: ITodo) {
+    state.todos.push(myitem)
+    Todos.mutations.setTodos_changed()
+  }
+
+
+  function modifymyItem(state: ITodosState, myitem: ITodo) {
+    // Find record
+    const ind = findTodoById(state, myitem._id)
+    if (ind >= 0)
+      state.todos[ind] = rescodes.jsonCopy(myitem)
+
+  }
+
+  function deletemyitem(state: ITodosState, myitem: ITodo) {
+    // Find record
+    const ind = findTodoById(state, myitem._id)
+
+    // Delete Item in to Array
+    if (ind >= 0)
+      state.todos.splice(ind, 1)
+
+  }
+
+
   export const mutations = {
     setTestpao: b.commit(setTestpao),
-    setTodos_changed: b.commit(setTodos_changed)
+    setTodos_changed: b.commit(setTodos_changed),
+    modifymyItem: b.commit(modifymyItem),
+    deletemyitem: b.commit(deletemyitem),
+    createNewItem: b.commit(createNewItem)
   }
 
 }
@@ -226,8 +262,10 @@ namespace Actions {
       } else {
         consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)', UserStore.getters.getServerCode, ris.status)
       }
+      if ('serviceWorker' in navigator) {
         // Read all data from IndexedDB Store into Memory
-      await updateArrayInMemory(context)
+        await updatefromIndexedDbToStateTodo(context)
+      }
     } else {
       if (ris.status === rescodes.OK && checkPending) {
         waitAndcheckPendingMsg(context)
@@ -235,11 +273,11 @@ namespace Actions {
     }
   }
 
-  async function updateArrayInMemory(context) {
+  async function updatefromIndexedDbToStateTodo(context) {
     // console.log('Update the array in memory, from todos table from IndexedDb')
-    await globalroutines(null, 'updateinMemory', 'todos', null)
+    await globalroutines(null, 'updatefromIndexedDbToStateTodo', 'todos', null)
       .then(() => {
-        // console.log('updateArrayInMemory! ')
+        console.log('updatefromIndexedDbToStateTodo! ')
         return true
       })
   }
@@ -269,25 +307,10 @@ namespace Actions {
     return await dbInsertSaveTodo(context, itemtodo, 'POST')
   }
 
-  function UpdateNewIdFromDB(oldItem, newItem, method) {
-    // console.log('PRIMA state.todos', state.todos)
-    // console.log('ITEM', newItem)
-    if (method === 'POST') {
-      state.todos.push(newItem)
-      Todos.mutations.setTodos_changed()
-      // } else if (method === 'PATCH') {
-      //   state.todos.map(item => {
-      //     if (item._id === newItem._id) {
-      //       return newItem
-      //     }
-      //   })
-    }
-
-
-    // console.log('DOPO state.todos', state.todos)
-  }
-
   async function dbInsertSaveTodo(context, itemtodo: ITodo, method) {
+
+    if (!('serviceWorker' in navigator)) {
+
       console.log('dbInsertSaveTodo', itemtodo, method)
       let call = process.env.MONGODB_HOST + '/todos'
 
@@ -301,22 +324,23 @@ namespace Actions {
 
       let res = await Api.SendReq(call, method, itemtodo)
         .then(({ res, newItem }) => {
-        console.log('dbInsertSaveTodo RIS =', newItem)
+          console.log('dbInsertSaveTodo to the Server', newItem)
-        if (newItem) {
 
-          // Update ID on local
+          return (res.status === 200)
-          UpdateNewIdFromDB(itemtodo, newItem, method)
-        }
         })
         .catch((error) => {
           UserStore.mutations.setErrorCatch(error)
-        return UserStore.getters.getServerCode
+          // return UserStore.getters.getServerCode
+          return false
         })
+    }
 
-    return res
+    return true
   }
 
   async function dbDeleteTodo(context, item: ITodo) {
+
+    if (!('serviceWorker' in navigator)) {
       // console.log('dbDeleteTodo', item)
       let call = process.env.MONGODB_HOST + '/todos/' + item._id
 
@@ -325,15 +349,7 @@ namespace Actions {
 
       let res = await Api.SendReq(call, 'DELETE', item)
         .then(function ({ res, itemris }) {
-
+          console.log('dbDeleteTodo to the Server')
-        if (res.status === 200) {
-          // Delete Item in to Array
-          state.todos.splice(state.todos.indexOf(item), 1)
-
-          Todos.mutations.setTodos_changed()
-        }
-
-        return rescodes.OK
         })
         .catch((error) => {
           UserStore.mutations.setErrorCatch(error)
@@ -342,6 +358,7 @@ namespace Actions {
 
       return res
     }
+  }
 
   async function getTodosByCategory(context, category: string) {
     let myarr = state.todos.filter((p) => {
@@ -356,7 +373,7 @@ namespace Actions {
     dbSaveTodo: b.dispatch(dbSaveTodo),
     dbLoadTodo: b.dispatch(dbLoadTodo),
     dbDeleteTodo: b.dispatch(dbDeleteTodo),
-    updateArrayInMemory: b.dispatch(updateArrayInMemory),
+    updatefromIndexedDbToStateTodo: b.dispatch(updatefromIndexedDbToStateTodo),
     getTodosByCategory: b.dispatch(getTodosByCategory),
     checkPendingMsg: b.dispatch(checkPendingMsg),
     waitAndcheckPendingMsg: b.dispatch(waitAndcheckPendingMsg)

src/store/Modules/rescodes.ts

@@ -89,7 +89,7 @@ export const rescodes = {
 
   },
 
-  INDEX_MENU_DELETE: 3,
+  INDEX_MENU_DELETE: 4,
 
   menuPopupTodo: {
     'it': [
@@ -168,6 +168,11 @@ export const rescodes = {
       ]
   },
 
+  jsonCopy(src) {
+    return JSON.parse(JSON.stringify(src))
+  }
+
+
 
 
 }