++ Added "Projects" (step 1b)

src-pwa/custom-service-worker.js

@@ -26,12 +26,12 @@ const cfgenv = {
 
 // console.log('serverweb', cfgenv.serverweb)
 
-
 async function writeData(table, data) {
   // console.log('writeData', table, data);
   await idbKeyval.setdata(table, data);
 }
 
+
 async function readAllData(table) {
   // console.log('readAllData', table);
   return await idbKeyval.getalldata(table);
@@ -123,31 +123,34 @@ if (workbox) {
 
   // console.log('  routing.registerRoute function declaration:')
 
-  workbox.routing.registerRoute(
+  function Execute_Fetch(table, args) {
-    new RegExp(cfgenv.serverweb + '/todos/'),
+    console.log('Execute_Fetch registerRoute! ', cfgenv.serverweb + '/' + table + '/')
-    function (args) {
-      console.log('registerRoute! ', cfgenv.serverweb + '/todos/')
     // console.log('DATABODY:', args.event.request.body)
     let myres = null
     // return fetch(args.event.request, args.event.headers)
     return fetch(args.event.request, args.event.headers)
       .then(function (res) {
         myres = res
-          // console.log('1° *******  [[[ SERVICE-WORKER ]]] registerRoute fetch: -> ', args.event.request, res)
-          // LOAD FROM SERVER , AND SAVE INTO INDEXEDDB
-          // console.log('res.status', res.status)
         if (res.status === 200) {
           const clonedRes = res.clone();
 
-            // console.log('1) clearAllData(categories)')
+          let secondatab = ''
-            return clearAllData('categories')
+          if (table === 'todos') {
+            secondatab = 'categories'
+          }
+          console.log('1) clearAllData: ', table)
+          return clearAllData(table)
             .then(() => {
+              if (secondatab !== '') {
                 // console.log('2) clearAllData(todos)')
-                return clearAllData('todos')
+                return clearAllData(secondatab)
                   .then(() => {
                     // console.log('3)  ....return clonedRes')
                     return clonedRes
                   })
+              } else {
+                return clonedRes
+              }
             })
         }
       })
@@ -160,22 +163,33 @@ if (workbox) {
       .then(data => {
         // console.log('  4) data = ', data)
         if (data) {
-            if (data.todos) {
+
+          myarr = idbKeyval.getArrayByTable(table, data)
+          if (myarr) {
 
             let promiseChain = Promise.resolve();
 
-              console.log('*********+++++++++++++++++**********    Records TODOS Received from Server [', data.todos.length, 'record]', data.todos)
+            console.log('*********+++++++++++++++++**********    Records ', table + ' Received from Server [', myarr.length, 'record]', myarr)
 
+            if (table === 'todos') {
               for (let cat in data.categories) {
                 promiseChain = promiseChain.then(() => {
-                  return writeData('categories', { _id: cat, valore: data.categories[cat] } )
+                  return writeData('categories', { _id: cat, valore: data.categories[cat] })
                 })
               }
 
-              for (let indrecCat in data.todos) {
+              for (let indrecCat in myarr) {
-                for (let indrec in data.todos[indrecCat]) {
+                for (let indrec in myarr[indrecCat]) {
                   promiseChain = promiseChain.then(() => {
-                    return writeData('todos', data.todos[indrecCat][indrec])
+                    return writeData(table, myarr[indrecCat][indrec])
+                  })
+                }
+              }
+            } else {
+              // Others tables
+              for (let indrec in myarr) {
+                promiseChain = promiseChain.then(() => {
+                  return writeData(table, myarr[indrec])
                 })
               }
             }
@@ -193,8 +207,16 @@ if (workbox) {
         console.log('ERROR registerRoute FETCH:', err)
         return myres
       })
+  }
+
+  for (let table of MainTables) {
+    workbox.routing.registerRoute(
+      new RegExp(cfgenv.serverweb + '/' + table + '/'),
+      function (args) {
+        Execute_Fetch(table, args)
       })
 
+  }
 
   workbox.routing.registerRoute(function (routeData) {
     return (routeData.event.request.headers.get('accept').includes('text/html'));
@@ -236,12 +258,12 @@ if (workbox) {
 
   workbox.routing.registerRoute(
     new RegExp(/\.(?:js|css|font)$/),
-    new workbox.strategies.StaleWhileRevalidate( {
+    new workbox.strategies.StaleWhileRevalidate({
       cacheName: 'js-css-fonts',
     }),
   );
 
-/*
+  /*
     workbox.routing.registerRoute(
       new RegExp('https://cdnjs.coudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'),
       workbox.strategies.staleWhileRevalidate({
@@ -253,7 +275,7 @@ if (workbox) {
         ]
       })
     );
-*/
+  */
 
 // Storage
   workbox.routing.registerRoute(
@@ -283,7 +305,7 @@ if (workbox) {
     })
   );
 
-/*
+  /*
     workbox.routing.registerRoute(
       new RegExp(/^http/),
       workbox.strategies.networkFirst({
@@ -296,7 +318,7 @@ if (workbox) {
         ]
       })
     );
-*/
+  */
 
 
   workbox.routing.registerRoute(

src/components/projects/SingleProject/SingleProject.scss

@@ -0,0 +1,413 @@
+
+
+$colcompleted: #a2a2a2;
+$heightitem: 32px;
+$heightothers: 32px;
+$heightBtn: 100%;
+$heightcounter: 26px;
+$heightdescr: 20px;
+
+.flex-item{
+   // background-color: #d5e2eb;
+  padding: 0px;
+  margin: 1px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 1rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
+
+.flex-container2 {
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 0px 1px 0px 1px;  // top right bottom left
+}
+
+// Set visibility: visible to the icon menu of pos-item-popover
+.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
+//.flex-container2:hover .pos-item-popover {
+  background-color: rgba(230, 230, 230, 0.8);
+  display: inline-block;
+  transition: all ease-in-out .3s;
+}
+
+.comp_selected {
+  display: inline-block !important;
+}
+
+.flex-container2:hover{
+  background-color: rgba(230, 230, 230, 0.8);
+}
+
+.rowselected {
+  border-width: 1px 0px 1px 0px;
+  border-style: solid;
+  border-color: rgba(49, 68, 240, 0.6);
+  background-color: rgba(160, 174, 255, 0.35) !important;
+}
+
+
+.btn-item {
+  max-width: 24px;
+}
+
+.counter-item {
+  margin: auto auto auto 2px;
+  padding: 2px;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 1.10rem;
+  //color: blue !important;
+
+  //order: 2;
+  //height: 24px;
+  //line-height: 24px; /* same as height! */
+}
+
+.pos-item {
+  max-width: 24px;
+  min-width: 26px;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding-left: 1px;
+  padding-right: 1px;
+  margin: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  //height: $heightitem;
+  line-height: $heightitem;
+  min-height: $heightitem;
+  text-align: center;
+  // background-color: #ff4081;
+  font-size: 1rem;
+  order: 2;
+  flex: 1;
+
+}
+
+
+
+.titleLista-item {
+  max-width: 92px;
+  min-width: 92px;
+  margin: 0 auto;
+  height: $heightitem;
+  line-height: $heightitem;
+  text-align: center;
+  // background-color: #ff4081;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+
+.pos-item-popover{
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: block;
+  @media screen and (min-width: 600px) {
+    display: none;
+  }
+  color: #939393;
+  height: $heightitem;
+  line-height: $heightitem;
+  //visibility: hidden;
+}
+
+//.q-menu.animate-scale {
+//  animation: none;
+//}
+
+.pos-item:hover, .pos-item-popover_cursor:hover {
+  cursor: grab;
+}
+
+.priority-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: none;
+  height: 100%;
+  color: #777;
+}
+
+.completed-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  height: $heightitem;
+  line-height: $heightitem;
+  color: #777;
+}
+
+.priority-item {
+  max-width: 24px;
+  min-width: 24px;
+}
+
+.completed-item {
+  max-width: 24px;
+  min-width: 24px;
+  height: $heightitem;
+  line-height: $heightitem;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  max-width: 36px;
+  min-width: 32px;
+  flex: 1;
+  order: 1;
+}
+
+.progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+}
+
+.percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}
+
+.editProgress{
+  //height: 20px;
+}
+
+.colProgress {
+}
+
+.lowperc {
+  color: red;
+}
+.medperc {
+  color: blue;
+}
+.highperc {
+  color: green;
+}
+
+.percompleted {
+  color: $colcompleted
+}
+
+.myexpired {
+  padding-top: 5px;
+  padding-bottom: 3px;
+  font-size: 0.85rem;
+  vertical-align: middle;
+}
+
+.data-item {
+  font-size: 0.85rem;
+  max-width: 78px;
+  @media (max-width: 600px) {
+    max-width: 22px;
+  }
+
+  //min-width: 100px;
+  //display: flex;
+  //visibility: initial;
+  margin-right: 3px;
+  color: #585858;
+  order: 1;
+  flex: 1;
+  height: $heightitem;
+  line-height: $heightitem;
+  padding-left: 2px;
+  padding-right: 0px;
+
+  //height: $heightBtn;
+  //line-height: $heightBtn;
+}
+
+
+.data_string {
+  @media (max-width: 600px) {
+    display: none;
+  }
+
+}
+
+.data-item .q-input-target{
+  color:red !important;
+}
+
+
+/*
+@media screen and (max-width: 600px) {
+  .data-item {
+    display: none;
+    visibility: hidden;
+    content: "";
+  }
+}
+*/
+
+.divdescrTot, .divdescrTot > div > div > div > div > textarea {
+  font-size: 1rem;
+}
+
+.divdescrTot {
+  font-size: 1rem;
+  display: table;
+  flex: 1;
+  height:  $heightitem;
+  vertical-align: middle;
+}
+
+.div_descr, .div_descr_edit {
+  margin: auto auto auto 0px;
+  //padding: 2px;
+  min-width: 100px;
+  text-align: left;
+  color: blue !important;
+  overflow: hidden;
+
+  align-items: center;
+
+  vertical-align: middle;
+  line-height: 120%;
+
+  //background-color: #d50000;
+
+  //order: 2;
+
+  &.hide {
+    display: none !important;
+    visibility: hidden;
+  }
+  &.show {
+    visibility: visible;
+  }
+}
+
+.div_descr {
+  display: -webkit-box;
+  max-height: 45px;
+
+}
+
+
+.div_descr_edit {
+  //display: block;
+  max-height: 90px;
+  //line-height: 120%;
+  //max-height: 90px;
+  line-height: $heightitem;
+}
+
+.div_descr:hover {
+  //border-width: 1px 0px 1px 0px;
+  border-color: rgba(125, 255, 125, 0.5);
+  //padding: 1px;
+}
+
+
+.mycols{
+  margin: 1px;
+  padding: 2px;
+  //width: 40px;
+  // border-color: #8a8484;
+  // border-style: outset;
+  margin: auto;
+  // flex-grow: 1;
+}
+
+
+
+.mycols:hover{
+
+}
+
+.mybtn{
+  width: 18px;
+  height: 18px;
+}
+
+.icon_completed {
+  position: relative;
+  transform: translateY(0%);
+}
+
+.mydescr{
+}
+
+
+.icon_completed {
+  color: rgb(178, 235, 225);
+}
+
+.status_completed {
+  color: $colcompleted !important;
+}
+
+.menuTitlePriority {
+  background-color: blue;
+  color:white;
+  padding: 2px;
+  margin: 2px;
+  font-weight: bold;
+}
+
+.test{
+  color: fuchsia;
+  &.mio1{
+
+    background-color: red;
+  }
+}
+
+.after_textarea {
+  display: none;
+  visibility: hidden;
+}
+
+.after_textarea:hover {
+  visibility: visible;
+}
+
+
+
+/*
+.container {
+  background-color: #ccc;
+  padding: 10px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+
+.item {
+  background-color: red;
+  padding: 10px;
+  color: white;
+
+}
+.i3{
+  order: 1;
+  flex: 1;
+}
+*/
+
+

src/components/projects/SingleProject/SingleProject.ts

@@ -0,0 +1,458 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { UserStore } from '@modules'
+import { tools } from '../../../store/Modules/tools'
+
+import { IProject } from '../../../model/index'
+
+import { SubMenusProj } from '../SubMenusProj'
+
+import { date } from 'quasar'
+import { askConfirm } from '../../../classes/routinestd'
+
+@Component({
+  components: { SubMenusProj },
+  name: 'SingleProject'
+})
+export default class SingleProject extends Vue {
+  public selectPriority: [] = []
+  public menuPopupProj: any[] = []
+  public classDescr: string = ''
+  public classDescrEdit: string = ''
+  public classExpiring: string = 'flex-item data-item shadow-1'
+  public classExpiringEx: string = ''
+  public iconPriority: string = ''
+  public classRow: string = ''
+  public sel: boolean = false
+  public attivaEdit: boolean = false
+  public inEdit: boolean = false
+  public precDescr: string = ''
+  public percProgress: string = 'percProgress'
+  public colProgress: string = 'blue'
+  public percentageProgress: number = 0
+  public itemprojectPrec: IProject
+  public clButtPopover: string = 'pos-item-popover'
+
+  public $q: any
+
+  @Prop({ required: true }) public itemproject: IProject
+
+  // @Watch('itemproject.completed') valueChanged() {
+  //   this.watchupdate('completed')
+  // }
+
+  @Watch('itemproject.enableExpiring') public valueChanged4() {
+    this.watchupdate('enableExpiring')
+  }
+
+  @Watch('itemproject.expiring_at') public valueChanged2() {
+    this.watchupdate('expiring_at')
+  }
+
+  @Watch('itemproject.descr') public valueChanged5() {
+    this.precDescr = this.itemproject.descr
+  }
+
+  @Watch('itemproject.progressCalc') public valueChanged6() {
+    console.log('itemproject.progressCalc')
+    this.updateClasses()
+
+    console.log('this.percentageProgress', this.percentageProgress, 'this.itemproject.progressCalc', this.itemproject.progressCalc)
+    this.watchupdate('progressCalc')
+  }
+
+/*
+  public dateToYYYYMMDD(date) {
+    // may have timezone caveats https://stackoverflow.com/a/29774197/1850609
+    return date && date.toISOString().split('T')[0]
+  }
+*/
+
+  // Computed:
+  get isSel() {
+    return this.sel
+  }
+
+  public isProject() {
+    return this.isProjectByElem(this.itemproject)
+  }
+
+  public isProjectByElem(elem) {
+    return elem.descr.slice(-1) !== ':'
+  }
+
+  public watchupdate(field = '') {
+    this.$emit('eventupdate', {myitem: this.itemproject, field } )
+    this.updateicon()
+  }
+
+  public updateClasses() {
+    // this.classCompleted = 'completed-item'
+    this.classDescr = 'flex-item div_descr show donotdrag'
+    this.classDescrEdit = 'flex-item div_descr_edit donotdrag'
+    if (!this.isProject()) {
+      this.classDescr += ' titleLista-item'
+      this.classDescrEdit += ' titleLista-item'
+    }
+
+    if (this.itemproject.progressCalc > 100)
+      this.itemproject.progressCalc = 100
+
+    this.classExpiring = 'flex-item data-item shadow-1'
+    this.classExpiringEx = ''
+
+    this.percentageProgress = this.itemproject.progressCalc
+
+    this.percProgress = 'percProgress'
+
+    let mycolcl = ''
+    if (this.itemproject.progressCalc < 33) {
+      mycolcl = ' lowperc'
+    } else if (this.itemproject.progressCalc < 66) {
+      mycolcl = ' medperc'
+    } else {
+      mycolcl = ' highperc'
+    }
+
+    this.colProgress = mycolcl
+
+    this.percProgress += mycolcl
+
+    this.clButtPopover = this.sel ? 'pos-item-popover comp_selected' : 'pos-item-popover'
+
+    if (!this.itemproject.completed) {
+      this.clButtPopover += ' pos-item-popover_cursor'
+    }
+
+
+    // this.getinputdescr = 'inputdescr' + this.itemproject._id
+
+    // console.log('classDescrEdit = ', this.classDescrEdit)
+    // console.log('classDescr', this.classDescr)
+
+    // console.log('UserStore.state.lang', UserStore.state.lang)
+    if (this.isProject()) {
+      this.menuPopupProj = tools.menuPopupProj[UserStore.state.lang]
+    }
+    else {
+      this.menuPopupProj = []
+      this.menuPopupProj.push(tools.menuPopupProj[UserStore.state.lang][tools.INDEX_MENU_DELETE])
+    }
+
+  }
+
+  public getstrDate(mytimestamp) {
+    return date.formatDate(mytimestamp, 'DD-MM-YY')
+  }
+
+  public created() {
+    this.precDescr = this.itemproject.descr
+    this.updateicon()
+
+    this.updateClasses()
+
+    this.selectPriority = tools.selectPriority[UserStore.state.lang]
+
+  }
+
+  public getClassRow() {
+    return 'row flex-container2 ' + this.classRow
+  }
+
+  public clickRiga(clickmenu: boolean = false) {
+    // console.log('CLICK RIGA ************')
+
+    if (!this.sel) {
+      if (!this.inEdit) {
+        this.attivaEdit = true
+        this.$emit('deselectAllRows', this.itemproject, true)
+
+        if (!this.sel) {
+          this.selectRiga()
+        } else {
+          this.deselectRiga()
+        }
+      }
+    }
+  }
+
+  public selectRiga() {
+    // console.log('selectRiga', this.itemproject.descr)
+    this.sel = true
+    this.classRow = 'rowselected'
+    this.updateClasses()
+    // console.log('FINE selectRiga', this.itemproject.descr)
+  }
+
+  public deselectRiga() {
+    // console.log('DeselectRiga', this.itemproject.descr)
+    this.sel = false
+    this.classRow = ''
+    this.inEdit = false
+    this.attivaEdit = false
+    this.updateClasses()
+  }
+
+  public deselectAndExitEdit() {
+    this.deselectRiga()
+    this.exitEdit()
+  }
+
+  public mouseUp() {
+    if (!this.inEdit) {
+      if (this.sel) {
+        this.selectRiga()
+      } else {
+        this.deselectRiga()
+      }
+    }
+  }
+
+  public clickRow() {
+    this.clickRiga()
+  }
+
+  public editProject() {
+    console.log('INIZIO - editProject')
+    if (this.attivaEdit) {
+      this.$emit('click')
+      this.precDescr = this.itemproject.descr
+      this.inEdit = true
+      if (!this.sel) {
+        this.selectRiga()
+      }
+      else {
+        this.updateClasses()
+      }
+
+      this.faiFocus('inputdescr')
+    }
+    // console.log('FINE - editProject')
+  }
+
+  public faiFocus(elem, isparent: boolean = false) {
+    setTimeout(() => {
+      let theField = null
+      if (isparent) {
+        theField = this.$parent.$parent.$parent.$parent.$refs[elem] as HTMLInputElement
+      }
+      else {
+        theField = this.$refs[elem] as HTMLInputElement
+      }
+
+      if (!!theField) {
+        theField.focus()
+      }
+      // console.log('focus()')
+    }, 100)
+  }
+
+  public exitEdit(singola: boolean = false) {
+    if (this.inEdit) {
+      if (this.precDescr !== this.itemproject.descr) {
+        this.updateTodo()
+      }
+      // console.log('exitEdit')
+      this.inEdit = false
+      this.attivaEdit = false
+      this.updateClasses()
+      this.$emit('deselectAllRows', this.itemproject, false, singola)
+    }
+  }
+
+  public keyDownRow(e) {
+    console.log('keyDownRow')
+    // Delete Key or Backspage
+    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
+      e.preventDefault()
+      this.deselectRiga()
+      this.clickMenu(tools.MenuAction.DELETE)
+        .then(() => {
+          this.faiFocus('insertTask', true)
+          return
+        })
+    }
+
+  }
+
+  public keyDownArea(e) {
+    console.log('keyDownArea')
+/*
+    if ((e.key === 'ArrowUp') && !e.shiftKey) {
+      e.key = 'Tab'
+      e.shiftKey = true
+    }
+
+    if ((e.key === 'ArrowDown') && !e.shiftKey) {
+      let nextInput = inputs.get(inputs.index(this) + 1)
+      if (nextInput) {
+        nextInput.focus()
+      }
+    }
+*/
+    // Delete Key or Backspage
+    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
+      e.preventDefault()
+      this.deselectRiga()
+      this.clickMenu(tools.MenuAction.DELETE)
+        .then(() => {
+          this.faiFocus('insertTask', true)
+          return
+        })
+    }
+
+    if (((e.key === 'Enter') || (e.key === 'Tab')) && !e.shiftKey) {
+      this.updateTodo()
+
+      if ((e.key === 'Tab') && !e.shiftKey) {
+
+      } else {
+        e.preventDefault()
+        this.deselectRiga()
+        this.faiFocus('insertTask', false)
+      }
+    }
+
+    // console.log('keyDownArea', e)
+    if (e.key === 'Escape') {
+      this.deselectRiga()
+      // this.faiFocus('insertTask', true)
+      console.log('LOAD this.precDescr', this.precDescr)
+      this.precDescr = this.itemproject.descr
+    }
+
+  }
+
+  public updateTodo() {
+    if (this.itemproject.descr === this.precDescr) {
+      return
+    }
+
+    this.itemproject.descr = this.precDescr
+    console.log('updateTodo', this.precDescr, this.itemproject.descr)
+    console.log('itemproject', this.itemproject)
+    console.log('Prec:', this.itemprojectPrec)
+
+    this.watchupdate('descr')
+    this.inEdit = false
+    this.attivaEdit = false
+    // this.precDescr = this.itemproject.descr
+    this.updateClasses()
+  }
+
+  public aggiornaProgress(value, initialval){
+    if (value !== initialval) {
+      this.itemproject.progressCalc = value
+      this.updatedata('progressCalc')
+      this.deselectAndExitEdit()
+    }
+  }
+
+  public setCompleted() {
+    // console.log('setCompleted')
+    this.itemproject.completed = !this.itemproject.completed
+
+    this.updateicon()
+
+    this.updatedata('completed')
+
+    this.deselectAndExitEdit()
+  }
+
+  public updatedata(field: string) {
+    // const myitem = tools.jsonCopy(this.itemproject)
+    console.log('calling this.$emit(eventupdate)', this.itemproject)
+    this.$emit('eventupdate', { myitem: this.itemproject, field } )
+  }
+
+  public updateicon() {
+    // console.log('updateicon')
+
+    if (this.itemproject.priority === tools.Priority.PRIORITY_HIGH) {
+      this.iconPriority = 'expand_less'
+    }  // expand_less
+    else if (this.itemproject.priority === tools.Priority.PRIORITY_NORMAL) {
+      this.iconPriority = 'remove'
+ }
+    else if (this.itemproject.priority === tools.Priority.PRIORITY_LOW) {
+      this.iconPriority = 'expand_more'
+ }  // expand_more
+
+    this.updateClasses()
+  }
+
+  public removeitem(id) {
+    this.$emit('deleteItem', id)
+  }
+
+  public enableExpiring() {
+    this.itemproject.enableExpiring = !this.itemproject.enableExpiring
+
+  }
+
+  public async clickMenu(action) {
+    console.log('click menu: ', action)
+    if (action === tools.MenuAction.DELETE) {
+      return await this.askConfirmDelete()
+    } else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
+      return await this.enableExpiring()
+    } else if (action === tools.MenuAction.COMPLETED) {
+      return await this.setCompleted()
+    } else if (action === tools.MenuAction.PROGRESS_BAR) {
+      return await this.updatedata('progressCalc')
+    } else if (action === 0) {
+      this.deselectAndExitEdit()
+    }
+
+  }
+
+  public setPriority(newpriority) {
+
+    if (this.itemproject.priority !== newpriority) {
+      this.itemproject.priority = newpriority
+
+      this.updatedata('priority')
+
+      this.updateicon()
+    }
+
+  }
+
+  public async askConfirmDelete() {
+    const deletestr = this.$t('dialog.delete')
+    const cancelstr = this.$t('dialog.cancel')
+
+    const msg = this.$t('dialog.msg.deleteTask', {mytodo : this.itemproject.descr })
+
+    this.$q.dialog({
+      cancel: {
+        label: cancelstr
+      },
+      message: msg,
+      ok: {
+        label: deletestr,
+        push: true
+      },
+      title: this.$t('dialog.msg.titledeleteTask')
+    }).onOk(() => {
+      console.log('OK')
+      this.removeitem(this.itemproject._id)
+    }).onCancel(() => {
+      console.log('CANCEL')
+    })
+
+    /*
+        // return await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), msg, deletestr, cancelstr)
+          .then((ris) => {
+            console.log('ris', ris)
+            if (ris) {
+              this.removeitem(this.itemproject._id)
+            }
+          }).catch((err) => {
+
+        })
+    */
+  }
+
+}

src/components/projects/SingleProject/SingleProject.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="getClassRow()" @click="clickRow">
+
+        <div class="flex-item donotdrag divdescrTot">
+            <q-input v-if="(sel)" hide-underline type="textarea" ref="inputdescr"
+                     v-model.trim="precDescr"
+                     autogrow
+                     borderless
+                     dense
+                     :class="classDescrEdit" :max-height="100"
+                     @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editProject()"/>
+
+            <div v-else :class="classDescr"
+                 @keydown="keyDownRow">{{itemproject.descr}}
+            </div>
+
+        </div>
+
+        <div v-if="isProject()" class="flex-item progress-item shadow-1">
+            <q-linear-progress
+                    stripe
+                    rounded
+                    :value="percentageProgress / 100"
+                    class="progrbar-item"
+                    :color="colProgress"
+            >
+            </q-linear-progress>
+            <div :class="percProgress">
+                {{percentageProgress}}%
+            </div>
+        </div>
+
+
+        <div v-if="itemproject.enableExpiring" :class="classExpiring">
+            <span class="data_string">{{getstrDate(itemproject.expiring_at)}}</span>
+            <q-icon name="event" class="cursor-pointer" style="padding: 2px;">
+                <q-popup-proxy>
+                    <q-date v-model="itemproject.expiring_at" today-btn/>
+                </q-popup-proxy>
+            </q-icon>
+            <!--<q-icon name="event" class="cursor-pointer" />-->
+            <!--<q-popup-edit v-model="itemproject.expiring_at"-->
+            <!--title="Edit"-->
+            <!--buttons class="">-->
+            <!--<q-input-->
+            <!--filled-->
+            <!--v-model="itemproject.expiring_at"-->
+            <!--type="date"-->
+            <!--class="myexpired"-->
+            <!--format="DD/MM/YYYY"-->
+            <!--&gt;-->
+            <!--</q-input>-->
+            <!--</q-popup-edit>-->
+        </div>
+        <div v-if="isProject()" class="flex-item pos-item " @mousedown="clickRiga">
+            <q-btn flat
+                   :class="clButtPopover"
+                   icon="menu">
+                <q-menu ref="popmenu" self="top right">
+                    <SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
+                              @setPriority="setPriority"></SubMenusProj>
+                </q-menu>
+
+            </q-btn>
+        </div>
+        <!--clButtPopover: {{ clButtPopover }}-->
+        <!--Sel: {{ sel }}-->
+        <!--<div class="flex-item btn-item">-->
+        <!--{{itemproject.expiring_at}}-->
+        <!--</div>-->
+        <!--<div class="flex-item btn-item">-->
+        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemproject._id)"></q-btn>-->
+        <!--</div>-->
+    </div>
+
+</template>
+
+<script lang="ts" src="./SingleProject.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './SingleProject.scss';
+</style>

src/components/projects/SingleProject/index.ts

@@ -0,0 +1 @@
+export {default as SingleProject} from './SingleProject.vue'

src/components/projects/SubMenusProj/SubMenusProj.scss

@@ -0,0 +1,18 @@
+.todo-menu {
+  min-width: 202px;
+
+}
+
+.item-menu {
+  font-size: 1rem;
+}
+
+.item-menu:hover {
+  cursor: pointer;
+}
+
+.menuInputProgress > div > div > div > input {
+  min-width: 30px;
+  max-width: 30px;
+  width: 30px;
+}

src/components/projects/SubMenusProj/SubMenusProj.ts

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '@src/store/Modules/tools'
+import { UserStore } from '@store'
+import { IProject } from '../../../model/index'
+
+// Doesn't exist in quasar this ? error TS2305
+// import { format } from 'quasar'
+// const { between } = format
+
+// import { filter } from 'quasar'
+
+@Component({
+  name: 'SubMenusProj'
+})
+
+export default class SubMenusProj extends Vue {
+  public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
+
+  @Prop({ required: false }) public menuPopupProj: any[]
+  @Prop({ required: false }) public itemproject: IProject
+  public $q: any
+
+  public clickMenu(field) {
+    this.$emit('clickMenu', field)
+  }
+
+  public setPriority(field) {
+    this.$emit('setPriority', field)
+  }
+
+  public KeychangeProgress(e) {
+    // between(50, 10, 20)
+
+    if (this.itemproject.progressCalc > 100) {
+      this.itemproject.progressCalc = 100
+    }
+    if (this.itemproject.progressCalc < 0) {
+      this.itemproject.progressCalc = 0
+    }
+
+    if (e.key === 'Enter') {
+      // chiudi il meno
+      this.$emit('clickMenu', 0)
+    }
+  }
+
+  public create() {
+    this.selectPriority = tools.selectPriority[UserStore.state.lang]
+
+    console.log('CREAZIONE')
+  }
+}

src/components/projects/SubMenusProj/SubMenusProj.vue

@@ -0,0 +1,82 @@
+<template>
+    <q-list separator no-border class="todo-menu">
+        <div v-for="field in menuPopupProj" :key="field.value">
+            <q-item v-close-popup clickable v-if="(field.value !== 130) && (field.value !== 120)" :icon="field.icon"
+                    @click="clickMenu(field.value)">
+                <q-item-section avatar>
+                    <q-icon :name="field.icon"/>
+                </q-item-section>
+
+                <q-item-section label class="item-menu">
+                    <q-item-label>{{field.label}}</q-item-label>
+                </q-item-section>
+
+                <q-item-section side top v-if="field.value === 101">
+                    <q-checkbox v-model="itemproject.enableExpiring"/>
+                </q-item-section>
+            </q-item>
+            <q-item clickable v-if="(field.value === 120)" :icon="field.icon"
+                    @click="clickMenu(field.value)">
+                <q-item-section avatar>
+                    <q-icon :name="field.icon"/>
+                </q-item-section>
+
+                <q-item-section>
+                    <q-slider label
+                              :class="$parent.menuProgress"
+                              v-model="itemproject.progressCalc"
+                              :min="0"
+                              :max="100"
+                              :step="5" @change="val => { lazy = val }"
+                    />
+
+                </q-item-section>
+                <q-item-section side>
+                    <div>
+                        <q-item-label style="color: blue">{{itemproject.progressCalc}} %</q-item-label>
+                    </div>
+                </q-item-section>
+            </q-item>
+            <q-item clickable v-if="(field.value === 130)">
+                <q-item-section avatar>
+                    <q-icon name="priority_high" inverted color="primary"/>
+                </q-item-section>
+
+                <q-item-section>{{field.label}}</q-item-section>
+                <q-item-section side>
+                    <q-icon name="keyboard_arrow_right"/>
+                </q-item-section>
+
+                <q-menu auto-close anchor="bottom middle" self="top middle">
+                    <q-list dense>
+                        <q-item side clickable :icon="field.icon"
+                                @click="clickMenu(field.value)">
+
+                            <q-item-section>
+                                <q-list dense>
+                                    <q-item clickable v-ripple v-for="fieldprior in selectPriority"
+                                            :key="fieldprior.value"
+                                            @click="setPriority(fieldprior.value)">
+                                        <q-item-section avatar>
+                                            <q-icon :name="fieldprior.icon" inverted color="primary"/>
+                                        </q-item-section>
+                                        <q-item-section>
+                                            {{fieldprior.label}}
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-menu>
+            </q-item>
+        </div>
+    </q-list>
+</template>
+
+<script lang="ts" src="./SubMenusProj.ts">
+</script>
+
+<style lang="scss">
+    @import './SubMenusProj.scss';
+</style>

src/components/projects/SubMenusProj/index.ts

@@ -0,0 +1 @@
+export {default as SubMenusProj} from './SubMenusProj.vue'

src/components/projects/index.ts

@@ -0,0 +1,2 @@
+export * from './SingleProject'
+export * from './SubMenusProj'

src/globalroutines/indexdb.ts

@@ -1,4 +1,4 @@
-import { Todos, UserStore } from '@store'
+import { Projects, Todos, UserStore } from '@store'
 import _ from 'lodash'
 import { GlobalStore } from '../store/Modules'
 
@@ -24,43 +24,48 @@ function writeConfigIndexDb(context, data) {
   storage.setdata('config', data)
 }
 
-async function readfromIndexDbToStateTodos(context, table) {
+async function readfromIndexDbToState(context, table) {
-  console.log('*** readfromIndexDbToStateTodos ***')
+  console.log('*** readfromIndexDbToState ***')
 
   return await storage.getalldata(table)
     .then((reccat) => {
-      // console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
+      // console.log('&&&&&&& readfromIndexDbToState OK: Num RECORD: ', records.length)
       if (table === 'categories') {
         console.log('reccat', reccat)
         Todos.state.categories = []
-        for (const indcat in reccat) {
+        for (const elem of reccat) {
-          Todos.state.categories.push(reccat[indcat].valore)
+          Todos.state.categories.push(elem.valore)
         }
 
         console.log('ARRAY Categories', Todos.state.categories)
+        table = 'todos'
 
-        return storage.getalldata('todos')
+        return storage.getalldata(table)
           .then((records) => {
-            console.log('todos records', records)
+            console.log(table + ' records', records)
-            // console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
+            // console.log('&&&&&&& readfromIndexDbToState OK: Num RECORD: ', records.length)
 
-/*
+            for (const mytodo of records) {
-            for (const myrec in records) {
+              const cat = mytodo.category
-              const cat = myrec.category
+              const indcat = Todos.state.categories.indexOf(cat)
-              const indcat = state.categories.indexOf(cat)
               if (Todos.state.todos[indcat] === undefined) {
                 Todos.state.todos[indcat] = {}
               }
 
               // add to the right array
-              Todos.state.todos[indcat].push(myrec)
+              Todos.state.todos[indcat].push(mytodo)
-
             }
-*/
 
-            console.log('************  ARRAYS SALVATI IN MEMORIA Todos.state.todos ', Todos.state.todos)
+            console.log('************  ARRAYS SALVATI IN MEMORIA ', records)
           })
+
+      } else if (table === 'projects') {
+        Projects.state.projects = []
+        for (const elem of reccat) {
+          Projects.state.projects.push(elem.valore)
         }
+      }
+
 
     }).catch((error) => {
       console.log('err: ', error)
@@ -91,7 +96,7 @@ export default async (context, cmd, table, datakey = null, id = '') => {
     }
     return await storage.setdata(table, datakey)
   } else if (cmd === 'updatefromIndexedDbToStateTodo') {
-    return await readfromIndexDbToStateTodos(context, table)
+    return await readfromIndexDbToState(context, table)
   } else if (cmd === 'readall') {
     if (GlobalStore) {
       GlobalStore.state.connData.downloading_indexeddb = 1

src/js/storage.js

@@ -1,3 +1,5 @@
+import * as ApiTables from '@src/store/Modules/ApiTables'
+
 export let idbKeyval = (() => {
   let db;
 
@@ -13,7 +15,14 @@ export let idbKeyval = (() => {
 
         openreq.onupgradeneeded = () => {
           // First time setup: create an empty object store
-          for (mytab of ApiTables.allTables) {
+          for (let mytab of ApiTables.MainTables) {
+            openreq.result.createObjectStore(mytab, { keyPath: '_id' });
+            for (let mymeth of ApiTables.allMethod) {
+              const tab = mymeth + mytab
+              openreq.result.createObjectStore(tab, { keyPath: '_id' });
+            }
+          }
+          for (let mytab of ApiTables.OtherTables) {
             openreq.result.createObjectStore(mytab, { keyPath: '_id' });
           }
         };

src/model/Projects.ts

@@ -14,7 +14,7 @@ export interface IProject {
   modified?: boolean,
   pos?: number,
   order?: number,
-  progress?: number
+  progressCalc?: number
 }
 
 export interface IParamIProject {
@@ -39,8 +39,7 @@ export interface IDrag {
 
 export interface IProjectsState {
   showtype: number
-  projs: {}
+  projects: IProject[]
-  categories: string[]
   insidePending: boolean
   visuLastCompleted: number
 }

src/router/index.ts

@@ -50,7 +50,7 @@ Router.beforeEach(async (to: IMyRoute, from: IMyRoute, next) => {
       //   await LoginStore.actions.checkUserSession();
       // }
 
-      console.log(to, from)
+      // console.log(to, from)
 
       if (from.name && from.matched[0].name === to.name && from.meta.isModal) {
         next()

src/router/route-config.ts

@@ -4,7 +4,7 @@ import { RouteNames } from './route-names'
 import { tools } from '@src/store/Modules/tools'
 
 import auth from '../middleware/auth'
-import { Todos } from "@store"
+import { Projects, Todos } from "@store"
 
 interface IMyMeta {
   title?: string,
@@ -62,7 +62,7 @@ export const routesList: IMyRouteConfig[] = [
     meta: {
       requiresAuth: true,
       async asyncData() {
-        await Todos.actions.dbLoadTodo({ checkPending: false })
+        await Todos.actions.dbLoad({ checkPending: false })
       }
       // middleware: [auth]
     }
@@ -96,7 +96,10 @@ export const routesList: IMyRouteConfig[] = [
     name: 'progetti',
     component: () => import('@/views/projects/proj-list/proj-list.vue'),
     meta: {
-      requiresAuth: true
+      requiresAuth: true,
+      async asyncData() {
+        await Projects.actions.dbLoad({ checkPending: false })
+      }
       // middleware: [auth]
     }
   }

src/statics/i18n.js

@@ -85,6 +85,7 @@ const messages = {
           '<li><strong>Associazioni no-profit, Ecovillaggi, Comunità</strong></li>' +
           '<li>Gruppi che intendono promuovere <strong>Progetti Sociali Innovativi</strong> per una <strong>Decrescita Felice</strong></li>' +
           '<li>Chi gestisce un <strong>Gruppo di Acquisto Solidale (G.A.S.)</strong></li>' +
+          '<li><strong>Produttori Locali Etici</strong></li>' +
           '<li>Chi gestisce una <strong>Banca del Tempo</strong></li>' +
           '<li><strong>Chiunque voglia partecipare</strong>, nella forma che ritiene più opportuna.</li>' +
           '</ul>',
@@ -95,7 +96,8 @@ const messages = {
           '<li><strong>Condividendolo</strong> a tutti coloro che vogliono far parte insieme della crescita e sviluppo di una Nuova Era</li>' +
           '<li>Rispondendo ai <strong>Sondaggi Popolari</strong> e lasciando <strong>Feedback</strong></li>' +
           '<li>Tramite una <strong>donazione</strong> (<strong>anche 1€</strong> ) per le spese.<br>' +
-          '</ul>',
+          '</ul>' +
+          'Vedo un <strong>futuro</strong> dove non si utilizzerà più denaro. Dove le persone si <strong>aiuteranno</strong> a vicenda e non avranno bisogno di "possedere" cose, ma le <strong>condivideranno</strong> con gli altri.<br>',
       },
       multiplatform: {
         title: 'Multi-piattaforma',
@@ -105,8 +107,7 @@ const messages = {
       },
       free: {
         title: 'Gratuita, Open Source e Niente Pubblicità',
-        descr: 'Vedo un <strong>futuro</strong> dove non si utilizzerà più denaro. Dove le persone si <strong>aiuteranno</strong> a vicenda e non avranno bisogno di "possedere" cose, ma le <strong>condivideranno</strong> con gli altri.<br>' +
+        descr: 'Questa App <strong>non è in vendita</strong>, non ha scopi commerciali, <strong>non ha prezzo</strong> ed appartiene al <strong>Popolo del Nuovo Mondo</strong>.<br>Chiunque potrá utilizzarla e beneficiarne.<br>A me il compito di gestirla e proteggerla. ' +
-          'Questa App <strong>non è in vendita</strong>, non ha scopi commerciali, <strong>non ha prezzo</strong> ed appartiene al <strong>Popolo del Nuovo Mondo</strong>. A me il compito di gestirla e proteggerla. ' +
           'Verranno accettate solo donazioni Libere di privati ed Associazioni no-profit, in linea con i Principi, che serviranno per coprire le spese.<br>' +
           '<strong>Grazie a Tutti per il sostegno</strong>. '
       },
@@ -321,6 +322,7 @@ const messages = {
           '<li> <strong>Asociaciones sin ánimo de lucro, Ecoaldeas, Comunidades</strong> </li>' +
           '<li> Grupos que desean promover <strong>Proyectos sociales innovadores</strong> para <strong>Feliz Decrecimiento</strong> </li>' +
           '<li> Quién administra un <strong>Grupo de Compra Solidario (G.C.S.)</strong> </li>' +
+          '<li><strong>Productores locales Éticos</strong></li>' +
           '<li> Quién administra un <strong>Banco de Tiempo</strong> </li>' +
           '<li> <strong>Cualquier persona que quiera participar</strong>, en la forma que considere más apropiada. </li>' +
           '</ul>',
@@ -331,7 +333,8 @@ const messages = {
           '<li> <strong>Compartiéndolo</strong> a todos aquellos que quieran unirse en el crecimiento y desarrollo de una Nueva Era </li> ' +
           '<li> Respondiendo a <strong>Encuestas populares</strong> y dejando <strong>Comentarios</strong> </li>' +
           '<li> A través de una <strong>donación</strong> (<strong>incluso € 1</strong>) para los gastos. <br>' +
-          '</ul>',
+          '</ul>' +
+          '<br>Veo un <strong>futuro</strong> en el que ya no usarás dinero. Donde las personas <strong>se ayudarán unos a otros</strong> y no necesiten "poseer" cosas, pero <strong>compartirán</strong> con otros. <br> ',
       },
       multiplatform: {
         title: 'Multi-plataforma',
@@ -341,8 +344,8 @@ const messages = {
       },
       free: {
         title: 'Libre, Código Abierto y Sin Publicidad',
-        descr: 'Veo un <strong>futuro</strong> en el que ya no usarás dinero. Donde las personas <strong>se ayudarán unos a otros</strong> y no necesiten "poseer" cosas, pero <strong>compartirán</strong> con otros. <br> ' +
+        descr: 'Esta aplicación <strong>no está a la venta</strong>, no tiene un propósito comercial, <strong>no tiene precio</strong> y pertenece a <strong>la Gente del Nuevo Mundo</strong>.<br>' +
-          'Esta aplicación <strong>no está a la venta</strong>, no tiene un propósito comercial, <strong>no tiene precio</strong> y pertenece a <strong>la Gente del Nuevo Mundo</strong>. A mí la tarea de gestionarlo y protegerlo. ' +
+          'Cualquiera puede usarla y beneficiarse.<br> A mí la tarea de gestionarlo y protegerlo. ' +
           'Solo se aceptarán donaciones de particulares y asociaciones sin änimo de lucro, en línea con los Principios, que se utilizarán para cubrir los gastos. <br>' +
           '<strong>Gracias a todos por el apoyo</strong>. '
       },
@@ -550,6 +553,7 @@ const messages = {
           '<li> <strong>Non-profit associations, Ecovillages, Communities</strong> </li>' +
           '<li> Groups that want to promote <strong>Innovative Social Projects</strong> for <strong>Happy Degrowth</strong> </li>' +
           '<li> Who manages a <strong>Solidarity Purchase Group</strong> </li>' +
+          '<li><strong>Local Ethical Producers</strong></li>' +
           '<li> Who manages a <strong>Time Bank</strong> </li>' +
           '<li> <strong>Anyone who wants to participate</strong>, in the form it considers most appropriate. </li>' +
           '</ul>',
@@ -560,7 +564,8 @@ const messages = {
           '<li> <strong>Sharing it</strong> to all those who want to join together in the growth and development of a New Era </li> ' +
           '<li> Answering to <strong>Popular Polls</strong> and leaving <strong>Feedback</strong> </li>' +
           '<li> Through a <strong>donation</strong> (<strong>even $ 1</strong>) for expenses. <br>' +
-          '</ul>',
+          '</ul><br>' +
+          'I see a <strong>future</strong> where you will no longer use money. Where people <strong>will help each other</strong> and won\'t need to "own" things, but <strong>will share</strong> with others. <br> ',
       },
       multiplatform: {
         title: 'Multi-platform',
@@ -570,8 +575,8 @@ const messages = {
       },
       free: {
         title: 'Free, Open Source and No Advertising',
-        descr: 'I see a <strong>future</strong> where you will no longer use money. Where people <strong>will help each other</strong> and won\'t need to "own" things, but <strong>will share</strong> with others. <br> ' +
+        descr: 'This App <strong>is not for sale</strong>, has no commercial purpose, <strong>is priceless</strong> and belongs to the <strong>New World People</strong>.' +
-          'This App <strong>is not for sale</strong>, has no commercial purpose, <strong>is priceless</strong> and belongs to the <strong>New World People</strong>. To me the task of managing it and protecting it. ' +
+          '<br>Anyone can use it and benefit from it.<br>To me the task of managing it and protecting it. ' +
           'Only donations from private individuals and non-profit associations will be accepted, in line with the Principles, which will be used to cover the expenses. <br>' +
           '<strong>Thanks all for the support</strong>. '
       },

src/statics/js/storage.js

@@ -1,7 +1,14 @@
-const allTables = ['todos', 'categories', 'sync_post_todos', 'sync_patch_todos', 'delete_todos', 'config', 'swmsg']
+const OtherTables = ['categories', 'config', 'swmsg']
+const MainTables = ['todos', 'projects']
+const allMethod = ['sync_post_', 'sync_patch_', 'delete_']
+
+
+// -------------------------------------
+
 
 let idbKeyval = (() => {
   let db;
+
   // console.log('idbKeyval...')
 
   function getDB() {
@@ -16,7 +23,14 @@ let idbKeyval = (() => {
 
         openreq.onupgradeneeded = () => {
           // First time setup: create an empty object store
-          for (mytab of allTables) {
+          for (let mytab of MainTables) {
+            openreq.result.createObjectStore(mytab, { keyPath: '_id' });
+            for (let mymeth of allMethod) {
+              const tab = mymeth + mytab
+              openreq.result.createObjectStore(tab, { keyPath: '_id' });
+            }
+          }
+          for (let mytab of OtherTables) {
             openreq.result.createObjectStore(mytab, { keyPath: '_id' });
           }
         };
@@ -29,7 +43,7 @@ let idbKeyval = (() => {
     return db;
   }
 
-  async function withStore(type, table, callback, ) {
+  async function withStore(type, table, callback,) {
     const db = await getDB();
     return new Promise((resolve, reject) => {
       const transaction = db.transaction(table, type);
@@ -40,6 +54,14 @@ let idbKeyval = (() => {
   }
 
   return {
+    getArrayByTable(nametable, data) {
+      if (nametable === 'todos') {
+        return data.todos
+      } else if (nametable === 'projects') {
+        return data.projects
+      }
+    },
+
     async get(key) {
       let req;
       await withStore('readonly', 'keyval', store => {

src/store/Api/ApiTypes.ts

@@ -11,7 +11,6 @@ export class AxiosSuccess {
   }
 }
 
-
 export class AxiosError {
   public success: boolean = false
   public status: number = 0

src/store/Api/index.ts

@@ -90,6 +90,7 @@ export namespace ApiTool {
             }
           }, 1000)
 
+          if (!!res.status) {
             UserStore.mutations.setResStatus(res.status)
             if (res.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
               // Forbidden
@@ -99,6 +100,7 @@ export namespace ApiTool {
               router.push('/signin')
               return reject({ code: tools.ERR_AUTHENTICATION })
             }
+          }
 
           return resolve(res)
 
@@ -121,38 +123,41 @@ export namespace ApiTool {
   }
 
   export async function syncAlternative(mystrparam) {
-    // console.log('[ALTERNATIVE Background syncing', mystrparam)
+    console.log('[ALTERNATIVE Background syncing', mystrparam)
 
     const multiparams = mystrparam.split('|')
     if (multiparams) {
       if (multiparams.length > 3) {
         const cmd = multiparams[0]
-        const table = multiparams[1]
+        const tablesync = multiparams[1]
-        const method = multiparams[2]
+        const nametab = multiparams[2]
-        const token = multiparams[3]
+        const method = multiparams[3]
+        // const token = multiparams[3]
 
         if (cmd === ApiTables.DB.CMD_SYNC) {
           let errorfromserver = false
           let lettoqualcosa = false
 
           // console.log('A1) INIZIO.............................................................')
-          return globalroutines(null, 'readall', table, null)
+          return globalroutines(null, 'readall', tablesync, null)
             .then((alldata) => {
               const myrecs = [...alldata]
-              // console.log('----------------------- LEGGO QUALCOSA ')
 
               const promises = myrecs.map((rec) => {
-                let link = '/' + ApiTables.getLinkByTableName(table)
+                let link = '/' + ApiTables.getLinkByTableName(nametab)
+
 
                 if (method !== 'POST') {
                   link += '/' + rec._id
                 }
 
+                // console.log('----------------------- LEGGO QUALCOSA ', link)
+
                 // Insert/Delete/Update table to the server
                 return SendReq(link, method, rec)
                   .then(() => {
                     lettoqualcosa = true
-                    return globalroutines(null, 'delete', table, null, rec._id)
+                    return globalroutines(null, 'delete', tablesync, null, rec._id)
                   })
                   .then(() => {
                     return globalroutines(null, 'delete', 'swmsg', null, mystrparam)

src/store/Modules/ApiTables.ts

@@ -5,19 +5,39 @@ import globalroutines from './../../globalroutines/index'
 import { serv_constants } from '@src/store/Modules/serv_constants'
 import { tools } from '@src/store/Modules/tools'
 
-export const allTables = ['todos', 'categories', 'sync_post_todos', 'sync_patch_todos', 'delete_todos', 'config', 'swmsg']
+export const OtherTables = ['categories', 'config', 'swmsg']
+export const MainTables = ['todos', 'projects']
+export const allMethod = ['sync_post_', 'sync_patch_', 'delete_']
+
+export function getLinkByTableName(nametable) {
+  if (nametable === 'todos') {
+    return 'todos'
+  } else if (nametable === 'projects') {
+    return 'projects'
+  }
+}
 
 export const LIST_START = '0'
 
 export const DB = {
-  CMD_SYNC: 'sync-',
+  CMD_SYNC: 'sync',
-  CMD_SYNC_NEW: 'sync-new-',
+  CMD_SYNC_NEW: 'sync-new',
-  CMD_DELETE: 'sync-delete-',
+  CMD_DELETE: 'sync-delete',
   TABLE_SYNC_POST: 'sync_post_',
   TABLE_SYNC_PATCH: 'sync_patch_',
   TABLE_DELETE: 'delete_'
 }
 
+export function allTables() {
+  const myarr = OtherTables
+  for (const tab of MainTables) {
+    for (const method of allMethod) {
+      myarr.push(method + tab)
+    }
+  }
+  return myarr
+}
+
 async function dbInsertSave(call, item, method) {
 
   let ret = true
@@ -75,10 +95,10 @@ async function dbDeleteItem(call, item) {
   }
 }
 
-async function Sync_Execute(cmd, table, method, item: ITodo, id, msg: String) {
+async function Sync_Execute(cmd, tablesync, nametab, method, item: ITodo, id, msg: String) {
   // Send to Server to Sync
 
-  // console.log('Sync_Execute', cmd, table, method, item.descr, id, msg)
+  console.log('Sync_Execute', cmd, tablesync, nametab, method, item.descr, id, msg)
 
   let cmdSw = cmd
   if ((cmd === DB.CMD_SYNC_NEW) || (cmd === DB.CMD_DELETE)) {
@@ -88,18 +108,19 @@ async function Sync_Execute(cmd, table, method, item: ITodo, id, msg: String) {
   if ('serviceWorker' in navigator) {
     return await navigator.serviceWorker.ready
       .then((sw) => {
-        // console.log('----------------------      navigator.serviceWorker.ready')
+        console.log('----------------------      navigator.serviceWorker.ready')
 
-        return globalroutines(null, 'write', table, item, id)
+        return globalroutines(null, 'write', tablesync, item, id)
           .then((id) => {
             // console.log('id', id)
             const sep = '|'
 
-            const multiparams = cmdSw + sep + table + sep + method + sep + UserStore.state.x_auth_token + sep + UserStore.state.lang
+            const multiparams = cmdSw + sep + tablesync + sep + nametab + sep + method + sep + UserStore.state.x_auth_token + sep + UserStore.state.lang
             const mymsgkey = {
               _id: multiparams,
               value: multiparams
             }
+            console.log('*** swmsg')
             return globalroutines(null, 'write', 'swmsg', mymsgkey, multiparams)
               .then((ris) => {
                 // if ('SyncManager' in window) {
@@ -118,19 +139,26 @@ async function Sync_Execute(cmd, table, method, item: ITodo, id, msg: String) {
                 return data
               })
               .catch((err) => {
-                console.error('Errore in globalroutines', table, err)
+                console.error('Errore in globalroutines', tablesync, nametab, err)
               })
           })
       })
   }
 }
 
-async function Sync_ExecuteCmd(cmd, nametab: string, table, method, item: ITodo, id, msg: String) {
+async function Sync_ExecuteCmd(cmd, nametab: string, method, item: ITodo, id, msg: String) {
   // Send to Server to Sync
 
-  console.log('Sync_Execute', cmd, table, method, item.descr, id, msg)
+  let tablesync = ''
+  if (method === 'POST') {
+    tablesync = DB.TABLE_SYNC_POST + nametab
+  } else if (method === 'PATCH') {
+    tablesync = DB.TABLE_SYNC_PATCH + nametab
+  } else if (method === 'DELETE') {
+    tablesync = DB.TABLE_DELETE + nametab
+  }
 
-  const risdata = await Sync_Execute(cmd, table, method, item, id, msg)
+  const risdata = await Sync_Execute(cmd, tablesync, nametab, method, item, id, msg)
 
   if (cmd === DB.CMD_SYNC_NEW) {
     if ((method === 'POST') || (method === 'PATCH')) {
@@ -144,19 +172,11 @@ async function Sync_ExecuteCmd(cmd, nametab: string, table, method, item: ITodo,
 }
 
 export async function Sync_SaveItem(nametab: string, method, item) {
-  let table = ''
+  return await Sync_ExecuteCmd(DB.CMD_SYNC_NEW, nametab, method, item, 0, '')
-  if (method === 'POST') {
-    table = DB.TABLE_SYNC_POST
-  }
-  else if (method === 'PATCH') {
-    table = DB.TABLE_SYNC_PATCH
-  }
-
-  return await Sync_ExecuteCmd(DB.CMD_SYNC_NEW, nametab, table + nametab, method, item, 0, '')
 }
 
 export function Sync_DeleteItem(nametab: string, item, id) {
-  Sync_ExecuteCmd(DB.CMD_DELETE, nametab, DB.TABLE_DELETE + nametab, 'DELETE', item, id, '')
+  Sync_ExecuteCmd(DB.CMD_DELETE, nametab, 'DELETE', item, id, '')
 }
 
 export async function aftercalling(ris, checkPending: boolean, nametabindex: string) {
@@ -268,8 +288,8 @@ async function sendSwMsgIfAvailable() {
 }
 
 async function waitAndRefreshData() {
-  return await Projects.actions.dbLoadProjects({ checkPending: false })
+  return await Projects.actions.dbLoad({ checkPending: false })
-  return await Todos.actions.dbLoadTodo({ checkPending: false })
+  return await Todos.actions.dbLoad({ checkPending: false })
 }
 
 export async function waitAndcheckPendingMsg() {
@@ -372,7 +392,7 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
   })
 
   if (miorec.modified) {
-    console.log('Todo MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB todos')
+    console.log(nametable + ' MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB')
     miorec.modify_at = new Date().getDate()
     miorec.modified = false
 
@@ -392,8 +412,10 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
 
 export function table_DeleteRecord(nametable, myobjtrov, id) {
 
+  const mymodule = tools.getModulesByTable(nametable)
+
   // 1) Delete from the Todos Array
-  Todos.mutations.deletemyitem(myobjtrov)
+  mymodule.mutations.deletemyitem(myobjtrov)
 
   // 2) Delete from the IndexedDb
   globalroutines(null, 'delete', nametable, null, id)
@@ -403,10 +425,3 @@ export function table_DeleteRecord(nametable, myobjtrov, id) {
 
 }
 
-export function getLinkByTableName(nametable) {
-  if (nametable === 'todos') {
-    return 'todos'
-  } else if (nametable === 'projects') {
-    return 'projects'
-  }
-}

src/store/Modules/GlobalStore.ts

@@ -445,7 +445,7 @@ namespace Actions {
     console.log('clearDataAfterLogout')
 
     // Clear all data from the IndexedDB
-    for (const table of ApiTables.allTables) {
+    for (const table of ApiTables.allTables()) {
       await globalroutines(null, 'clearalldata', table, null)
     }
 
@@ -474,14 +474,6 @@ namespace Actions {
 
   async function clearDataAfterLoginOnlyIfActiveConnection(context) {
 
-    // if (Getters.getters.isOnline) {
-    //   console.log('clearDataAfterLoginOnlyIfActiveConnection')
-    //   // Clear all data from the IndexedDB
-    //   allTablesAfterLogin.forEach(table => {
-    //     globalroutines(null, 'clearalldata', table, null)
-    //   })
-    // }
-
   }
 
   async function loadAfterLogin(context) {

src/store/Modules/Projects.ts

@@ -9,14 +9,13 @@ import globalroutines from './../../globalroutines/index'
 import objectId from '@src/js/objectId'
 import { costanti } from '@src/store/Modules/costanti'
 
-const nametable = 'projs'
+const nametable = 'projects'
 
 // import _ from 'lodash'
 
 const state: IProjectsState = {
   showtype: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
-  projs: {},
+  projects: [],
-  categories: [],
   insidePending: false,
   visuLastCompleted: 10
 }
@@ -26,21 +25,16 @@ const fieldtochange: string [] = ['descr', 'completed', 'category', 'expiring_at
 const b = storeBuilder.module<IProjectsState>('Projects', state)
 const stateGetter = b.state()
 
-function getindexbycategory(category: string) {
+// function getindexbycategory(category: string) {
-  return state.categories.indexOf(category)
+//   return state.categories.indexOf(category)
-}
+// }
 
-function gettodosByCategory(category: string) {
+function getarrByCategory(category: string) {
-  const indcat = state.categories.indexOf(category)
+  // const indcat = state.categories.indexOf(category)
-  if (!state.projs[indcat]) {
+  if (!state.projects) {
     return []
   }
-  return state.projs[indcat]
+  return state.projects
-}
-
-function isValidIndex(cat, index) {
-  const myarr = gettodosByCategory(cat)
-  return (index >= 0 && index < myarr.length)
 }
 
 function initcat() {
@@ -64,7 +58,7 @@ function initcat() {
     id_prev: '',
     pos: 0,
     modified: false,
-    progress: 0
+    progressCalc: 0
   }
   // return this.copy(objproj)
   return objproj
@@ -72,23 +66,21 @@ function initcat() {
 }
 
 namespace Getters {
-  const projs_dacompletare = b.read((state: IProjectsState) => (cat: string): IProject[] => {
+  const items_dacompletare = b.read((state: IProjectsState) => (cat: string): IProject[] => {
-    const indcat = getindexbycategory(cat)
+    if (state.projects) {
-    if (state.projs[indcat]) {
+      return state.projects.filter((proj) => !proj.completed)
-      return state.projs[indcat].filter((proj) => !proj.completed)
     } else {
       return []
     }
-  }, 'projs_dacompletare')
+  }, 'items_dacompletare')
 
   const projs_completati = b.read((state: IProjectsState) => (cat: string): IProject[] => {
-    const indcat = getindexbycategory(cat)
+    if (state.projects) {
-    if (state.projs[indcat]) {
       if (state.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED) {
-        return state.projs[indcat].filter((proj) => proj.completed).slice(0, state.visuLastCompleted)
+        return state.projects.filter((proj) => proj.completed).slice(0, state.visuLastCompleted)
       }  // Show only the first N completed
       else if (state.showtype === costanti.ShowTypeTask.SHOW_ALL) {
-        return state.projs[indcat].filter((proj) => proj.completed)
+        return state.projects.filter((proj) => proj.completed)
       }
       else {
         return []
@@ -102,17 +94,16 @@ namespace Getters {
     return getters.projs_completati(cat).length
   }, 'doneProjectsCount')
   const ProjectsCount = b.read((state: IProjectsState) => (cat: string): number => {
-    const indcat = getindexbycategory(cat)
+    if (state.projects) {
-    if (state.projs[indcat]) {
+      return state.projects.length
-      return state.projs[indcat].length
     } else {
       return 0
     }
   }, 'ProjectsCount')
 
   export const getters = {
-    get projs_dacompletare() {
+    get items_dacompletare() {
-      return projs_dacompletare()
+      return items_dacompletare()
     },
     get projs_completati() {
       return projs_completati()
@@ -128,44 +119,30 @@ namespace Getters {
 
 namespace Mutations {
 
-  function findIndTodoById(state: IProjectsState, data: IParamTodo) {
-    const indcat = state.categories.indexOf(data.categorySel)
-    if (indcat >= 0) {
-      return state.projs[indcat].findIndex((elem) => elem._id === data.id)
-    }
-    return -1
-  }
-
   function createNewItem(state: IProjectsState, { objproj, atfirst, categorySel }) {
-    let indcat = state.categories.indexOf(categorySel)
+    console.log('createNewItem', objproj, 'cat=', categorySel, 'state.projects', state.projects)
-    if (indcat === -1) {
+    if (state.projects === undefined) {
-      state.categories.push(categorySel)
+      state.projects = []
-      indcat = state.categories.indexOf(categorySel)
+      state.projects.push(objproj)
-    }
+      console.log('push state.projects', state.projects)
-    console.log('createNewItem', objproj, 'cat=', categorySel, 'state.projs[indcat]', state.projs[indcat])
-    if (state.projs[indcat] === undefined) {
-      state.projs[indcat] = []
-      state.projs[indcat].push(objproj)
-      console.log('push state.projs[indcat]', state.projs)
       return
     }
     if (atfirst) {
-      state.projs[indcat].unshift(objproj)
+      state.projects.unshift(objproj)
     }
     else {
-      state.projs[indcat].push(objproj)
+      state.projects.push(objproj)
     }
 
-    console.log('state.projs[indcat]', state.projs[indcat])
+    console.log('state.projects', state.projects)
 
   }
 
   function deletemyitem(state: IProjectsState, myitem: IProject) {
     // Find record
-    const indcat = state.categories.indexOf(myitem.category)
+    const ind = tools.getIndexById(state.projects, myitem._id)
-    const ind = findIndTodoById(state, { id: myitem._id, categorySel: myitem.category })
 
-    ApiTables.removeitemfromarray(state.projs[indcat], ind)
+    ApiTables.removeitemfromarray(state.projects, ind)
   }
 
   export const mutations = {
@@ -177,8 +154,8 @@ namespace Mutations {
 
 namespace Actions {
 
-  async function dbLoadProjects(context, { checkPending }) {
+  async function dbLoad(context, { checkPending }) {
-    console.log('dbLoadProjects', checkPending, 'userid=', UserStore.state.userId)
+    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
 
     if (UserStore.state.userId === '') {
       return false  // Login not made
@@ -186,11 +163,10 @@ namespace Actions {
 
     const ris = await Api.SendReq('/projects/' + UserStore.state.userId, 'GET', null)
       .then((res) => {
-        if (res.data.projs) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
+        if (res.data.projects) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
-          state.projs = res.data.projs
+          state.projects = res.data.projects
-          state.categories = res.data.categories
         } else {
-          state.projs = [[]]
+          state.projects = []
         }
 
         state.showtype = parseInt(GlobalStore.getters.getConfigStringbyId({
@@ -198,15 +174,15 @@ namespace Actions {
           default: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED
         }), 10)
 
-        // console.log('ARRAY TODOS = ', state.projs)
+        // console.log('ARRAY TODOS = ', state.projects)
         if (process.env.DEBUG === '1') {
-          console.log('dbLoadProjects', 'state.projs', state.projs, 'state.categories', state.categories)
+          console.log('dbLoad', 'state.projects', state.projects)
         }
 
         return res
       })
       .catch((error) => {
-        console.log('error dbLoadProjects', error)
+        console.log('error dbLoad', error)
         UserStore.mutations.setErrorCatch(error)
         return error
       })
@@ -217,7 +193,7 @@ namespace Actions {
   async function deleteItem(context, { cat, idobj }) {
     console.log('deleteItem: KEY = ', idobj)
 
-    const myarr = gettodosByCategory(cat)
+    const myarr = getarrByCategory(cat)
 
     const myobjtrov = tools.getElemById(myarr, idobj)
 
@@ -236,7 +212,7 @@ namespace Actions {
     }
   }
 
-  async function insertProject(context, { myobj, atfirst }) {
+  async function dbInsert(context, { myobj, atfirst }) {
 
     const objproj = initcat()
 
@@ -245,7 +221,7 @@ namespace Actions {
 
     let elemtochange: IProject = null
 
-    const myarr = gettodosByCategory(objproj.category)
+    const myarr = getarrByCategory(objproj.category)
 
     if (atfirst) {
       console.log('INSERT AT THE TOP')
@@ -329,23 +305,20 @@ namespace Actions {
   }
 
   async function swapElems(context, itemdragend: IDrag) {
-    console.log('swapElems', itemdragend)
+    console.log('PROJECT swapElems', itemdragend, state.projects)
-    console.log('state.projs', state.projs)
-    console.log('state.categories', state.categories)
 
     const cat = itemdragend.category
-    const indcat = state.categories.indexOf(cat)
+    const myarr = state.projects
-    const myarr = state.projs[indcat]
 
     tools.swapGeneralElem(nametable, myarr, itemdragend, fieldtochange)
 
   }
 
   export const actions = {
-    dbLoadProjects: b.dispatch(dbLoadProjects),
+    dbLoad: b.dispatch(dbLoad),
     swapElems: b.dispatch(swapElems),
     deleteItem: b.dispatch(deleteItem),
-    insertProject: b.dispatch(insertProject),
+    dbInsert: b.dispatch(dbInsert),
     modify: b.dispatch(modify)
   }
 

src/store/Modules/Todos.ts

@@ -73,14 +73,14 @@ function initcat() {
 }
 
 namespace Getters {
-  const todos_dacompletare = b.read((state: ITodosState) => (cat: string): ITodo[] => {
+  const items_dacompletare = b.read((state: ITodosState) => (cat: string): ITodo[] => {
     const indcat = getindexbycategory(cat)
     if (state.todos[indcat]) {
       return state.todos[indcat].filter((todo) => !todo.completed)
     } else {
       return []
     }
-  }, 'todos_dacompletare')
+  }, 'items_dacompletare')
 
   const todos_completati = b.read((state: ITodosState) => (cat: string): ITodo[] => {
     const indcat = getindexbycategory(cat)
@@ -112,8 +112,8 @@ namespace Getters {
   }, 'TodosCount')
 
   export const getters = {
-    get todos_dacompletare() {
+    get items_dacompletare() {
-      return todos_dacompletare()
+      return items_dacompletare()
     },
     get todos_completati() {
       return todos_completati()
@@ -132,7 +132,7 @@ namespace Mutations {
   function findIndTodoById(state: ITodosState, data: IParamTodo) {
     const indcat = state.categories.indexOf(data.categorySel)
     if (indcat >= 0) {
-      return state.todos[indcat].findIndex((elem) => elem._id === data.id)
+      return tools.getIndexById(state.todos[indcat], data.id)
     }
     return -1
   }
@@ -178,8 +178,8 @@ namespace Mutations {
 
 namespace Actions {
 
-  async function dbLoadTodo(context, { checkPending }) {
+  async function dbLoad(context, { checkPending }) {
-    console.log('dbLoadTodo', checkPending, 'userid=', UserStore.state.userId)
+    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
 
     if (UserStore.state.userId === '') {
       return false  // Login not made
@@ -201,13 +201,13 @@ namespace Actions {
 
         // console.log('ARRAY TODOS = ', state.todos)
         if (process.env.DEBUG === '1') {
-          console.log('dbLoadTodo', 'state.todos', state.todos, 'state.categories', state.categories)
+          console.log('dbLoad', 'state.todos', state.todos, 'state.categories', state.categories)
         }
 
         return res
       })
       .catch((error) => {
-        console.log('error dbLoadTodo', error)
+        console.log('error dbLoad', error)
         UserStore.mutations.setErrorCatch(error)
         return error
       })
@@ -237,7 +237,7 @@ namespace Actions {
     }
   }
 
-  async function insertTodo(context, { myobj, atfirst }) {
+  async function dbInsert(context, { myobj, atfirst }) {
 
     const objtodo = initcat()
 
@@ -330,9 +330,7 @@ namespace Actions {
   }
 
   async function swapElems(context, itemdragend: IDrag) {
-    console.log('swapElems', itemdragend)
+    console.log('TODOS swapElems', itemdragend, state.todos, state.categories)
-    console.log('state.todos', state.todos)
-    console.log('state.categories', state.categories)
 
     const cat = itemdragend.category
     const indcat = state.categories.indexOf(cat)
@@ -343,10 +341,10 @@ namespace Actions {
   }
 
   export const actions = {
-    dbLoadTodo: b.dispatch(dbLoadTodo),
+    dbLoad: b.dispatch(dbLoad),
     swapElems: b.dispatch(swapElems),
     deleteItem: b.dispatch(deleteItem),
-    insertTodo: b.dispatch(insertTodo),
+    dbInsert: b.dispatch(dbInsert),
     modify: b.dispatch(modify)
   }
 

src/store/Modules/UserStore.ts

@@ -502,7 +502,7 @@ namespace Actions {
 
     await GlobalStore.actions.loadAfterLogin()
       .then(() => {
-        Todos.actions.dbLoadTodo({ checkPending: true })
+        Todos.actions.dbLoad({ checkPending: true })
       })
   }
 

src/store/Modules/tools.ts

@@ -21,6 +21,8 @@ export const tools = {
   DUPLICATE_EMAIL_ID: 11000,
   DUPLICATE_USERNAME_ID: 11100,
 
+  FIRST_PROJ: '__FIRSTPROJ',
+
   arrLangUsed: ['enUs', 'it', 'es'],
 
   SERVKEY_VERS: 'vers',
@@ -249,6 +251,57 @@ export const tools = {
     ]
   },
 
+  menuPopupProj: {
+    it: [
+      {
+        id: 40,
+        label: 'Imposta Scadenza',
+        value: 101, // TOGGLE_EXPIRING
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 50,
+        label: 'Elimina',
+        value: 100, // DELETE
+        icon: 'delete',
+        checked: false
+      }
+    ],
+    es: [
+      {
+        id: 40,
+        label: 'Establecer expiración',
+        value: 101, // TOGGLE_EXPIRING
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 50,
+        label: 'Borrar',
+        value: 100, // DELETE
+        icon: 'delete',
+        checked: false
+      }
+    ],
+    enUs: [
+      {
+        id: 40,
+        label: 'Set Expiring',
+        value: 101, // TOGGLE_EXPIRING
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 50,
+        label: 'Delete',
+        value: 100, // DELETE
+        icon: 'trash',
+        checked: false
+      }
+    ]
+  },
+
   menuPopupConfigTodo: {
     it: [
       {
@@ -276,6 +329,33 @@ export const tools = {
     ]
   },
 
+  menuPopupConfigProject: {
+    it: [
+      {
+        id: 10,
+        label: 'Mostra Task',
+        value: 150,  // SHOW_TASK
+        icon: 'rowing'
+      }
+    ],
+    es: [
+      {
+        id: 10,
+        label: 'Mostrar Tareas',
+        value: 150,
+        icon: 'rowing'
+      }
+    ],
+    enUs: [
+      {
+        id: 10,
+        label: 'Show Task',
+        value: 150,
+        icon: 'rowing'
+      }
+    ]
+  },
+
   listOptionShowTask: {
     it: [
       {
@@ -456,6 +536,9 @@ export const tools = {
       console.log('swapElems PRIORITY', itemdragend)
     }
 
+    if (itemdragend.newIndex === itemdragend.oldIndex)
+      return
+
     if (tools.isOkIndex(myarr, itemdragend.newIndex) && tools.isOkIndex(myarr, itemdragend.oldIndex)) {
       myarr.splice(itemdragend.newIndex, 0, myarr.splice(itemdragend.oldIndex, 1)[0])
       tools.notifyarraychanged(myarr[itemdragend.newIndex])
@@ -506,7 +589,7 @@ export const tools = {
   },
 
   getIndexById(myarr, id) {
-    return myarr.findIndex((elem) => elem._id === id)
+    return myarr.indexOf(tools.getElemById(myarr, id))
   },
 
   getElemById(myarr, id) {
@@ -557,13 +640,17 @@ export const tools = {
     return myarr.find((elem) => elem.id_prev === ApiTables.LIST_START)
   },
 
-  getLastListNotCompleted(nametable, cat) {
+  getModulesByTable(nametable) {
-    let arr
     if (nametable === 'todos') {
-      arr = Todos.getters.todos_dacompletare(cat)
+      return Todos
     } else if (nametable === 'projects') {
-      arr = Projects.getters.projs_dacompletare(cat)
+      return Projects
     }
+  },
+
+  getLastListNotCompleted(nametable, cat) {
+    const module = tools.getModulesByTable(nametable)
+    let arr = module.getters.items_dacompletare(cat)
 
     return (arr.length > 0) ? arr[arr.length - 1] : null
   },
@@ -668,7 +755,7 @@ export const tools = {
   /*
   get todos_vista() {
     let mystr = ''
-    const arr = Todos.getters.todos_dacompletare(this.categoryAtt)
+    const arr = Todos.getters.items_dacompletare(this.categoryAtt)
     for (const ind in arr) {
       mystr += this.getstrelem(arr[ind]) + '\n'
     }

src/views/admin/testp1/testp1.ts

@@ -13,8 +13,8 @@ export default class Testp1 extends Vue {
   public paramcategory: string = ''
   public mioobj: any
 
-  // @Getter('todos_dacompletare', { namespace })
+  // @Getter('items_dacompletare', { namespace })
-  // public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
+  // public items_dacompletare: (state: ITodosState, category: string) => ITodo[]
 
   @Getter('testpao1_getter_contatore', { namespace })
   public testpao1: (state: IGlobalState, param1: number) => number

src/views/projects/proj-list/proj-list.ts

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import { Component, Watch } from 'vue-property-decorator'
 
-import { IDrag, ITodo, IProjectsState } from '../../../model/index'
+import { IDrag, IProject, IProjectsState } from '../../../model/index'
-import { SingleTodo } from '../../../components/todos/SingleTodo/index'
+import { SingleProject } from '../../../components/projects/SingleProject/index'
 
 import { tools } from '../../../store/Modules/tools'
 import * as ApiTables from '../../../store/Modules/ApiTables'
@@ -16,7 +16,7 @@ const namespace: string = 'Projects'
 
 @Component({
 
-  components: { SingleTodo },
+  components: { SingleProject },
   filters: {
     capitalize(value) {
       if (!value) {
@@ -30,16 +30,15 @@ const namespace: string = 'Projects'
 
 export default class ProjList extends Vue {
   public $q: any
-  public todotop: string = ''
+  public projbottom: string = ''
-  public todobottom: string = ''
   public polling = null
   public service: any
   public scrollable = true
-  public categoryAtt: string = ''
+  public categoryAtt: string = tools.FIRST_PROJ
   public dragname: string = 'second'
 
   public $refs: {
-    single: SingleTodo[]
+    single: SingleProject[]
   }
 
   get tools() {
@@ -59,8 +58,8 @@ export default class ProjList extends Vue {
     return Projects.getters.doneProjectsCount(this.categoryAtt)
   }
 
-  get menuPopupConfigTodo() {
+  get menuPopupConfigProject() {
-    return tools.menuPopupConfigTodo[UserStore.state.lang]
+    return tools.menuPopupConfigProject[UserStore.state.lang]
   }
 
   get listOptionShowTask() {
@@ -71,11 +70,11 @@ export default class ProjList extends Vue {
     return Projects.getters.ProjectsCount(this.categoryAtt)
   }
 
-  @Getter('projs_dacompletare', { namespace })
+  @Getter('items_dacompletare', { namespace })
-  public projs_dacompletare: (state: IProjectsState, category: string) => ITodo[]
+  public items_dacompletare: (state: IProjectsState, category: string) => IProject[]
 
   @Getter('projs_completati', { namespace })
-  public projs_completati: (state: IProjectsState, category: string) => ITodo[]
+  public projs_completati: (state: IProjectsState, category: string) => IProject[]
 
   @Watch('$route.params.category')
   public changecat() {
@@ -90,7 +89,7 @@ export default class ProjList extends Vue {
     return field_value === tools.MenuAction.SHOW_TASK
   }
 
-  public async onEnd(itemdragend) {
+  public async onEnd2(itemdragend) {
     await Projects.actions.swapElems(itemdragend)
   }
 
@@ -106,7 +105,8 @@ export default class ProjList extends Vue {
         oldIndex: this.getElementOldIndex(args.el)
       }
 
-      this.onEnd(itemdragend)
+      // console.log('args', args, itemdragend)
+      this.onEnd2(itemdragend)
     })
 
     $service.eventBus.$on('drag', (el, source) => {
@@ -126,8 +126,10 @@ export default class ProjList extends Vue {
   }
 
   public async load() {
-    console.log('LOAD TODO....')
+    console.log('LOAD PROJECTS....')
+    if (!!this.$route.params.category) {
       this.categoryAtt = this.$route.params.category
+    }
 
     // Set last category selected
     localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
@@ -151,11 +153,8 @@ export default class ProjList extends Vue {
     return Projects.actions.deleteItem({ cat: this.categoryAtt, idobj })
   }
 
-  public insertProject(atfirst: boolean = false) {
+  public dbInsert(atfirst: boolean = false) {
-    let descr = this.todobottom.trim()
+    let descr = this.projbottom.trim()
-    if (atfirst) {
-      descr = this.todotop.trim()
-    }
 
     if (descr === '') {
       return
@@ -165,20 +164,14 @@ export default class ProjList extends Vue {
       return
     }
 
-    const myobj: ITodo = {
+    const myobj: IProject = {
       descr,
       category: this.categoryAtt
     }
 
-    // empty the field
+    this.projbottom = ''
-    if (atfirst) {
-      this.todotop = ''
-    }
-    else {
-      this.todobottom = ''
-    }
 
-    return Projects.actions.insertProject({ myobj, atfirst })
+    return Projects.actions.dbInsert({ myobj, atfirst })
   }
 
   public async updateitem({ myitem, field }) {
@@ -198,14 +191,14 @@ export default class ProjList extends Vue {
 
   }
 
-  public deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
+  public deselectAllRows(item: IProject, check, onlythis: boolean = false) {
     // console.log('deselectAllRows : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {
 
-      const contr = this.$refs.single[i] as SingleTodo
+      const contr = this.$refs.single[i] as SingleProject
       // @ts-ignore
-      const id = contr.itemtodo._id
+      const id = contr.itemproject._id
       // Don't deselect the actual clicked!
       let des = false
       if (onlythis) {

src/views/projects/proj-list/proj-list.vue

@@ -9,7 +9,7 @@
                                icon="settings">
                             <q-menu id="popconfig" self="top right">
                                 <q-list link separator no-border class="todo-menu">
-                                    <q-item clickable v-for="field in menuPopupConfigTodo" :key="field.value">
+                                    <q-item clickable v-for="field in menuPopupConfigProject" :key="field.value">
                                         <q-item-section avatar>
                                             <q-icon :name="field.icon"/>
                                         </q-item-section>
@@ -56,18 +56,14 @@
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div>
                 <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container" v-dragula="projs_dacompletare(categoryAtt)" drake="second">
+                <div class="container" v-dragula="items_dacompletare(categoryAtt)" drake="second">
                     <div :id="getmyid(myproj._id)" :index="index"
-                         v-for="(myproj, index) in projs_dacompletare(categoryAtt)"
+                         v-for="(myproj, index) in items_dacompletare(categoryAtt)"
                          :key="myproj._id" class="myitemdrag">
 
-                        <div v-if="(prior !== myproj.priority) && !myproj.completed"
+                        <SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
-                             :class="getTitlePriority(myproj.priority)">
+                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd2"
-                            <label>{{getPriorityByInd(myproj.priority)}}</label>
+                                    :itemproject='myproj'/>
-                        </div>
-                        <SingleTodo ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
-                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd"
-                                    :itemtodo='myproj'/>
 
                         <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
 
@@ -78,12 +74,12 @@
                 <!--</q-infinite-scroll>-->
 
 
-                <q-input v-if="ProjectsCount > 0" ref="insertTaskBottom" v-model="todobottom"
+                <q-input ref="insertTaskBottom" v-model="projbottom"
                          style="margin-left: 6px;"
                          color="blue-12"
                          :label="$t('todo.insertbottom')"
                          :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                         v-on:keyup.enter="insertProject(false)"/>
+                         v-on:keyup.enter="dbInsert(false)"/>
 
                 <br>
 

src/views/todo/todo.ts

@@ -70,8 +70,8 @@ export default class Todo extends Vue {
     return Todos.getters.TodosCount(this.categoryAtt)
   }
 
-  @Getter('todos_dacompletare', { namespace })
+  @Getter('items_dacompletare', { namespace })
-  public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
+  public items_dacompletare: (state: ITodosState, category: string) => ITodo[]
 
   @Getter('todos_completati', { namespace })
   public todos_completati: (state: ITodosState, category: string) => ITodo[]
@@ -150,7 +150,7 @@ export default class Todo extends Vue {
     return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
   }
 
-  public insertTodo(atfirst: boolean = false) {
+  public dbInsert(atfirst: boolean = false) {
     let descr = this.todobottom.trim()
     if (atfirst) {
       descr = this.todotop.trim()
@@ -177,7 +177,7 @@ export default class Todo extends Vue {
       this.todobottom = ''
     }
 
-    return Todos.actions.insertTodo({ myobj, atfirst })
+    return Todos.actions.dbInsert({ myobj, atfirst })
   }
 
   public async updateitem({ myitem, field }) {

src/views/todo/todo.vue

@@ -54,7 +54,7 @@
             <q-input ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
                      style="margin-left: 6px;"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="insertTodo(true)">
+                     v-on:keyup.enter="dbInsert(true)">
                 <template v-slot:prepend>
                     <q-icon name="add"/>
                 </template>
@@ -63,9 +63,9 @@
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div>
                 <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container" v-dragula="todos_dacompletare(categoryAtt)" :drake="dragname">
+                <div class="container" v-dragula="items_dacompletare(categoryAtt)" :drake="dragname">
                     <div :id="getmyid(mytodo._id)" :index="index"
-                         v-for="(mytodo, index) in todos_dacompletare(categoryAtt)"
+                         v-for="(mytodo, index) in items_dacompletare(categoryAtt)"
                          :key="mytodo._id" class="myitemdrag">
 
                         <div v-if="(prior !== mytodo.priority) && !mytodo.completed"
@@ -113,7 +113,7 @@
                      color="blue-12"
                      :label="$t('todo.insertbottom')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="insertTodo(false)"/>
+                     v-on:keyup.enter="dbInsert(false)"/>
 
             <br>