- fix: updated from Store to Component: using Watch with 'immediate' parameters! @Watch('todos_changed', { immediate: true, deep: true })

src/components/todos/todo/todo.ts

@@ -41,7 +41,7 @@ export default class Todo extends Vue {
   itemDragStart: any = null
   itemDragEnd: any = null
   selrowid: number = 0
-  todos_global: ITodo[] = []
+  todos_global: any
 
   // @Prop({ required: false }) category: string
 
@@ -53,13 +53,34 @@ export default class Todo extends Vue {
     console.log('drag = ' + this.drag)
   }
 
+  @Watch('$route', { immediate: true, deep: true })
+  onUrlChange(newVal: any) {
+    // Some action
+  }
+
+
   @Watch('$route.params.category') changecat() {
     // console.log('changecat')
     this.load()
   }
 
-  @Watch('todos_global') refresh() {
+  get todos_changed() {
-    console.log('Todos.state.todos CHANGED!')
+    return Todos.state.todos_changed
+  }
+
+  @Watch('todos_changed', { immediate: true, deep: true })
+  changetodos_changed(value: string, oldValue: string) {
+    console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
+    this.updatetable(true)
+  }
+
+  get testPao() {
+    return Todos.state.testpao
+  }
+
+  @Watch('testPao', { immediate: true, deep: true })
+  changedTestpao(value: string, oldValue: string) {
+    console.log('testpao CHANGED', value, oldValue)
     this.updatetable(true)
   }
 
@@ -258,13 +279,11 @@ export default class Todo extends Vue {
     // console.log('Array PRIOR:', this.arrPrior)
   }
 
-
   async load() {
 
-    this.todos_global = Todos.state.todos
+    this.todos_global = Todos.state.todos_changed
     this.todos_arr = [...Todos.state.todos]
 
-
     // Set last category selected
     localStorage.setItem(rescodes.localStorage.categorySel, this.getCategory())
 
@@ -494,7 +513,6 @@ export default class Todo extends Vue {
       // Delete item
       await globalroutines(this, 'delete', 'todos', null, id)
         .then((ris) => {
-          console.log('UpdateTable', ris)
           mythis.updatetable()
         }).catch((error) => {
           console.log('err: ', error)

src/components/todos/todo/todo.vue

@@ -35,6 +35,9 @@
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo"/>
 
+            <q-input v-model="testPao" float-label="testPao"/>
+            <q-input v-model="todos_changed" float-label="todos_changed"/>
+
             <div class="flex-item btn-item">
             <q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>
             </div>

src/globalroutines/indexdb.js

@@ -1,6 +1,6 @@
 import store from '../store'
 import _ from 'lodash'
-import { UserStore } from '@modules'
+import { UserStore, Todos } from '@store'
 import { i18n } from '../plugins/i18n'
 
 import {idbKeyval as storage} from '../js/storage.js';
@@ -26,39 +26,58 @@ function writeConfigIndexDb(context, data) {
 
 }
 
-async function readfromIndexDbToStateTodos(context) {
+async function readfromIndexDbToStateTodos(context, table) {
   console.log('*** read from IndexDb to state.todos')
 
-  return await storage.getalldata('todos')
+  return await storage.getalldata(table)
-    .then(ristodos => {
+    .then(records => {
-      console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', ristodos.length)
+      console.log('PRIMA:', Todos.state.todos)
-      console.log('ristodos:', ristodos)
+      console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
-      UserStore.state.todos = [...ristodos]
+      console.log('   records:', records)
+      if (table === 'todos') {
+        Todos.state.todos = [...records]
+        console.log('DOPO:', Todos.state.todos)
+        Todos.state.todos_changed++
+        console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
+
+        setTimeout(testfunc2, 3000)
+
+
+      }
     }).catch((error) => {
     console.log('err: ', error)
   })
 
 }
 
-export default async (context, cmd, table, datakey, id) => {
+function consolelogpao(str, str2 = '', str3 = '') {
+  console.log(str, str2, str3)
+  // Todos.mutations.setTestpao(str + str2 + str3)
+}
+
+function testfunc2 () {
+  consolelogpao('testfunc2')
+  Todos.mutations.setTodos_changed()
+  Todos.mutations.setTestpao(Todos.state.todos_changed)
+  consolelogpao('testfunc2: Todos.state.todos_changed:', Todos.state.todos_changed)
+}
+
+export default async (context, cmd, table, datakey = null, id = '') => {
   if (cmd === 'loadapp') {
     // ****** LOAD APP AL CARICAMENTO ! *******
     return saveConfigIndexDb(context, datakey)
 
-
-    if ('indexedDB' in window) {
-      if (!UserStore.state.networkDataReceived) {
-        return await readfromIndexDbToStateTodos(context)
-      }
-    }
-
   } else if (cmd === 'write') {
     return await storage.setdata(table, datakey)
+  } else if (cmd === 'updateinMemory') {
+    return await readfromIndexDbToStateTodos(context, table)
   } else if (cmd === 'readall') {
     return await storage.getalldata(table)
   } else if (cmd === 'read') {
     return await storage.getdata(table, id)
   } else if (cmd === 'delete') {
     return await storage.deletedata(table, id)
+  } else if (cmd === 'log') {
+    consolelogpao(table)
   }
 }

src/model/Todos.ts

@@ -21,4 +21,6 @@ export interface ITodosState {
   visuOnlyUncompleted: boolean
   networkDataReceived: boolean
   todos: ITodo[]
+  todos_changed: number
+  testpao: String
 }

src/store/Modules/Todos.ts

@@ -1,15 +1,18 @@
-import { ITodo, ITodosState } from 'model'
+import { IGlobalState, ITodo, ITodosState } from 'model'
 import { storeBuilder } from './Store/Store'
 
 import Api from '@api'
 import { rescodes } from './rescodes'
-import { UserStore } from '@store'
+import { Todos, UserStore } from '@store'
+import globalroutines from './../../globalroutines/index'
 
 
 const state: ITodosState = {
   visuOnlyUncompleted: false,
   networkDataReceived: false,
-  todos: []
+  todos: [],
+  todos_changed: 1,
+  testpao: 'Test'
 }
 
 const b = storeBuilder.module<ITodosState>('TodosModule', state)
@@ -29,8 +32,26 @@ namespace Getters {
 
 namespace Mutations {
 
+  function setTestpao(state: ITodosState, testpao: String) {
+    state.testpao = testpao
   }
 
+  function setTodos_changed(state: ITodosState) {
+    state.todos_changed++
+  }
+
+  export const mutations = {
+    setTestpao: b.commit(setTestpao),
+    setTodos_changed: b.commit(setTodos_changed),
+  }
+
+}
+
+function consolelogpao(strlog, strlog2 = '', strlog3 = '') {
+  globalroutines(null, 'log', strlog + strlog2 + strlog3, null)
+}
+
+
 namespace Actions {
 
   function json2array(json) {
@@ -67,14 +88,42 @@ namespace Actions {
       })
       .catch((error) => {
         if (process.env.DEV) {
-          console.log('ERROREEEEEEEEE')
+          console.log('dbLoadTodo ERRORE', error)
           console.log(error)
         }
+        // If error network connection, take the data from IndexedDb
+
         return rescodes.ERR_GENERICO
       })
 
+    if (!Todos.state.networkDataReceived) {
+      console.log('NETWORK UNREACHABLE ! (Error in fetch)')
+      consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)')
+      // Read all data from IndexedDB Store into Memory
+      await globalroutines(null, 'updateinMemory', 'todos', null)
+        .then(() => {
 
+          testfunc()
+        })
+    }
+  }
 
+  function aspettansec(numsec) {
+    return new Promise(function (resolve, reject) {
+      setTimeout(function () {
+        resolve('anything')
+      }, numsec)
+    })
+  }
+
+  async function testfunc() {
+    while (true) {
+      consolelogpao('testfunc')
+      // Todos.mutations.setTodos_changed()
+      Todos.state.todos_changed++
+      console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
+      await aspettansec(5000)
+    }
   }
 
   async function dbSaveTodo(context, itemtodo: ITodo) {
@@ -129,7 +178,7 @@ namespace Actions {
       })
       .catch((error) => {
         if (process.env.DEV) {
-          console.log('ERROREEEEEEEEE')
+          console.log('ERRORE FETCH', 'dbInsertSaveTodo', method)
           console.log(error)
         }
         return rescodes.ERR_GENERICO
@@ -154,7 +203,7 @@ namespace Actions {
       })
       .catch((error) => {
         if (process.env.DEV) {
-          console.log('ERROREEEEEEEEE', error)
+          console.log('ERRORE FETCH', 'dbDeleteTodo')
         }
         return rescodes.ERR_GENERICO
       })
@@ -187,7 +236,7 @@ const TodosModule = {
     return stateGetter()
   },
   getters: Getters.getters,
-  // mutations: Mutations.mutations,
+  mutations: Mutations.mutations,
   actions: Actions.actions
 }
 

src/store/Modules/UserStore.ts

@@ -7,6 +7,7 @@ import router from '@router'
 import { serv_constants } from '../Modules/serv_constants'
 import { rescodes } from '../Modules/rescodes'
 import { GlobalStore, UserStore, Todos } from '@store'
+import globalroutines from './../../globalroutines/index'
 
 const bcrypt = require('bcryptjs')
 
@@ -348,7 +349,7 @@ namespace Actions {
           })
           .catch((error) => {
             if (process.env.DEV) {
-              console.log('ERROREEEEEEEEE')
+              console.log('signup ERROREEEEEEEEE')
               console.log(error)
             }
             Mutations.mutations.setServerCode(rescodes.ERR_GENERICO)
@@ -450,8 +451,7 @@ namespace Actions {
       })
       .catch((error) => {
         if (process.env.DEV) {
-          console.log('ERROREEEEEEEEE')
+          console.log('signin ERRORE', error)
-          console.log(error)
         }
         Mutations.mutations.setServerCode(rescodes.ERR_GENERICO)
         return rescodes.ERR_GENERICO
@@ -497,8 +497,11 @@ namespace Actions {
     GlobalStore.mutations.setCategorySel(localStorage.getItem(rescodes.localStorage.categorySel))
 
     Todos.actions.dbLoadTodo()
+
+
   }
 
+
   async function autologin (context) {
     try {
       console.log('*** Autologin ***')