Added CDate component !

src/App.scss

@@ -60,3 +60,16 @@
 .highperc {
   color: green;
 }
+
+
+.hide-if-small {
+  @media (max-width: 600px) {
+    display: none;
+  }
+}
+
+.thiny-if-small {
+  @media (max-width: 600px) {
+    max-width: 22px;
+  }
+}

src/components/CDate/CDate.scss

@@ -38,3 +38,11 @@ $heightBtn: 100%;
   text-align: center;
   //line-height: $heightitem;
 }
+
+.data_string {
+  font-size: 0.85rem;
+  @media (max-width: 600px) {
+    max-width: 22px;
+    // display: none;
+  }
+}

src/components/CDate/CDate.ts

@@ -1,39 +1,58 @@
 import Vue from 'vue'
-import { Component, Emit, Inject, Model, Prop, Provide } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 import { tools } from '@src/store/Modules/tools'
-import * as moment from 'moment'
+
+import { date } from 'quasar'
 
 @Component({
   name: 'CDate'
 })
 
 export default class CDate extends Vue {
-  // ************* IS NOT WORKING WELL ! ************
+  @Prop() public mydate!: Date
-  // @Model('input', {
+  @Prop({ required: false }) public label: string
-  //   default: ''
+  @Prop({ required: false, default: '' }) public data_class!: string
-  // })
-  // public mydate!: Date
-  @Prop() public myhint: string
-  @Model('input', {
-    default: '1999/01/01'
-  })
-  public mydate!: string
 
-  private valueInternal: string = '1988/01/01'
+  public mystyleicon: string = 'font-size: 1.5rem;'
 
-  @Emit('input')
+  @Watch('mydate')
-  public onValueChanged(value: string) {
+  public valchanged(value) {
     this.valueInternal = value
   }
 
-  // get getmydate() {
+  public $refs: {
-  //   console.log('getmydate', this.mydate)
+    datePicker
-  //   return tools.getstrDate(this.mydate)
+  }
-  // }
+  private valueInternal: Date = tools.getDateNull()
-  //
+
-  // public updatedate(mydate) {
+  public created() {
-  //   console.log('updatedate', mydate)
+    this.valueInternal = this.mydate
-  //   this.mydate = mydate
+
-  // }
+    if (this.data_class !== '') {
+      this.mystyleicon = 'font-size: 1rem;'
+    }
+  }
+
+  public changedate(value) {
+    const datavalida = tools.convertstrtoDate(value)
+    if (!!datavalida) {
+      this.valueInternal = datavalida
+      console.log('EMIT: changedate', datavalida)
+      this.$emit('input', this.getDate())
+    } else {
+      console.log('   DATA NON VALIDAAAAAAAAAAAAA ', value, datavalida)
+    }
+    this.$refs.datePicker.hide()
+  }
+
+  get getdatestring() {
+    return tools.getstrDate(this.valueInternal)
+  }
+  get getdateyymmddstring() {
+    return tools.getstrYYMMDDDate(this.valueInternal)
+  }
+  private getDate() {
+    return this.valueInternal
+  }
 
 }

src/components/CDate/CDate.vue

@@ -1,14 +1,13 @@
 <template>
-    <div>
+    <q-input :class="data_class" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
-        <q-input dense v-model="mydate" mask="date" :hint="myhint">
+        <template v-slot:append>
-            <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
+            <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
-            <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
+                <q-popup-proxy ref="datePicker">
-                <!--<q-popup-proxy>-->
+                    <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
-                    <!--<q-date v-model="mydate" today-btn/>-->
+                </q-popup-proxy>
-                <!--</q-popup-proxy>-->
             </q-icon>
+        </template>
     </q-input>
-    </div>
 </template>
 
 <script lang="ts" src="./CDate.ts">

src/components/projects/SingleProject/SingleProject.scss

@@ -208,7 +208,7 @@ $heightdescr: 20px;
 
 .data-item {
   font-size: 0.85rem;
-  max-width: 78px;
+  max-width: 100px;
   @media (max-width: 600px) {
     max-width: 22px;
   }

src/components/projects/SingleProject/SingleProject.ts

@@ -7,12 +7,13 @@ import { tools } from '../../../store/Modules/tools'
 import { IProject } from '../../../model/index'
 
 import { SubMenusProj } from '../SubMenusProj'
+import { CDate } from '../../CDate'
 
 import { date } from 'quasar'
 import { askConfirm } from '../../../classes/routinestd'
 
 @Component({
-  components: { SubMenusProj },
+  components: { SubMenusProj, CDate },
   name: 'SingleProject'
 })
 export default class SingleProject extends Vue {
@@ -20,7 +21,7 @@ export default class SingleProject extends Vue {
   public menuPopupProj: any[] = []
   public classDescr: string = ''
   public classDescrEdit: string = ''
-  public classExpiring: string = 'flex-item data-item shadow-1'
+  public classExpiring: string = 'flex-item data-item shadow-1 hide-if-small'
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public classRow: string = ''
@@ -107,7 +108,7 @@ export default class SingleProject extends Vue {
   }
 
   public watchupdate(field = '') {
-    console.log('watchupdate')
+    console.log('watchupdate', field)
     this.$emit('eventupdateproj', {myitem: this.itemproject, field } )
     this.updateicon()
   }
@@ -124,7 +125,7 @@ export default class SingleProject extends Vue {
     if (this.itemproject.progressCalc > 100)
       this.itemproject.progressCalc = 100
 
-    this.classExpiring = 'flex-item data-item shadow-1'
+    this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
     this.classExpiringEx = ''
 
     this.percentageProgress = this.itemproject.progressCalc

src/components/projects/SingleProject/SingleProject.vue

@@ -37,25 +37,9 @@
 
 
         <div v-if="itemproject.enableExpiring" :class="classExpiring">
-            <span class="data_string">{{tools.getstrDate(itemproject.expiring_at)}}</span>
+            <CDate :mydate="itemproject.expiring_at" @input="itemproject.expiring_at = new Date(arguments[0])"
-            <q-icon name="event" class="cursor-pointer" style="padding: 2px;">
+                   data_class="data_string">
-                <q-popup-proxy>
+            </CDate>
-                    <q-date v-model="itemproject.expiring_at" today-btn/>
-                </q-popup-proxy>
-            </q-icon>
-            <!--<q-icon nametranslate="event" class="cursor-pointer" />-->
-            <!--<q-popup-edit v-model="itemproject.expiring_at"-->
-            <!--title="Edit"-->
-            <!--buttons class="">-->
-            <!--<q-input-->
-            <!--filled-->
-            <!--v-model="itemproject.expiring_at"-->
-            <!--type="date"-->
-            <!--class="myexpired"-->
-            <!--format="DD/MM/YYYY"-->
-            <!--&gt;-->
-            <!--</q-input>-->
-            <!--</q-popup-edit>-->
         </div>
         <div v-if="isProject()" class="flex-item pos-item " @mousedown="clickRiga">
             <q-btn flat
@@ -67,16 +51,8 @@
                 </q-menu>
             </q-btn>
         </div>
-        <!--clButtPopover: {{ clButtPopover }}-->
-        <!--Sel: {{ sel }}-->
-        <!--<div class="flex-item btn-item">-->
-        <!--{{itemproject.expiring_at}}-->
-        <!--</div>-->
-        <!--<div class="flex-item btn-item">-->
-        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemproject._id)"></q-btn>-->
-        <!--</div>-->
-    </div>
 
+    </div>
 </template>
 
 <script lang="ts" src="./SingleProject.ts">

src/components/todos/CTodo/CTodo.vue

@@ -95,8 +95,8 @@
                          v-for="(mytodo, index) in todos_completati(categoryAtt)"
                          :key="mytodo._id" class="myitemdrag">
 
-                        <SingleTodo ref="single" @deleteItemtodo="mydeleteItemtodo(mytodo._id)" @eventupdate="updateitemtodo"
+                        <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
-                                    @deselectAllRows="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEndtodo="onEndtodo"
+                                    @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
                                     :itemtodo='mytodo'/>
 
                         <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->

src/components/todos/SingleTodo/SingleTodo.scss

@@ -208,7 +208,7 @@ $heightdescr: 20px;
 }
 
 .data-item {
-  max-width: 78px;
+  max-width: 100px;
   @media (max-width: 600px) {
     max-width: 22px;
   }

src/components/todos/SingleTodo/SingleTodo.ts

@@ -10,9 +10,10 @@ import { SubMenus } from '../SubMenus'
 
 import { date } from 'quasar'
 import { askConfirm } from '../../../classes/routinestd'
+import { CDate } from '../../CDate'
 
 @Component({
-  components: { SubMenus },
+  components: { SubMenus, CDate },
   name: 'SingleTodo'
 })
 export default class SingleTodo extends Vue {
@@ -22,7 +23,7 @@ export default class SingleTodo extends Vue {
   public classCompleted: string = ''
   public classDescr: string = ''
   public classDescrEdit: string = ''
-  public classExpiring: string = 'flex-item data-item shadow-1'
+  public classExpiring: string = 'flex-item data-item shadow-1 hide-if-small'
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
@@ -66,6 +67,33 @@ export default class SingleTodo extends Vue {
 
   @Watch('itemtodo.descr') public valueChanged5() {
     this.precDescr = this.itemtodo.descr
+    this.watchupdate('descr')
+  }
+
+  @Watch('itemtodo.hoursplanned') public valueChangedhoursplanned() {
+    console.log('itemtodo.hoursplanned', this.itemtodo.hoursplanned)
+    this.watchupdate('hoursplanned')
+  }
+  @Watch('itemtodo.status', { immediate: true, deep: true }) public valueChangedstatus() {
+    console.log('itemtodo.status', this.itemtodo.status)
+    this.watchupdate('status')
+  }
+  @Watch('itemtodo.completed_at') public valueChangedcompleted_at() {
+    console.log('itemtodo.completed_at', this.itemtodo.completed_at)
+    this.watchupdate('completed_at')
+  }
+  @Watch('itemtodo.hoursworked') public valueChangedhoursworked() {
+    console.log('itemtodo.hoursworked', this.itemtodo.hoursworked)
+    this.watchupdate('hoursworked')
+  }
+  @Watch('itemtodo.start_date') public valueChangedstart_date() {
+    this.watchupdate('start_date')
+  }
+  @Watch('itemtodo.assigned_to_userId') public valueChangedend_assigned_to_userId() {
+    this.watchupdate('assigned_to_userId')
+  }
+  @Watch('itemtodo.phase') public valueChangedend_phase() {
+    this.watchupdate('phase')
   }
 
   @Watch('itemtodo.progress') public valueChanged6() {
@@ -114,7 +142,7 @@ export default class SingleTodo extends Vue {
     if (this.itemtodo.progress > 100)
       this.itemtodo.progress = 100
 
-    this.classExpiring = 'flex-item data-item shadow-1'
+    this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
     this.classExpiringEx = ''
     if (this.itemtodo.status === tools.Status.COMPLETED) {
       this.percentageProgress = 100
@@ -236,6 +264,7 @@ export default class SingleTodo extends Vue {
   }
 
   public clickRow() {
+    this.$emit('setitemsel', null)
     this.$emit('setitemsel', this.itemtodo)
     this.clickRiga()
   }
@@ -383,10 +412,6 @@ export default class SingleTodo extends Vue {
       this.itemtodo.status = tools.Status.COMPLETED
     }
 
-    this.updateicon()
-
-    this.updatedata('status')
-
     this.deselectAndExitEdit()
   }
 

src/components/todos/SingleTodo/SingleTodo.vue

@@ -56,25 +56,9 @@
 
 
         <div v-if="itemtodo.enableExpiring" :class="classExpiring">
-            <span class="data_string">{{tools.getstrDate(itemtodo.expiring_at)}}</span>
+            <CDate :mydate="itemtodo.expiring_at" @input="itemtodo.expiring_at = new Date(arguments[0])"
-            <q-icon name="event" class="cursor-pointer" style="padding: 2px;">
+                   data_class="data_string">
-                <q-popup-proxy>
+            </CDate>
-                    <q-date v-model="itemtodo.expiring_at" today-btn/>
-                </q-popup-proxy>
-            </q-icon>
-            <!--<q-icon nametranslate="event" class="cursor-pointer" />-->
-            <!--<q-popup-edit v-model="itemtodo.expiring_at"-->
-            <!--title="Edit"-->
-            <!--buttons class="">-->
-            <!--<q-input-->
-            <!--filled-->
-            <!--v-model="itemtodo.expiring_at"-->
-            <!--type="date"-->
-            <!--class="myexpired"-->
-            <!--format="DD/MM/YYYY"-->
-            <!--&gt;-->
-            <!--</q-input>-->
-            <!--</q-popup-edit>-->
         </div>
         <div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
             <q-btn flat
@@ -87,14 +71,6 @@
 
             </q-btn>
         </div>
-        <!--clButtPopover: {{ clButtPopover }}-->
-        <!--Sel: {{ sel }}-->
-        <!--<div class="flex-item btn-item">-->
-        <!--{{itemtodo.expiring_at}}-->
-        <!--</div>-->
-        <!--<div class="flex-item btn-item">-->
-        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo._id)"></q-btn>-->
-        <!--</div>-->
     </div>
 
 </template>

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -5,6 +5,7 @@ import { GlobalStore } from '@store'
 import { IPost } from '../../../model/index'
 
 import './messagePopover.scss'
+import { tools } from '@src/store/Modules/tools'
 
 @Component({
 })
@@ -27,7 +28,7 @@ export default class MessagePopover extends Vue {
 
   public randomDate(): Date {
     let myval = Math.floor(Math.random() * 10000000000)
-    return new Date(new Date().valueOf() - myval)
+    return new Date(tools.getTimestampsNow() - myval)
   }
 
   public randomAvatarUrl() {

src/model/Todos.ts

@@ -15,6 +15,12 @@ export interface ITodo {
   pos?: number,
   order?: number,
   progress?: number
+  progressCalc?: number
+  phase?: number
+  assigned_to_userId?: string
+  hoursplanned?: number
+  hoursworked?: number
+  start_date?: Date
 }
 
 export interface IParamTodo {

src/statics/i18n.js

@@ -219,7 +219,11 @@ const messages = {
       insertbottom: 'Inserisci il Task in basso',
       edit: 'Descrizione Task:',
       completed: 'Ultimi Completati',
-      usernotdefined: 'Attenzione, occorre essere Loggati per poter aggiungere un Todo'
+      usernotdefined: 'Attenzione, occorre essere Loggati per poter aggiungere un Todo',
+      start_date: 'Data Inizio',
+      status: 'Stato',
+      completed_at: 'Data Completamento',
+      expiring_at: 'Data Scadenza',
     },
     notification: {
       status: 'Stato',
@@ -243,7 +247,7 @@ const messages = {
       hoursworked: 'Ore Lavorate',
       begin_development: 'Inizio Sviluppo',
       begin_test: 'Inizio Test',
-      progresstask: 'Progressione Compiti'
+      progresstask: 'Progressione'
     }
   },
   'es': {
@@ -460,7 +464,11 @@ const messages = {
       insertbottom: 'Ingrese una nueva Tarea abajo',
       edit: 'Descripción Tarea:',
       completed: 'Ultimos Completados',
-      usernotdefined: 'Atención, debes iniciar sesión para agregar una Tarea'
+      usernotdefined: 'Atención, debes iniciar sesión para agregar una Tarea',
+      start_date: 'Fecha inicio',
+      status: 'Estado',
+      completed_at: 'Fecha de finalización',
+      expiring_at: 'Fecha de Caducidad',
     },
     notification: {
       status: 'Estado',
@@ -484,7 +492,7 @@ const messages = {
       hoursworked: 'Horas Trabajadas',
       begin_development: 'Comienzo desarrollo',
       begin_test: 'Comienzo Prueba',
-      progresstask: 'Progresion Tareas'
+      progresstask: 'Progresion'
     }
   },
   'enUs': {
@@ -701,7 +709,11 @@ const messages = {
       insertbottom: 'Insert Task at the bottom',
       edit: 'Task Description:',
       completed: 'Lasts Completed',
-      usernotdefined: 'Attention, you need to be Signed In to add a new Task'
+      usernotdefined: 'Attention, you need to be Signed In to add a new Task',
+      start_date: 'Start Date',
+      status: 'Status',
+      completed_at: 'Completition Date',
+      expiring_at: 'Expiring Date',
     },
     notification: {
       status: 'Status',
@@ -725,7 +737,7 @@ const messages = {
       hoursworked: 'Worked Hours',
       begin_development: 'Start Dev',
       begin_test: 'Start Test',
-      progresstask: 'Todos progression'
+      progresstask: 'Progression'
     }
   },
 };

src/store/Api/Instance.ts

@@ -50,7 +50,7 @@ export const removeAuthHeaders = () => {
 async function Request(type: string, path: string, payload: any): Promise<Types.AxiosSuccess | Types.AxiosError> {
   let ricevuto = false
   try {
-    console.log('Axios Request', path, type)
+    console.log('Axios Request', path, type, payload)
     let response: AxiosResponse
     if (type === 'post' || type === 'put' || type === 'patch') {
       response = await axiosInstance[type](path, payload, {

src/store/Modules/ApiTables.ts

@@ -400,8 +400,9 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
   console.log('miorec', miorec.descr, miorec.id_prev)
 
   if (nametable === 'todos') {
-    if (setmodifiedIfchanged(miorec, myobjsaved, 'status')) {
+    if (setmodifiedIfchanged(miorec, myobjsaved, 'status') && (miorec.status === tools.Status.COMPLETED)) {
-      miorec.completed_at = new Date().getDate()
+      miorec.completed_at = tools.getDateNow()
+      console.log('miorec.completed_at', miorec.completed_at)
     }
   }
 
@@ -411,7 +412,7 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
 
   if (miorec.modified) {
     console.log('    ' + nametable + ' MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB')
-    miorec.modify_at = new Date().getDate()
+    miorec.modify_at = tools.getDateNow()
     miorec.modified = false
 
     // 1) Permit to Update the Views

src/store/Modules/Projects.ts

@@ -46,7 +46,7 @@ function initcat() {
 
 namespace Getters {
   const getRecordEmpty = b.read((state: IProjectsState) => (): IProject => {
-    // const tomorrow = new Date()
+    // const tomorrow = tools.getDateNow()
     // tomorrow.setDate(tomorrow.getDate() + 1)
 
     const obj: IProject = {
@@ -56,11 +56,9 @@ namespace Getters {
       id_parent: '',
       priority: tools.Priority.PRIORITY_NORMAL,
       status: tools.Status.OPENED,
-      created_at: new Date(),
+      created_at: tools.getDateNow(),
-      modify_at: new Date(),
+      modify_at: tools.getDateNow(),
-      completed_at: new Date(),
+      completed_at: tools.getDateNull(),
-      begin_development: new Date(0),
-      begin_test: new Date(0),
       category: '',
       // expiring_at: tomorrow,
       enableExpiring: false,
@@ -71,8 +69,9 @@ namespace Getters {
       hoursplanned: 0,
       live_url: '',
       test_url: '',
-      progressCalc: 0
+      progressCalc: 0,
-
+      begin_development: tools.getDateNull(),
+      begin_test: tools.getDateNull()
     }
 
     return obj

src/store/Modules/Todos.ts

@@ -27,7 +27,7 @@ const state: ITodosState = {
   visuLastCompleted: 10
 }
 
-const fieldtochange: string [] = ['descr', 'status', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress']
+const fieldtochange: string [] = ['descr', 'status', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress', 'phase', 'assigned_to_userId', 'hoursplanned', 'hoursworked', 'start_date', 'completed_at']
 
 const b = storeBuilder.module<ITodosState>('Todos', state)
 const stateGetter = b.state()
@@ -56,26 +56,32 @@ function initcat() {
 namespace Getters {
   const getRecordEmpty = b.read((state: ITodosState) => (): ITodo => {
 
-    const tomorrow = new Date()
+    const tomorrow = tools.getDateNow()
     tomorrow.setDate(tomorrow.getDate() + 1)
 
     const objtodo: ITodo = {
-      // _id: new Date().toISOString(),  // Create NEW
+      // _id: tools.getDateNow().toISOString(),  // Create NEW
       _id: objectId(),
       userId: UserStore.state.userId,
       descr: '',
       priority: tools.Priority.PRIORITY_NORMAL,
       status: tools.Status.OPENED,
-      created_at: new Date(),
+      created_at: tools.getDateNow(),
-      modify_at: new Date(),
+      modify_at: tools.getDateNow(),
-      completed_at: new Date(),
+      completed_at: tools.getDateNull(),
       category: '',
       expiring_at: tomorrow,
       enableExpiring: false,
       id_prev: '',
       pos: 0,
       modified: false,
-      progress: 0
+      progress: 0,
+      progressCalc: 0,
+      phase: 0,
+      assigned_to_userId: '',
+      hoursplanned: 0,
+      hoursworked: 0,
+      start_date: tools.getDateNull(),
     }
     // return this.copy(objtodo)
     return objtodo

src/store/Modules/UserStore.ts

@@ -98,7 +98,7 @@ namespace Mutations {
     }  // ??
 
     resetArrToken(state.tokens)
-    state.tokens.push({ access: 'auth', token: state.x_auth_token, data_login: new Date() })
+    state.tokens.push({ access: 'auth', token: state.x_auth_token, data_login: tools.getDateNow() })
 
     // ++Todo: Settings Users Admin
     if (state.username === 'paoloar77') {
@@ -127,7 +127,7 @@ namespace Mutations {
     if (!state.tokens) {
       state.tokens = []
     }
-    state.tokens.push({ access: 'auth', token: x_auth_token, data_login: new Date() })
+    state.tokens.push({ access: 'auth', token: x_auth_token, data_login: tools.getDateNow() })
   }
 
   function setServerCode(state: IUserState, num: number) {
@@ -328,7 +328,7 @@ namespace Actions {
                 verified_email: false
               })
 
-              const now = new Date()
+              const now = tools.getDateNow()
               // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
               const expirationDate = new Date(now.getTime() * 1000)
               localStorage.setItem(tools.localStorage.lang, state.lang)
@@ -427,7 +427,7 @@ namespace Actions {
               verified_email
             })
 
-            const now = new Date()
+            const now = tools.getDateNow()
             // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
             const expirationDate = new Date(now.getTime() * 1000)
             localStorage.setItem(tools.localStorage.lang, state.lang)
@@ -520,7 +520,7 @@ namespace Actions {
       }
       const expirationDateStr = localStorage.getItem(tools.localStorage.expirationDate)
       const expirationDate = new Date(String(expirationDateStr))
-      const now = new Date()
+      const now = tools.getDateNow()
       if (now >= expirationDate) {
         console.log('!!! Login Expired')
         return false

src/store/Modules/tools.ts

@@ -67,7 +67,69 @@ export const tools = {
     EDIT: 160,
     ADD_PROJECT: 200
   },
+  selectStatus: {
+    it: [
+      {
+        id: 1,
+        label: 'Nessuno',
+        value: 0,  //   Status.NONE
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Aperto',
+        value: 1,  //   Status.OPENED
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Completato',
+        value: 10,   //   Status.COMPLETED
+        icon: 'expand_less'
+      }
+    ],
+    es: [
+      {
+        id: 1,
+        label: 'Ninguno',
+        value: 0,  //   Status.NONE
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Abierto',
+        value: 1,  //   Status.OPENED
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Completado',
+        value: 10,   //   Status.COMPLETED
+        icon: 'expand_less'
+      }
+    ],
+    enUs: [
+      {
+        id: 1,
+        label: 'None',
+        value: 0,  //   Status.NONE
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Opened',
+        value: 1,  //   Status.OPENED
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Completed',
+        value: 10,   //   Status.COMPLETED
+        icon: 'expand_less'
+      }
+    ]
 
+  },
   selectPriority: {
     it: [
       {
@@ -493,6 +555,20 @@ export const tools = {
     return cl + ' titlePriority'
   },
 
+  getStatusListByInd(index) {
+    try {
+      const arr = tools.selectStatus[UserStore.state.lang]
+      for (const rec of arr) {
+        if (rec.value === index) {
+          return rec.label
+        }
+      }
+    } catch (e) {
+      console.log('Error: ', e)
+    }
+    return ''
+  },
+
   getPriorityByInd(index) {
     // console.log('LANG in PRIOR', UserStore.state.lang)
     try {
@@ -985,7 +1061,32 @@ export const tools = {
   },
 
   getstrDate(mytimestamp) {
-    return date.formatDate(mytimestamp, 'DD-MM-YY')
+    console.log('getstrDate', mytimestamp)
+    if (!!mytimestamp)
+      return date.formatDate(mytimestamp, 'DD/MM/YYYY')
+    else
+      return ''
+  },
+  getstrYYMMDDDate(mytimestamp) {
+    return date.formatDate(mytimestamp, 'YYYY-MM-DD')
+  },
+
+  // mystrdate "26.04.2013"
+  convertstrtoDate(mystrdate: string) {
+    if (mystrdate.length < 10) {
+      return null
+    }
+
+    const pattern = /(\d{2})\/(\d{2})\/(\d{4})/
+    const strdate = mystrdate.replace(pattern, '$3-$2-$1')
+    let mydate = null
+    if (date.isValid(strdate)) {
+      mydate = new Date(strdate)
+    } else {
+      return null
+    }
+    console.log('mystrdate', mystrdate, strdate, mydate)
+    return mydate
   },
 
   capitalize(value) {
@@ -994,6 +1095,22 @@ export const tools = {
     }
     value = value.toString()
     return value.charAt(0).toUpperCase() + value.slice(1)
+  },
+
+  getDateNow() {
+    const mydate = new Date()
+    console.log('mydate', mydate, mydate.getDate(), mydate.getUTCDate())
+    return mydate
+  },
+  getDateNull() {
+    const mydate = new Date(0)
+    return mydate
+  },
+  getTimeNow() {
+    return new Date().getTime()
+  },
+  getTimestampsNow() {
+    return new Date().valueOf()
   }
 
 }

src/views/projects/proj-list/proj-list.scss

@@ -1,3 +1,5 @@
+$heightBtn: 100%;
+
 .clMain {
   min-width: 350px;
 }
@@ -88,15 +90,34 @@
   flex: 1;
 }
 
+.flex-item{
+  // background-color: #d5e2eb;
+  padding: 0px;
+  margin: 1px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 0.85rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
 .itemdescr{
   font-size: 1rem;
   flex: 1;
 }
 
+.itemstatus{
+  flex: 1;
+  padding: 2px;
+}
+
 .itemdata{
   font-size: 1rem;
   flex: 1;
-  padding: 4px;
+  padding: 2px;
 }
 
 .progress-item {

src/views/projects/proj-list/proj-list.ts

@@ -14,13 +14,14 @@ import { UserStore } from '@store'
 import { Getter } from 'vuex-class'
 
 import { Screen } from 'quasar'
-import { CProgress } from '@components'
+import { CProgress } from '../../../components/CProgress'
+import { CDate } from '../../../components/CDate'
 
 const namespace: string = 'Projects'
 
 @Component({
 
-  components: { SingleProject, CProgress, CTodo },
+  components: { SingleProject, CProgress, CTodo, CDate },
   filters: {
     capitalize(value) {
       if (!value) {
@@ -50,11 +51,18 @@ export default class ProjList extends Vue {
   public colProgress: string = 'blue'
   public percProgress: string = 'percProgress'
 
+  public selectStatus: [] = tools.selectStatus[UserStore.state.lang]
+
   public $refs: {
     singleproject: SingleProject[],
     ctodo: CTodo
   }
 
+  public watchupdatetodo(field = '') {
+    console.log('watchupdate', field)
+    this.$emit('eventupdate', {myitem: this.itemtodosel, field } )
+  }
+
   get getrouteup() {
     return '/projects/' + this.idProjParentAtt
   }
@@ -245,6 +253,11 @@ export default class ProjList extends Vue {
     this.itemtodosel = item
   }
 
+  public cambiadata(value) {
+    // console.log('*******   cambiadata', value)
+    this.itemtodosel.start_date = new Date(arguments[0])
+  }
+
   public async updateitemproj({ myitem, field }) {
     console.log('calling MODIFY updateitemproj', myitem, field)
 
@@ -268,7 +281,20 @@ export default class ProjList extends Vue {
     for (const i in this.$refs.ctodo.$refs.single) {
     // @ts-ignore
       const contr = this.$refs.ctodo.$refs.single[i] as SingleTodo
-      const des = !check
+      let des = true
+      if (check) {
+        const id = contr.itemtodo._id
+        // Don't deselect the actual clicked!
+        if (onlythis) {
+          des = item._id === id
+        } else {
+          if (!!item) {
+            des = ((check && (item._id !== id)) || (!check))
+          } else {
+            des = !check
+          }
+        }
+      }
       if (des) {
         // @ts-ignore
         contr.deselectAndExitEdit()
@@ -277,7 +303,7 @@ export default class ProjList extends Vue {
   }
 
   public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
-    console.log('deselectAllRowsproj: ', item)
+    // console.log('deselectAllRowsproj: ', item)
 
     for (const i in this.$refs.singleproject) {
 

src/views/projects/proj-list/proj-list.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
     <q-page>
         <div class="panel">
 
@@ -84,7 +84,8 @@
                                     <SingleProject ref="singleproject" @deleteItemproj="mydeleteitemproj(myproj._id)"
                                                    @eventupdateproj="updateitemproj"
                                                    @idsel="setidsel"
-                                                   @deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo" @onEnd="onEndproj"
+                                                   @deselectAllRowsproj="deselectAllRowsproj"
+                                                   @deselectAllRowstodo="deselectAllRowstodo" @onEnd="onEndproj"
                                                    :itemproject='myproj'>
 
                                     </SingleProject>
@@ -94,7 +95,9 @@
                         </div>
                         <q-separator></q-separator>
 
-                        <CTodo ref="ctodo" @setitemsel="setitemsel" :categoryAtt="idProjAtt" title="" backcolor="white" forecolor="black" :viewtaskTop="false" @deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo"
+                        <CTodo ref="ctodo" @setitemsel="setitemsel" :categoryAtt="idProjAtt" title="" backcolor="white"
+                               forecolor="black" :viewtaskTop="false" @deselectAllRowsproj="deselectAllRowsproj"
+                               @deselectAllRowstodo="deselectAllRowstodo"
                         >
                         </CTodo>
 
@@ -108,7 +111,6 @@
                                 {{itemsel.descr}}
                             </div>
                         </div>
-                        <q-separator/>
                         <div class="flex-container clMain">
                             <q-icon class="flex-item flex-icon" name="border_color"/>
                             <div class="flex-item itemdescr">
@@ -153,25 +155,15 @@
                         <div class="flex-container clMain">
                             <q-icon class="flex-item flex-icon" name="developer_mode"/>
                             <div class="flex-item itemdata">
-                                <q-input dense v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
+                                <CDate :mydate="itemsel.begin_development" @input="itemsel.begin_development = new Date(arguments[0])"
-                                    <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
+                                       :label="$t('proj.begin_development')">
-                                    <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
+                                </CDate>
-                                        <q-popup-proxy>
-                                            <q-date v-model="itemsel.begin_development" today-btn/>
-                                        </q-popup-proxy>
-                                    </q-icon>
-                                </q-input>
                             </div>
                             <div style="margin: 10px;"></div>
                             <div class="flex-item itemdata">
-                                <q-input dense v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
+                                <CDate :mydate="itemsel.begin_test" @input="itemsel.begin_test = new Date(arguments[0])"
-                                    <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
+                                       :label="$t('proj.begin_test')">
-                                    <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
+                                </CDate>
-                                        <q-popup-proxy>
-                                            <q-date v-model="itemsel.begin_test" today-btn/>
-                                        </q-popup-proxy>
-                                    </q-icon>
-                                </q-input>
                             </div>
                         </div>
                     </div>
@@ -186,20 +178,76 @@
                                         v-model="itemtodosel.descr"
                                         :label="$t('proj.longdescr')"
                                         outlined
-                                        debounce="500"
+                                        debounce="1000"
-                                        autogrow
+                                        autogrow>
-                                />
 
+                                </q-input>
                             </div>
                         </div>
                     </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.status" :options="selectStatus"
+                                      :label="$t('todo.status')" emit-value map-options
+                                      @input="watchupdatetodo('status')">
+                            </q-select>
+                        </div>
+                        <q-icon class="flex-item flex-icon" name="event"/>
+                        <div class="flex-item itemdata">
+                            <CDate v-if="itemtodosel.status === tools.Status.COMPLETED"
+                                   :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="work_outline"/>
+                        <div class="flex-item itemdescr">
+                            <q-input
+                                    ref="input"
+                                    v-model="itemtodosel.hoursworked"
+                                    type="number"
+                                    rounded outlined
+                                    :label="$t('proj.hoursworked')"
+                                    debounce="500">
+
+                            </q-input>
+                            <CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>
+                        </div>
+                        <q-icon class="flex-item flex-icon" name="watch_later"/>
+                        <div class="flex-item itemdata content-center">
+                            <q-input
+                                    ref="input"
+                                    type="number"
+                                    v-model="itemtodosel.hoursplanned"
+                                    rounded outlined
+                                    :label="$t('proj.hoursplanned')"
+                                    debounce="500">
+
+                            </q-input>
+                            <CProgress :descr="$t('proj.progresstask')"
+                                       :progressval="itemtodosel.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 :mydate="itemtodosel.start_date" @input="itemtodosel.start_date = new Date(arguments[0])"
+                                   :label="$t('todo.start_date')">
+
+                            </CDate>
+                        </div>
+                        <div style="margin: 10px;"></div>
+                        <div class="flex-item itemdata">
+                        </div>
+                    </div>
                 </template>
             </q-splitter>
         </div>
     </q-page>
-
-
 </template>
+
 <script lang="ts" src="./proj-list.ts">
 </script>
 <style lang="scss" scoped>

tslint.json

@@ -6,6 +6,7 @@
   "jsRules": {},
   "rules": {
     "no-console": false,
+    "curly": [false],
     "object-literal-sort-keys": false,
 //    "no-restricted-syntax": [
 //      "error",