From 55685477841ed9aeca5aba11ca6c378f636c0cd2 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Thu, 11 Feb 2021 02:21:36 +0100
Subject: [PATCH] Calcolo Hours

---
 src/common/shared_vuejs.ts                    |   2 +
 src/components/CDateTime/CDateTime.ts         |   9 +
 src/components/CDateTime/CDateTime.vue        |   4 +-
 .../CGridTableRec/CGridTableRec.scss          |   5 +-
 src/components/CGridTableRec/CGridTableRec.ts |  80 ++-
 .../CGridTableRec/CGridTableRec.vue           |  62 +-
 src/components/CHours/CHours.scss             |   0
 src/components/CHours/CHours.ts               |  87 +++
 src/components/CHours/CHours.vue              |  33 +
 src/components/CHours/index.ts                |   1 +
 src/components/CInput/CInput.scss             |   0
 src/components/CInput/CInput.ts               |  34 +
 src/components/CInput/CInput.vue              |  11 +
 src/components/CInput/index.ts                |   1 +
 src/components/CMyFieldDb/CMyFieldDb.ts       |  33 +-
 src/components/CMyFieldDb/CMyFieldDb.vue      |  12 +
 src/components/CMyPopupEdit/CMyPopupEdit.ts   |  26 +-
 src/components/CMyPopupEdit/CMyPopupEdit.vue  | 413 ++++++-----
 src/components/CMyToggleList/CMyToggleList.ts |  24 +-
 src/components/CProgress/CProgress.scss       |  20 +-
 src/components/CProgress/CProgress.ts         |   2 +-
 src/components/CShareWithUs/CShareWithUs.ts   |   3 +-
 src/components/index.ts                       |   2 +
 .../projects/SingleProject/SingleProject.ts   |  12 +-
 src/components/todos/SingleTodo/SingleTodo.ts |  12 +-
 src/mixins/mixin-base.ts                      |  27 +-
 src/model/GlobalStore.ts                      |  20 +
 src/model/Todos.ts                            |  11 +
 src/statics/lang/it.js                        |  10 +-
 src/store/Modules/GlobalStore.ts              |  26 +-
 src/store/Modules/Projects.ts                 |  19 +
 src/store/Modules/Todos.ts                    |  19 +
 src/store/Modules/fieldsTable.ts              |  60 +-
 src/store/Modules/tools.ts                    |  77 +-
 src/views/projects/proj-list/proj-list.scss   |  45 +-
 src/views/projects/proj-list/proj-list.ts     |  66 +-
 src/views/projects/proj-list/proj-list.vue    | 678 ++++++++++--------
 37 files changed, 1372 insertions(+), 574 deletions(-)
 create mode 100755 src/components/CHours/CHours.scss
 create mode 100755 src/components/CHours/CHours.ts
 create mode 100755 src/components/CHours/CHours.vue
 create mode 100755 src/components/CHours/index.ts
 create mode 100755 src/components/CInput/CInput.scss
 create mode 100755 src/components/CInput/CInput.ts
 create mode 100755 src/components/CInput/CInput.vue
 create mode 100755 src/components/CInput/index.ts

diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts
index 5759c3b..3d50e71 100755
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -36,6 +36,8 @@ export const shared_consts = {
   FILTER_NAVI_NON_PRESENTI: 8192,
   FILTER_QUALIFIED: 16384,
   FILTER_ASK_ZOOM_VISTO: 32768,
+  FILTER_HOURS_MYLIST: 65536,
+  FILTER_HOURS_ALL: 131072,
 
   Permissions: {
     Admin: {
diff --git a/src/components/CDateTime/CDateTime.ts b/src/components/CDateTime/CDateTime.ts
index 4c57ee4..2f3e926 100755
--- a/src/components/CDateTime/CDateTime.ts
+++ b/src/components/CDateTime/CDateTime.ts
@@ -24,6 +24,7 @@ export default class CDateTime extends Vue {
   @Prop({ required: false, default: '' }) public bgcolor!: string
   @Prop({ required: false, default: false }) public dense: boolean
   @Prop({ required: false, default: '5' }) public minuteinterval: boolean
+  @Prop({ required: false, default: 'date-time' }) public view: string
 
   public mystyleicon: string = 'font-size: 1.5rem;'
   public showDateTimeScroller: boolean = false
@@ -118,4 +119,12 @@ export default class CDateTime extends Vue {
     else
       return ''
   }
+
+  public getstrDate(mydate) {
+    if (this.view === 'date-time') {
+      return tools.getstrDateTime(mydate)
+    } else {
+      return tools.getstrDate(mydate)
+    }
+  }
 }
diff --git a/src/components/CDateTime/CDateTime.vue b/src/components/CDateTime/CDateTime.vue
index d9d6586..9ae673a 100755
--- a/src/components/CDateTime/CDateTime.vue
+++ b/src/components/CDateTime/CDateTime.vue
@@ -31,7 +31,7 @@
             <template v-slot:control>
                 <div style="">
                     <div class="self-center full-width no-outline" :style="mystyle" tabindex="0">
-                        {{ tools.getstrDateTime(myvalue) }}
+                        {{ getstrDate(myvalue) }}
                     </div>
                 </div>
             </template>
@@ -41,7 +41,7 @@
 
                         <q-scroller
                                 v-model="myvalue"
-                                view="date-time"
+                                :view="view"
                                 :locale="toolsext.getLocale()"
                                 :rounded-borders="true"
                                 border-color="#2196f3"
diff --git a/src/components/CGridTableRec/CGridTableRec.scss b/src/components/CGridTableRec/CGridTableRec.scss
index dc3c235..6380566 100755
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -12,5 +12,8 @@
 }
 
 .q-table td {
-  padding: 0;
+  padding-left: 1px;
+  padding-right: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index aeaea77..94a149e 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -23,10 +23,18 @@ export default class CGridTableRec extends Vue {
   @Prop({ required: false }) public prop_mytable: string
   @Prop({ required: false, default: null }) public prop_mycolumns: any[]
   @Prop({ required: false, default: '' }) public prop_colkey: string
+  @Prop({ required: false, default: '' }) public prop_codeId: string
   @Prop({ required: false, default: '' }) public nodataLabel: string
   @Prop({ required: false, default: '' }) public noresultLabel: string
+  @Prop({ required: false, default: {} }) public defaultnewrec: any
   @Prop({ required: false, default: null }) public tablesList: ITableRec[]
   @Prop({ required: false, default: null }) public arrfilters: IFilter[]
+  @Prop({ required: false, default: [] }) public filterdef: number[]
+  @Prop({ required: false, default: {} }) public extraparams: any
+
+  public newRecordBool: boolean = false
+  public newRecord: any = {}
+  public savenewRec: boolean = false
 
   public mytable: string
   public mytitle: string
@@ -57,7 +65,7 @@ export default class CGridTableRec extends Vue {
   public separator: 'horizontal'
   public myfilter = undefined
   public myfilterand = []
-  public rowsel: any
+  public rowsel: any =  {}
   public dark: boolean = true
   public canEdit: boolean = false
 
@@ -71,6 +79,11 @@ export default class CGridTableRec extends Vue {
 
   public selected = []
 
+  @Watch('prop_codeId')
+  public changeprop_codeId() {
+    this.refresh()
+  }
+
   get isAdmin() {
     return UserStore.state.isAdmin
   }
@@ -158,7 +171,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public annulla(val) {
-    // this.rowclicksel = null
+    console.log('annulla')
+    GlobalStore.actions.DeleteRec({ table: this.mytable, id: this.newRecord._id })
+      .then((ris) => {
+        return true
+      })
   }
 
   public SaveValue(newVal, valinitial) {
@@ -296,16 +313,20 @@ export default class CGridTableRec extends Vue {
         myobj[sortBy] = 1
     }
 
-    const params: IParamsQuery = {
+    let params: IParamsQuery = {
       table: this.mytable,
       startRow,
       endRow,
       filter: myfilter,
       filterand: myfilterand,
       sortBy: myobj,
-      descending
+      descending,
+      userId: UserStore.state.my._id,
+      codeId: this.prop_codeId
     }
 
+    params = { ...params, ...this.extraparams }
+
     const data = await GlobalStore.actions.loadTable(params)
 
     if (data) {
@@ -372,6 +393,26 @@ export default class CGridTableRec extends Vue {
     return this.returnedCount
   }
 
+  public async createNewRecordDialog() {
+
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+
+    mydata.data = this.defaultnewrec
+
+    // const mykey = fieldsTable.getKeyByTable(this.mytable)
+
+    // mydata.data[mykey] = ''
+
+    const data = await GlobalStore.actions.saveTable(mydata)
+
+    this.newRecord = data
+    this.newRecordBool = true
+
+  }
+
   public async createNewRecord() {
     this.loading = true
 
@@ -380,6 +421,8 @@ export default class CGridTableRec extends Vue {
       data: {}
     }
 
+    mydata.data = this.defaultnewrec
+
     // const mykey = fieldsTable.getKeyByTable(this.mytable)
 
     // mydata.data[mykey] = ''
@@ -412,6 +455,7 @@ export default class CGridTableRec extends Vue {
       this.canEdit = tools.getCookie(tools.CAN_EDIT, this.canEdit) === 'true'
       this.tablesel = tools.getCookie('tablesel', this.tablesel)
     }
+    this.myfilterand = this.filterdef
     console.log('this.tablesel', this.tablesel)
 
     if (this.tablesel === '') {
@@ -592,9 +636,11 @@ export default class CGridTableRec extends Vue {
     else
       return ''
   }
+
   public getSelectedString() {
     return this.selected.length === 0 ? '' : `${this.selected.length} record${this.selected.length > 1 ? 's' : ''} selected of ${this.serverData.length}`
   }
+
   public selectionclick(details) {
     // console.log('selectionclick this.selected', this.selected, 'details', details)
     if (details.added) {
@@ -622,4 +668,30 @@ export default class CGridTableRec extends Vue {
   public changemyfilterand() {
     this.refresh()
   }
+
+  public async saveNewRecord() {
+    console.log('saveNewRecord')
+    this.savenewRec = true
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+
+    mydata.data = this.newRecord
+
+    const data = await GlobalStore.actions.saveTable(mydata)
+      .then((ris) => {
+        if (ris) {
+          // console.log('ris', ris)
+          this.newRecordBool = false
+        }
+      })
+  }
+
+  public hidewindow() {
+    console.log('hidewindow')
+    if (!this.savenewRec) {
+      this.annulla(0)
+    }
+  }
 }
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index 2a0601d..27e4318 100755
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="q-pa-xs">
+    <q-btn v-if="mytable" flat dense color="primary"
+           :label="$t('grid.addrecord')"
+           @click="createNewRecordDialog"></q-btn>
 
 
     <q-table
@@ -54,16 +57,17 @@
         </q-input>
         <q-toggle v-if="mytable" v-model="canEdit" :disable="disabilita" :val="lists.MenuAction.CAN_EDIT_TABLE"
                   class="q-mx-sm"
-                  :label="$t('grid.editvalues')" @input="changefuncAct"
-        ></q-toggle>
+                  :label="$t('grid.editvalues')" @input="changefuncAct">
+        </q-toggle>
 
         <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
                :label="$t('grid.addrecord')"
-               @click="createNewRecord"></q-btn>
+               @click="createNewRecord">
+
+        </q-btn>
 
         <q-space/>
 
-
         <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
 
         <q-select
@@ -102,11 +106,14 @@
         </q-inner-loading>
 
         <div class="row">
-          <q-toggle v-for="(filter, index) of arrfilters" :key="index" v-model="myfilterand" :val="filter.value"
-                    :label="filter.label"></q-toggle>
+          <q-toggle v-for="(filter, index) of arrfilters"
+                    :key="index"
+                    v-model="myfilterand" :disable="filter.hide"
+                    :val="filter.value"
+                    :label="filter.label">
+
+          </q-toggle>
         </div>
-
-
       </template>
 
       <template v-slot:body="props">
@@ -141,6 +148,7 @@
           </q-td>
         </q-tr>
       </template>
+
       <!--
                       <q-btn
                               flat round dense
@@ -169,7 +177,7 @@
           <div class="q-ma-xs">
             <q-field rounded outlined bg-color="orange-3" dense>
               <template v-slot:control>
-                <div class="self-center full-width no-outline" tabindex="0">{{mycol.label}}</div>
+                <div class="self-center full-width no-outline" tabindex="0">{{ mycol.label }}</div>
               </template>
             </q-field>
           </div>
@@ -193,11 +201,45 @@
         </div>
       </div>
     </div>
+    <q-dialog v-model="newRecordBool" @hide="hidewindow">
+      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-toolbar class="bg-primary text-white">
+          <q-toolbar-title>
+            {{ mytitle }}
+          </q-toolbar-title>
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-toolbar>
+        <q-card-section class="inset-shadow">
+          <div v-for="col in mycolumns" :key="col.name"
+               v-if="colVisib.includes(col.field + col.subfield)">
+            <div>
+
+              <CMyPopupEdit :canEdit="true"
+                            :col="col"
+                            :row.sync="newRecord"
+                            :field="col.field"
+                            :subfield="col.subfield"
+                            minuteinterval="1"
+                            :visulabel="true"
+                            @save="SaveValue"
+                            @show="selItem(newRecord, col)"
+                            @showandsave="showandsel">
+
+              </CMyPopupEdit>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="center">
+          <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveNewRecord"></q-btn>
+          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 <script lang="ts" src="./CGridTableRec.ts">
 </script>
 
 <style lang="scss">
-  @import './CGridTableRec.scss';
+@import './CGridTableRec.scss';
 </style>
diff --git a/src/components/CHours/CHours.scss b/src/components/CHours/CHours.scss
new file mode 100755
index 0000000..e69de29
diff --git a/src/components/CHours/CHours.ts b/src/components/CHours/CHours.ts
new file mode 100755
index 0000000..680a7e7
--- /dev/null
+++ b/src/components/CHours/CHours.ts
@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { colTableHours } from '@src/store/Modules/fieldsTable'
+
+
+import { CCard, CGridTableRec, CMyPage, CTitleBanner, CImgText } from '@components'
+
+import MixinBase from '@src/mixins/mixin-base'
+import { shared_consts } from '@src/common/shared_vuejs'
+import { UserStore } from '@store'
+
+@Component({
+  name: 'CHours',
+  mixins: [MixinBase],
+  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec }
+})
+export default class CHours extends MixinBase {
+
+  @Prop({ required: true }) public todoId: string
+
+  public pagination = {
+    sortBy: 'descr',
+    descending: false,
+    page: 2,
+    rowsPerPage: 5
+    // rowsNumber: xx if getting data from a server
+  }
+
+  get extraparams() {
+    return {
+      lk_tab: 'users',
+      lk_LF: 'userId',
+      lk_FF: '_id',
+      lk_as: 'user',
+      lk_proj: {
+        todoId: 1, userId: 1, descr: 1, date: 1, time_start: 1, time_end: 1, hours: 1,
+        username: 1, name: 1, surname: 1
+      }
+    }
+  }
+
+  public arrfilterand = [
+    {
+      label: 'Tutte le ore',
+      value: shared_consts.FILTER_HOURS_ALL
+    }
+  ]
+
+  get myfilterdef() {
+    return [shared_consts.FILTER_HOURS_MYLIST]
+  }
+
+  get myarrfilterand() {
+    const myfiltrodef = {
+      label: 'Mie Ore',
+      value: shared_consts.FILTER_HOURS_MYLIST,
+      hide: true,
+      default: true
+    }
+    let myarr = []
+    myarr.push(myfiltrodef)
+    if (this.arrfilterand)
+      myarr = [...myarr, ...this.arrfilterand]
+
+    console.log('myarr', myarr)
+    return myarr
+  }
+
+  public selected = []
+  public dataPages = []
+
+  get getcolHours() {
+    return colTableHours
+  }
+
+  get defaultnewrec() {
+    const myrec = {
+      todoId: this.todoId,
+      userId: UserStore.state.my._id,
+      descr: ''
+    }
+
+    return myrec
+  }
+
+}
diff --git a/src/components/CHours/CHours.vue b/src/components/CHours/CHours.vue
new file mode 100755
index 0000000..351c0ac
--- /dev/null
+++ b/src/components/CHours/CHours.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <span>{{ setmeta({
+            title: 'Lista Ore',
+            description: "",
+            keywords: '' } ) }}
+        </span>
+
+        <div class="q-ma-sm q-gutter-sm q-pa-xs">
+            <CTitleBanner title="Lista Ore"></CTitleBanner>
+            <CGridTableRec prop_mytable="hours"
+                           prop_mytitle="Lista Ore"
+                           :prop_mycolumns="getcolHours"
+                           prop_colkey="descr"
+                           nodataLabel="Nessuna Lista Ore"
+                           noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
+                           :arrfilters="myarrfilterand"
+                           :filterdef="myfilterdef"
+                           :prop_codeId="todoId"
+                           :defaultnewrec="defaultnewrec"
+                           :extraparams="extraparams"
+            >
+
+            </CGridTableRec>
+        </div>
+    </div>
+</template>
+<script lang="ts" src="./CHours.ts">
+
+</script>
+<style lang="scss" scoped>
+    @import 'CHours.scss';
+</style>
diff --git a/src/components/CHours/index.ts b/src/components/CHours/index.ts
new file mode 100755
index 0000000..b083c9e
--- /dev/null
+++ b/src/components/CHours/index.ts
@@ -0,0 +1 @@
+export {default as CHours} from './CHours.vue'
diff --git a/src/components/CInput/CInput.scss b/src/components/CInput/CInput.scss
new file mode 100755
index 0000000..e69de29
diff --git a/src/components/CInput/CInput.ts b/src/components/CInput/CInput.ts
new file mode 100755
index 0000000..721a32c
--- /dev/null
+++ b/src/components/CInput/CInput.ts
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+
+
+@Component({
+  name: 'CInput'
+})
+export default class CInput extends Vue {
+  @Prop({ required: false, default: '' }) public src: string
+  @Prop({ required: false, default: '' }) public src2: string
+  @Prop({ required: false, default: 'myclimg' }) public class1: string
+  @Prop({ required: false, default: '' }) public style1: string
+  @Prop({ required: false, default: 'image' }) public alt1: string
+  @Prop({ required: false, default: 'image' }) public alt2: string
+
+  get clrowcol() {
+    let mycl = 'row'
+    if (tools.isMobile())
+      mycl = 'column'
+
+    return mycl
+  }
+
+  get myclass() {
+
+    return this.clrowcol + ' items-start q-col-gutter-xs imgtext '
+  }
+}
diff --git a/src/components/CInput/CInput.vue b/src/components/CInput/CInput.vue
new file mode 100755
index 0000000..3742a94
--- /dev/null
+++ b/src/components/CInput/CInput.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <q-field
+  </div>
+</template>
+
+<script lang="ts" src="./CInput.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CInput.scss';
+</style>
diff --git a/src/components/CInput/index.ts b/src/components/CInput/index.ts
new file mode 100755
index 0000000..2a7cad2
--- /dev/null
+++ b/src/components/CInput/index.ts
@@ -0,0 +1 @@
+export {default as CInput} from './CInput.vue'
diff --git a/src/components/CMyFieldDb/CMyFieldDb.ts b/src/components/CMyFieldDb/CMyFieldDb.ts
index d16eb7a..fcefb95 100755
--- a/src/components/CMyFieldDb/CMyFieldDb.ts
+++ b/src/components/CMyFieldDb/CMyFieldDb.ts
@@ -13,10 +13,11 @@ import { GlobalStore, UserStore } from '../../store/Modules'
 import { CMyChipList } from '../CMyChipList'
 import { CMyToggleList } from '../CMyToggleList'
 import translate from '@src/globalroutines/util'
+import { CDateTime } from '../CDateTime'
 
 @Component({
   name: 'CMyFieldDb',
-  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList }
+  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList, CDateTime }
 })
 
 export default class CMyFieldDb extends MixinBase {
@@ -29,6 +30,8 @@ export default class CMyFieldDb extends MixinBase {
   @Prop({ required: false, default: '' }) public jointable: string
   @Prop({ required: false, default: 'settings' }) public table: string
   @Prop({ required: false, default: '' }) public myimg: string
+  @Prop({ required: false, default: '' }) public id: string
+  @Prop({ required: false, default: '' }) public idmain: string
 
   public $t
   public myvalue = ''
@@ -37,18 +40,28 @@ export default class CMyFieldDb extends MixinBase {
   public countryname = ''
 
   public created() {
-    this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey)
+    this.crea()
+  }
+
+  public crea() {
+
+    this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey, this.id, this.idmain)
     this.col.jointable = this.jointable
     this.col.fieldtype = this.type
     this.col.label = this.title
 
-    // console.log('created', this.myvalue)
+    // console.log('CMyFieldDb crea', this.myvalue)
+  }
+
+  @Watch('id')
+  public idchanged(value) {
+    this.crea()
   }
 
   public getclassCol(col) {
     if (col) {
       let mycl = (this.disable || col.disable) ? '' : 'colmodif '
-      mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container ' : ''
+      mycl += ((col.fieldtype === tools.FieldType.date) || (col.fieldtype === tools.FieldType.onlydate)) ? ' coldate flex flex-container ' : ''
 
       return mycl
     } else {
@@ -63,6 +76,12 @@ export default class CMyFieldDb extends MixinBase {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (this.col.fieldtype === tools.FieldType.onlydate) {
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDate(val)
+      }
     } else if (this.col.fieldtype === tools.FieldType.boolean) {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else if (this.col.fieldtype === tools.FieldType.binary) {
@@ -120,7 +139,7 @@ export default class CMyFieldDb extends MixinBase {
 
   public savefield(value, initialval) {
     this.myvalue = value
-    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
+    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
   }
 
   public savefieldboolean(value) {
@@ -129,10 +148,10 @@ export default class CMyFieldDb extends MixinBase {
     else
       this.myvalue = value
 
-    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
+    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
   }
 
-  public selectcountry({name, iso2, dialCode}) {
+  public selectcountry({ name, iso2, dialCode }) {
     // console.log(name, iso2, dialCode)
     this.myvalue = iso2
     this.countryname = name
diff --git a/src/components/CMyFieldDb/CMyFieldDb.vue b/src/components/CMyFieldDb/CMyFieldDb.vue
index 4498ed0..f0bca79 100755
--- a/src/components/CMyFieldDb/CMyFieldDb.vue
+++ b/src/components/CMyFieldDb/CMyFieldDb.vue
@@ -31,6 +31,18 @@
           >
           </CDateTime>
         </div>
+        <div v-else-if="type === tools.FieldType.onlydate">
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :value.sync="myvalue"
+            :readonly="false"
+            :dense="true"
+            :canEdit="canEdit"
+            view="date"
+          >
+          </CDateTime>
+        </div>
         <div v-else :class="mycl">
           <div v-if="type === tools.FieldType.binary">
             <CMyChipList
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.ts b/src/components/CMyPopupEdit/CMyPopupEdit.ts
index 0eec5d4..8910eaf 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -6,6 +6,7 @@ import { toolsext } from '@src/store/Modules/toolsext'
 import { IColGridTable } from '../../model'
 import { fieldsTable } from '../../store/Modules/fieldsTable'
 import { CMyChipList } from '../CMyChipList'
+import { CDate } from '../CDate'
 import { CDateTime } from '../CDateTime'
 import { CMyToggleList } from '../CMyToggleList'
 import { CMySelect } from '../CMySelect'
@@ -14,7 +15,7 @@ import { CGallery } from '../CGallery'
 
 @Component({
   name: 'CMyPopupEdit',
-  components: { CMyChipList, CDateTime, CMyToggleList, CMySelect, CMyEditor, CGallery }
+  components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery }
 })
 
 export default class CMyPopupEdit extends Vue {
@@ -27,11 +28,12 @@ export default class CMyPopupEdit extends Vue {
   @Prop({ required: false, default: 'row' }) public view
   @Prop({ required: false, default: '5' }) public minuteinterval
   @Prop({ required: false, default: false }) public disable
+  @Prop({ required: false, default: false }) public visulabel
 
   public myvalue = ''
   public myvalueprec = 'false'
   public countryname = ''
-  public visueditor : boolean = false
+  public visueditor: boolean = false
 
   get tools() {
     return tools
@@ -50,6 +52,14 @@ export default class CMyPopupEdit extends Vue {
     this.$emit('update:row', newval)
   }
 
+  public changevalRec(newval) {
+    console.log('this.row', this.row, 'this.col', this.col, 'newval', newval)
+    console.log('this.row[this.col.name]', this.row[this.col.name])
+    this.row[this.col.name] = newval
+    console.log('changevalRec update:row', newval)
+    this.$emit('update:row', this.row)
+  }
+
   public updatedata() {
     this.mounted()
   }
@@ -161,6 +171,12 @@ export default class CMyPopupEdit extends Vue {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (col.fieldtype === tools.FieldType.onlydate) {
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDate(val)
+      }
     } else if (col.fieldtype === tools.FieldType.boolean) {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else if (col.fieldtype === tools.FieldType.binary) {
@@ -201,10 +217,14 @@ export default class CMyPopupEdit extends Vue {
     }
   }
 
+  public visInNewRec(col) {
+    return !col.notShowInNewRec
+  }
+
   public getclassCol(col) {
     if (col) {
       let mycl = (col.disable || this.isviewfield) ? '' : 'colmodif'
-      mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container' : ''
+      mycl += ((col.fieldtype === tools.FieldType.date) || (col.fieldtype === tools.FieldType.onlydate)) ? ' coldate flex flex-container' : ''
 
       return mycl
     } else {
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index 4507734..ae9ba9e 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -1,30 +1,67 @@
 <template>
   <div :class="getclassCol(col)">
-    <div v-if="col.fieldtype === tools.FieldType.listimages">
-      <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
-                @showandsave="Savedb">
+    <div v-if="visulabel" class="flex">
+      <div v-if="visInNewRec(col)" style="flex-grow: 1;">
+        <div v-if="col.fieldtype === tools.FieldType.string">
+          <q-input v-model="myvalue"
+                   autogrow
+                   @keyup.enter.stop
+                   @input="changevalRec"
+                   autofocus
+                   :label="col.label">
+          </q-input>
+        </div>
+        <div v-if="col.fieldtype === tools.FieldType.date">
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :valueDate="myvalue"
+            :readonly="false"
+            :minuteinterval="minuteinterval"
+            :dense="true"
+            @input="changevalRec"
+            canEdit="true"
+            @savetoclose="SaveValueInt"
+            @show="OpenEdit">
+          </CDateTime>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.number">
+          <q-input v-model="myvalue" type="number"
+                   autofocus
+                   @input="changevalRec"
+                   :label="col.label"
+          >
 
-      </CGallery>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.image">
-      <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
-                @showandsave="Savedb">
-
-      </CGallery>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.nationality">
-      <div>
-        {{myvalue}}
-      </div>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.intcode">
-      <div>
-        {{myvalue}}
+          </q-input>
+        </div>
       </div>
     </div>
     <div v-else>
-      <!-- Edit Value -->
-      <span v-if="col.fieldtype === tools.FieldType.date">
+      <div v-if="col.fieldtype === tools.FieldType.listimages">
+        <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                  @showandsave="Savedb">
+
+        </CGallery>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.image">
+        <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                  @showandsave="Savedb">
+
+        </CGallery>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+        <div>
+          {{ myvalue }}
+        </div>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+        <div>
+          {{ myvalue }}
+        </div>
+      </div>
+      <div v-else>
+        <!-- Edit Value -->
+        <span v-if="col.fieldtype === tools.FieldType.date">
                 <CDateTime
                   :label="col.label"
                   class="cursor-pointer"
@@ -37,174 +74,188 @@
                   @show="OpenEdit">
                 </CDateTime>
             </span>
-      <div v-if="col.fieldtype !== tools.FieldType.date">
-        <div>
-          <div v-if="col.fieldtype === tools.FieldType.binary">
-            <CMyChipList
-              :type="tools.FieldType.binary"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <!-- Show Value -->
-          <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
-            <CMyChipList
-              :type="tools.FieldType.multiselect"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.select">
-            <CMyChipList
-              myclass="text-center"
-              :type="tools.FieldType.select"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.boolean">
-            <q-toggle dark color="green" v-model="myvalue" :label="col.title"
-                      :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
-                      @input="Savedb"></q-toggle>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.html">
-            <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
-
+        <span v-else-if="col.fieldtype === tools.FieldType.onlydate">
+                <CDateTime
+                  :label="col.label"
+                  class="cursor-pointer"
+                  :valueDate="myvalue"
+                  :readonly="false"
+                  :minuteinterval="minuteinterval"
+                  :dense="true"
+                  :canEdit="canEdit"
+                  @savetoclose="SaveValueInt"
+                  @show="OpenEdit"
+                  view="date">
+                </CDateTime>
+            </span>
+        <div v-else>
+          <div>
+            <div v-if="col.fieldtype === tools.FieldType.binary">
+              <CMyChipList
+                :type="tools.FieldType.binary"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
-          </div>
-          <div v-else>
-            {{ visuValByType(myvalue, col, row) }}
-          </div>
-
-          <div v-if="col.fieldtype === tools.FieldType.html">
-
-            <CMyEditor v-if="visueditor" :value.sync="myvalue" :title="col.title" @keyup.enter.stop
-                       @showandsave="Savedb" @annulla="visueditor=false">
-
-            </CMyEditor>
-          </div>
-          <q-popup-edit
-            v-if="canEdit && col.fieldtype !== tools.FieldType.html"
-            v-model="myvalue"
-            :disable="col.disable"
-            :title="col.title"
-            buttons
-            persistent
-            @save="SaveValueInt"
-            @show="OpenEdit">
-
-            <div v-if="col.fieldtype === tools.FieldType.boolean">
-              <q-checkbox v-model="myvalue" :label="col.title">
-              </q-checkbox>
-              {{ visuValByType(myvalue, col, row) }}
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.string">
-              <q-input v-model="myvalue"
-                       autogrow
-                       @keyup.enter.stop
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.password">
-              <q-input v-model="myvalue"
-                       type="password"
-                       @keyup.enter.stop
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.number">
-              <q-input v-model="myvalue" type="number"
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.binary">
-              <CMyToggleList :label="col.title"
-                             :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                             :value.sync="myvalue"
-                             :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-                             :optlab="db_fieldsTable.getLabelByTable(col.jointable)">
-              </CMyToggleList>
+            <!-- Show Value -->
+            <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+              <CMyChipList
+                :type="tools.FieldType.multiselect"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
             <div v-else-if="col.fieldtype === tools.FieldType.select">
-              <CMySelect :label="col.title"
-                         :value.sync="myvalue"
-                         :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-                         :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-                         :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                         :useinput="false">
-              </CMySelect>
+              <CMyChipList
+                myclass="text-center"
+                :type="tools.FieldType.select"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.nationality">
-              <div class="justify-center q-gutter-sm clgutter q-mt-sm">
-                <q-input
-                  v-model="countryname"
-                  :readonly="true"
-                  rounded dense
-                  debounce="1000"
-                >
+            <div v-else-if="col.fieldtype === tools.FieldType.boolean">
+              <q-toggle dark color="green" v-model="myvalue" :label="col.title"
+                        :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
+                        @input="Savedb"></q-toggle>
+            </div>
+            <div v-else-if="col.fieldtype === tools.FieldType.html">
+              <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
 
-                  <template v-slot:prepend>
-                    <div style="font-size: 1rem;">
-                      <vue-country-code
-                        :defaultCountry="myvalue"
-                        :disabledFetchingCountry="true"
-                        @onSelect="selectcountry"
-                        :preferredCountries="tools.getprefCountries"
-                        :dropdownOptions="{ disabledDialCode: true }">
-
-                      </vue-country-code>
-                    </div>
-                  </template>
-                </q-input>
-                <div style="height: 180px;">
-
-                </div>
               </div>
             </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.intcode">
-
-              <vue-tel-input
-                @country-changed="intcode_change"
-                v-model="myvalue"
-                :placeholder="$t('reg.cell')"
-                :enabledCountryCode="true"
-                inputClasses="clCell"
-                wrapperClasses="clCellCode">
-              </vue-tel-input>
-
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
-              <div>join: {{col.jointable}}</div>
-
-              <q-select
-                v-model="myvalue"
-                rounded
-                outlined
-                multiple
-                dense
-                options-dense
-                :display-value="db_fieldsTable.getTitleByTable(col.jointable)"
-                emit-value
-                map-options
-                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                :option-label="db_fieldsTable.getLabelByTable(col.jointable)"
-                :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
-                style="min-width: 150px"
-                @input="changeCol">
-
-              </q-select>
+            <div v-else>
+              {{ visuValByType(myvalue, col, row) }}
             </div>
 
-          </q-popup-edit>
+            <div v-if="col.fieldtype === tools.FieldType.html">
+
+              <CMyEditor v-if="visueditor" :value.sync="myvalue" :title="col.title" @keyup.enter.stop
+                         @showandsave="Savedb" @annulla="visueditor=false">
+
+              </CMyEditor>
+            </div>
+            <q-popup-edit
+              v-if="canEdit && col.fieldtype !== tools.FieldType.html"
+              v-model="myvalue"
+              :disable="col.disable"
+              :title="col.title"
+              buttons
+              persistent
+              @save="SaveValueInt"
+              @show="OpenEdit">
+
+              <div v-if="col.fieldtype === tools.FieldType.boolean">
+                <q-checkbox v-model="myvalue" :label="col.title">
+                </q-checkbox>
+                {{ visuValByType(myvalue, col, row) }}
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.string">
+                <q-input v-model="myvalue"
+                         autogrow
+                         @keyup.enter.stop
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.password">
+                <q-input v-model="myvalue"
+                         type="password"
+                         @keyup.enter.stop
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.number">
+                <q-input v-model="myvalue" type="number"
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.binary">
+                <CMyToggleList :label="col.title"
+                               :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                               :value.sync="myvalue"
+                               :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                               :optlab="db_fieldsTable.getLabelByTable(col.jointable)">
+                </CMyToggleList>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.select">
+                <CMySelect :label="col.title"
+                           :value.sync="myvalue"
+                           :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                           :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                           :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                           :useinput="false">
+                </CMySelect>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                  <q-input
+                    v-model="countryname"
+                    :readonly="true"
+                    rounded dense
+                    debounce="1000"
+                  >
+
+                    <template v-slot:prepend>
+                      <div style="font-size: 1rem;">
+                        <vue-country-code
+                          :defaultCountry="myvalue"
+                          :disabledFetchingCountry="true"
+                          @onSelect="selectcountry"
+                          :preferredCountries="tools.getprefCountries"
+                          :dropdownOptions="{ disabledDialCode: true }">
+
+                        </vue-country-code>
+                      </div>
+                    </template>
+                  </q-input>
+                  <div style="height: 180px;">
+
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                <vue-tel-input
+                  @country-changed="intcode_change"
+                  v-model="myvalue"
+                  :placeholder="$t('reg.cell')"
+                  :enabledCountryCode="true"
+                  inputClasses="clCell"
+                  wrapperClasses="clCellCode">
+                </vue-tel-input>
+
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+                <div>join: {{ col.jointable }}</div>
+
+                <q-select
+                  v-model="myvalue"
+                  rounded
+                  outlined
+                  multiple
+                  dense
+                  options-dense
+                  :display-value="db_fieldsTable.getTitleByTable(col.jointable)"
+                  emit-value
+                  map-options
+                  :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                  :option-label="db_fieldsTable.getLabelByTable(col.jointable)"
+                  :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
+                  style="min-width: 150px"
+                  @input="changeCol">
+
+                </q-select>
+              </div>
+            </q-popup-edit>
+          </div>
         </div>
       </div>
     </div>
@@ -215,5 +266,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './CMyPopupEdit.scss';
+@import './CMyPopupEdit.scss';
 </style>
diff --git a/src/components/CMyToggleList/CMyToggleList.ts b/src/components/CMyToggleList/CMyToggleList.ts
index 8f77408..0366727 100755
--- a/src/components/CMyToggleList/CMyToggleList.ts
+++ b/src/components/CMyToggleList/CMyToggleList.ts
@@ -41,6 +41,7 @@ export default class CMyToggleList extends Vue {
   }
 
   public mounted() {
+    console.log('mounted')
     this.myarrvalues = []
 
     // console.log('value', this.value)
@@ -50,11 +51,28 @@ export default class CMyToggleList extends Vue {
     if (this.isarray) {
       // console.table(this.options)
       this.options.forEach((rec) => {
-        console.log('rec: ', rec)
+        console.log('rec: ', rec, 'optval', this.optval, 'optlab', this.optlab)
         const mydata = {
-          label: this.$t(rec[this.optlab]),
+          label: '',
           value: rec[this.optval],
-          valbool: this.value.includes(rec[this.optval])
+          valbool: false
+        }
+
+        const lab = rec[`${this.optlab}`]
+        console.log('lab', lab)
+
+        if (tools.isObject(this.optlab)) {
+          const arr = this.options.filter((myrec) => myrec[this.optval] === mydata.value).map(this.optlab)
+          if (arr) {
+            // @ts-ignore
+            mydata.label = arr[0]
+          }
+        } else {
+          mydata.label = this.$t(rec[this.optlab])
+        }
+
+        if (this.value) {
+          mydata.valbool = this.value.includes(rec[this.optval])
         }
         console.log('mydata ', mydata)
         this.myarrvalues.push(mydata)
diff --git a/src/components/CProgress/CProgress.scss b/src/components/CProgress/CProgress.scss
index 6141abf..13fb143 100755
--- a/src/components/CProgress/CProgress.scss
+++ b/src/components/CProgress/CProgress.scss
@@ -12,9 +12,23 @@ $heightBtn: 100%;
 
 .cpr-progrbar-item {
   //height: 10px
-  margin-top: 11px;
-  margin-bottom: 11px;
-  height:15px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  height:10px;
+}
+
+@media (max-width: 600px) {
+  .cpr-progrbar-item {
+    //height: 10px
+    margin-top: 6px;
+    margin-bottom: 6px;
+    height: 8px;
+  }
+
+  .progress-item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 }
 
 .cpr-slider-item {
diff --git a/src/components/CProgress/CProgress.ts b/src/components/CProgress/CProgress.ts
index fa736b8..6a5e2d7 100755
--- a/src/components/CProgress/CProgress.ts
+++ b/src/components/CProgress/CProgress.ts
@@ -40,7 +40,7 @@ export default class CProgress extends Vue {
 
   get getdescr() {
     if (!!this.descr) {
-      return this.descr + ' : '
+      return this.descr + ': '
     }
   }
 
diff --git a/src/components/CShareWithUs/CShareWithUs.ts b/src/components/CShareWithUs/CShareWithUs.ts
index 0bce41c..123b7bf 100755
--- a/src/components/CShareWithUs/CShareWithUs.ts
+++ b/src/components/CShareWithUs/CShareWithUs.ts
@@ -48,7 +48,8 @@ export default class CShareWithUs extends MixinBase {
       filter: '',
       filterand: '',
       sortBy: myobj,
-      descending
+      descending,
+      userId: UserStore.state.my._id
     }
 
     console.log('myload', params)
diff --git a/src/components/index.ts b/src/components/index.ts
index 1a50c34..4e7c460 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,6 +16,7 @@ export * from './CMyPopupEdit'
 export * from './CMyToggleList'
 export * from './CMyChipList'
 export * from './CMyEditor'
+export * from './CInput'
 export * from './CMyFieldDb'
 export * from './CMyTeacher'
 export * from './CImgText'
@@ -64,4 +65,5 @@ export * from './CECommerce'
 export * from './CSingleCart'
 export * from './CMyCart'
 export * from './CShareWithUs'
+export * from './CHours'
 export * from '../views/ecommerce/'
diff --git a/src/components/projects/SingleProject/SingleProject.ts b/src/components/projects/SingleProject/SingleProject.ts
index 6a11010..8a02d5c 100755
--- a/src/components/projects/SingleProject/SingleProject.ts
+++ b/src/components/projects/SingleProject/SingleProject.ts
@@ -260,12 +260,12 @@ export default class SingleProject extends Vue {
       this.$emit('deselectAllRowstodo', null, false)
       this.$emit('deselectAllRowsproj', this.itemproject, true)
 
-      if (!this.sel) {
-        this.selectRiga()
-      } else {
-        this.$emit('deselectAllRowsproj', null, false, false, true)
-        this.deselectRiga()
-      }
+      // if (!this.sel) {
+      this.selectRiga()
+      // } else {
+      //   this.$emit('deselectAllRowsproj', null, false, false, true)
+      //   this.deselectRiga()
+      // }
     }
   }
 
diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts
index d58f927..0e086f8 100755
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -229,12 +229,12 @@ export default class SingleTodo extends Vue {
       this.$emit('deselectAllRowsproj', null, false, false)
       this.$emit('deselectAllRowstodo', this.itemtodo, true)
 
-      if (!this.sel) {
-        this.selectRiga()
-      } else {
-        this.$emit('deselectAllRowsproj', null, false, false, true)
-        this.deselectRiga()
-      }
+      // if (!this.sel) {
+      this.selectRiga()
+      // } else {
+      //   this.$emit('deselectAllRowsproj', null, false, false, true)
+      //   this.deselectRiga()
+      // }
     }
   }
 
diff --git a/src/mixins/mixin-base.ts b/src/mixins/mixin-base.ts
index 7ed67e1..b1bba6d 100755
--- a/src/mixins/mixin-base.ts
+++ b/src/mixins/mixin-base.ts
@@ -42,9 +42,9 @@ export default class MixinBase extends MixinMetaTags {
     return shared_consts
   }
 
-  public getValDb(keystr, serv, def?, table?, subkey?, id?) {
+  public getValDb(keystr, serv, def?, table?, subkey?, id?, idmain?) {
 
-    return tools.getValDb(keystr, serv, def, table, subkey, id)
+    return tools.getValDb(keystr, serv, def, table, subkey, id, idmain)
   }
 
   public getValDbLang(keystr, serv, def?, table?, subkey?) {
@@ -61,7 +61,7 @@ export default class MixinBase extends MixinMetaTags {
     if (table === 'users') {
       const myid = UserStore.state.my._id
 
-      let myfield = {}
+      const myfield = {}
 
       if (key === 'profile') {
         UserStore.state.my.profile[subkey] = value
@@ -84,6 +84,25 @@ export default class MixinBase extends MixinMetaTags {
         fieldsvalue: myfield
       }
 
+    } else if (table === 'todos') {
+
+      const myfield = {}
+
+      // Save to the DB:
+      if (subkey) {
+        myfield[key + '.' + subkey] = value
+      } else {
+        myfield[key] = value
+      }
+
+      // console.log('myfield', myfield)
+
+      mydatatosave = {
+        id,
+        table,
+        fieldsvalue: myfield
+      }
+
     } else if (table === 'settings') {
       GlobalStore.mutations.setValueSettingsByKey({ key, value, serv })
 
@@ -95,7 +114,7 @@ export default class MixinBase extends MixinMetaTags {
           type
         }
         myrec.serv = serv
-        if (myrec.type === tools.FieldType.date)
+        if ((myrec.type === tools.FieldType.date) || (myrec.type === tools.FieldType.onlydate))
           myrec.value_date = value
         else if (myrec.type === tools.FieldType.number)
           myrec.value_num = value
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index 22243aa..30b4c7a 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -52,6 +52,13 @@ export interface ITeachUname {
   username?: string
 }
 
+export interface IResp {
+  _id?: string
+  username?: string
+  name?: string
+  surname?: string
+}
+
 export interface IMyPage {
   _id?: string
   author_username?: string
@@ -183,6 +190,8 @@ export interface IGlobalState {
   departments: IDepartment[],
   sharewithus: IShareWithUs[],
   groups: IGroup[],
+  resps: IResp[],
+  workers: IResp[],
   autoplaydisc: number
 }
 
@@ -366,6 +375,14 @@ export interface IParamsQuery {
   filterand: string
   sortBy: any
   descending: number
+  userId: string
+  codeId?: string
+  lk_tab?: string,
+  lk_LF?: string,
+  lk_FF?: string,
+  lk_as?: string,
+  lk_proj?: string,
+  lk_col2?: string,
 }
 
 export interface IColGridTable {
@@ -388,6 +405,7 @@ export interface IColGridTable {
   jointable?: string
   resultjoin?: string[]
   visuonlyEditVal?: boolean
+  notShowInNewRec?: boolean
 }
 
 export interface ITableRec {
@@ -404,6 +422,8 @@ export interface ITableRec {
 export interface IFilter {
   label: string
   value: string
+  hide?: boolean
+  default?: boolean
 }
 
 export interface IDataPass {
diff --git a/src/model/Todos.ts b/src/model/Todos.ts
index 990a712..e545f1d 100755
--- a/src/model/Todos.ts
+++ b/src/model/Todos.ts
@@ -57,3 +57,14 @@ export interface ITodosState {
   insidePending: boolean
   visuLastCompleted: number
 }
+
+export interface IHours {
+  _id?: any,
+  userId?: string
+  descr?: string,
+  todoId?: string,
+  date?: Date,
+  time_start: number
+  time_end: number
+  hours: number
+}
diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js
index ea209e7..3551f8c 100755
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -417,6 +417,8 @@ const msg_it = {
       non_verificato: "Non Verificato",
       forgetpassword: "Password dimenticata?",
       modificapassword: "Modifica Password",
+      resplist: 'Possibile Responsabile',
+      workerslist: 'Lavoratore Attivo',
       resp: "Responsabile",
       viceResp: "Vice Rrsponsabile",
       userslist: "Lista Persone",
@@ -501,6 +503,8 @@ const msg_it = {
       completed_at: 'Data Completamento',
       expiring_at: 'Data Scadenza',
       phase: 'Fase',
+      assigned_to_userId: 'Assegnato a',
+      workers: 'Partecipanti Attivi'
     },
     notification: {
       status: 'Stato',
@@ -530,7 +534,7 @@ const msg_it = {
       hoursworked: 'Ore Lavorate',
       begin_development: 'Inizio Sviluppo',
       begin_test: 'Inizio Test',
-      progresstask: 'Progressione',
+      progresstask: 'Progr',
       actualphase: 'Fase Attuale',
       hoursweeky_plannedtowork: 'Ore settimanali previste',
       endwork_estimate: 'Data fine lavori stimata',
@@ -539,7 +543,9 @@ const msg_it = {
       totalphases: 'Totale Fasi',
       themecolor: 'Tema Colore',
       themebgcolor: 'Tema Colore Sfondo',
-      group: 'Gruppo'
+      group: 'Gruppo',
+      respUsername: 'Responsabile',
+      viceRespUsername: 'Vice Responsabile'
     },
     where: {
       code: 'Id',
diff --git a/src/store/Modules/GlobalStore.ts b/src/store/Modules/GlobalStore.ts
index 0d96904..4daf0ca 100755
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -84,6 +84,8 @@ const state: IGlobalState = {
   calzoom: [],
   producers: [],
   groups: [],
+  resps: [],
+  workers: [],
   storehouses: [],
   departments: [],
   sharewithus: []
@@ -208,6 +210,10 @@ namespace Getters {
       return GlobalStore.state.storehouses
     else if (table === 'groups')
       return GlobalStore.state.groups
+    else if (table === 'resps')
+      return GlobalStore.state.resps
+    else if (table === 'workers')
+      return GlobalStore.state.workers
     else if (table === 'departments')
       return GlobalStore.state.departments
     else if (table === 'sharewithus')
@@ -239,7 +245,7 @@ namespace Getters {
     const myrec = getters.getrecSettingsByKey(key, serv)
 
     if (!!myrec) {
-      if (myrec.type === tools.FieldType.date)
+      if ((myrec.type === tools.FieldType.date) || (myrec.type === tools.FieldType.onlydate))
         return myrec.value_date
       else if (myrec.type === tools.FieldType.number)
         return myrec.value_num
@@ -431,7 +437,7 @@ namespace Mutations {
       myrec = mystate.settings.find((rec) => rec.key === key)
 
     if (!!myrec) {
-      if (myrec.type === tools.FieldType.date)
+      if ((myrec.type === tools.FieldType.date) || (myrec.type === tools.FieldType.onlydate))
         myrec.value_date = value
       else if (myrec.type === tools.FieldType.number)
         myrec.value_num = value
@@ -1098,6 +1104,8 @@ namespace Actions {
           GlobalStore.state.producers = (res.data.producers) ? [...res.data.producers] : []
           GlobalStore.state.storehouses = (res.data.storehouses) ? [...res.data.storehouses] : []
           GlobalStore.state.groups = (res.data.groups) ? [...res.data.groups] : []
+          GlobalStore.state.resps = (res.data.resps) ? [...res.data.resps] : []
+          GlobalStore.state.workers = (res.data.workers) ? [...res.data.workers] : []
           GlobalStore.state.departments = (res.data.departments) ? [...res.data.departments] : []
           // console.log('res.data.cart', res.data.cart)
           if (res.data.cart)
@@ -1197,7 +1205,7 @@ namespace Actions {
             infooter: page.infooter,
             onlyif_logged: page.onlyif_logged,
             level_child: page.l_child,
-            level_parent: page.l_par,
+            level_parent: page.l_par
           })
         }
       }
@@ -1232,9 +1240,16 @@ namespace Actions {
     }
 
     // Sort array
-    static_data.routes = static_data.routes.sort((a, b) => a.order - b.order)
+    static_data.routes = static_data.routes.sort((a, myb) => a.order - myb.order)
 
     if (tools.sito_online(false)) {
+      router.addRoutes([...arrpagesroute, last])
+    } else {
+      router.addRoutes([sito_offline, last])
+      this.$router.replace('/sito_offline')
+    }
+
+    /* if (tools.sito_online(false)) {
       for (const r of arrpagesroute) {
         router.addRoute(r)
       }
@@ -1245,7 +1260,8 @@ namespace Actions {
       router.addRoute(last)
       // router.addRoutes([sito_offline, last])
       this.$router.replace('/sito_offline')
-    }
+    }*/
+
   }
 
   async function sendFile(context, formdata) {
diff --git a/src/store/Modules/Projects.ts b/src/store/Modules/Projects.ts
index 87c562b..dcd416a 100755
--- a/src/store/Modules/Projects.ts
+++ b/src/store/Modules/Projects.ts
@@ -331,6 +331,24 @@ namespace Actions {
     ApiTables.aftercalling(ris, checkPending, nametable)
   }
 
+  async function calculateHoursProjects(context, { projId, actualphase }) {
+
+    let ris = null
+
+    ris = await Api.SendReq('/projects/calc/' + projId + '/' + actualphase, 'GET', null)
+      .then((res) => {
+        if (res.data.rec) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
+          return res.data.rec
+        }
+        return null
+      })
+      .catch((error) => {
+        console.log('error calculateHoursProjects', error)
+      })
+
+    return ris
+  }
+
   async function deleteItem(context, { idobj }) {
     console.log('deleteItem: KEY = ', idobj)
 
@@ -452,6 +470,7 @@ namespace Actions {
 
   export const actions = {
     dbLoad: b.dispatch(dbLoad),
+    calculateHoursProjects: b.dispatch(calculateHoursProjects),
     swapElems: b.dispatch(swapElems),
     deleteItem: b.dispatch(deleteItem),
     dbInsert: b.dispatch(dbInsert),
diff --git a/src/store/Modules/Todos.ts b/src/store/Modules/Todos.ts
index 583e0e4..7ba1fb2 100755
--- a/src/store/Modules/Todos.ts
+++ b/src/store/Modules/Todos.ts
@@ -304,6 +304,24 @@ namespace Actions {
     return ris
   }
 
+  async function calculateHoursTodo(context, { todoId }) {
+
+    let ris = null
+
+    ris = await Api.SendReq('/todos/calc/' + todoId, 'GET', null)
+      .then((res) => {
+        if (res.data.rec) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
+          return res.data.rec
+        }
+        return null
+      })
+      .catch((error) => {
+        console.log('error calculateHoursTodo', error)
+      })
+
+    return ris
+  }
+
   async function deleteItemtodo(context, { cat, idobj }) {
     console.log('deleteItemtodo: KEY = ', idobj)
 
@@ -465,6 +483,7 @@ namespace Actions {
 
   export const actions = {
     dbLoad: b.dispatch(dbLoad),
+    calculateHoursTodo: b.dispatch(calculateHoursTodo),
     swapElems: b.dispatch(swapElems),
     deleteItemtodo: b.dispatch(deleteItemtodo),
     dbInsert: b.dispatch(dbInsert),
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index 6e299e3..d9711a0 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -49,7 +49,8 @@ function AddCol(params: IColGridTable) {
     fieldtype: (params.fieldtype === undefined) ? tools.FieldType.string : params.fieldtype,
     visuonlyEditVal: (params.visuonlyEditVal === undefined) ? false : params.visuonlyEditVal,
     askaction: (params.askaction === undefined) ? '' : params.askaction,
-    jointable: (params.jointable === undefined) ? '' : params.jointable
+    jointable: (params.jointable === undefined) ? '' : params.jointable,
+    notShowInNewRec: (params.notShowInNewRec === undefined) ? false : params.notShowInNewRec
   }
 }
 
@@ -188,6 +189,20 @@ export const colTableShareWithUs = [
   AddCol({ name: 'numshared', label_trans: 'share.numshared', fieldtype: tools.FieldType.number }),
   AddCol({ name: 'rating', label_trans: 'share.rating', fieldtype: tools.FieldType.number }),
 ]
+
+export const colTableHours = [
+  // AddCol({ name: 'userId', label_trans: 'hours.userId' }),
+  // AddCol({ name: 'todoId', label_trans: 'hours.todoId' }),
+  AddCol({ name: 'descr', label_trans: 'hours.descr' }),
+  AddCol({ name: 'username', label_trans: 'reg.username_short', notShowInNewRec: true }),
+  AddCol({ name: 'date', label_trans: 'hours.date', fieldtype: tools.FieldType.onlydate }),
+  AddCol({ name: 'time_start', label_trans: 'hours.time_start', fieldtype: tools.FieldType.number }),
+  AddCol({ name: 'time_end', label_trans: 'hours.time_end', fieldtype: tools.FieldType.number }),
+  AddCol({ name: 'hours', label_trans: 'hours.hours', fieldtype: tools.FieldType.number }),
+  AddCol(DeleteRec),
+  AddCol(DuplicateRec)
+]
+
 export const colTablegroups = [
   AddCol({ name: 'descr', label_trans: 'share.description' }),
   AddCol({ name: 'resp', label_trans: 'reg.resp' }),
@@ -268,6 +283,14 @@ const colpaymenttype = [
   AddCol(DeleteRec)
 ]
 
+const colworkers = [
+  AddCol({ name: '_id', label_trans: 'others.value' }),
+  AddCol({ name: 'username', label_trans: 'reg.username' }),
+  AddCol({ name: 'name', label_trans: 'reg.name' }),
+  AddCol({ name: 'surname', label_trans: 'reg.surname' }),
+  AddCol(DeleteRec)
+]
+
 const colflotte = [
   AddCol({ name: 'index', label_trans: 'others.value' }),
   AddCol({ name: 'riga', label_trans: 'reg.riga' }),
@@ -639,6 +662,20 @@ export const fieldsTable = {
     AddCol({ name: 'surname', label_trans: 'reg.surname' }),
     AddCol({ name: 'email', label_trans: 'reg.email' }),
     AddCol({ name: 'verified_email', label_trans: 'reg.verified_email', fieldtype: tools.FieldType.boolean }),
+    AddCol({
+      name: 'profile.resplist',
+      field: 'profile',
+      subfield: 'resplist',
+      label_trans: 'reg.resplist',
+      fieldtype: tools.FieldType.boolean
+    }),
+    AddCol({
+      name: 'profile.workerslist',
+      field: 'profile',
+      subfield: 'workerslist',
+      label_trans: 'reg.workerslist',
+      fieldtype: tools.FieldType.boolean
+    }),
     AddCol({ name: 'profile.teleg_id', field: 'profile', subfield: 'teleg_id', label_trans: 'reg.teleg_id' }),
     AddCol({
       name: 'profile.saw_and_accepted',
@@ -793,6 +830,20 @@ export const fieldsTable = {
     AddCol({ name: 'note', label_trans: 'reg.note' }),
     // AddCol({ name: 'aportador_solidario', label_trans: 'reg.aportador_solidario' }),
     AddCol({ name: 'verified_email', label_trans: 'reg.verified_email', fieldtype: tools.FieldType.boolean }),
+    AddCol({
+      name: 'profile.resplist',
+      field: 'profile',
+      subfield: 'resplist',
+      label_trans: 'reg.resplist',
+      fieldtype: tools.FieldType.boolean
+    }),
+    AddCol({
+      name: 'profile.workerslist',
+      field: 'profile',
+      subfield: 'workerslist',
+      label_trans: 'reg.workerslist',
+      fieldtype: tools.FieldType.boolean
+    }),
     AddCol({
       name: 'profile.special_req',
       field: 'profile',
@@ -1012,6 +1063,13 @@ export const fieldsTable = {
       colkey: 'key',
       collabel: 'label'
     },
+    {
+      value: 'workers',
+      label: 'Lavoratori Attivi',
+      columns: colworkers,
+      colkey: '_id',
+      collabel: (rec) => rec.name + ' ' + rec.surname
+    },
     {
       value: 'navi',
       label: 'Navi',
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index a32d615..5e7b935 100755
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -187,7 +187,8 @@ export const tools = {
     image: 2048,
     nationality: 4096,
     intcode: 5000,
-    multioption: 6000
+    multioption: 6000,
+    onlydate: 7000
   },
 
   FieldTypeArr: [
@@ -2148,6 +2149,14 @@ export const tools = {
     return UserStore.state.my.profile.socioresidente
   },
 
+  isResp() {
+    return UserStore.state.my.profile.resplist
+  },
+
+  isWorkers() {
+    return UserStore.state.my.profile.workerslist
+  },
+
   isDepartment() {
     return UserStore.state.isDepartment
   },
@@ -3478,13 +3487,29 @@ export const tools = {
     return splitStr.join(' ')
   },
 
-  getValDb(keystr, serv, def?, table?, subkey?, id?) {
+  getValDb(keystr, serv, def?, table?, subkey?, id?, idmain?) {
     if (table === 'users') {
       if (keystr === 'profile') {
         return UserStore.state.my.profile[subkey]
       } else {
         return UserStore.state.my[keystr]
       }
+    } else if (table === 'todos') {
+      // console.log('id', id, 'idmain', idmain)
+      const indcat = Todos.state.categories.indexOf(idmain)
+      console.log('indcat', indcat)
+      if (indcat >= 0) {
+        const myrec = Todos.state.todos[indcat].find((rec) => rec._id === id)
+        console.log('myrec', myrec)
+        let ris = null
+        if (myrec) {
+          ris = myrec[keystr]
+        }
+        console.log('ris', ris)
+        return ris
+      }
+
+      return ''
     } else {
       const ris = GlobalStore.getters.getValueSettingsByKey(keystr, serv)
 
@@ -4029,6 +4054,54 @@ export const tools = {
 
     }
 
+    return mylist
+  },
+
+  getRespList() {
+
+    // console.log('GlobalStore.state.groups', GlobalStore.state.groups)
+    const mylist = {
+      it: [],
+      es: [],
+      enUs: []
+    }
+
+    let myrec = {}
+
+    for (const myresp of GlobalStore.state.resps) {
+      myrec = {
+        id: myresp._id,
+        label: myresp.name + ' ' + myresp.surname,
+        value: myresp.username
+      }
+      mylist.it.push(myrec)
+
+    }
+
+    return mylist
+  },
+
+  getWorkersList() {
+
+    // console.log('GlobalStore.state.groups', GlobalStore.state.groups)
+    const mylist = {
+      it: [],
+      es: [],
+      enUs: []
+    }
+
+    let myrec = {}
+
+    for (const myresp of GlobalStore.state.workers) {
+      myrec = {
+        id: myresp._id,
+        label: myresp.name + ' ' + myresp.surname,
+        value: myresp.username
+      }
+      mylist.it.push(myrec)
+
+    }
+
     return mylist
   }
 
diff --git a/src/views/projects/proj-list/proj-list.scss b/src/views/projects/proj-list/proj-list.scss
index b0dc147..fbf1a1f 100755
--- a/src/views/projects/proj-list/proj-list.scss
+++ b/src/views/projects/proj-list/proj-list.scss
@@ -9,7 +9,7 @@ $heightBtn: 100%;
 }
 
 
-.flex-container, .flex-container_col{
+.flex-container, .flex-container_col {
   background-color: rgb(250, 250, 250);
   padding: 2px 4px 2px 4px;
   margin: 2px;
@@ -19,10 +19,30 @@ $heightBtn: 100%;
   justify-content: space-between;
 }
 
+.q-tab-panel {
+  padding: 8px;
+}
+
 .flex-container_col {
   flex-direction: column;
 }
 
+@media (max-width: 600px) {
+  .flex-item {
+    padding: 1px;
+    margin: 1px;
+  }
+
+  .flex-container {
+    margin: 0;
+    padding: 0;
+  }
+
+  .q-tab-panel {
+    padding: 4px;
+  }
+
+}
 
 .mycard {
   visibility: hidden;
@@ -38,11 +58,11 @@ $heightBtn: 100%;
   transition: all .4s;
 }
 
-.titlePriority, .titleCompleted{
+.titlePriority, .titleCompleted {
   border-width: 0px 0px 1px 0px;
   border-style: solid;
   border-color: #ccc;
-  color:white;
+  color: white;
 }
 
 .titleCompleted {
@@ -62,7 +82,6 @@ $heightBtn: 100%;
 }
 
 
-
 .myitemdrag-enter, .myitemdrag-leave-active {
   opacity: 0;
 }
@@ -76,8 +95,8 @@ $heightBtn: 100%;
 }
 
 
-.categorytitle{
-  color:blue;
+.categorytitle {
+  color: blue;
   background-color: lightblue;
   font-size: 1.25rem !important;
   font-weight: bold;
@@ -85,7 +104,7 @@ $heightBtn: 100%;
   flex: 1;
 }
 
-.projecttitle{
+.projecttitle {
   color: white;
   // color:blue;
   background-color: rgba(65, 152, 239, 0.6);
@@ -95,20 +114,20 @@ $heightBtn: 100%;
   flex: 1;
 }
 
-.itemdescr{
+.itemdescr {
   font-size: 1rem;
   flex: 1;
 }
 
-.itemstatus{
+.itemstatus {
   flex: 1;
   padding: 2px;
 }
 
-.itemdata{
+.itemdata {
   font-size: 1rem;
   flex: 1;
-  padding: 2px;
+  padding: 1px;
 }
 
 .progress-item {
@@ -126,7 +145,7 @@ $heightBtn: 100%;
   height: 10px;
 }
 
-.flex-icon{
+.flex-icon {
   padding: 3px;
   font-size: 1.5rem;
 }
@@ -155,7 +174,7 @@ $heightBtn: 100%;
   }
 }
 
-.divdrag{
+.divdrag {
   animation: fadeIn 0.2s ease-in 1 forwards;
   min-height: 50px;
   background-color: #9f9f9f;
diff --git a/src/views/projects/proj-list/proj-list.ts b/src/views/projects/proj-list/proj-list.ts
index e69cab0..9421718 100755
--- a/src/views/projects/proj-list/proj-list.ts
+++ b/src/views/projects/proj-list/proj-list.ts
@@ -11,20 +11,20 @@ import { lists } from '../../../store/Modules/lists'
 import * as ApiTables from '../../../store/Modules/ApiTables'
 
 import { GlobalStore, Projects, Todos } from '@store'
-import { UserStore } from '@store'
 
 import { Getter } from 'vuex-class'
 
 import { date, Screen } from 'quasar'
 import { CProgress } from '../../../components/CProgress'
 import { CDate } from '../../../components/CDate'
-import { RouteNames } from '@src/router/route-names'
+import { CMyFieldDb } from '../../../components/CMyFieldDb'
+import { CHours } from '../../../components/CHours'
 
 const namespace: string = 'Projects'
 
 @Component({
 
-  components: { SingleProject, CProgress, CTodo, CDate },
+  components: { SingleProject, CProgress, CTodo, CDate, CMyFieldDb, CHours },
   filters: {
     capitalize(value) {
       if (!value) {
@@ -38,7 +38,7 @@ const namespace: string = 'Projects'
 
 export default class ProjList extends Vue {
 
-  public tabproj: string = 'info'
+  public tabproj: string = 'lista'
 
   get classTitle() {
     let cl = 'flex-item categorytitle shadow-4'
@@ -171,6 +171,7 @@ export default class ProjList extends Vue {
     return Math.round(this.itemselproj.hoursworked / this.itemselproj.hoursplanned * 100)
 
   }
+
   get getCalcHoursLeft() {
 
     if (this.itemselproj.hoursleft <= 0) {
@@ -246,6 +247,7 @@ export default class ProjList extends Vue {
     else
       return ''
   }
+
   public $q: any
   public projbottom: string = ''
   public prova: string = ''
@@ -270,6 +272,8 @@ export default class ProjList extends Vue {
   public selectPhase: any[] = tools.selectPhase[toolsext.getLocale()]
   public selectPrivacy: any[] = tools.selectPrivacy[toolsext.getLocale()]
   public selectGroup: any[] = []
+  public selectResp: any[] = []
+  public selectWorkers: any[] = []
 
   public $refs: {
     singleproject: SingleProject[],
@@ -286,6 +290,7 @@ export default class ProjList extends Vue {
 
   @Watch('$route.name')
   public changename() {
+
     // console.log('tools.getUrlByTipoProj(this.tipoProj)', tools.getUrlByTipoProj(this.tipoProj))
     this.changeparent()
   }
@@ -303,6 +308,45 @@ export default class ProjList extends Vue {
     this.updateclasses()
   }
 
+  @Watch('itemselproj._id')
+  public changeidproj() {
+    this.aggiornastat()
+  }
+
+  @Watch('tabproj')
+  public changetabproj() {
+    this.aggiornastat()
+  }
+
+  @Watch('itemtodosel._id')
+  public changeidtodo() {
+    this.aggiornastat()
+  }
+
+  public aggiornastat() {
+    if (this.tabproj === 'stat') {
+      if (!!this.itemselproj) {
+        Projects.actions.calculateHoursProjects({
+          projId: this.itemselproj._id,
+          actualphase: this.itemselproj.actualphase
+        })
+          .then((rec) => {
+            if (rec) {
+              this.itemselproj.hoursworked = rec.hoursworked
+            }
+          })
+      } else if (!!this.itemtodosel) {
+        Todos.actions.calculateHoursTodo({ todoId: this.itemtodosel._id })
+          .then((rec) => {
+            if (rec) {
+              this.itemtodosel.hoursworked = rec.hoursworked
+            }
+          })
+
+      }
+    }
+  }
+
   public keyDownArea(e) {
     // console.log('keyDownArea')
   }
@@ -386,6 +430,8 @@ export default class ProjList extends Vue {
     }
 
     this.selectGroup = tools.getGroupList()[toolsext.getLocale()]
+    this.selectResp = tools.getRespList()[toolsext.getLocale()]
+    this.selectWorkers = tools.getWorkersList()[toolsext.getLocale()]
 
     console.log('this.selectGroup', this.selectGroup)
 
@@ -518,6 +564,7 @@ export default class ProjList extends Vue {
   public setidsel(id: string) {
     this.idsel = id
     this.whatisSel = tools.WHAT_PROJECT
+    this.itemtodosel = null
     this.itemselproj = Projects.getters.getRecordById(this.idsel)
     if ((this.itemselproj === undefined || this.itemselproj === null))
       this.whatisSel = tools.WHAT_NOTHING
@@ -526,12 +573,12 @@ export default class ProjList extends Vue {
 
     this.checkiftoenable()
   }
+
   public setitemsel(item: ITodo) {
+    this.itemselproj = null
     this.itemtodosel = item
     if (item !== null)
       this.whatisSel = tools.WHAT_TODO
-    else
-      this.whatisSel = tools.WHAT_NOTHING
 
     this.checkiftoenable()
   }
@@ -576,7 +623,7 @@ export default class ProjList extends Vue {
 
     // @ts-ignore
     for (const i in this.$refs.ctodo.$refs.single) {
-    // @ts-ignore
+      // @ts-ignore
       const contr = this.$refs.ctodo.$refs.single[i] as SingleTodo
       let des = true
       if (check) {
@@ -644,7 +691,7 @@ export default class ProjList extends Vue {
     if (!!this.itemselproj) {
       this.colProgress = tools.getProgressColor(this.itemselproj.progressCalc)
     } else {
-      this.whatisSel = tools.WHAT_NOTHING
+      // this.whatisSel = tools.WHAT_NOTHING
     }
   }
 
@@ -677,8 +724,7 @@ export default class ProjList extends Vue {
     }  // expand_less
     else if (this.itemtodosel.priority === tools.Priority.PRIORITY_NORMAL) {
       iconpriority = 'remove'
-    }
-    else if (this.itemtodosel.priority === tools.Priority.PRIORITY_LOW) {
+    } else if (this.itemtodosel.priority === tools.Priority.PRIORITY_LOW) {
       iconpriority = 'expand_more'
     }  // expand_more
 
diff --git a/src/views/projects/proj-list/proj-list.vue b/src/views/projects/proj-list/proj-list.vue
index 7c8497a..480f9c1 100755
--- a/src/views/projects/proj-list/proj-list.vue
+++ b/src/views/projects/proj-list/proj-list.vue
@@ -1,14 +1,37 @@
 <template>
   <q-page>
     <div class="panel">
-      <q-splitter
+      <q-tabs
+        v-model="tabproj"
+        dense
+        class="bg-blue text-white shadow-2"
+        indicator-color="white"
+        align="center"
+
+      >
+        <q-tab name="lista" icon="fas fa-list-alt" :label="$t('gallery.list')"></q-tab>
+        <q-tab name="info" icon="fas fa-check" :label="$t('dashboard.info')" :disable="!whatisSel"></q-tab>
+        <q-tab v-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" name="ore" icon="fas fa-chart-line" :label="$t('pages.hours')" :disable="!whatisSel"></q-tab>
+        <q-tab name="stat" icon="fas fa-chart-line" :label="$t('pages.status')" :disable="!whatisSel"></q-tab>
+
+      </q-tabs>
+      <!--<q-splitter
         v-model="splitterModel"
         :horizontal="isHorizontal"
         :style="myStyle"
         :limits="[50, 100]"
-      >
-
         <template v-slot:before>
+      >-->
+      <div v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)">
+
+
+      </div>
+      <div v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" name="info">
+      </div>
+
+
+      <q-tab-panels v-model="tabproj" animated>
+        <q-tab-panel name="lista">
           <div>
             <!-- idProjAtt: {{ idProjAtt }} -->
             <div class="divtitlecat clMain">
@@ -129,338 +152,375 @@
             </CTodo>
 
           </div>
-        </template>
-        <template v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)" v-slot:after>
+        </q-tab-panel>
+        <q-tab-panel name="info">
+          <div v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)">
+            <div class="q-pa-xs clMain">
 
-          <q-tabs
-            v-model="tabproj"
-            dense
-            class="bg-blue text-white shadow-2"
-            indicator-color="white"
-            align="center"
-            narrow-indicator
-          >
-            <q-tab name="info" icon="fas fa-check" :label="$t('dashboard.info')"></q-tab>
-            <q-tab name="stat" icon="fas fa-chart-line" :label="$t('pages.status')"></q-tab>
+              <div class="flex-container clMain">
 
-          </q-tabs>
+                <q-icon class="flex-item flex-icon" name="format_align_center"/>
+                <div :class="classTitleProjSel">
+                  {{ itemselproj.descr }}
+                </div>
 
-          <div class="q-pa-xs clMain">
+              </div>
 
-            <div class="flex-container clMain">
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="border_color"/>
+                <div class="flex-item itemdescr">
+                  <q-input
+                    ref="input"
+                    v-model="itemselproj.longdescr"
+                    :label="$t('proj.longdescr')"
+                    outlined
+                    debounce="1000"
+                    autogrow
+                    style="flex: auto">
+                  </q-input>
+                </div>
+              </div>
 
-              <!--<q-rating-->
-              <!--v-model="itemselproj.favourite"-->
-              <!--class="flex-item flex-icon"-->
-              <!--size="2em"-->
-              <!--:max="1"-->
-              <!--color="primary">-->
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="fas fa-sort-amount-up-alt"/>
+                <div class="flex-item itemdescr">
+                  <q-input
+                    v-model="itemselproj.pos"
+                    type="number"
+                    rounded outlined
+                    debounce="500"
+                    style="max-width: 100px;"
+                    :label="$t('dashboard.posizione')"></q-input>
+                </div>
+              </div>
 
-              <!--</q-rating>-->
-              <q-icon class="flex-item flex-icon" name="format_align_center"/>
-              <div :class="classTitleProjSel">
-                {{ itemselproj.descr }}
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="group"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 200px"
+                            :readonly="readonly_PanelPrivacySel"
+                            rounded outlined v-model="itemselproj.groupId" :options="selectGroup"
+                            :label="$t('proj.group')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="border_color"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 200px"
+                            :readonly="readonly_PanelPrivacySel"
+                            rounded outlined v-model="itemselproj.respUsername" :options="selectResp"
+                            :label="$t('proj.respUsername')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="border_color"/>
+                <div class="flex-item itemdescr">
+                  <q-select style="min-width: 200px"
+                            :readonly="readonly_PanelPrivacySel"
+                            rounded outlined v-model="itemselproj.viceRespUsername" :options="selectResp"
+                            :label="$t('proj.viceRespUsername')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="lock"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 200px"
+                            :readonly="readonly_PanelPrivacySel"
+                            rounded outlined v-model="itemselproj.privacyread" :options="selectPrivacy"
+                            :label="$t('proj.privacyread')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+              <div v-if="CanISeeProjectSel" class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="edit"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 200px" :readonly="readonly_PanelPrivacySel" rounded outlined
+                            v-model="itemselproj.privacywrite" :options="selectPrivacy"
+                            :label="$t('proj.privacywrite')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+          <div v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)">
+            <div class="q-pa-xs clMain">
+
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="border_color"/>
+                <div class="flex-item itemdescr">
+                  <q-icon size="md" :name="iconPriority" color="primary"/>
+                  <q-input
+                    ref="input4"
+                    v-model="itemtodosel.descr"
+                    :class="classTitleTodoSel"
+                    :label="$t('proj.longdescr')"
+                    outlined
+                    :readonly="readonly_PanelPrivacy"
+                    debounce="1000"
+                    autogrow
+                    style="flex: auto">
+
+                  </q-input>
+                </div>
+              </div>
+
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="fas fa-sort-amount-up-alt"/>
+                <div class="flex-item itemdescr">
+                  <q-input
+                    v-model="itemtodosel.pos"
+                    type="number"
+                    debounce="500"
+                    rounded outlined
+                    style="max-width: 100px;"
+                    :label="$t('dashboard.posizione')"></q-input>
+                </div>
+              </div>
+
+              <div class="flex-item itemstatus">
+                <q-select style="min-width: 200px"
+                          :readonly="readonly_PanelPrivacy"
+                          rounded outlined v-model="itemtodosel.assigned_to_userId" :options="selectWorkers"
+                          :label="$t('todo.assigned_to_userId')" emit-value map-options>
+                </q-select>
+              </div>
+              <div class="flex-item itemstatus">
+                <CMyFieldDb :title="$t('todo.workers')"
+                            :id="itemtodosel._id"
+                            :idmain="itemtodosel.category"
+                            table="todos"
+                            mykey="assignedToUsers"
+                            :type="tools.FieldType.multiselect"
+                            jointable="workers">
+                </CMyFieldDb>
+              </div>
+
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="done_outline"/>
+                <div class="flex-item itemstatus">
+                  <q-select rounded outlined v-model="itemtodosel.statustodo" :options="selectStatus"
+                            :readonly="readonly_PanelPrivacy"
+                            :label="$t('todo.status')" emit-value map-options
+                            @input="modifyfieldtodo('statustodo')">
+                  </q-select>
+                </div>
               </div>
 
             </div>
-
-
-            <q-tab-panels v-model="tabproj" animated>
-              <q-tab-panel name="info">
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="border_color"/>
-                  <div class="flex-item itemdescr">
-                    <q-input
-                      ref="input"
-                      v-model="itemselproj.longdescr"
-                      :label="$t('proj.longdescr')"
-                      outlined
-                      debounce="1000"
-                      autogrow
-                      style="flex: auto">
-                    </q-input>
-
-                  </div>
-                </div>
-
-                <div v-if="CanISeeProjectSel" class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="fas fa-sort-amount-up-alt"/>
-                  <div class="flex-item itemdescr">
-                    <q-input
-                      v-model="itemselproj.pos"
-                      type="number"
-                      rounded outlined
-                      debounce="500"
-                      style="max-width: 100px;"
-                      :label="$t('dashboard.posizione')"></q-input>
-                  </div>
-                </div>
-
-                <div v-if="CanISeeProjectSel" class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="group"/>
-                  <div class="flex-item itemstatus">
-                    <q-select style="min-width: 200px"
-                              :readonly="readonly_PanelPrivacySel"
-                              rounded outlined v-model="itemselproj.groupId" :options="selectGroup"
-                              :label="$t('proj.group')" emit-value map-options>
-                    </q-select>
-                  </div>
-                </div>
-                <div v-if="CanISeeProjectSel" class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="lock"/>
-                  <div class="flex-item itemstatus">
-                    <q-select style="min-width: 200px"
-                              :readonly="readonly_PanelPrivacySel"
-                              rounded outlined v-model="itemselproj.privacyread" :options="selectPrivacy"
-                              :label="$t('proj.privacyread')" emit-value map-options>
-                    </q-select>
-                  </div>
-                </div>
-                <div v-if="CanISeeProjectSel" class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="edit"/>
-                  <div class="flex-item itemstatus">
-                    <q-select style="min-width: 200px" :readonly="readonly_PanelPrivacySel" rounded outlined
-                              v-model="itemselproj.privacywrite" :options="selectPrivacy"
-                              :label="$t('proj.privacywrite')" emit-value map-options>
-                    </q-select>
-                  </div>
-                </div>
-
-              </q-tab-panel>
-              <q-tab-panel name="stat">
-                <div v-if="CanISeeProjectSel">
-                  <div class="flex-container clMain">
-                    <q-icon class="flex-item flex-icon" name="work_outline"/>
-                    <div class="flex-item itemdescr">
-                      <q-input
-                        ref="input2"
-                        readonly
-                        v-model="itemselproj.hoursworked"
-                        type="number"
-                        rounded outlined
-                        :label="$t('proj.hoursworked')"
-                        debounce="500"></q-input>
-                      <CProgress descr="Fatte" :progressval="getCalcHoursWorked"></CProgress>
-                    </div>
-                  </div>
-                  <div v-if="CanISeeProjectSel" class="flex-item items-center">
-                    <q-icon class="flex-item flex-icon" name="watch_later"/>
-                    <div class="flex-item itemdata content-center q-mx-sm">
-                      <q-input
-                        ref="input3"
-                        type="number"
-                        readonly
-                        v-model="itemselproj.hoursplanned"
-                        rounded outlined
-                        :label="$t('proj.hoursplanned')"
-                        debounce="500">
-
-                      </q-input>
-                      <CProgress :descr="$t('proj.progresstask')"
-                                 :progressval="itemselproj.progressCalc"></CProgress>
-                    </div>
-                  </div>
-                  <div class="flex-container clMain">
-                    <q-icon class="flex-item flex-icon" name="developer_mode"/>
-                    <div class="flex-item itemdata">
-                      <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_development"
-                             @input="itemselproj.begin_development = new Date(arguments[0])"
-                             :label="$t('proj.begin_development')">
-                      </CDate>
-                    </div>
-                    <div style="margin: 10px;"></div>
-                    <div class="flex-item itemdata">
-                      <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_test"
-                             @input="itemselproj.begin_test = new Date(arguments[0])"
-                             :label="$t('proj.begin_test')">
-                      </CDate>
-                    </div>
-                  </div>
-                  <div class="flex-container clMain">
-                    <q-icon class="flex-item flex-icon" name="outlined_flag"/>
-                    <div class="flex-item itemstatus">
-                      <q-select style="min-width: 150px" :readonly="readonly_PanelPrivacySel" rounded outlined
-                                v-model="itemselproj.actualphase"
-                                :options="selectPhase"
-                                :label="$t('proj.actualphase')" emit-value map-options>
-                      </q-select>
-                    </div>
-                    <q-icon class="flex-item flex-icon" name="outlined_flag"/>
-                    <div class="flex-item itemstatus">
-                      <q-select style="min-width: 150px"
-                                :readonly="readonly_PanelPrivacySel" rounded outlined v-model="itemselproj.totalphases"
-                                :options="selectPhase"
-                                :label="$t('proj.totalphases')" emit-value map-options>
-                      </q-select>
-                    </div>
-                  </div>
-
-                  <div class="flex-container clMain">
-                    <q-icon class="flex-item flex-icon" name="watch_later"/>
-                    <div class="flex-item itemdata content-center">
-                      <q-input
-                        :readonly="readonly_PanelPrivacySel"
-                        ref="input3"
-                        type="number"
-                        v-model="itemselproj.hoursweeky_plannedtowork"
-                        rounded outlined
-                        maxlength="2"
-                        :label="$t('proj.hoursweeky_plannedtowork')"
-                        debounce="500">
-
-                      </q-input>
-                      <CProgress :progressval="calcprogressWeekly"></CProgress>
-                    </div>
-                    <q-icon class="flex-item flex-icon" name="developer_mode"/>
-                    <div class="flex-item itemdata">
-                      <CDate color="green-2" :mydate="calcEndWork_Estimate" :readonly="true"
-                             :label="$t('proj.endwork_estimate')">
-                      </CDate>
-                    </div>
-                  </div>
-                </div>
-              </q-tab-panel>
-            </q-tab-panels>
           </div>
+        </q-tab-panel>
+        <q-tab-panel name="ore">
+          <div v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)">
+            <div class="q-pa-xs clMain">
+              <div class="flex-container clMain">
 
-        </template>
-        <template v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" v-slot:after>
-          <q-tabs
-            v-model="tabproj"
-            dense
-            class="bg-blue text-white shadow-2"
-            indicator-color="white"
-            align="center"
-            narrow-indicator
-          >
-            <q-tab name="info" icon="fas fa-check" :label="$t('dashboard.info')"></q-tab>
-            <q-tab name="stat" icon="fas fa-chart-line" :label="$t('pages.status')"></q-tab>
+                <q-icon class="flex-item flex-icon" name="format_align_center"/>
+                <div :class="classTitleProjSel">
+                  {{ itemselproj.descr }}
+                </div>
 
-          </q-tabs>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)">
+            <CHours v-if="!!itemtodosel" :todoId="itemtodosel._id"></CHours>
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="stat">
+          <div v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)">
+            <div class="q-pa-xs clMain">
+              <div class="flex-container clMain">
 
-          <div class="q-pa-xs clMain">
+                <q-icon class="flex-item flex-icon" name="format_align_center"/>
+                <div :class="classTitleProjSel">
+                  {{ itemselproj.descr }}
+                </div>
 
-            <div class="flex-container clMain">
-              <q-icon class="flex-item flex-icon" name="format_align_center"/>
-              <div :class="classTitleProjSel">
-                {{ itemtodosel.descr }}
               </div>
             </div>
 
-            <q-tab-panels v-model="tabproj" animated>
-              <q-tab-panel name="info">
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="border_color"/>
-                  <div class="flex-item itemdescr">
-                    <q-input
-                      ref="input4"
-                      v-model="itemtodosel.descr"
-                      :class="classTitleTodoSel"
-                      :label="$t('proj.longdescr')"
-                      outlined
-                      :readonly="readonly_PanelPrivacy"
-                      debounce="1000"
-                      autogrow>
-
-                    </q-input>
-                    <q-icon size="md" :name="iconPriority" color="primary"/>
-                  </div>
+            <div v-if="CanISeeProjectSel">
+              <div v-if="!!itemselproj">
+                itemselproj._id: {{ itemselproj._id }}
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="work_outline"/>
+                <div class="flex-item itemdescr">
+                  <q-input
+                    ref="input2"
+                    readonly
+                    v-model="itemselproj.hoursworked"
+                    type="number"
+                    rounded outlined
+                    :label="$t('proj.hoursworked')"
+                    debounce="500"></q-input>
+                  <CProgress descr="Fatte" :progressval="getCalcHoursWorked"></CProgress>
                 </div>
+              </div>
+              <div v-if="CanISeeProjectSel" class="flex-item items-center">
+                <q-icon class="flex-item flex-icon" name="watch_later"/>
+                <div class="flex-item itemdata content-center q-mx-sm">
+                  <q-input
+                    ref="input3"
+                    type="number"
+                    readonly
+                    v-model="itemselproj.hoursplanned"
+                    rounded outlined
+                    :label="$t('proj.hoursplanned')"
+                    debounce="500">
 
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="fas fa-sort-amount-up-alt"/>
-                  <div class="flex-item itemdescr">
-                    <q-input
-                      v-model="itemtodosel.pos"
-                      type="number"
-                      debounce="500"
-                      rounded outlined
-                      style="max-width: 100px;"
-                      :label="$t('dashboard.posizione')"></q-input>
-                  </div>
+                  </q-input>
+                  <CProgress :descr="$t('proj.progresstask')"
+                             :progressval="itemselproj.progressCalc"></CProgress>
                 </div>
-
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="done_outline"/>
-                  <div class="flex-item itemstatus">
-                    <q-select rounded outlined v-model="itemtodosel.statustodo" :options="selectStatus"
-                              :readonly="readonly_PanelPrivacy"
-                              :label="$t('todo.status')" emit-value map-options
-                              @input="modifyfieldtodo('statustodo')">
-                    </q-select>
-                  </div>
-                  <q-icon class="flex-item flex-icon" name="outlined_flag"/>
-                  <div class="flex-item itemstatus">
-                    <q-select rounded outlined v-model="itemtodosel.phase" :options="selectPhase"
-                              :readonly="readonly_PanelPrivacy"
-                              :label="$t('todo.phase')" emit-value map-options>
-                    </q-select>
-                  </div>
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="developer_mode"/>
+                <div class="flex-item itemdata">
+                  <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_development"
+                         @input="itemselproj.begin_development = new Date(arguments[0])"
+                         :label="$t('proj.begin_development')">
+                  </CDate>
                 </div>
-              </q-tab-panel>
-              <q-tab-panel name="stat">
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="work_outline"/>
-                  <div class="flex-item itemdescr">
-                    <q-input
-                      ref="input5"
-                      :readonly="readonly_PanelPrivacy"
-                      v-model="itemtodosel.hoursworked"
-                      type="number"
-                      rounded outlined
-                      :label="$t('proj.hoursworked')"
-                      debounce="500">
-
-                    </q-input>
-                    <CProgress descr="" :progressval="getCalcTodoHoursWorked"></CProgress>
-                  </div>
+                <div style="margin: 10px;"></div>
+                <div class="flex-item itemdata">
+                  <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_test"
+                         @input="itemselproj.begin_test = new Date(arguments[0])"
+                         :label="$t('proj.begin_test')">
+                  </CDate>
                 </div>
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="watch_later"/>
-                  <div class="flex-item itemdata content-center">
-                    <q-input
-                      ref="input6"
-                      :readonly="readonly_PanelPrivacy"
-                      type="number"
-                      v-model="itemtodosel.hoursplanned"
-                      rounded outlined
-                      :label="$t('proj.hoursplanned')"
-                      debounce="500">
-
-                    </q-input>
-
-                    <CProgress :descr="$t('proj.progresstask')"
-                               :readonly="readonly_PanelPrivacy"
-                               :progressval="itemtodosel.progress"
-                               :slider="true" @input="itemtodosel.progress = arguments[0]"></CProgress>
-                  </div>
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="outlined_flag"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 150px" :readonly="readonly_PanelPrivacySel" rounded outlined
+                            v-model="itemselproj.actualphase"
+                            :options="selectPhase"
+                            :label="$t('proj.actualphase')" emit-value map-options>
+                  </q-select>
                 </div>
-                <div class="flex-container clMain">
-                  <q-icon class="flex-item flex-icon" name="developer_mode"/>
-                  <div class="flex-item itemdata">
-                    <CDate :mydate="itemtodosel.start_date"
-                           :readonly="readonly_PanelPrivacy"
-                           @input="itemtodosel.start_date = new Date(arguments[0])"
-                           :label="$t('todo.start_date')">
-
-                    </CDate>
-                  </div>
-                  <div style="margin: 10px;"></div>
-                  <q-icon class="flex-item flex-icon" name="event"/>
-                  <div class="flex-item itemdata">
-                    <CDate :readonly="((itemtodosel.statustodo !== tools.Status.COMPLETED) || readonly_PanelPrivacy)"
-                           :mydate="itemtodosel.completed_at"
-                           @input="itemtodosel.completed_at = new Date(arguments[0])"
-                           :label="$t('todo.completed_at')">
-                    </CDate>
-                  </div>
+                <q-icon class="flex-item flex-icon" name="outlined_flag"/>
+                <div class="flex-item itemstatus">
+                  <q-select style="min-width: 150px"
+                            :readonly="readonly_PanelPrivacySel" rounded outlined v-model="itemselproj.totalphases"
+                            :options="selectPhase"
+                            :label="$t('proj.totalphases')" emit-value map-options>
+                  </q-select>
                 </div>
+              </div>
+
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="watch_later"/>
+                <div class="flex-item itemdata content-center">
+                  <q-input
+                    :readonly="readonly_PanelPrivacySel"
+                    ref="input3"
+                    type="number"
+                    v-model="itemselproj.hoursweeky_plannedtowork"
+                    rounded outlined
+                    maxlength="2"
+                    :label="$t('proj.hoursweeky_plannedtowork')"
+                    debounce="500">
+
+                  </q-input>
+                  <CProgress :progressval="calcprogressWeekly"></CProgress>
+                </div>
+                <q-icon class="flex-item flex-icon" name="developer_mode"/>
+                <div class="flex-item itemdata">
+                  <CDate color="green-2" :mydate="calcEndWork_Estimate" :readonly="true"
+                         :label="$t('proj.endwork_estimate')">
+                  </CDate>
+                </div>
+              </div>
+            </div>
 
-              </q-tab-panel>
-            </q-tab-panels>
           </div>
-        </template>
-      </q-splitter>
+          <div v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)">
+            <div class="q-pa-xs clMain">
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="format_align_center"/>
+                <div :class="classTitleProjSel">
+                  {{ itemtodosel.descr }}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              itemtodosel._id: {{ itemtodosel._id }}
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="work_outline"/>
+                <div class="flex-item itemdescr">
+                  <q-input
+                    ref="input5"
+                    :readonly="true"
+                    v-model="itemtodosel.hoursworked"
+                    type="number"
+                    rounded outlined
+                    :label="$t('proj.hoursworked')"
+                    debounce="500">
+
+                  </q-input>
+                  <CProgress descr="" :progressval="getCalcTodoHoursWorked"></CProgress>
+                </div>
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="watch_later"/>
+                <div class="flex-item itemdata content-center">
+                  <q-input
+                    ref="input6"
+                    :readonly="readonly_PanelPrivacy"
+                    type="number"
+                    v-model="itemtodosel.hoursplanned"
+                    rounded outlined
+                    :label="$t('proj.hoursplanned')"
+                    debounce="500">
+
+                  </q-input>
+
+                  <CProgress :descr="$t('proj.progresstask')"
+                             :readonly="readonly_PanelPrivacy"
+                             :progressval="itemtodosel.progress"
+                             :slider="true" @input="itemtodosel.progress = arguments[0]"></CProgress>
+                </div>
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="developer_mode"/>
+                <div class="flex-item itemdata">
+                  <CDate :mydate="itemtodosel.start_date"
+                         :readonly="readonly_PanelPrivacy"
+                         @input="itemtodosel.start_date = new Date(arguments[0])"
+                         :label="$t('todo.start_date')">
+
+                  </CDate>
+                </div>
+                <div style="margin: 10px;"></div>
+                <q-icon class="flex-item flex-icon" name="event"/>
+                <div class="flex-item itemdata">
+                  <CDate :readonly="((itemtodosel.statustodo !== tools.Status.COMPLETED) || readonly_PanelPrivacy)"
+                         :mydate="itemtodosel.completed_at"
+                         @input="itemtodosel.completed_at = new Date(arguments[0])"
+                         :label="$t('todo.completed_at')">
+                  </CDate>
+                </div>
+              </div>
+              <div class="flex-container clMain">
+                <q-icon class="flex-item flex-icon" name="outlined_flag"/>
+                <div class="flex-item itemstatus">
+                  <q-select rounded outlined v-model="itemtodosel.phase" :options="selectPhase"
+                            :readonly="readonly_PanelPrivacy"
+                            :label="$t('todo.phase')" emit-value map-options>
+                  </q-select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
   </q-page>
 </template>