- Update the way to use the data records on Vuex with Getters!

- Fix: mongodb call passing array todos and categiroes already splitted

src/components/Header.vue

@@ -121,7 +121,7 @@
   import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
 
   import { GlobalStore, UserStore } from '@modules'
-  import { rescodes } from '../store/Modules/rescodes'
+  import { tools } from '../store/Modules/tools'
   import QIcon from "quasar-framework/src/components/icon/QIcon"
   import { StateConnection } from "../model"
   import { Watch } from "vue-property-decorator"
@@ -213,7 +213,6 @@
           })
         }
 
-        // console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
         this.changeIconConn()
       }
     }
@@ -238,10 +237,10 @@
     }
 
     public selectOpLang = [
-      { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
-      { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
-      { label: 'Italian', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' },
-      { label: 'Spanish', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' }
+      { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../assets/images/gb.png', short: 'EN' },
+      // { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../assets/images/de.png', short: 'DE' },
+      { label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../assets/images/it.png', short: 'IT' },
+      { label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../assets/images/es.png', short: 'ES' }
     ]
 
 
@@ -279,7 +278,7 @@
 
     set leftDrawerOpen(value) {
       GlobalStore.state.leftDrawerOpen = value
-      localStorage.setItem(rescodes.localStorage.leftDrawerOpen, value.toString())
+      localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
     }
 
     getAppVersion() {
@@ -330,7 +329,7 @@
       // dynamic import, so loading on demand only
       import(`quasar-framework/i18n/${mylangtopass}`).then(lang => {
         this.$q.i18n.set(lang.default)
-        import(`src/statics/i18n`).then(function () {
+        import(`src/assets/i18n`).then(function () {
         })
       })
     }
@@ -350,7 +349,7 @@
       let my = this.getLangAtt()
       // this.$q.notify('prima: ' + String(my))
 
-      let mylang = rescodes.getItemLS(rescodes.localStorage.lang)
+      let mylang = tools.getItemLS(tools.localStorage.lang)
       if (mylang === '') {
         if (navigator) {
           mylang = navigator.language

src/components/admin/testp1/index.ts

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

src/components/admin/testp1/testp1.ts

@@ -0,0 +1,95 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { GlobalStore, UserStore } from '@store'
+import { Getter } from "vuex-class"
+import { ICfgServer, IGlobalState, ITodo, ITodosState } from '@src/model'
+
+const namespace: string = 'GlobalModule'
+
+@Component({})
+export default class Testp1 extends Vue {
+  public myvar:number = 5
+  public paramcategory: string = ''
+  public mioobj: any
+
+  // @Getter('todos_dacompletare', { namespace })
+  // public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
+
+  @Getter('testpao1_getter_contatore', { namespace })
+  public testpao1: (state: IGlobalState, param1: number) => number
+
+  @Getter('testpao1_getter_array', { namespace })
+  public testpao1_array: (state: IGlobalState, miorec: ICfgServer) => ICfgServer[]
+
+  @Watch('GlobalStore.state.testp1.mioarray', { immediate: true, deep: true })
+  array_changed() {
+    console.log('*** array_changed *** ', GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1])
+  }
+
+  @Watch('$route.params.category') changecat() {
+    // this.mytypetransgroup = ''
+    console.log('PRIMA this.paramcategory', this.paramcategory)
+    this.paramcategory = this.$route.params.category
+    console.log('DOPO this.paramcategory', this.paramcategory)
+  }
+
+  created() {
+    this.mioobj = {
+      arr1: [{chiave: 'key1', valore: 'val1'}],
+      arr2: [{chiave: 'key2', valore: 'val2'}]
+    }
+  }
+
+  get getarr1 () {
+    // return this.mioobj.arr1
+    return this.mioobj['arr1']
+  }
+
+  get prova2() {
+    return GlobalStore.state.testp1.contatore
+  }
+
+  get provagetter() {
+    return GlobalStore.getters.testpao1_getter_contatore(130)
+  }
+
+  get provagetterarray() {
+    return GlobalStore.getters.testpao1_getter_array(GlobalStore.state.testp1.contatore)
+  }
+
+
+  TestBtnCambioaParamPassing () {
+    this.paramcategory += 's'
+  }
+
+  TestBtn() {
+    GlobalStore.state.testp1.contatore++
+  }
+
+  TestBtn2() {
+    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', valore: GlobalStore.state.testp1.contatore.toString() })
+  }
+
+  TestBtnModify() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.setPaoArray({chiave: 'pippo', valore: '20' } )
+
+  }
+
+  TestBtnCambiaTutto() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', valore: '1' }, {chiave: 'nuovorec2', valore: '2' }] )
+
+  }
+
+  TestBtnAction() {
+    GlobalStore.actions.prova()
+  }
+
+  TestBtnDelete() {
+    // GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
+    GlobalStore.mutations.setPaoArray_Delete()
+  }
+
+}

src/components/admin/testp1/testp1.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        CATEGORY:  <strong>{{ paramcategory }}</strong> <br>
+
+        <label>TEST Prova Paolo</label><br>
+
+
+        GETTER CONTATORE:
+        {{ testpao1(300) }} <br>
+        ARRAY:
+        {{ testpao1_array(300) }} <br>
+
+        TEST OBJECT {{ mioobj }} <br>
+        ARR1 {{ getarr1 }} <br>
+        <!--ARR2 {{ mioobj.arr2 }} <br>-->
+
+        <!--<q-input v-model="testpao1(myvar)"></q-input>-->
+
+        <q-input v-model="prova2" float-label="PROVA2:"></q-input>
+
+        <q-input v-model="provagetter" float-label="PROVA GETTER:"></q-input>
+        <q-input v-model="provagetterarray" float-label="GETTER ARRAY:"></q-input>
+
+        <br>
+
+        <q-btn color="secondary" rounded icon="refresh"
+               @click="TestBtn" label="Test 1"/>
+
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtn2" label="ADD TO ARRAY"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnModify" label="MODIFY"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnAction" label="MODIF_BYACTION"/>
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnDelete" label="DEL LAST"/>
+        <!--<q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambiaTutto" label="NEW ARR"/>-->
+        <q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambioaParamPassing" label="CAMBIA PARAM"/>
+
+    </div>
+</template>
+<script lang="ts" src="./testp1.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './testp1.scss';
+</style>

src/components/logo/logo.scss

@@ -1,9 +1,11 @@
-.svgclass{
+
+.svgclass {
   color: white;
   transform: translateY(0px);
 
 }
 
+
 .svgclass_animate {
   transform: translateY(-70px);
   color: red;
@@ -14,16 +16,24 @@
 
 }
 
-@keyframes gravity{
-  0%{
+#logoimg {
+  height: 150px;
+  width: auto;
+  @media screen and (max-width: 600px) {
+  }
+}
+
+@keyframes gravity {
+  0% {
     transform: rotateY(0deg);
   }
-  100%{
+  100% {
     transform: rotateY(360deg);
   }
 }
 
-#smile{
+#smile {
   opacity: 0.1 !important;
   fill: red;
 }
+

src/components/logo/logo.ts

@@ -13,7 +13,7 @@ export default class Logo extends Vue {
   logoimg: string = ''
 
   created() {
-    this.logoimg = 'statics/images/' + process.env.LOGO_REG
+    this.logoimg = 'assets/images/' + process.env.LOGO_REG
     this.animate()
   }
 

src/components/offline/offline.ts

@@ -13,7 +13,7 @@ export default class Offline extends Vue {
   logoimg: string = ''
 
   created() {
-    this.logoimg = 'statics/images/' + process.env.LOGO_REG
+    this.logoimg = '/assets/images/' + process.env.LOGO_REG
     this.animate()
   }
 

src/components/todos/SingleTodo/SingleTodo.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { Component, Prop, Watch } from 'vue-property-decorator'
 
-import { rescodes } from '../../../store/Modules/rescodes'
+import { tools } from '../../../store/Modules/tools'
 import { UserStore } from '@modules'
 
 import { ITodo } from '../../../model/index'
@@ -48,21 +48,21 @@ export default class SingleTodo extends Vue {
   @Prop({ required: true }) itemtodo: ITodo
 
 
-  @Watch('itemtodo.completed') valueChanged() {
-    this.watchupdate()
-  }
+  // @Watch('itemtodo.completed') valueChanged() {
+  //   this.watchupdate('completed')
+  // }
 
   @Watch('itemtodo.enableExpiring') valueChanged4() {
-    this.watchupdate()
+    this.watchupdate('enableExpiring')
   }
 
   @Watch('itemtodo.expiring_at') valueChanged2() {
-    this.watchupdate()
+    this.watchupdate('expiring_at')
   }
 
-  @Watch('itemtodo.priority') valueChanged3() {
-    this.watchupdate()
-  }
+  // @Watch('itemtodo.priority') valueChanged3() {
+  //   this.watchupdate('priority')
+  // }
 
 
   @Watch('itemtodo.descr') valueChanged5() {
@@ -91,8 +91,8 @@ export default class SingleTodo extends Vue {
     return elem.descr.slice(-1) !== ':'
   }
 
-  watchupdate() {
-    this.$emit('eventupdate', this.itemtodo)
+  watchupdate(field = '') {
+    this.$emit('eventupdate', {myitem: this.itemtodo, field } )
     this.updateicon()
   }
 
@@ -158,10 +158,10 @@ export default class SingleTodo extends Vue {
 
     // console.log('UserStore.state.lang', UserStore.state.lang)
     if (this.isTodo())
-      this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
+      this.menuPopupTodo = tools.menuPopupTodo[UserStore.state.lang]
     else {
       this.menuPopupTodo = []
-      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][rescodes.INDEX_MENU_DELETE])
+      this.menuPopupTodo.push(tools.menuPopupTodo[UserStore.state.lang][tools.INDEX_MENU_DELETE])
     }
 
   }
@@ -172,7 +172,7 @@ export default class SingleTodo extends Vue {
 
     this.updateClasses()
 
-    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+    this.selectPriority = tools.selectPriority[UserStore.state.lang]
 
 
   }
@@ -283,7 +283,7 @@ export default class SingleTodo extends Vue {
     if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
       e.preventDefault()
       this.deselectRiga()
-      this.clickMenu(rescodes.MenuAction.DELETE)
+      this.clickMenu(tools.MenuAction.DELETE)
         .then(() => {
           this.faiFocus('insertTask', true)
           return
@@ -311,7 +311,7 @@ export default class SingleTodo extends Vue {
     if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
       e.preventDefault()
       this.deselectRiga()
-      this.clickMenu(rescodes.MenuAction.DELETE)
+      this.clickMenu(tools.MenuAction.DELETE)
         .then(() => {
           this.faiFocus('insertTask', true)
           return
@@ -349,7 +349,7 @@ export default class SingleTodo extends Vue {
     console.log('itemtodo', this.itemtodo)
     console.log('Prec:', this.itemtodoPrec)
 
-    this.watchupdate()
+    this.watchupdate('descr')
     this.inEdit = false
     // this.precDescr = this.itemtodo.descr
     this.updateClasses()
@@ -361,15 +361,15 @@ export default class SingleTodo extends Vue {
 
     this.updateicon()
 
-    this.updatedata()
+    this.updatedata('completed')
 
     this.deselectAndExitEdit()
   }
 
-  updatedata() {
-    const myitem = rescodes.jsonCopy(this.itemtodo)
-    console.log('calling this.$emit(eventupdate)', myitem)
-    this.$emit('eventupdate', myitem)
+  updatedata(field: string) {
+    // const myitem = tools.jsonCopy(this.itemtodo)
+    console.log('calling this.$emit(eventupdate)', this.itemtodo)
+    this.$emit('eventupdate', { myitem: this.itemtodo, field } )
   }
 
   updateicon() {
@@ -380,11 +380,11 @@ export default class SingleTodo extends Vue {
       this.iconCompleted = 'check_circle_outline'
 
 
-    if (this.itemtodo.priority === rescodes.Todos.PRIORITY_HIGH)
+    if (this.itemtodo.priority === tools.Todos.PRIORITY_HIGH)
       this.iconPriority = 'expand_less'  // expand_less
-    else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_NORMAL)
+    else if (this.itemtodo.priority === tools.Todos.PRIORITY_NORMAL)
       this.iconPriority = 'remove'
-    else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_LOW)
+    else if (this.itemtodo.priority === tools.Todos.PRIORITY_LOW)
       this.iconPriority = 'expand_more'  // expand_more
 
     this.updateClasses()
@@ -392,7 +392,7 @@ export default class SingleTodo extends Vue {
 
 
   removeitem(id) {
-    this.$emit('deleteitem', id)
+    this.$emit('deleteItem', id)
   }
 
   enableExpiring() {
@@ -402,14 +402,14 @@ export default class SingleTodo extends Vue {
 
   async clickMenu(action) {
     console.log('click menu: ', action)
-    if (action === rescodes.MenuAction.DELETE) {
+    if (action === tools.MenuAction.DELETE) {
       return await this.askConfirmDelete()
-    } else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) {
+    } else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
       return await this.enableExpiring()
-    } else if (action === rescodes.MenuAction.COMPLETED) {
+    } else if (action === tools.MenuAction.COMPLETED) {
       return await this.setCompleted()
-    } else if (action === rescodes.MenuAction.PROGRESS_BAR) {
-      return await this.updatedata()
+    } else if (action === tools.MenuAction.PROGRESS_BAR) {
+      return await this.updatedata('progress')
     } else if (action === 0) {
       this.deselectAndExitEdit()
     }
@@ -418,11 +418,13 @@ export default class SingleTodo extends Vue {
 
   setPriority(newpriority) {
 
-    this.itemtodo.priority = newpriority
+    if (this.itemtodo.priority !== newpriority) {
+      this.itemtodo.priority = newpriority
 
-    this.updatedata()
+      this.updatedata('priority')
 
-    this.updateicon()
+      this.updateicon()
+    }
 
     // this.$q.notify('setPriority: ' + elem)
   }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -83,9 +83,6 @@
         <!--<div class="flex-item btn-item">-->
         <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo._id)"></q-btn>-->
         <!--</div>-->
-        <!--<div class="flex-item">-->
-        <!--[{{ itemtodo.id_prev}} - {{ itemtodo.id_next}}]-->
-        <!--</div>-->
     </div>
 
 </template>

src/components/todos/SubMenus/SubMenus.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
 import { ITodo } from '../../../model/index'
-import { rescodes } from '@src/store/Modules/rescodes'
+import { tools } from '@src/store/Modules/tools'
 import { UserStore } from '@store'
 
 // Doesn't exist in quasar this ? error TS2305
@@ -16,7 +16,7 @@ import { UserStore } from '@store'
 })
 
 export default class SubMenus extends Vue {
-  public selectPriority: [] = rescodes.selectPriority[UserStore.state.lang]
+  public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
 
   @Prop({ required: false }) menuPopupTodo: any[]
   @Prop({ required: false }) itemtodo: ITodo
@@ -47,7 +47,7 @@ export default class SubMenus extends Vue {
   }
 
   create () {
-    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+    this.selectPriority = tools.selectPriority[UserStore.state.lang]
 
     console.log('CREAZIONE')
   }

src/components/todos/todo/todo.vue

@@ -4,7 +4,7 @@
             <p class="caption"></p>
 
             <div class="divtitlecat">
-                <div class="categorytitle">{{ getCategory() }}</div>
+                <div class="categorytitle">{{ categoryAtt }}</div>
             </div>
 
             <q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
@@ -19,21 +19,17 @@
                 <!--<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id"  class="myitemdrag"-->
                 <!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
                 <!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
-                <q-infinite-scroll :handler="loadMoreTodo" :offset="7">
-                    <div class="container" v-dragula="todos_arr" drake="first" :key="compKey3">
-                        <div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in showingDataTodo"
+
+                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                    <div class="container" v-dragula="todos_dacompletare(categoryAtt)" drake="first">
+                        <div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_dacompletare(categoryAtt)"
                              :key="mytodo._id" class="myitemdrag">
 
-
                             <div v-if="(prior !== mytodo.priority) && !mytodo.completed"
-                                 :class="getTitlePriority(mytodo.priority)" :key="compKey1">
+                                 :class="getTitlePriority(mytodo.priority)">
                                 <label>{{getPriorityByInd(mytodo.priority)}}</label>
                             </div>
-                            <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted" :key="compKey2">
-                                <label>{{$t('todo.completed')}}</label>
-                                <div style="display: none">{{ priorcomplet = true }}</div>
-                            </div>
-                            <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
+                            <SingleTodo ref="single" @deleteItem="mydeleteItem" @eventupdate="updateitem"
                                         @deselectAllRows="deselectAllRows" @onEnd="onEnd"
                                         :itemtodo='mytodo'/>
 
@@ -43,19 +39,40 @@
                             </div>
                         </div>
                     </div>
-                </q-infinite-scroll>
+                <!--</q-infinite-scroll>-->
+
+                <div v-if="doneTodosCount > 0" class="titleCompleted">
+                    <label>{{$t('todo.completed')}}</label>
+                </div>
+
+                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                    <div class="container" v-dragula="todos_completati(categoryAtt)" drake="second">
+                        <div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_completati(categoryAtt)"
+                             :key="mytodo._id" class="myitemdrag">
+
+                            <SingleTodo ref="single" @deleteItem="deleteItem(mytodo._id)" @eventupdate="updateitem"
+                                        @deselectAllRows="deselectAllRows" @onEnd="onEnd"
+                                        :itemtodo='mytodo'/>
+
+                            <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
+
+                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
+                            </div>
+                        </div>
+                    </div>
+                <!--</q-infinite-scroll>-->
                 <!--</transition-group>-->
                 <!--</draggable>-->
             </div>
 
 
-            <q-input v-if="todos_arr.length > 0" ref="insertTaskBottom" v-model="todobottom" inverted :float-label="$t('todo.insertbottom')"
+            <q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom" inverted :float-label="$t('todo.insertbottom')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo(false)"/>
 
-            <!--{{ tmpstrTodos }}-->
-            <!--<br>-->
+            <br>
 
+<!--&lt;!&ndash;-->
             <!--&lt;!&ndash;<div class="flex-item btn-item">&ndash;&gt;-->
             <!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
             <!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
@@ -72,7 +89,10 @@
             <!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
             <!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
             <!--</div>-->
+<!--&ndash;&gt;-->
 
+
+            <!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
         </div>
     </q-page>