- (Part 2 - Upgrade Components Quasar)

src/classes/routinestd.ts

@@ -1,10 +1,15 @@
 export async function askConfirm($q: any, mytitle, mytext, ok, cancel) {
   try {
     return await $q.dialog({
-      title: mytitle,
+      cancel: {
+        label: cancel
+      },
       message: mytext,
-      ok: ok,
+      ok: {
-      cancel: cancel
+        label: ok,
+        push: true
+      },
+      title: mytitle
     }).then((ris) => {
       return true
       // this.$q.notify('Agreed!')

src/components/todos/SingleTodo/SingleTodo.scss

@@ -25,7 +25,7 @@ $heightdescr: 20px;
 .flex-container2 {
   flex-flow: row wrap;
   justify-content: space-between;
-  margin: 0px 5px 0px 5px;  // top right bottom left
+  margin: 0px 1px 0px 1px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover
@@ -71,7 +71,7 @@ $heightdescr: 20px;
 
 .pos-item {
   max-width: 24px;
-  min-width: 24px;
+  min-width: 26px;
   margin-left: 1px;
   margin-right: 1px;
   padding-left: 1px;
@@ -218,16 +218,20 @@ $heightdescr: 20px;
 }
 
 .data-item {
-  max-width: 84px;
+  max-width: 78px;
   //min-width: 100px;
   //display: flex;
   //visibility: initial;
   margin-right: 3px;
-  color: #ccc;
+  color: #585858;
   order: 1;
   flex: 1;
-  height: $heightBtn;
+  height: $heightitem;
-  line-height: $heightBtn;
+  line-height: $heightitem;
+  padding-left: 2px;
+  padding-right: 0px;
+  //height: $heightBtn;
+  //line-height: $heightBtn;
 }
 
 
@@ -263,7 +267,6 @@ $heightdescr: 20px;
 
   vertical-align: middle;
   line-height: 120%;
-  max-height: 40px;
 
   //background-color: #d50000;
 
@@ -279,14 +282,17 @@ $heightdescr: 20px;
 }
 
 .div_descr {
-  display: table-cell;
+  display: -webkit-box;
+  max-height: 45px;
 
 }
 
 
 .div_descr_edit {
+  //display: block;
   max-height: 90px;
   //line-height: 120%;
+  //max-height: 90px;
   line-height: $heightitem;
 }
 

src/components/todos/SingleTodo/SingleTodo.ts

@@ -22,7 +22,7 @@ export default class SingleTodo extends Vue {
   public classCompleted: string = ''
   public classDescr: string = ''
   public classDescrEdit: string = ''
-  public classExpiring: string = ''
+  public classExpiring: string = 'flex-item data-item shadow-1'
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
@@ -65,7 +65,10 @@ export default class SingleTodo extends Vue {
   }
 
   @Watch('itemtodo.progress') public valueChanged6() {
+    console.log('itemtodo.progress')
     this.updateClasses()
+
+    console.log('this.percentageProgress', this.percentageProgress, 'this.itemtodo.progress', this.itemtodo.progress)
   }
 
 /*
@@ -103,6 +106,9 @@ export default class SingleTodo extends Vue {
       this.classDescrEdit += ' titleLista-item'
     }
 
+    if (this.itemtodo.progress > 100)
+      this.itemtodo.progress = 100
+
     this.classExpiring = 'flex-item data-item shadow-1'
     this.classExpiringEx = ''
     if (this.itemtodo.completed) {
@@ -362,6 +368,14 @@ export default class SingleTodo extends Vue {
     this.updateClasses()
   }
 
+  public aggiornaProgress(value, initialval){
+    if (value !== initialval) {
+      this.itemtodo.progress = value
+      this.updatedata('progress')
+      this.deselectAndExitEdit()
+    }
+  }
+
   public setCompleted() {
     // console.log('setCompleted')
     this.itemtodo.completed = !this.itemtodo.completed

src/components/todos/SingleTodo/SingleTodo.vue

@@ -18,6 +18,8 @@
         <div class="flex-item donotdrag divdescrTot">
             <q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr"
                      v-model.trim="precDescr"
+                     autogrow
+                     dense
                      :class="classDescrEdit" :max-height="100"
                      @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
 
@@ -37,7 +39,7 @@
         <!--<q-field>{{ itemtodo.descr }}</q-field>-->
         <!--</div>-->
 
-        <div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
+        <div v-if="isTodo() && (itemtodo.progress > 0) " class="flex-item progress-item shadow-1">
             <q-linear-progress
                     stripe
                     :percentage="percentageProgress"
@@ -47,8 +49,11 @@
             </q-linear-progress>
             <div :class="percProgress">
                 {{percentageProgress}}%
-                <q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
+                <q-popup-edit v-model="percentageProgress" title="Progress" buttons class="editProgress"
-                    <q-input type="number" v-model="itemtodo.progress" :max="100" :min="0"/>
+                              @change="val => { model = val }"
+                              @save="aggiornaProgress"
+                >
+                    <q-input dense autofocus type="number" v-model="percentageProgress" :max="100" :min="0"/>
                 </q-popup-edit>
 
             </div>
@@ -57,16 +62,24 @@
 
         <div v-if="itemtodo.enableExpiring" :class="classExpiring">
             {{getstrDate(itemtodo.expiring_at)}}
-            <q-popup-edit v-model="itemtodo.expiring_at" title="Edit" buttons class="">
+            <q-icon name="event" class="cursor-pointer">
-                <q-input
+                <q-popup-proxy>
-                        filled
+                    <q-date v-model="itemtodo.expiring_at" today-btn/>
-                        v-model="itemtodo.expiring_at"
+                </q-popup-proxy>
-                        type="date"
+            </q-icon>
-                        class="myexpired"
+            <!--<q-icon name="event" class="cursor-pointer" />-->
-                        format="DD/MM/YY"
+            <!--<q-popup-edit v-model="itemtodo.expiring_at"-->
-                        @change="val => { model = val }">
+            <!--title="Edit"-->
-                </q-input>
+            <!--buttons class="">-->
-            </q-popup-edit>
+            <!--<q-input-->
+            <!--filled-->
+            <!--v-model="itemtodo.expiring_at"-->
+            <!--type="date"-->
+            <!--class="myexpired"-->
+            <!--format="DD/MM/YYYY"-->
+            <!--&gt;-->
+            <!--</q-input>-->
+            <!--</q-popup-edit>-->
         </div>
         <div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
             <q-btn push

src/components/todos/SubMenus/SubMenus.scss

@@ -11,7 +11,8 @@
   cursor: pointer;
 }
 
-.menuInputProgress > div:nth-child(2) > div > input {
+.menuInputProgress > div > div > div > input {
   min-width: 30px;
+  max-width: 30px;
   width: 30px;
 }

src/components/todos/SubMenus/SubMenus.ts

@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
-import { ITodo } from '../../../model/index'
 import { tools } from '@src/store/Modules/tools'
 import { UserStore } from '@store'
+import { ITodo } from '../../../model/index'
 
 // Doesn't exist in quasar this ? error TS2305
 // import { format } from 'quasar'
@@ -18,19 +18,19 @@ import { UserStore } from '@store'
 export default class SubMenus extends Vue {
   public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
 
-  @Prop({ required: false }) menuPopupTodo: any[]
+  @Prop({ required: false }) public menuPopupTodo: any[]
-  @Prop({ required: false }) itemtodo: ITodo
+  @Prop({ required: false }) public itemtodo: ITodo
-  $q: any
+  public $q: any
 
-  clickMenu (field) {
+  public clickMenu(field) {
     this.$emit('clickMenu', field)
   }
 
-  setPriority (field) {
+  public setPriority(field) {
     this.$emit('setPriority', field)
   }
 
-  KeychangeProgress (e) {
+  public KeychangeProgress(e) {
     // between(50, 10, 20)
 
     if (this.itemtodo.progress > 100) {
@@ -46,7 +46,7 @@ export default class SubMenus extends Vue {
     }
   }
 
-  create () {
+  public create() {
     this.selectPriority = tools.selectPriority[UserStore.state.lang]
 
     console.log('CREAZIONE')

src/components/todos/SubMenus/SubMenus.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-list link separator no-border class="todo-menu">
+        <q-list separator no-border class="todo-menu">
             <div v-for="field in menuPopupTodo" :key="field.value">
                 <q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
                         @click.native="clickMenu(field.value)">
@@ -8,56 +8,31 @@
                         <q-icon :name="field.icon"/>
                     </q-item-section>
 
-                    <q-item-section v-if="field.value !== 120" label class="item-menu">{{field.label}}</q-item-section>
+                    <q-item-section v-if="field.value !== 120" 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="itemtodo.enableExpiring"/>
                     </q-item-section>
-                    <q-item-section v-if="field.value === 110">
+                    <q-item-section side v-if="field.value === 110">
                         <q-checkbox v-model="itemtodo.completed"/>
                     </q-item-section>
 
 
-                    <!--<q-item tag="label" v-ripple>-->
-                        <!--<q-item-section side top>-->
-                            <!--<q-checkbox v-model="check1" />-->
-                        <!--</q-item-section>-->
-
-                        <!--<q-item-section>-->
-                            <!--<q-item-label>Notifications</q-item-label>-->
-                            <!--<q-item-label caption>-->
-                                <!--Notify me about updates to apps or games that I downloaded-->
-                            <!--</q-item-label>-->
-                        <!--</q-item-section>-->
-                    <!--</q-item>-->
-
-                    <!--<q-item tag="label" v-ripple>-->
-                        <!--<q-item-section side top>-->
-                            <!--<q-checkbox v-model="check2" />-->
-                        <!--</q-item-section>-->
-
-                        <!--<q-item-section>-->
-                            <!--<q-item-label>Sound</q-item-label>-->
-                            <!--<q-item-label caption>-->
-                                <!--Auto-update apps at anytime. Data charges may apply-->
-                            <!--</q-item-label>-->
-                        <!--</q-item-section>-->
-                    <!--</q-item>-->
-
                     <q-item-section v-if="field.value === 120">
-                        <q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"
+                        <q-slider label
-                                  :step="5"/>
+                                  :class="$parent.menuProgress"
+                                  v-model="itemtodo.progress"
+                                  :min="0"
+                                  :max="100"
+                                  :step="5" @change="val => { lazy = val }"
+                        />
 
                     </q-item-section>
-                    <q-item-section v-if="field.value === 120">
+                    <q-item-section side v-if="field.value === 120">
                         <div>
-                            <q-input v-model="itemtodo.progress"
+                            <q-item-label style="color: blue">{{itemtodo.progress}} %</q-item-label>
-                                     class="menuInputProgress"
-                                     type="number"
-                                     suffix="%"
-                                     @change="val => { model = val }"
-                                     @keydown="KeychangeProgress"
-                            />
                         </div>
                     </q-item-section>
                 </q-item>
@@ -70,30 +45,38 @@
                         {{field.label}}
                     </q-item-section>
                 </q-item>
-                <q-item clickable v-if="(field.value === 130)" :icon="field.icon"
+                <q-item clickable v-if="(field.value === 130)">
-                        @click.native="clickMenu(field.value)">
-
                     <q-item-section avatar>
-                        <q-icon :name="$parent.iconPriority" inverted color="primary"/>
+                        <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-btn-dropdown ref="dropdown_priority" flat :label="field.label"
+                                    <q-list dense>
-                        >
+                                        <q-item clickable v-ripple v-for="fieldprior in selectPriority"
-                            <q-list bordered>
+                                                :key="fieldprior.value"
-                                <q-item clickable v-ripple v-for="field in selectPriority" :key="field.value"
+                                                @click="setPriority(fieldprior.value)">
-                                        @click.native="setPriority(field.value)">
                                             <q-item-section avatar>
-                                        <q-icon :name="field.icon" inverted color="primary"/>
+                                                <q-icon :name="fieldprior.icon" inverted color="primary"/>
                                             </q-item-section>
                                             <q-item-section>
-                                        {{field.label}}
+                                                {{fieldprior.label}}
                                             </q-item-section>
                                         </q-item>
                                     </q-list>
-                        </q-btn-dropdown>
                                 </q-item-section>
-
+                            </q-item>
+                        </q-list>
+                    </q-menu>
                 </q-item>
             </div>
         </q-list>

src/components/todos/todo/todo.ts

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import { Component, Watch } from 'vue-property-decorator'
 
+import { ICfgServer, IDrag, IGlobalState, ITodo, ITodosState } from '@src/model'
 import { SingleTodo } from '../SingleTodo'
-import { ITodo, ITodosState, IDrag, IGlobalState, ICfgServer } from '@src/model'
 
 import { tools } from '../../../store/Modules/tools'
 
@@ -11,82 +11,34 @@ import { UserStore } from '@store'
 
 // _.cloneDeep(  Per clonare un oggetto
 
-import { Getter, State, Mutation } from 'vuex-class'
 import { costanti } from '@src/store/Modules/costanti'
+import { Getter, Mutation, State } from 'vuex-class'
 const namespace: string = 'Todos'
 
 import globalroutines from './../../../globalroutines/index'
 
-
 @Component({
 
   components: { SingleTodo },
   filters: {
-    capitalize: function (value) {
+    capitalize(value) {
-      if (!value) return ''
+      if (!value) { return '' }
       value = value.toString()
       return value.charAt(0).toUpperCase() + value.slice(1)
     }
   }
 })
 export default class Todo extends Vue {
-  $q: any
-  filter: boolean = false
-  title: string = ''
-  todotop: string = ''
-  todobottom: string = ''
-  drag: boolean = true
-  startpos: number = 0
-  listPriorityLabel: number[] = []
-  arrPrior: number[] = []
-  itemDragStart: any = null
-  polling = null
-  loadDone: boolean = false
-  public inddragging: number = -1
-  public service: any
-  public actualMaxPosition: number = 15
-  public scrollable = true
-  public tmpstrTodos: string = ''
-  public categoryAtt: string = ''
-  // public showtype: number = Todos.state.showtype
 
-  $refs: {
+  get showtype() {
-    single: SingleTodo[]
-  }
-
-  @Getter('todos_dacompletare', { namespace })
-  public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
-
-  @Getter('todos_completati', { namespace })
-  public todos_completati: (state: ITodosState, category: string) => ITodo[]
-
-  @Watch('$route.params.category') changecat() {
-    this.categoryAtt = this.$route.params.category
-  }
-
-  get showtype () {
     return Todos.state.showtype
   }
 
-  set showtype (value) {
+  set showtype(value) {
     console.log('showtype', value)
     GlobalStore.mutations.setShowType(value)
   }
 
-  // clickaggshowtype () {
-  //   console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
-  //   Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
-  //   console.log('2B) Dopo: showtype=', this.showtype)
-  // }
-
-
-  loadval (e) {
-    console.log('1) loadval, showtype=', this.showtype)
-    this.showtype = Todos.state.showtype
-    console.log('2) Dopo: showtype=', this.showtype)
-  }
-
-
   get doneTodosCount() {
     return Todos.getters.doneTodosCount(this.categoryAtt)
   }
@@ -106,7 +58,7 @@ export default class Todo extends Vue {
   get todos_vista() {
     let mystr = ''
     const arr = Todos.getters.todos_dacompletare(this.categoryAtt)
-    for (let ind in arr) {
+    for (const ind in arr) {
       mystr += this.getstrelem(arr[ind]) + '\n'
     }
 
@@ -118,7 +70,6 @@ export default class Todo extends Vue {
   //   return todos_dacompletare(this.categoryAtt)
   // }
 
-
   // @Watch('$route', { immediate: true, deep: true })
   // onUrlChange(newVal: any) {
   //   // Some action
@@ -132,46 +83,93 @@ export default class Todo extends Vue {
   set reload_fromServer(value: number) {
     Todos.state.reload_fromServer = value
   }
+  public $q: any
+  public filter: boolean = false
+  public title: string = ''
+  public todotop: string = ''
+  public todobottom: string = ''
+  public drag: boolean = true
+  public startpos: number = 0
+  public listPriorityLabel: number[] = []
+  public arrPrior: number[] = []
+  public itemDragStart: any = null
+  public polling = null
+  public loadDone: boolean = false
+  public inddragging: number = -1
+  public service: any
+  public actualMaxPosition: number = 15
+  public scrollable = true
+  public tmpstrTodos: string = ''
+  public categoryAtt: string = ''
+  // public showtype: number = Todos.state.showtype
 
-  getmyid(id) {
+  public $refs: {
+    single: SingleTodo[]
+  }
+
+  @Getter('todos_dacompletare', { namespace })
+  public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
+
+  @Getter('todos_completati', { namespace })
+  public todos_completati: (state: ITodosState, category: string) => ITodo[]
+
+  @Watch('$route.params.category') public changecat() {
+    this.categoryAtt = this.$route.params.category
+  }
+
+  // clickaggshowtype () {
+  //   console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
+  //   Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
+  //   console.log('2B) Dopo: showtype=', this.showtype)
+  // }
+
+  public loadval(e) {
+    console.log('1) loadval, showtype=', this.showtype)
+    this.showtype = Todos.state.showtype
+    console.log('2) Dopo: showtype=', this.showtype)
+  }
+
+  public getmyid(id) {
     return 'row' + id
   }
 
-  showTask(field_value) {
+  public showTask(field_value) {
     return field_value === tools.MenuAction.SHOW_TASK
   }
 
-  onStart() {
+  public onStart() {
 
     this.startpos = 0
     this.itemDragStart = null
   }
 
-
+  public logelem(mystr, elem) {
-  logelem(mystr, elem) {
     console.log(mystr, 'elem [', elem._id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '] modif=', elem.modified)
   }
 
-  getstrelem(elem) {
+  public getstrelem(elem) {
     return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + this.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
   }
 
-  getTitlePriority(priority) {
+  public getTitlePriority(priority) {
     let cl = ''
 
-    if (priority === tools.Todos.PRIORITY_HIGH)
+    if (priority === tools.Todos.PRIORITY_HIGH) {
       cl = 'high_priority'
-    else if (priority === tools.Todos.PRIORITY_NORMAL)
+    }
+    else if (priority === tools.Todos.PRIORITY_NORMAL) {
       cl = 'medium_priority'
-    else if (priority === tools.Todos.PRIORITY_LOW)
+ }
+    else if (priority === tools.Todos.PRIORITY_LOW) {
       cl = 'low_priority'
+ }
 
     return cl + ' titlePriority'
   }
 
-  logga_arr(myarr: ITodo[]) {
+  public logga_arr(myarr: ITodo[]) {
     let mystr = '\n'
-    myarr.forEach(item => {
+    myarr.forEach((item) => {
       mystr += '[' + item.pos + '] ' + item.descr + ' Pr(' + this.getPriorityByInd(item.priority) + ') [' + item.id_prev + '] modif=' + item.modified + '\n'
       // mystr += '[' + item.pos + '] ' + item.descr + '\n'
     })
@@ -179,7 +177,7 @@ export default class Todo extends Vue {
     return mystr
   }
 
-  async onEnd(itemdragend) {
+  public async onEnd(itemdragend) {
     console.log('************  END DRAG: ', itemdragend)
     this.inddragging = -1
 
@@ -187,31 +185,22 @@ export default class Todo extends Vue {
 
   }
 
-  private getElementIndex(el: any) {
+  public created() {
-    return [].slice.call(el.parentElement.children).indexOf(el)
-  }
-
-  private getElementOldIndex(el: any) {
-    return parseInt(el.attributes['index'].value)
-  }
-
-
-  created() {
     const $service = this.$dragula.$service
     $service.options('first',
       {
         // isContainer: function (el) {
         //   return el.classList.contains('dragula-container')
         // },
-        moves: function (el, source, handle, sibling) {
+        moves(el, source, handle, sibling) {
           // console.log('moves')
           return !el.classList.contains('donotdrag') // elements are always draggable by default
         },
-        accepts: function (el, target, source, sibling) {
+        accepts(el, target, source, sibling) {
           // console.log('accepts dragging '+ el.id + ' from ' + source.id + ' to ' + target.id)
           return true // elements can be dropped in any of the `containers` by default
         },
-        invalid: function (el, handle) {
+        invalid(el, handle) {
           // console.log('invalid')
           return el.classList.contains('donotdrag') // don't prevent any drags from initiating by default
         },
@@ -219,7 +208,7 @@ export default class Todo extends Vue {
       })
     $service.eventBus.$on('dragend', (args) => {
 
-      let itemdragend: IDrag = {
+      const itemdragend: IDrag = {
         category: this.categoryAtt,
         newIndex: this.getElementIndex(args.el),
         oldIndex: this.getElementOldIndex(args.el)
@@ -238,11 +227,10 @@ export default class Todo extends Vue {
       this.scrollable = true
     })
 
-
     this.load()
   }
 
-  mounted () {
+  public mounted() {
     // console.log('*** MOUNTED ***')
 
     this.categoryAtt = this.$route.params.category
@@ -257,25 +245,25 @@ export default class Todo extends Vue {
     }
   }
 
-  setarrPriority() {
+  public setarrPriority() {
     this.arrPrior = []
     const arr = tools.selectPriority[UserStore.state.lang]
     if (arr) {
-      arr.forEach(rec => {
+      arr.forEach((rec) => {
         this.arrPrior.push(rec.value)
       })
     }
     // console.log('Array PRIOR:', this.arrPrior)
   }
 
-  async load() {
+  public async load() {
     console.log('LOAD TODO....')
     this.categoryAtt = this.$route.params.category
 
     // Set last category selected
     localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
 
-    for (let todosKey in tools.Todos) {
+    for (const todosKey in tools.Todos) {
       this.listPriorityLabel.push(tools.Todos[todosKey])
     }
     // console.log('Priority:' + this.listPriorityLabel)
@@ -288,47 +276,49 @@ export default class Todo extends Vue {
   }
 
   // Call to check if need to refresh
-  checkUpdate_everytime() {
+  public checkUpdate_everytime() {
     this.polling = setInterval(() => {
       this.checkUpdate()
     }, 60000)
   }
 
-  beforeDestroy() {
+  public beforeDestroy() {
     clearInterval(this.polling)
   }
 
-
+  public getPriorityByInd(index) {
-  getPriorityByInd(index) {
     // console.log('LANG in PRIOR', UserStore.state.lang)
     try {
       const arr = tools.selectPriority[UserStore.state.lang]
-      for (let rec of arr) {
+      for (const rec of arr) {
-        if (rec.value === index)
+        if (rec.value === index) {
           return rec.label
         }
+      }
     } catch (e) {
 
     }
     return ''
   }
 
-  isRegistered() {
+  public isRegistered() {
     return localStorage.getItem(tools.localStorage.userId) !== ''
   }
 
-  mydeleteItem(idobj: string) {
+  public mydeleteItem(idobj: string) {
     console.log('mydeleteItem', idobj)
     return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
   }
 
-  insertTodo(atfirst: boolean = false) {
+  public insertTodo(atfirst: boolean = false) {
     let descr = this.todobottom.trim()
-    if (atfirst)
+    if (atfirst) {
       descr = this.todotop.trim()
+    }
 
-    if (descr === '')
+    if (descr === '') {
       return
+    }
 
     if (UserStore.state.userId === undefined) {
       this.$q.notify(this.$t('todo.usernotdefined'))
@@ -341,8 +331,8 @@ export default class Todo extends Vue {
       return
     }
 
-    let myobj: ITodo = {
+    const myobj: ITodo = {
-      descr: descr,
+      descr,
       category: this.categoryAtt
     }
 
@@ -350,17 +340,19 @@ export default class Todo extends Vue {
       .then((data) => {
 
         console.log('data', data)
-        if (data !== null)
+        if (data !== null) {
           this.$q.notify(data)
-
-        // empty the field
-        if (atfirst)
-          this.todotop = ''
-        else
-          this.todobottom = ''
-      })
         }
 
+        // empty the field
+        if (atfirst) {
+          this.todotop = ''
+        }
+        else {
+          this.todobottom = ''
+        }
+      })
+  }
 
   /*
     sendMessageToSW(recdata, method) {
@@ -376,7 +368,7 @@ export default class Todo extends Vue {
     }
   */
 
-  async updateitem({ myitem, field }) {
+  public async updateitem({ myitem, field }) {
     console.log('calling MODIFY updateitem', myitem, field)
     // Update the others components...
 
@@ -394,14 +386,14 @@ export default class Todo extends Vue {
 
   }
 
-  deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
+  public deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
     // console.log('deselectAllRows : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {
 
-      let contr = <SingleTodo>this.$refs.single[i]
+      const contr = this.$refs.single[i] as SingleTodo
       // @ts-ignore
-      let id = contr.itemtodo._id
+      const id = contr.itemtodo._id
       // Don't deselect the actual clicked!
       let des = false
       if (onlythis) {
@@ -416,11 +408,11 @@ export default class Todo extends Vue {
     }
   }
 
-  checkUpdate() {
+  public checkUpdate() {
     Todos.actions.waitAndcheckPendingMsg()
   }
 
-  loadMoreTodo(index, done) {
+  public loadMoreTodo(index, done) {
     setTimeout(() => {
       this.actualMaxPosition += 15
       done()
@@ -428,7 +420,7 @@ export default class Todo extends Vue {
 
   }
 
-  getArrTodos() {
+  public getArrTodos() {
 
     let mystr = ''
 
@@ -437,7 +429,7 @@ export default class Todo extends Vue {
       .then((alldata) => {
         const myrecs = [...alldata]
 
-        myrecs.forEach(rec => {
+        myrecs.forEach((rec) => {
           mystr = mystr + rec.descr + rec.completed + ']   ['
         })
 
@@ -445,6 +437,14 @@ export default class Todo extends Vue {
       })
   }
 
+  private getElementIndex(el: any) {
+    return [].slice.call(el.parentElement.children).indexOf(el)
+  }
+
+  private getElementOldIndex(el: any) {
+    return parseInt(el.attributes.index.value, 10)
+  }
+
   // setArrTodos() {
   //
   //   let mystr = ''
@@ -458,5 +458,4 @@ export default class Todo extends Vue {
   // }
   //
 
-
 }

src/components/todos/todo/todo.vue

@@ -35,9 +35,14 @@
                 </div>
             </div>
 
-            <q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
+            <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="insertTodo(true)">
+                <template v-slot:prepend>
+                    <q-icon name="add" />
+                </template>
+            </q-input>
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div>
@@ -87,8 +92,10 @@
             </div>
 
 
-            <q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom" inverted
+            <q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom"
-                     :float-label="$t('todo.insertbottom')"
+                     style="margin-left: 6px;"
+                     color="blue-12"
+                     :label="$t('todo.insertbottom')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo(false)"/>
 

src/layouts/drawer/drawer.ts

@@ -1,12 +1,11 @@
-import menuOne from './menuOne.vue'
+import menuOne from '../menuone/menuOne.vue'
 
-import Vue from 'vue'
-import { Component, Watch, Prop } from 'vue-property-decorator'
-import { Store } from 'vuex'
 import { UserStore } from '@modules'
 import { GlobalStore } from '@modules'
-import { ITodoList } from '../../model'
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
 
+const namespace: string = 'GlobalModule'
 
 @Component({
   components: {
@@ -16,81 +15,9 @@ import { ITodoList } from '../../model'
 
 export default class Drawer extends Vue {
   public $q
-  $t: any
+  public $t: any
-  public arrlista = GlobalStore.state.listatodo
+  public photo = ''
-  photo = ''
+  public user = null
-  user = null
-  links
-
-  created() {
-    let listatodo = []
-
-    this.arrlista.forEach((elem: ITodoList) => {
-      let item = {
-        route: '/todo/' + elem.namecat,
-        faIcon: 'fa fa-list-alt',
-        materialIcon: 'todo',
-        name: 'pages.' + elem.description
-      }
-      listatodo.push(item)
-
-    })
-
-    if (UserStore.state.isAdmin) {
-      this.links = {
-        Dashboard: {
-          routes: [
-            { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
-            {
-              route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
-              routes2: listatodo
-            },
-            { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
-            // { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
-            { route: '/admin/cfgserv', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Admin' },
-            { route: '/admin/testp1/par1', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Test1' },
-            { route: '/admin/testp1/par2', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Test2' },
-            // { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
-            /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
-          ],
-          show: true
-        }
-      }
-    } else {
-      // PRODUCTION USER:
-      if (process.env.PROD) {
-        this.links = {
-          Dashboard: {
-            routes: [
-              { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
-            ],
-            show: true,
-          }
-        }
-      } else {
-        // SERVER TEST
-        this.links = {
-          Dashboard: {
-            routes: [
-              { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
-              {
-                route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
-                routes2: listatodo
-              },
-              { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' }
-              // { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
-              // { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
-              /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
-            ],
-            show: true,
-          }
-        }
-
-      }
-    }
-
-
-  }
 
 
   get MenuCollapse() {
@@ -110,7 +37,7 @@ export default class Drawer extends Vue {
     return UserStore.state.email
   }
 
-  logoutHandler() {
+  public logoutHandler() {
     UserStore.actions.logout()
       .then(() => {
         this.$router.replace('/logout')
@@ -123,4 +50,3 @@ export default class Drawer extends Vue {
       })
   }
 }
-

src/layouts/drawer/drawer.vue

@@ -18,7 +18,7 @@
         </div>
 
 
-        <menu-one :links="links"></menu-one>
+        <menu-one></menu-one>
 
         <!--<footer>
             <small>- Small</small>

src/layouts/drawer/menuOne.vue

@@ -1,133 +0,0 @@
-<template>
-    <div class="list no-border platform-delimiter light-paragraph">
-        <q-icon name="action"/>
-        <template v-for="(parent, index) in links">
-            <!--
-            <div class="list-label cursor-pointer" @click="parent.show = !parent.show">
-                {{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
-            </div>
-            -->
-            <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
-            <template v-for="child in parent.routes">
-                <div v-if="child.routes2">
-                    <q-expansion-item menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
-                        <div v-for="child2 in child.routes2">
-                            <q-item link :to="child2.route" exact
-                                    class="item item-link drawer-closer cursor-pointer">
-                                <i :class="child2.faIcon" class="item-primary"></i>
-                                <div class="item-content">{{$t(child2.name)}}</div>
-                            </q-item>
-                        </div>
-                    </q-expansion-item>
-                </div>
-                <div v-else>
-                    <q-slide-transition :duration=200>
-                        <div v-show="true">
-                            <q-item link :to="child.route" exact
-                                    class="item item-link drawer-closer cursor-pointer">
-                                <i :class="child.faIcon" class="item-primary"></i>
-                                <div class="item-content">{{$t(child.name)}}</div>
-                            </q-item>
-                        </div>
-                    </q-slide-transition>
-                </div>
-            </template>
-        </template>
-    </div>
-</template>
-
-<script lang="ts">
-  import Vue from 'vue'
-  import { Prop, Watch } from "vue-property-decorator"
-
-  export default class menuOne extends Vue {
-    @Prop({ required: true }) links
-
-    @Watch('$route.path')
-    modifroute() {
-      Object.keys(this.links).forEach(parentName => {
-        this.setParentVisibilityBasedOnRoute(this.links[parentName])
-      })
-    }
-
-    get currentRoutePath() {
-      return this.$route.path
-    }
-
-    created() {
-      console.log("MENUONE CREATED!")
-    }
-
-    setParentVisibilityBasedOnRoute(parent) {
-      parent.routes.forEach(item => {
-        if (this.$route.path === item.route) {
-          parent.show = true
-          return
-        }
-      })
-    }
-
-    replaceUnderlineToSpace(text) {
-      while (text.indexOf('_') !== -1) {
-        text = text.replace('_', ' ')
-      }
-      return text
-    }
-  }
-</script>
-<style scoped>
-
-    .q-list-header {
-        min-height: 12px;
-        padding: 5px 8px;
-    }
-
-    .menu-hr {
-        border-color: #dedede;
-        height: 0.5px;
-    }
-
-    .router-link-active {
-        color: #027be3;
-        background-color: #dadada !important;
-        border-right: 2px solid #027be3;
-    }
-
-    .list-label:first-child {
-        line-height: 20px;
-        padding: 5px;
-        margin: 1px;
-    }
-
-    /*
-    .menu-enter-active, .scale-enter {
-        -webkit-animation: moveFromTopFade .5s ease both;
-        animation: moveFromTopFade .5s ease both;
-    }
-
-    .menu-leave-to, .scale-leave-active {
-        -webkit-animation: moveToBottom .5s ease both;
-        animation: moveToBottom .5s ease both;
-    }
-    */
-
-    .router-link-active {
-        color: #027be3;
-        background-color: #dadada !important;
-        border-right: 2px solid #027be3;
-    }
-
-    .router-link-active .item-primary {
-        color: #027be3;
-    }
-
-    .menu_freccina {
-        position: absolute;
-        right: 10px;
-        display: inline-block;
-        padding: 0 0px 0px 0px;
-        -webkit-transform: rotate(-180deg);
-        transform: rotate(-180deg);
-    }
-
-</style>

src/layouts/menuone/menuOne.scss

@@ -0,0 +1,52 @@
+.q-list-header {
+  min-height: 12px;
+  padding: 5px 8px;
+}
+
+.menu-hr {
+  border-color: #dedede;
+  height: 0.5px;
+}
+
+.router-link-active {
+  color: #027be3;
+  background-color: #dadada !important;
+  border-right: 2px solid #027be3;
+}
+
+.list-label:first-child {
+  line-height: 20px;
+  padding: 5px;
+  margin: 1px;
+}
+
+/*
+.menu-enter-active, .scale-enter {
+    -webkit-animation: moveFromTopFade .5s ease both;
+    animation: moveFromTopFade .5s ease both;
+}
+
+.menu-leave-to, .scale-leave-active {
+    -webkit-animation: moveToBottom .5s ease both;
+    animation: moveToBottom .5s ease both;
+}
+*/
+
+.router-link-active {
+  color: #027be3;
+  background-color: #dadada !important;
+  border-right: 2px solid #027be3;
+}
+
+.router-link-active .item-primary {
+  color: #027be3;
+}
+
+.menu_freccina {
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+  padding: 0 0px 0px 0px;
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}

src/layouts/menuone/menuOne.ts

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import { Watch } from 'vue-property-decorator'
+import { GlobalStore } from '../../store/Modules'
+
+export default class MenuOne extends Vue {
+
+  @Watch('$route.path')
+  private modifroute() {
+    Object.keys(this.getmenu).forEach((parentName) => {
+      this.setParentVisibilityBasedOnRoute(this.getmenu[parentName])
+    })
+  }
+
+  // get currentRoutePath() {
+  //   return this.$route.path
+  // }
+
+  get getmenu() {
+    return GlobalStore.getters.getmenu
+  }
+
+  public setParentVisibilityBasedOnRoute(parent) {
+    parent.routes.forEach((item) => {
+      if (this.$route.path === item.route) {
+        parent.show = true
+        return
+      }
+    })
+  }
+
+  public replaceUnderlineToSpace(text) {
+    while (text.indexOf('_') !== -1) {
+      text = text.replace('_', ' ')
+    }
+    return text
+  }
+
+}

src/layouts/menuone/menuOne.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="list no-border platform-delimiter light-paragraph">
+        <q-icon name="action"/>
+
+        <q-list bordered class="rounded-borders text-primary">
+            <template v-for="(parent, index) in getmenu">
+                <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
+                <div v-for="item in parent.routes">
+                    <div v-if="item.routes2">
+                        <q-expansion-item
+                                :header-inset-level="1"
+                                :content-inset-level="1"
+                                :label="$t(item.name)"
+                                :icon="item.materialIcon"
+                                class="titleSubMenu"
+                        >
+
+                            <q-expansion-item v-for="(child2, index) in item.routes2" :to="child2.route" :key="index"
+                                              :header-inset-level="1.1"
+                                              :duration="300"
+                                              expand-icon="map"
+                                              :active="child2.label === 'Outbox'"
+                                              class="item item-link drawer-closer cursor-pointer"
+                                              :label="$t(child2.name)">
+                            </q-expansion-item>
+
+                        </q-expansion-item>
+                    </div>
+                    <div v-else>
+                        <q-slide-transition :duration=200>
+                            <div v-show="true">
+                                <q-item
+                                        clickable
+                                        v-ripple
+                                        exact
+                                        :to="item.route"
+                                        active-class="my-menu-link">
+                                    <q-item-section avatar>
+                                        <q-icon :name="item.materialIcon"/>
+                                    </q-item-section>
+
+                                    <q-item-section>
+                                        {{$t(item.name)}}
+                                    </q-item-section>
+                                </q-item>
+
+                            </div>
+                        </q-slide-transition>
+                    </div>
+                </div>
+            </template>
+        </q-list>
+    </div>
+</template>
+
+<script lang="ts" src="./menuOne.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './menuOne.scss';
+</style>
+

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -11,7 +11,7 @@ import './messagePopover.scss'
 export default class MessagePopover extends Vue {
   posts: IPost[] = []
 
-  created() {
+  public created() {
     if (GlobalStore.state.posts.length < 1) {
       this.requestPosts()
     }

src/model/GlobalStore.ts

@@ -54,6 +54,7 @@ export interface IGlobalState {
   testp1: ITestp1
   connData: IConnData
   posts: IPost[]
+  menulinks: {}
   listatodo: ITodoList[]
   arrConfig: IConfig[]
 }

src/statics/i18n.js

@@ -95,21 +95,19 @@ const messages = {
         descr: '<ul class="mylist" style="padding-left: 20px;">' +
           '<li><strong>Condividendo</strong> il progetto a Gruppi, Comunità, Associazioni No-profit, G.A.S.</li>' +
           '<li>Rispondendo attivamente ai <strong>Sondaggi Popolari</strong> e lasciando <strong>Feedback</strong></li>' +
-          '<li>Effettuando piccole <strong>donazioni</strong> (<strong>anche 1€</strong>).<br>' +
+          '<li>Effettuando piccole <strong>donazioni</strong> (<strong>anche 1€</strong>) per le spese di gestione dei Server.<br>' +
-          'Il ricavato, tolti i costi, verrá ripartito al 50% per il lavoro svolto, ' +
-          'l\'altro per <strong>sostenere Progetti Sociali</strong> votati dalle persone stesse</li>' +
           '</ul>',
       },
       multiplatform: {
         title: 'Multi-piattaforma',
-        descr: 'E\' Compatibile con Google Chrome, Firefox, Safari, iOS, Android. La stessa Applicazione ha le stesse funzionalitá sia sul cellulare che sul PC. ' +
+        descr: 'E\' Compatibile con Google Chrome, Firefox, Safari, iOS, Android e PC. L\'Applicazione s\'installa facilmente, senza passare dallo store. ' +
           'basta condividere il nome del sito <strong>www.freeplanet.app</strong>',
       },
       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>' +
-          'Questa App <strong>non è in vendita</strong>, non ha scopi commerciali, <strong>non ha prezzo</strong> ed appartiene solo al <strong>Popolo</strong>. 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. ' +
-          'Sono certo che arriveranno solo i <strong>contributi necessari</strong> per sostenerla. Grazie a Tutti per il sostegno. '
+          'Verranno accettate solo donazioni Libere di privati ed Associazioni no-profit, in linea con i Principi, che serviranno per coprire le spese. <strong>Grazie a Tutti per il sostegno</strong>. '
       },
     },
     pages: {
@@ -205,7 +203,7 @@ const messages = {
     },
     todo: {
       titleprioritymenu: 'Priorità:',
-      inserttop: 'Inserisci il Task in alto',
+      inserttop: 'Inserisci il Task in cima',
       insertbottom: 'Inserisci il Task in basso',
       edit: 'Descrizione Task:',
       completed: 'Ultimi Completati',

src/store/Modules/GlobalStore.ts

@@ -1,4 +1,4 @@
-import { ICfgServer, IConfig, IGlobalState, StateConnection } from 'model'
+import { ICfgServer, IConfig, IGlobalState, ITodoList, StateConnection } from 'model'
 import { storeBuilder } from './Store/Store'
 
 import Vue from 'vue'
@@ -7,22 +7,21 @@ import translate from './../../globalroutines/util'
 
 import urlBase64ToUint8Array from '../../js/utility'
 
-import messages from '../../statics/i18n'
-import { GlobalStore, Todos, UserStore } from '@store'
-import globalroutines from './../../globalroutines/index'
 import Api from '@api'
-import { tools } from '@src/store/Modules/tools'
-import { costanti } from '@src/store/Modules/costanti'
 import * as Types from '@src/store/Api/ApiTypes'
+import { costanti } from '@src/store/Modules/costanti'
+import { tools } from '@src/store/Modules/tools'
+import { GlobalStore, Todos, UserStore } from '@store'
+import messages from '../../statics/i18n'
+import globalroutines from './../../globalroutines/index'
 
 const allTables = ['todos', 'categories', 'sync_todos', 'sync_todos_patch', 'delete_todos', 'config', 'swmsg']
 const allTablesAfterLogin = ['todos', 'categories', 'sync_todos', 'sync_todos_patch', 'delete_todos', 'config', 'swmsg']
 
-
 let stateConnDefault = 'online'
 
 getstateConnSaved()
-  .then(conn => {
+  .then((conn) => {
     stateConnDefault = conn
   })
 
@@ -41,6 +40,7 @@ const state: IGlobalState = {
   testp1: { contatore: 0, mioarray: [] },
   category: 'personal',
   posts: [],
+  menulinks: {},
   listatodo: [
     { namecat: 'personal', description: 'personal' },
     { namecat: 'work', description: 'work' },
@@ -74,22 +74,21 @@ async function getstateConnSaved() {
   }
 }
 
-
 const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
 
 // Getters
 namespace Getters {
 
-  const conta = b.read(state => state.conta, 'conta')
+  const conta = b.read((state) => state.conta, 'conta')
-  const listatodo = b.read(state => state.listatodo, 'listatodo')
+  const listatodo = b.read((state) => state.listatodo, 'listatodo')
-  const category = b.read(state => state.category, 'category')
+  const category = b.read((state) => state.category, 'category')
 
-  const testpao1_getter_contatore = b.read(state => param1 => state.testp1.contatore + 100 + param1, 'testpao1_getter_contatore')
+  const testpao1_getter_contatore = b.read((state) => (param1) => state.testp1.contatore + 100 + param1, 'testpao1_getter_contatore')
-  const testpao1_getter_array = b.read(state => param1 => state.testp1.mioarray.filter(item => item).map(item => item.valore), 'testpao1_getter_array')
+  const testpao1_getter_array = b.read((state) => (param1) => state.testp1.mioarray.filter((item) => item).map((item) => item.valore), 'testpao1_getter_array')
 
-  const getConfigbyId = b.read(state => id => state.arrConfig.find(item => item._id === id), 'getConfigbyId')
+  const getConfigbyId = b.read((state) => (id) => state.arrConfig.find((item) => item._id === id), 'getConfigbyId')
-  const getConfigStringbyId = b.read(state => params => {
+  const getConfigStringbyId = b.read((state) => (params) => {
-    const config = state.arrConfig.find(item => item._id === params.id)
+    const config = state.arrConfig.find((item) => item._id === params.id)
     if (config) {
       return config.value
     } else {
@@ -97,16 +96,87 @@ namespace Getters {
     }
   }, 'getConfigStringbyId')
 
-  const showtype = b.read(state => {
+  const showtype = b.read((state) => {
     // const config = state.arrConfig.find(item => item._id === cat + costanti.CONFIG_ID_SHOW_TYPE_TODOS)
-    const config = state.arrConfig.find(item => item._id === costanti.CONFIG_ID_SHOW_TYPE_TODOS)
+    const config = state.arrConfig.find((item) => item._id === costanti.CONFIG_ID_SHOW_TYPE_TODOS)
-    if (config)
+    if (config) {
       return config.value
-    else
+    }
+    else {
       return ''
+    }
 
   }, 'showtype')
 
+  const getmenu = b.read((state) => {
+
+    const arrlista = GlobalStore.state.listatodo
+    let listatodo = []
+
+    arrlista.forEach((elem: ITodoList) => {
+      const item = {
+        faIcon: 'fa fa-list-alt',
+        materialIcon: 'todo',
+        name: 'pages.' + elem.description,
+        route: '/todo/' + elem.namecat
+      }
+      listatodo.push(item)
+
+    })
+
+
+    if (UserStore.state.isAdmin) {
+      state.menulinks = {
+        Dashboard: {
+          routes: [
+            { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
+            { route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'format_list_numbered', name: 'pages.Todo',
+              routes2: listatodo
+            },
+            { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
+            { route: '/admin/cfgserv', faIcon: 'fa fa-database', materialIcon: 'event_seat', name: 'pages.Admin' },
+            { route: '/admin/testp1/par1', faIcon: 'fa fa-database', materialIcon: 'restore', name: 'pages.Test1' },
+            { route: '/admin/testp1/par2', faIcon: 'fa fa-database', materialIcon: 'restore', name: 'pages.Test2' }
+            /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
+          ],
+          show: true
+        }
+      }
+    } else {
+      // PRODUCTION USER:
+      if (process.env.PROD) {
+        state.menulinks = {
+          Dashboard: {
+            routes: [
+              { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' }
+            ],
+            show: true
+          }
+        }
+      } else {
+        // SERVER TEST
+        state.menulinks = {
+          Dashboard: {
+            routes: [
+              { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
+              {
+                route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
+                routes2: listatodo
+              },
+              { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' }
+              // { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
+              // { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
+              /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
+            ],
+            show: true
+          }
+        }
+      }
+    }
+
+    return state.menulinks
+
+  }, 'getmenu')
 
   export const getters = {
     get testpao1_getter_contatore() {
@@ -139,6 +209,10 @@ namespace Getters {
       return showtype()
     },
 
+    get getmenu() {
+      return getmenu()
+    },
+
     get isOnline() {
       console.log('*********************** isOnline')
       return state.stateConnection === 'online'
@@ -146,15 +220,16 @@ namespace Getters {
 
     get isNewVersionAvailable() {
       console.log('state.cfgServer', state.cfgServer)
-      const serversrec = state.cfgServer.find(x => x.chiave === tools.SERVKEY_VERS)
+      const serversrec = state.cfgServer.find((x) => x.chiave === tools.SERVKEY_VERS)
       console.log('Record ', serversrec)
       if (serversrec) {
         console.log('Vers Server ', serversrec.valore, 'Vers locale:', process.env.APP_VERSION)
         return serversrec.valore !== process.env.APP_VERSION
-      } else
+      } else {
         return false
       }
     }
+  }
 }
 
 namespace Mutations {
@@ -259,11 +334,11 @@ namespace Actions {
     const mykey = process.env.PUBLICKEY_PUSH
     const mystate = state
     return navigator.serviceWorker.ready
-      .then(function (swreg) {
+      .then(function(swreg) {
         reg = swreg
         return swreg.pushManager.getSubscription()
       })
-      .then(function (subscription) {
+      .then(function(subscription) {
         mystate.wasAlreadySubscribed = !(subscription === null)
 
         if (mystate.wasAlreadySubscribed) {
@@ -273,17 +348,17 @@ namespace Actions {
         } else {
           // Create a new subscription
           console.log('Create a new subscription')
-          let convertedVapidPublicKey = urlBase64ToUint8Array(mykey)
+          const convertedVapidPublicKey = urlBase64ToUint8Array(mykey)
           return reg.pushManager.subscribe({
             userVisibleOnly: true,
             applicationServerKey: convertedVapidPublicKey
           })
         }
       })
-      .then(function (newSub) {
+      .then(function(newSub) {
         saveNewSubscriptionToServer(context, newSub)
       })
-      .catch(function (err) {
+      .catch(function(err) {
         console.log('ERR createPushSubscription:', err)
       })
   }
@@ -291,8 +366,9 @@ namespace Actions {
   // Calling the Server to Save in the MongoDB the Subscriber
   function saveNewSubscriptionToServer(context, newSub) {
     // If already subscribed, exit
-    if (!newSub)
+    if (!newSub) {
       return
+    }
 
     // console.log('saveSubscriptionToServer: ', newSub)
     // console.log('context', context)
@@ -308,7 +384,7 @@ namespace Actions {
       }
     }
 
-    let myres = {
+    const myres = {
       options,
       subs: newSub,
       others: {
@@ -318,13 +394,13 @@ namespace Actions {
     }
 
     return Api.SendReq('/subscribe', 'POST', myres)
-      .then(res => {
+      .then((res) => {
         state.wasAlreadySubscribed = true
         state.wasAlreadySubOnDb = true
 
         localStorage.setItem(tools.localStorage.wasAlreadySubOnDb, String(state.wasAlreadySubOnDb))
       })
-      .catch(e => {
+      .catch((e) => {
         console.log('Error during Subscription!', e)
       })
   }
@@ -344,13 +420,13 @@ namespace Actions {
   }
 
   function t(params) {
-    let msg = params.split('.')
+    const msg = params.split('.')
-    let lang = UserStore.state.lang
+    const lang = UserStore.state.lang
 
-    let stringa = messages[lang]
+    const stringa = messages[lang]
 
     let ris = stringa
-    msg.forEach(param => {
+    msg.forEach((param) => {
       ris = ris[param]
     })
 
@@ -378,14 +454,14 @@ namespace Actions {
     if ('serviceWorker' in navigator) {
       // REMOVE ALL SUBSCRIPTION
       console.log('REMOVE ALL SUBSCRIPTION...')
-      await navigator.serviceWorker.ready.then(function (reg) {
+      await navigator.serviceWorker.ready.then(function(reg) {
         console.log('... Ready')
-        reg.pushManager.getSubscription().then(function (subscription) {
+        reg.pushManager.getSubscription().then(function(subscription) {
           console.log('    Found Subscription...')
-          subscription.unsubscribe().then(function (successful) {
+          subscription.unsubscribe().then(function(successful) {
             // You've successfully unsubscribed
             console.log('You\'ve successfully unsubscribed')
-          }).catch(function (e) {
+          }).catch(function(e) {
             // Unsubscription failed
           })
         })
@@ -408,7 +484,6 @@ namespace Actions {
 
   }
 
-
   async function loadAfterLogin(context) {
     console.log('loadAfterLogin')
     actions.clearDataAfterLoginOnlyIfActiveConnection()
@@ -419,8 +494,8 @@ namespace Actions {
   async function saveCfgServerKey(context, dataval: ICfgServer) {
     console.log('saveCfgServerKey dataval', dataval)
 
-    let ris = await Api.SendReq('/admin/updateval', 'POST', { pairval: dataval })
+    const ris = await Api.SendReq('/admin/updateval', 'POST', { pairval: dataval })
-      .then(res => {
+      .then((res) => {
 
       })
 
@@ -434,8 +509,8 @@ namespace Actions {
 
     state.networkDataReceived = false
 
-    let ris = await Api.SendReq('/checkupdates', 'GET', null)
+    const ris = await Api.SendReq('/checkupdates', 'GET', null)
-      .then(res => {
+      .then((res) => {
         state.networkDataReceived = true
 
         console.log('******* checkUpdates RES :', res.data.cfgServer)
@@ -449,7 +524,7 @@ namespace Actions {
 
         return res
       })
-      .catch(error => {
+      .catch((error) => {
         console.log('error checkUpdates', error)
         UserStore.mutations.setErrorCatch(error)
         return error
@@ -477,10 +552,9 @@ const GlobalModule = {
   get state() {
     return stateGetter()
   },
+  actions: Actions.actions,
   getters: Getters.getters,
-  mutations: Mutations.mutations,
+  mutations: Mutations.mutations
-  actions: Actions.actions
 }
 
-
 export default GlobalModule

src/store/Modules/tools.ts

@@ -1,8 +1,8 @@
-import { ITodo } from '@src/model'
-import { costanti } from './costanti'
-import globalroutines from './../../globalroutines/index'
-import { Todos, UserStore } from '@store'
 import Api from '@api'
+import { ITodo } from '@src/model'
+import { Todos, UserStore } from '@store'
+import globalroutines from './../../globalroutines/index'
+import { costanti } from './costanti'
 
 export const tools = {
   EMPTY: 0,
@@ -53,12 +53,11 @@ export const tools = {
     COMPLETED: 110,
     PROGRESS_BAR: 120,
     PRIORITY: 130,
-    SHOW_TASK: 150,
+    SHOW_TASK: 150
   },
 
-
   selectPriority: {
-    'it': [
+    it: [
       {
         id: 1,
         label: 'Alta',
@@ -77,7 +76,7 @@ export const tools = {
         value: 0,
         icon: 'expand_more'
       }],
-    'es': [
+    es: [
       {
         id: 1,
         label: 'Alta',
@@ -96,7 +95,7 @@ export const tools = {
         value: 0,
         icon: 'expand_more'
       }],
-    'enUs': [
+    enUs: [
       {
         id: 1,
         label: 'High',
@@ -115,7 +114,7 @@ export const tools = {
         value: 0,
         icon: 'expand_more'
       }],
-    'de': [
+    de: [
       {
         id: 1,
         label: 'High',
@@ -135,13 +134,12 @@ export const tools = {
         icon: 'expand_more'
       }]
 
-
   },
 
   INDEX_MENU_DELETE: 4,
 
   menuPopupTodo: {
-    'it': [
+    it: [
       {
         id: 10,
         label: '',
@@ -178,7 +176,7 @@ export const tools = {
         checked: false
       }
     ],
-    'es': [
+    es: [
       {
         id: 10,
         label: '',
@@ -215,7 +213,7 @@ export const tools = {
         checked: false
       }
     ],
-    'enUs': [
+    enUs: [
       {
         id: 10,
         label: '',
@@ -255,34 +253,34 @@ export const tools = {
   },
 
   menuPopupConfigTodo: {
-    'it': [
+    it: [
       {
         id: 10,
         label: 'Mostra Task',
         value: 150,  // SHOW_TASK
-        icon: 'rowing',
+        icon: 'rowing'
-      },
+      }
     ],
-    'es': [
+    es: [
       {
         id: 10,
         label: 'Mostrar Tareas',
         value: 150,
-        icon: 'rowing',
+        icon: 'rowing'
-      },
+      }
     ],
-    'enUs': [
+    enUs: [
       {
         id: 10,
         label: 'Show Task',
         value: 150,
-        icon: 'rowing',
+        icon: 'rowing'
-      },
+      }
     ]
   },
 
   listOptionShowTask: {
-    'it': [
+    it: [
       {
         id: 10,
         label: 'Mostra gli ultimi N completati',
@@ -305,7 +303,7 @@ export const tools = {
         checked: true
       }
     ],
-    'es': [
+    es: [
       {
         id: 10,
         label: 'Mostrar los ultimos N completados',
@@ -328,7 +326,7 @@ export const tools = {
         checked: true
       }
     ],
-    'enUs': [
+    enUs: [
       {
         id: 10,
         label: 'Show last N Completed',
@@ -359,15 +357,17 @@ export const tools = {
 
   getItemLS(item) {
     let ris = localStorage.getItem(item)
-    if ((ris == null) || (ris === '') || (ris === 'null'))
+    if ((ris == null) || (ris === '') || (ris === 'null')) {
       ris = ''
+    }
 
     return ris
   },
 
   notifyarraychanged(array) {
-    if (array.length > 0)
+    if (array.length > 0) {
       array.splice(array.length - 1, 1, array[array.length - 1])
+    }
   },
 
   existArr(x) {
@@ -375,9 +375,9 @@ export const tools = {
   },
 
   json2array(json) {
-    let result = []
+    const result = []
-    let keys = Object.keys(json)
+    const keys = Object.keys(json)
-    keys.forEach(function (key) {
+    keys.forEach(function(key) {
       result.push(json[key])
     })
     return result
@@ -395,21 +395,21 @@ export const tools = {
 
     if ('serviceWorker' in navigator) {
       return await navigator.serviceWorker.ready
-        .then(function (sw) {
+        .then(function(sw) {
           // console.log('----------------------      navigator.serviceWorker.ready')
 
           return globalroutines(null, 'write', table, item, id)
-            .then(function (id) {
+            .then(function(id) {
               // console.log('id', id)
               const sep = '|'
 
-              let multiparams = cmdSw + sep + table + sep + method + sep + UserStore.state.x_auth_token + sep + UserStore.state.lang
+              const multiparams = cmdSw + sep + table + sep + method + sep + UserStore.state.x_auth_token + sep + UserStore.state.lang
-              let mymsgkey = {
+              const mymsgkey = {
                 _id: multiparams,
                 value: multiparams
               }
               return globalroutines(null, 'write', 'swmsg', mymsgkey, multiparams)
-                .then(ris => {
+                .then((ris) => {
                   // if ('SyncManager' in window) {
                   //   console.log('   SENDING... sw.sync.register', multiparams)
                   //   return sw.sync.register(multiparams)
@@ -418,14 +418,14 @@ export const tools = {
                   return Api.syncAlternative(multiparams)
                   // }
                 })
-                .then(function () {
+                .then(function() {
                   let data = null
                   if (msg !== '') {
                     data = { message: msg, position: 'bottom', timeout: 3000 }
                   }
                   return data
                 })
-                .catch(function (err) {
+                .catch(function(err) {
                   console.error('Errore in globalroutines', table, err)
                 })
             })
@@ -434,6 +434,4 @@ export const tools = {
 
   }
 
-
-
 }