From cd0ec4044140ebdb36998abcaefcdaddebca86ad Mon Sep 17 00:00:00 2001 From: Paolo Arena Date: Fri, 15 Feb 2019 01:25:44 +0100 Subject: [PATCH] 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 | 6 +- .../todos/SingleTodo/SingleTodo.scss | 7 + src/components/todos/SingleTodo/SingleTodo.ts | 12 +- .../todos/SingleTodo/SingleTodo.vue | 8 +- src/components/todos/todo/todo.ts | 113 ++++++++----- src/globalroutines/indexdb.js | 2 +- src/root/home/home.ts | 10 +- src/statics/i18n.js | 6 +- src/store/Api/index.ts | 2 +- src/store/Modules/Todos.ts | 157 ++++++++++-------- src/store/Modules/rescodes.ts | 7 +- 11 files changed, 198 insertions(+), 132 deletions(-) diff --git a/src-pwa/custom-service-worker.js b/src-pwa/custom-service-worker.js index 43ee1de..0dc793e 100644 --- a/src-pwa/custom-service-worker.js +++ b/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( diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss index 4eebdb8..1721016 100644 --- a/src/components/todos/SingleTodo/SingleTodo.scss +++ b/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; diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts index 813ab95..788900b 100644 --- a/src/components/todos/SingleTodo/SingleTodo.ts +++ b/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 => { }) diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue index 68ffee7..73ae24b 100644 --- a/src/components/todos/SingleTodo/SingleTodo.vue +++ b/src/components/todos/SingleTodo/SingleTodo.vue @@ -13,7 +13,7 @@ - @@ -50,8 +50,8 @@
- @@ -59,6 +59,8 @@
+ + diff --git a/src/components/todos/todo/todo.ts b/src/components/todos/todo/todo.ts index 2f4b568..2ebb42d 100644 --- a/src/components/todos/todo/todo.ts +++ b/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 () { - let data = { message: msg, position: 'bottom', timeout: 3000 } - mythis.$q.notify(data) + 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) { - // // Update the array in memory, from todos table from IndexedDb - await Todos.actions.updateArrayInMemory() - .then((ris) => { - return ris - }) - } + // if (update) { + // // // Update the array in memory, from IndexedDb update the todos array + // await Todos.actions.updatefromIndexedDbToStateTodo() + // .then((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) - await Todos.actions.dbDeleteTodo(item) + } + + 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) { + 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) { - return await this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', item, id, '', update) + deleteItemToSyncAndDb(table: String, item: ITodo, id, update: boolean) { + // 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 - // Delete item - await globalroutines(this, 'delete', 'todos', null, id) + // 2) Delete from the IndexedDb + 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(recOut[field]) - console.log(recIn[field]) + // console.log('*************** CAMPO ', field, 'MODIFICATO!') + // console.log(recOut[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) - .then(() => { - // console.log('SET MODIFIED FALSE') + // 3) Modify on the Server (call) + this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS_PATCH, 'PATCH', miorec, update) - if (update) - return this.updatetable(false, 'modify') - - }) }) } }) diff --git a/src/globalroutines/indexdb.js b/src/globalroutines/indexdb.js index e647dce..b0b6423 100644 --- a/src/globalroutines/indexdb.js +++ b/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) diff --git a/src/root/home/home.ts b/src/root/home/home.ts index 8f62da5..2a3ab52 100644 --- a/src/root/home/home.ts +++ b/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(); } diff --git a/src/statics/i18n.js b/src/statics/i18n.js index e10e65c..8652842 100644 --- a/src/statics/i18n.js +++ b/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:{ diff --git a/src/store/Api/index.ts b/src/store/Api/index.ts index 0274374..867784c 100644 --- a/src/store/Api/index.ts +++ b/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) { diff --git a/src/store/Modules/Todos.ts b/src/store/Modules/Todos.ts index 9293477..89dd7bc 100644 --- a/src/store/Modules/Todos.ts +++ b/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) } - // Read all data from IndexedDB Store into Memory - await updateArrayInMemory(context) + if ('serviceWorker' in navigator) { + // Read all data from IndexedDB Store into Memory + 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,78 +307,57 @@ 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 - // } - // }) + async function dbInsertSaveTodo(context, itemtodo: ITodo, method) { + + if (!('serviceWorker' in navigator)) { + + console.log('dbInsertSaveTodo', itemtodo, method) + let call = process.env.MONGODB_HOST + '/todos' + + if (UserStore.state.userId === '') + return false // Login not made + + if (method !== 'POST') + call += '/' + itemtodo._id + + console.log('TODO TO SAVE: ', itemtodo) + + let res = await Api.SendReq(call, method, itemtodo) + .then(({ res, newItem }) => { + console.log('dbInsertSaveTodo to the Server', newItem) + + return (res.status === 200) + }) + .catch((error) => { + UserStore.mutations.setErrorCatch(error) + // return UserStore.getters.getServerCode + return false + }) } - - // console.log('DOPO state.todos', state.todos) - } - - async function dbInsertSaveTodo(context, itemtodo: ITodo, method) { - console.log('dbInsertSaveTodo', itemtodo, method) - let call = process.env.MONGODB_HOST + '/todos' - - if (UserStore.state.userId === '') - return false // Login not made - - if (method !== 'POST') - call += '/' + itemtodo._id - - console.log('TODO TO SAVE: ', itemtodo) - - let res = await Api.SendReq(call, method, itemtodo) - .then(({ res, newItem }) => { - console.log('dbInsertSaveTodo RIS =', newItem) - if (newItem) { - - // Update ID on local - UpdateNewIdFromDB(itemtodo, newItem, method) - } - }) - .catch((error) => { - UserStore.mutations.setErrorCatch(error) - return UserStore.getters.getServerCode - }) - - return res + return true } async function dbDeleteTodo(context, item: ITodo) { - // console.log('dbDeleteTodo', item) - let call = process.env.MONGODB_HOST + '/todos/' + item._id - if (UserStore.state.userId === '') - return false // Login not made + if (!('serviceWorker' in navigator)) { + // console.log('dbDeleteTodo', item) + let call = process.env.MONGODB_HOST + '/todos/' + item._id - let res = await Api.SendReq(call, 'DELETE', item) - .then(function ({ res, itemris }) { + if (UserStore.state.userId === '') + return false // Login not made - if (res.status === 200) { - // Delete Item in to Array - state.todos.splice(state.todos.indexOf(item), 1) + let res = await Api.SendReq(call, 'DELETE', item) + .then(function ({ res, itemris }) { + console.log('dbDeleteTodo to the Server') + }) + .catch((error) => { + UserStore.mutations.setErrorCatch(error) + return UserStore.getters.getServerCode + }) - Todos.mutations.setTodos_changed() - } - - return rescodes.OK - }) - .catch((error) => { - UserStore.mutations.setErrorCatch(error) - return UserStore.getters.getServerCode - }) - - return res + return res + } } async function getTodosByCategory(context, category: string) { @@ -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) diff --git a/src/store/Modules/rescodes.ts b/src/store/Modules/rescodes.ts index 13ef138..f2f4c6a 100644 --- a/src/store/Modules/rescodes.ts +++ b/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)) + } + + }