Popupmenu Todo:

- Show Task Completed

docs/docs.txt

@@ -4,3 +4,31 @@ md	992px	Medium-sized window
 lg	1200px	Large sized window
 xl	Infinite	Extra large sized window
 
+
+--------------------------------------------------------
+https://alligator.io/vuejs/progressive-image-rendering/
+--- lOADING LAZY IMAGES:
+--------------------------------------------------------
+
+<template>
+  <v-lazy-image src="http://lorempixel.com/400/200/" />
+</template>
+
+<script>
+import VLazyImage from "v-lazy-image";
+
+export default {
+  components: {
+    VLazyImage
+  }
+};
+
+.v-lazy-image {
+  filter: blur(10px);
+  transition: filter 0.7s;
+}
+
+.v-lazy-image-loaded {
+  filter: blur(0);
+}
+--------------------------------------------------------

package.json

@@ -29,7 +29,7 @@
     "acorn": "^6.0.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
-    "bcrypt": "^3.0.2",
+    "bcrypt-nodejs": "0.0.3",
     "bcryptjs": "^2.4.3",
     "dotenv": "^6.1.0",
     "element-ui": "^2.3.6",
@@ -109,7 +109,7 @@
     "vue-cli-plugin-element-ui": "^1.1.2",
     "vue-template-compiler": "^2.5.17",
     "vueify": "^9.4.1",
-    "webpack": "^4.0.0",
+    "webpack": "^4.29.6",
     "webpack-dev-middleware": "^3.2.0",
     "webpack-hot-middleware": "^2.24.3",
     "webpack-merge": "^4.0.0",

src/assets/i18n.js

@@ -144,7 +144,7 @@ const messages = {
       cancel: 'Cancelar',
       msg: {
         titledeleteTask: 'Borrar Tarea',
-        deleteTask: 'Quieres borrar %s?'
+        deleteTask: 'Quieres borrar {mytodo}?'
       }
     },
     comp:{
@@ -280,7 +280,7 @@ const messages = {
       cancel: 'Cancel',
       msg: {
         titledeleteTask: 'Delete Task',
-        deleteTask: 'Delete %s?'
+        deleteTask: 'Delete Task {mytodo}?'
       }
     },
     comp:{

src/classes/DateController.ts

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import 'moment/locale/fr';
+moment.locale('fr')
+
+const monthsStrings = ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
+
+
+export class DateMoving {
+  public date: moment.Moment;
+  public hour: string;
+  public number: number;
+  public month: string;
+  public year: number;
+
+  constructor(time: number) {
+    this.date = moment(time * 1000);
+    this.hour = `${this.date.format('HH:mm')}`;
+    this.number = this.date.date();
+    this.year = this.date.year();
+    this.month = monthsStrings[this.date.month()];
+  }
+
+  fullString() {
+    return this.date.format('Do MMMM YYYY, HH:mm');
+  }
+}

src/classes/index.ts

@@ -0,0 +1 @@
+export * from './DateController';

src/components/admin/cfgServer/cfgServer.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component } from 'vue-property-decorator'
 
-import { GlobalStore, UserStore } from '@store'
+import { GlobalStore } from '@store'
 
 
 @Component({})
@@ -26,16 +26,19 @@ export default class CfgServer extends Vue {
       field: 'chiave',
       sortable: true
     },
+    { name: 'userid', label: 'UserId', field: 'userid', sortable: false },
     { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
   ]
 
-  public visibleColumns: ['chiave', 'valore']
+  public visibleColumns: ['chiave', 'userid', 'valore']
   public separator: 'horizontal'
   public filter: string = ''
   public selected: any[] = []
   public dark: boolean = true
 
   public keysel: string = ''
+  public userIdsel: string = ''
+
 
   get tableClass () {
     if (this.dark) {
@@ -46,6 +49,7 @@ export default class CfgServer extends Vue {
   selItem(item) {
     console.log('item', item)
     this.keysel = item.chiave
+    this.userIdsel = item.userid
     console.log('this.keysel', this.keysel)
   }
 
@@ -54,6 +58,7 @@ export default class CfgServer extends Vue {
 
     const mydata = {
       chiave: this.keysel,
+      userId: this.userIdsel,
       valore: newVal
     }
     // Save on Server

src/components/admin/cfgServer/cfgServer.vue

@@ -15,6 +15,14 @@
                     </q-field>
                 </q-popup-edit>
             </q-td>
+            <q-td key="userid" :props="props">
+                {{ props.row.userId }}
+                <q-popup-edit v-model="props.row.userId" disable>
+                    <q-field count>
+                        <q-input v-model="props.row.userId" />
+                    </q-field>
+                </q-popup-edit>
+            </q-td>
             <q-td key="valore" :props="props">
                 {{ props.row.valore }}
                 <q-popup-edit v-model="props.row.valore" title="Aggiorna Valore" buttons @save="SaveValue" @show="selItem(props.row)">

src/components/admin/testp1/testp1.ts

@@ -36,8 +36,8 @@ export default class Testp1 extends Vue {
 
   created() {
     this.mioobj = {
-      arr1: [{chiave: 'key1', valore: 'val1'}],
-      arr2: [{chiave: 'key2', valore: 'val2'}]
+      arr1: [{chiave: 'key1', userId: 'ALL', valore: 'val1'}],
+      arr2: [{chiave: 'key2', userId: 'ALL', valore: 'val2'}]
     }
   }
 
@@ -68,18 +68,18 @@ export default class Testp1 extends Vue {
   }
 
   TestBtn2() {
-    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', valore: GlobalStore.state.testp1.contatore.toString() })
+    GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', userId: UserStore.state.userId, 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' } )
+    GlobalStore.mutations.setPaoArray({chiave: 'pippo', userId: UserStore.state.userId, 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' }] )
+    GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', userId: UserStore.state.userId, valore: '1' }, {chiave: 'nuovorec2', userId: UserStore.state.userId, valore: '2' }] )
 
   }
 

src/components/todos/todo/todo.scss

@@ -71,6 +71,7 @@
   font-size: 1.25rem;
   font-weight: bold;
   text-align: center;
+  flex: 1;
 }
 
 .titleSubMenu {
@@ -102,3 +103,8 @@
   min-height: 50px;
   background-color: #9f9f9f;
 }
+
+.menuInputCompleted > div:nth-child(2) > div > input {
+  min-width: 30px;
+  width: 30px;
+}

src/components/todos/todo/todo.ts

@@ -6,18 +6,26 @@ import { ITodo, ITodosState, IDrag, IGlobalState, ICfgServer } from '@src/model'
 
 import { tools } from '../../../store/Modules/tools'
 
-import { Todos } from '@store'
+import { GlobalStore, Todos } from '@store'
 import { UserStore } from '@store'
 
 // _.cloneDeep(  Per clonare un oggetto
 
-import { Getter } from 'vuex-class'
+import { Getter, State, Mutation } from 'vuex-class'
+import { costanti } from '@src/store/Modules/costanti'
 const namespace: string = 'Todos'
 
 
 @Component({
 
-  components: { SingleTodo }
+  components: { SingleTodo },
+  filters: {
+    capitalize: function (value) {
+      if (!value) return ''
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
+  }
 })
 export default class Todo extends Vue {
   $q: any
@@ -37,6 +45,7 @@ export default class Todo extends Vue {
   public actualMaxPosition: number = 15
   public scrollable = true
   public categoryAtt: string = ''
+  // public showtype: number = Todos.state.showtype
 
   $refs: {
     single: SingleTodo[]
@@ -52,10 +61,41 @@ export default class Todo extends Vue {
     this.categoryAtt = this.$route.params.category
   }
 
+  get showtype () {
+    return Todos.state.showtype
+  }
+
+  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)
   }
 
+  get menuPopupConfigTodo() {
+    return tools.menuPopupConfigTodo[UserStore.state.lang]
+  }
+
+  get listOptionShowTask() {
+    return tools.listOptionShowTask[UserStore.state.lang]
+  }
+
   get TodosCount() {
     return Todos.getters.TodosCount(this.categoryAtt)
   }
@@ -94,6 +134,10 @@ export default class Todo extends Vue {
     return 'row' + id
   }
 
+  showTask(field_value) {
+    return field_value === tools.MenuAction.SHOW_TASK
+  }
+
   onStart() {
 
     this.startpos = 0
@@ -295,6 +339,7 @@ export default class Todo extends Vue {
   }
 
   async load() {
+    console.log('LOAD TODO....')
     this.categoryAtt = this.$route.params.category
 
     // Set last category selected
@@ -343,6 +388,7 @@ export default class Todo extends Vue {
   }
 
   mydeleteItem(idobj: string) {
+    console.log('mydeleteItem', idobj)
     return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
   }
 

src/components/todos/todo/todo.vue

@@ -3,8 +3,50 @@
         <div class="panel">
             <p class="caption"></p>
 
+            showtype = {{showtype}}
             <div class="divtitlecat">
-                <div class="categorytitle">{{ categoryAtt }}</div>
+                <div class="flex-container">
+                    <div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
+                    <div class="flex-item">
+                        <q-btn push
+                               icon="settings">
+                            <q-popover id="popconfig" self="top right">
+                                <q-list link separator no-border class="todo-menu">
+                                    <div v-for="field in menuPopupConfigTodo" :key="field.value">
+                                        <q-item :icon="field.icon"
+                                                @click.native="">
+                                            <q-item-side :icon="field.icon"/>
+
+                                            <q-item-main v-if="showTask(field.value)">
+
+                                                <q-select
+                                                        radio
+                                                        color="secondary"
+                                                        :float-label="field.label"
+                                                        v-model="showtype"
+                                                        :options="listOptionShowTask"/>
+                                            </q-item-main>
+                                            <q-item-main v-else>
+                                                <q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
+                                            </q-item-main>
+                                            <!--<q-item-side>-->
+                                            <!--<div>-->
+                                            <!--<q-input v-model="itemtodo.progress"-->
+                                            <!--class="menuInputCompleted"-->
+                                            <!--type="number"-->
+                                            <!--suffix=""-->
+                                            <!--@change="val => { model = val }"-->
+                                            <!--&gt;-->
+                                            <!--</div>-->
+                                            <!--</q-item-side>-->
+
+                                        </q-item>
+                                    </div>
+                                </q-list>
+                            </q-popover>
+                        </q-btn>
+                    </div>
+                </div>
             </div>
 
             <q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
@@ -21,24 +63,25 @@
                 <!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
 
                 <!--<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 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)">
-                                <label>{{getPriorityByInd(mytodo.priority)}}</label>
-                            </div>
-                            <SingleTodo ref="single" @deleteItem="mydeleteItem" @eventupdate="updateitem"
-                                        @deselectAllRows="deselectAllRows" @onEnd="onEnd"
-                                        :itemtodo='mytodo'/>
+                        <div v-if="(prior !== mytodo.priority) && !mytodo.completed"
+                             :class="getTitlePriority(mytodo.priority)">
+                            <label>{{getPriorityByInd(mytodo.priority)}}</label>
+                        </div>
+                        <SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
+                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd"
+                                    :itemtodo='mytodo'/>
 
-                            <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
+                        <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
 
-                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
-                            </div>
+                        <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
                         </div>
                     </div>
+                </div>
                 <!--</q-infinite-scroll>-->
 
                 <div v-if="doneTodosCount > 0" class="titleCompleted">
@@ -46,38 +89,40 @@
                 </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">
+                <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'/>
+                        <SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
+                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd"
+                                    :itemtodo='mytodo'/>
 
-                            <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
+                        <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
 
-                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
-                            </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="TodosCount > 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)"/>
 
             <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>-->
-            <!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--
+            <div class="flex-item btn-item">
+            <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>
+            <q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>
+            <!--</div>-->
 
             <!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
             <!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
@@ -89,7 +134,9 @@
             <!--<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;-->
+            <!--&ndash;&gt;-->
+
+            <!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
 
 
             <!--<span style="white-space: pre;">{{ todos_vista }}</span>-->

src/globalroutines/indexdb.js

@@ -4,11 +4,12 @@ import { UserStore, Todos } from '@store'
 import { i18n } from '../plugins/i18n'
 
 import { idbKeyval as storage } from '../js/storage.js';
+import { costanti } from '../store/Modules/costanti';
 
 function saveConfigIndexDb(context) {
 
   let data = []
-  data['_id'] = 1
+  data['_id'] = costanti.CONFIG_ID_CFG
   data['lang'] = UserStore.state.lang
   data['token'] = UserStore.state.x_auth_token
   data['userId'] = UserStore.state.userId

src/index.template.html

@@ -15,10 +15,10 @@
     <link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.files.publicPath %>statics/icons/favicon-16x16.png">
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.files.publicPath %>assets/css/dragula.css">
     <script defer src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/material.min.js"></script>
-    <script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/promise.js"></script>
-    <script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/fetch.js"></script>
-    <script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/idb.js"></script>
-    <script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/storage.js"></script>
+    <!--<script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/promise.js"></script>-->
+    <!--<script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/fetch.js"></script>-->
+    <!--<script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/idb.js"></script>-->
+    <!--<script src="<%= htmlWebpackPlugin.files.publicPath %>assets/js/storage.js"></script>-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>

src/model/GlobalStore.ts

@@ -11,6 +11,7 @@ export interface IConnData {
 
 export interface ICfgServer {
   chiave: string
+  userId: string
   valore: string
 }
 
@@ -21,6 +22,12 @@ export interface ITestp1 {
 
 export type StateConnection = 'online' | 'offline'
 
+export interface IConfig {
+  _id: string,
+  key?: string,
+  value: string
+}
+
 export interface IGlobalState {
   conta: number
   wasAlreadySubOnDb: boolean
@@ -38,6 +45,7 @@ export interface IGlobalState {
   connData: IConnData
   posts: IPost[]
   listatodo: ITodoList[]
+  arrConfig: IConfig[]
 }
 
 

src/model/Todos.ts

@@ -35,10 +35,9 @@ export interface IDrag {
   atfirst?: boolean
 }
 
-
 export interface ITodosState {
-  visuOnlyUncompleted: boolean
-  todos: [ ITodo[] ]
+  showtype: number
+  todos: [ITodo[]]
   categories: string[]
   // todos_changed: number
   reload_fromServer: number

src/store/Api/index.ts

@@ -13,7 +13,8 @@ import { GlobalStore, UserStore } from '@modules'
 import globalroutines from './../../globalroutines/index'
 import { serv_constants } from '@src/store/Modules/serv_constants'
 import router from '@router'
-import * as Types from "@src/store/Api/ApiTypes"
+import * as Types from '@src/store/Api/ApiTypes'
+import { costanti } from '@src/store/Modules/costanti'
 
 
 // const algoliaApi = new AlgoliaSearch()
@@ -188,7 +189,8 @@ export namespace ApiTool {
               // console.log('¨¨¨¨¨¨¨¨¨¨¨¨¨¨  errorfromserver:', errorfromserver)
               const mystate = errorfromserver ? 'offline' : 'online'
               GlobalStore.mutations.setStateConnection(mystate)
-              return globalroutines(null, 'write', 'config', { _id: 2, stateconn: mystate })
+              GlobalStore.mutations.saveConfig( { _id: costanti.CONFIG_ID_STATE_CONN, value: mystate })
+
             })
 
           // console.log(' [Alternative] A2) ?????????????????????????? ESCO DAL LOOP !!!!!!!!!')

src/store/Modules/GlobalStore.ts

@@ -1,4 +1,4 @@
-import { ICfgServer, IGlobalState, StateConnection } from 'model'
+import { ICfgServer, IConfig, IGlobalState, StateConnection } from 'model'
 import { storeBuilder } from './Store/Store'
 
 import Vue from 'vue'
@@ -12,18 +12,12 @@ 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'
 
 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']
 
-async function getstateConnSaved() {
-  const config = await globalroutines(null, 'readall', 'config', null)
-  if (config.length > 1) {
-    return config[1].stateconn
-  } else {
-    return 'online'
-  }
-}
 
 let stateConnDefault = 'online'
 
@@ -57,6 +51,22 @@ const state: IGlobalState = {
     uploading_indexeddb: 0,
     downloading_server: 0,
     downloading_indexeddb: 0
+  },
+  arrConfig: []
+}
+
+async function getConfig(id) {
+  return await globalroutines(null, 'read', 'config', null, id)
+}
+
+async function getstateConnSaved() {
+  const config = await getConfig(costanti.CONFIG_ID_CFG)
+  console.log('config', config)
+  if (config.length > 1) {
+    const cfgstateconn = config[1]
+    return cfgstateconn.stateconn
+  } else {
+    return 'online'
   }
 }
 
@@ -71,7 +81,27 @@ namespace Getters {
   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_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 getConfigStringbyId = b.read(state => id => {
+    const config = state.arrConfig.find(item => item._id === id)
+    if (config) {
+      return config.value
+    } else {
+      return ''
+    }
+  }, 'getConfigStringbyId')
+
+  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)
+    if (config)
+      return config.value
+    else
+      return ''
+
+  }, 'showtype')
 
 
   export const getters = {
@@ -93,6 +123,18 @@ namespace Getters {
       return category()
     },
 
+    get getConfigbyId() {
+      return getConfigbyId()
+    },
+
+    get getConfigStringbyId() {
+      return getConfigStringbyId()
+    },
+
+    get showtype() {
+      return showtype()
+    },
+
     get isOnline() {
       console.log('*********************** isOnline')
       return state.stateConnection === 'online'
@@ -118,9 +160,11 @@ namespace Mutations {
     tools.notifyarraychanged(state.testp1.mioarray)
     console.log('last elem = ', state.testp1.mioarray[state.testp1.mioarray.length - 1])
   }
+
   function NewArray(state: IGlobalState, newarr: ICfgServer[]) {
     state.testp1.mioarray = newarr
   }
+
   function setPaoArray_Delete(state: IGlobalState) {
     state.testp1.mioarray.pop()
   }
@@ -144,19 +188,39 @@ namespace Mutations {
     }
   }
 
+  function saveConfig(state: IGlobalState, data: IConfig) {
+    let dataout
+    // this.$set(dataout, data.value, {'value': 'default value'})
+    return globalroutines(null, 'write', 'config', { _id: data._id, value: data.value })
+  }
+
   function SetwasAlreadySubOnDb(state: IGlobalState, subscrib: boolean) {
     state.wasAlreadySubOnDb = subscrib
   }
 
+  function setShowType(state: IGlobalState, showtype: number) {
+    // console.log('setShowType', showtype)
+    const config = Getters.getters.getConfigbyId(costanti.CONFIG_ID_SHOW_TYPE_TODOS)
+    // console.log('config', config)
+    if (config) {
+      config.value = String(showtype)
+      Todos.state.showtype = parseInt(config.value)
+      // console.log('Todos.state.showtype', Todos.state.showtype)
+      GlobalStore.mutations.saveConfig({ _id: costanti.CONFIG_ID_SHOW_TYPE_TODOS, value: String(showtype) })
+    }
+  }
+
   export const mutations = {
     setConta: b.commit(setConta),
     setleftDrawerOpen: b.commit(setleftDrawerOpen),
     setCategorySel: b.commit(setCategorySel),
     setStateConnection: b.commit(setStateConnection),
     SetwasAlreadySubOnDb: b.commit(SetwasAlreadySubOnDb),
+    saveConfig: b.commit(saveConfig),
     setPaoArray: b.commit(setPaoArray),
     setPaoArray_Delete: b.commit(setPaoArray_Delete),
-    NewArray: b.commit(NewArray)
+    NewArray: b.commit(NewArray),
+    setShowType: b.commit(setShowType)
   }
 
 }
@@ -339,7 +403,10 @@ namespace Actions {
 
 
   async function loadAfterLogin(context) {
+    console.log('loadAfterLogin')
     actions.clearDataAfterLoginOnlyIfActiveConnection()
+
+    state.arrConfig = await globalroutines(null, 'readall', 'config', null)
   }
 
   async function saveCfgServerKey(context, dataval: ICfgServer) {

src/store/Modules/Todos.ts

@@ -1,4 +1,4 @@
-import { IGlobalState, ITodo, ITodosState, IParamTodo, IUserState, IDrag } from 'model'
+import { ITodo, ITodosState, IParamTodo, IDrag } from 'model'
 import { storeBuilder } from './Store/Store'
 
 import Api from '@api'
@@ -9,11 +9,12 @@ import { Mutation } from 'vuex-module-decorators'
 import { serv_constants } from '@src/store/Modules/serv_constants'
 import { GetterTree } from 'vuex'
 import objectId from '@src/js/objectId'
+import { costanti } from '@src/store/Modules/costanti'
 
 // import _ from 'lodash'
 
 const state: ITodosState = {
-  visuOnlyUncompleted: false,
+  showtype: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
   todos: [[]],
   categories: [],
   // todos_changed: 1,
@@ -228,7 +229,12 @@ namespace Getters {
   const todos_completati = b.read((state: ITodosState) => (cat: string): ITodo[] => {
     const indcat = getindexbycategory(cat)
     if (state.todos[indcat]) {
-      return state.todos[indcat].filter(todo => todo.completed).slice(0, state.visuLastCompleted)  // Show only the first N completed
+      if (state.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED)
+        return state.todos[indcat].filter(todo => todo.completed).slice(0, state.visuLastCompleted)  // Show only the first N completed
+      else if (state.showtype === costanti.ShowTypeTask.SHOW_ALL)
+        return state.todos[indcat].filter(todo => todo.completed)
+      else
+        return []
     } else return []
   }, 'todos_completati')
 
@@ -409,10 +415,14 @@ namespace Actions {
     return await dbLoadTodo(context, { checkPending: false })
   }
 
+  async function readConfig(id) {
+    return await globalroutines(null, 'read', 'config', null, String(id))
+  }
+
   async function checkPendingMsg(context) {
     // console.log('checkPendingMsg')
 
-    const config = await globalroutines(null, 'readall', 'config', null)
+    const config = await globalroutines(null, 'read', 'config', null, '1')
     // console.log('config', config)
 
     try {
@@ -466,6 +476,12 @@ namespace Actions {
           state.todos = [[]]
         }
 
+        // console.log('PRIMA showtype = ', state.showtype)
+
+        state.showtype = parseInt(GlobalStore.getters.getConfigStringbyId(costanti.CONFIG_ID_SHOW_TYPE_TODOS))
+
+        // console.log('showtype = ', state.showtype)
+
         // console.log('ARRAY TODOS = ', state.todos)
 
         console.log('dbLoadTodo', 'state.todos', state.todos, 'state.categories', state.categories)
@@ -681,28 +697,32 @@ namespace Actions {
         if (atfirst) {
           // Check the second item, if it's different priority, then move to the first position of the priority
           const secondindelem = indelem + 1
-          const secondelem = getElemByIndex(objtodo.category, secondindelem)
-          if (secondelem.priority !== objtodo.priority) {
-            itemdragend = {
-              field: 'priority',
-              idelemtochange: objtodo._id,
-              prioritychosen: objtodo.priority,
-              category: objtodo.category,
-              atfirst
+          if (isValidIndex(objtodo.category, secondindelem)) {
+            const secondelem = getElemByIndex(objtodo.category, secondindelem)
+            if (secondelem.priority !== objtodo.priority) {
+              itemdragend = {
+                field: 'priority',
+                idelemtochange: objtodo._id,
+                prioritychosen: objtodo.priority,
+                category: objtodo.category,
+                atfirst
+              }
             }
           }
 
         } else {
           // get previous of the last
           const prevlastindelem = indelem - 1
-          const prevlastelem = getElemByIndex(objtodo.category, prevlastindelem)
-          if (prevlastelem.priority !== objtodo.priority) {
-            itemdragend = {
-              field: 'priority',
-              idelemtochange: objtodo._id,
-              prioritychosen: objtodo.priority,
-              category: objtodo.category,
-              atfirst
+          if (isValidIndex(objtodo.category, prevlastindelem)) {
+            const prevlastelem = getElemByIndex(objtodo.category, prevlastindelem)
+            if (prevlastelem.priority !== objtodo.priority) {
+              itemdragend = {
+                field: 'priority',
+                idelemtochange: objtodo._id,
+                prioritychosen: objtodo.priority,
+                category: objtodo.category,
+                atfirst
+              }
             }
           }
         }

src/store/Modules/costanti.ts

@@ -0,0 +1,10 @@
+export const costanti = {
+  ShowTypeTask: {
+    SHOW_LAST_N_COMPLETED: 200,
+    SHOW_ONLY_TOCOMPLETE: 201,
+    SHOW_ALL: 202
+  },
+  CONFIG_ID_CFG: '1',
+  CONFIG_ID_STATE_CONN: '2',
+  CONFIG_ID_SHOW_TYPE_TODOS: '3'
+}

src/store/Modules/tools.ts

@@ -1,4 +1,5 @@
 import { ITodo } from '@src/model'
+import { costanti } from './costanti'
 import globalroutines from './../../globalroutines/index'
 import { Todos, UserStore } from '@store'
 import Api from '@api'
@@ -51,7 +52,8 @@ export const tools = {
     TOGGLE_EXPIRING: 101,
     COMPLETED: 110,
     PROGRESS_BAR: 120,
-    PRIORITY: 130
+    PRIORITY: 130,
+    SHOW_TASK: 150,
   },
 
 
@@ -252,6 +254,105 @@ export const tools = {
     ]
   },
 
+  menuPopupConfigTodo: {
+    'it': [
+      {
+        id: 10,
+        label: 'Mostra Task',
+        value: 150,  // SHOW_TASK
+        icon: 'rowing',
+      },
+    ],
+    'esEs': [
+      {
+        id: 10,
+        label: 'Mostrar Tareas',
+        value: 150,
+        icon: 'rowing',
+      },
+    ],
+    'enUs': [
+      {
+        id: 10,
+        label: 'Show Task',
+        value: 150,
+        icon: 'rowing',
+      },
+    ]
+  },
+
+  listOptionShowTask: {
+    'it': [
+      {
+        id: 10,
+        label: 'Mostra gli ultimi N completati',
+        value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
+        icon: 'rowing',
+        checked: true
+      },
+      {
+        id: 20,
+        label: 'Compiti da Completare',
+        value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
+        icon: 'rowing',
+        checked: false
+      },
+      {
+        id: 30,
+        label: 'Tutti i compiti',
+        value: costanti.ShowTypeTask.SHOW_ALL,
+        icon: 'check_circle',
+        checked: true
+      }
+    ],
+    'esEs': [
+      {
+        id: 10,
+        label: 'Mostrar los ultimos N completados',
+        value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
+        icon: 'rowing',
+        checked: true
+      },
+      {
+        id: 20,
+        label: 'Tareas para completar',
+        value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
+        icon: 'rowing',
+        checked: false
+      },
+      {
+        id: 30,
+        label: 'Todos las Tareas',
+        value: costanti.ShowTypeTask.SHOW_ALL,
+        icon: 'check_circle',
+        checked: true
+      }
+    ],
+    'enUs': [
+      {
+        id: 10,
+        label: 'Show last N Completed',
+        value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
+        icon: 'rowing',
+        checked: true
+      },
+      {
+        id: 20,
+        label: 'Task to complete',
+        value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
+        icon: 'rowing',
+        checked: false
+      },
+      {
+        id: 30,
+        label: 'All Tasks',
+        value: costanti.ShowTypeTask.SHOW_ALL,
+        icon: 'check_circle',
+        checked: true
+      }
+    ]
+  },
+
   jsonCopy(src) {
     return JSON.parse(JSON.stringify(src))
   },