Popupmenu Todo:

- Show Task Completed

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>-->