From ac3f6f0ba94e85d4ecaa37ede743eb3343b6b85b Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Fri, 5 Apr 2019 23:59:52 +0200
Subject: [PATCH] fixed: completed_at field

---
 src/components/CDate/CDate.ts               |   1 +
 src/components/CDate/CDate.vue              |   4 +-
 src/globalroutines/util.ts                  |   2 +-
 src/statics/i18n.js                         |   3 +
 src/store/Modules/ApiTables.ts              |  47 +-
 src/store/Modules/Projects.ts               |   8 +-
 src/store/Modules/Todos.ts                  |   6 +-
 src/store/Modules/tools.ts                  | 989 ++++++++++++--------
 src/store/Modules/translation.ts            |  14 +
 src/views/projects/proj-list/proj-list.scss |   2 +-
 src/views/projects/proj-list/proj-list.ts   |  10 +-
 src/views/projects/proj-list/proj-list.vue  |  17 +-
 12 files changed, 643 insertions(+), 460 deletions(-)
 create mode 100644 src/store/Modules/translation.ts

diff --git a/src/components/CDate/CDate.ts b/src/components/CDate/CDate.ts
index 12aefcc..6018484 100644
--- a/src/components/CDate/CDate.ts
+++ b/src/components/CDate/CDate.ts
@@ -12,6 +12,7 @@ export default class CDate extends Vue {
   @Prop() public mydate!: Date
   @Prop({ required: false }) public label: string
   @Prop({ required: false, default: '' }) public data_class!: string
+  @Prop({ required: false, default: false }) public readonly!: boolean
 
   public mystyleicon: string = 'font-size: 1.5rem;'
 
diff --git a/src/components/CDate/CDate.vue b/src/components/CDate/CDate.vue
index 80e9677..637722b 100644
--- a/src/components/CDate/CDate.vue
+++ b/src/components/CDate/CDate.vue
@@ -1,8 +1,8 @@
 <template>
-    <q-input :class="data_class" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
+    <q-input :class="data_class" :readonly="readonly" :disable="readonly" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
         <template v-slot:append>
             <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
-                <q-popup-proxy ref="datePicker">
+                <q-popup-proxy v-if="!readonly" ref="datePicker">
                     <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
                 </q-popup-proxy>
             </q-icon>
diff --git a/src/globalroutines/util.ts b/src/globalroutines/util.ts
index 2ecdd95..dcf670f 100644
--- a/src/globalroutines/util.ts
+++ b/src/globalroutines/util.ts
@@ -1,4 +1,4 @@
-import { UserStore } from '../store/Modules'
+import { UserStore } from '@modules'
 import messages from '../statics/i18n'
 
 function translate(params) {
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index 6afcb3b..2b67309 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -224,6 +224,7 @@ const messages = {
       status: 'Stato',
       completed_at: 'Data Completamento',
       expiring_at: 'Data Scadenza',
+      phase: 'Fase',
     },
     notification: {
       status: 'Stato',
@@ -469,6 +470,7 @@ const messages = {
       status: 'Estado',
       completed_at: 'Fecha de finalización',
       expiring_at: 'Fecha de Caducidad',
+      phase: 'Fase',
     },
     notification: {
       status: 'Estado',
@@ -714,6 +716,7 @@ const messages = {
       status: 'Status',
       completed_at: 'Completition Date',
       expiring_at: 'Expiring Date',
+      phase: 'Phase',
     },
     notification: {
       status: 'Status',
diff --git a/src/store/Modules/ApiTables.ts b/src/store/Modules/ApiTables.ts
index 9db9e5d..85d407e 100644
--- a/src/store/Modules/ApiTables.ts
+++ b/src/store/Modules/ApiTables.ts
@@ -98,7 +98,10 @@ async function dbDeleteItem(call, item) {
 async function Sync_Execute(cmd, tablesync, nametab, method, item: ITodo, id, msg: String) {
   // Send to Server to Sync
 
-  // console.log('Sync_Execute', cmd, tablesync, nametab, method, item.descr, id, msg)
+  console.log('Sync_Execute', cmd, tablesync, nametab, method, id, msg)
+  if (nametab === 'todos') {
+    console.log('   TODO: ', item.descr)
+  }
 
   let cmdSw = cmd
   if ((cmd === DB.CMD_SYNC_NEW) || (cmd === DB.CMD_DELETE)) {
@@ -370,7 +373,7 @@ function setmodifiedIfchanged(recOut, recIn, field) {
   return false
 }
 
-export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
+export async function table_ModifyRecord(nametable, myitem, listFieldsToChange, field) {
   if (myitem === null) {
     return new Promise((resolve, reject) => {
       resolve()
@@ -379,16 +382,13 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
 
   console.log('--> table_ModifyRecord', nametable, myitem.descr)
 
-  const myobjsaved = tools.jsonCopy(myitem)
+  if ((field === 'status') && (nametable === 'todos') && (myitem.status === tools.Status.COMPLETED)) {
+    console.log('AAAAAAAAAAAAAAAAAAAAAAAA  ', myitem.completed_at)
+    myitem.completed_at = tools.getDateNow()
+    console.log('   DOPO ', myitem.completed_at)
+  }
 
-  /*
-    const mymodule = tools.getModulesByTable(nametable)
-    let param2 = ''
-    if (nametable === 'todos') {
-      param2 = myitem.category
-    }
-    const miorec = mymodule.getters.getRecordById(myobjsaved._id, param2)
-  */
+  const myobjsaved = tools.jsonCopy(myitem)
 
   // get record from IndexedDb
   const miorec = await globalroutines(null, 'read', nametable, null, myobjsaved._id)
@@ -397,16 +397,17 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
     return
   }
 
-  console.log('miorec', miorec.descr, miorec.id_prev)
+  console.log(' 0-> ')
 
-  if (nametable === 'todos') {
-    if (setmodifiedIfchanged(miorec, myobjsaved, 'status') && (miorec.status === tools.Status.COMPLETED)) {
-      miorec.completed_at = tools.getDateNow()
-      console.log('miorec.completed_at', miorec.completed_at)
-    }
-  }
+  console.log('myobjsaved.completed_at', myobjsaved.completed_at)
+  console.log('miorec.completed_at', miorec.completed_at)
 
-  fieldtochange.forEach((myfield) => {
+  console.log('miorec', miorec.descr, miorec.id_prev, nametable)
+  console.log('status', miorec.status, myobjsaved.status)
+
+  console.log(' 3-> ')
+
+  listFieldsToChange.forEach((myfield) => {
     setmodifiedIfchanged(miorec, myobjsaved, myfield)
   })
 
@@ -415,15 +416,21 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
     miorec.modify_at = tools.getDateNow()
     miorec.modified = false
 
+    console.log(' 0)  ARR MIOREC PRIMA ', miorec.completed_at, miorec)
+
     // 1) Permit to Update the Views
     tools.notifyarraychanged(miorec)
 
+    console.log(' 1)  MIOREC CALL WRITE: ', miorec.completed_at, miorec)
+
     // 2) Modify on IndexedDb
     return globalroutines(null, 'write', nametable, miorec)
       .then((ris) => {
 
+        console.log(' 2)  MIOREC !: ', miorec.completed_at)
+
         // 3) Modify on the Server (call)
-        Sync_SaveItem(nametable, 'PATCH', miorec)
+        return Sync_SaveItem(nametable, 'PATCH', miorec)
 
       })
   } else {
diff --git a/src/store/Modules/Projects.ts b/src/store/Modules/Projects.ts
index 20f6676..7b3d8a2 100644
--- a/src/store/Modules/Projects.ts
+++ b/src/store/Modules/Projects.ts
@@ -20,7 +20,7 @@ const state: IProjectsState = {
   visuLastCompleted: 10
 }
 
-const fieldtochange: string [] = ['descr', 'longdescr', 'hoursplanned', 'hoursworked', 'id_parent', 'status', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress', 'live_url', 'test_url', 'begin_development', 'begin_test']
+const listFieldsToChange: string [] = ['descr', 'longdescr', 'hoursplanned', 'hoursworked', 'id_parent', 'status', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress', 'live_url', 'test_url', 'begin_development', 'begin_test']
 
 const b = storeBuilder.module<IProjectsState>('Projects', state)
 const stateGetter = b.state()
@@ -302,8 +302,8 @@ namespace Actions {
     return id
   }
 
-  async function modify(context, { myitem, field }) {
-    return await ApiTables.table_ModifyRecord(nametable, myitem, fieldtochange)
+  async function modify(context, { myitem, field } ) {
+    return await ApiTables.table_ModifyRecord(nametable, myitem, listFieldsToChange, field)
   }
 
   async function swapElems(context, itemdragend: IDrag) {
@@ -311,7 +311,7 @@ namespace Actions {
 
     const myarr = Getters.getters.items_dacompletare(itemdragend.id_proj)
 
-    tools.swapGeneralElem(nametable, myarr, itemdragend, fieldtochange)
+    tools.swapGeneralElem(nametable, myarr, itemdragend, listFieldsToChange)
 
   }
 
diff --git a/src/store/Modules/Todos.ts b/src/store/Modules/Todos.ts
index b1a0aa3..6987739 100644
--- a/src/store/Modules/Todos.ts
+++ b/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', 'phase', 'assigned_to_userId', 'hoursplanned', 'hoursworked', 'start_date', 'completed_at']
+const listFieldsToChange: 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()
@@ -356,7 +356,7 @@ namespace Actions {
   }
 
   async function modify(context, { myitem, field }) {
-    return await ApiTables.table_ModifyRecord(nametable, myitem, fieldtochange)
+    return await ApiTables.table_ModifyRecord(nametable, myitem, listFieldsToChange, field)
   }
 
   async function swapElems(context, itemdragend: IDrag) {
@@ -366,7 +366,7 @@ namespace Actions {
     const indcat = state.categories.indexOf(cat)
     const myarr = state.todos[indcat]
 
-    tools.swapGeneralElem(nametable, myarr, itemdragend, fieldtochange)
+    tools.swapGeneralElem(nametable, myarr, itemdragend, listFieldsToChange)
 
   }
 
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 0100f1d..ca3140f 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -1,9 +1,11 @@
 import { Todos, Projects, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
 import { costanti } from './costanti'
+import { translation } from './translation'
 import Quasar, { date } from 'quasar'
 import { IProject, ITodo } from '@src/model'
 import * as ApiTables from '@src/store/Modules/ApiTables'
+import translate from '@src/globalroutines/util'
 
 export interface INotify {
   color?: string | 'primary'
@@ -54,7 +56,7 @@ export const tools = {
   Status: {
     NONE: 0,
     OPENED: 1,
-    COMPLETED: 10,
+    COMPLETED: 10
   },
 
   MenuAction: {
@@ -67,6 +69,75 @@ export const tools = {
     EDIT: 160,
     ADD_PROJECT: 200
   },
+  selectPhase: {
+    it: [
+      {
+        id: 1,
+        label: translation.it.fase + ' 0',
+        value: 0
+      },
+      {
+        id: 2,
+        label: translation.it.fase + ' 1',
+        value: 1
+      },
+      {
+        id: 3,
+        label: translation.it.fase + ' 2',
+        value: 2
+      },
+      {
+        id: 4,
+        label: translation.it.fase + ' 3',
+        value: 3
+      }
+    ],
+    es: [
+      {
+        id: 1,
+        label: translation.es.fase + ' 0',
+        value: 0
+      },
+      {
+        id: 2,
+        label: translation.es.fase + ' 1',
+        value: 1
+      },
+      {
+        id: 3,
+        label: translation.es.fase + ' 2',
+        value: 2
+      },
+      {
+        id: 4,
+        label: translation.es.fase + ' 3',
+        value: 3
+      }
+    ],
+    enUs: [
+      {
+        id: 1,
+        label: translation.enUs.fase + ' 0',
+        value: 0
+      },
+      {
+        id: 2,
+        label: translation.enUs.fase + ' 1',
+        value: 1
+      },
+      {
+        id: 3,
+        label: translation.enUs.fase + ' 2',
+        value: 2
+      },
+      {
+        id: 4,
+        label: translation.enUs.fase + ' 3',
+        value: 3
+      }
+    ]
+
+  },
   selectStatus: {
     it: [
       {
@@ -88,48 +159,51 @@ export const tools = {
         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'
-      }
-    ]
+    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: [
       {
@@ -150,181 +224,189 @@ export const tools = {
         value: 0,
         icon: 'expand_more'
       }],
-    es: [
-      {
-        id: 1,
-        label: 'Alta',
-        value: 2,
-        icon: 'expand_less'
-      },
-      {
-        id: 2,
-        label: 'Normal',
-        value: 1,
-        icon: 'remove'
-      },
-      {
-        id: 3,
-        label: 'Baja',
-        value: 0,
-        icon: 'expand_more'
-      }],
-    enUs: [
-      {
-        id: 1,
-        label: 'High',
-        value: 2,
-        icon: 'expand_less'
-      },
-      {
-        id: 2,
-        label: 'Normal',
-        value: 1,
-        icon: 'remove'
-      },
-      {
-        id: 3,
-        label: 'Low',
-        value: 0,
-        icon: 'expand_more'
-      }],
-    de: [
-      {
-        id: 1,
-        label: 'High',
-        value: 2,
-        icon: 'expand_less'
-      },
-      {
-        id: 2,
-        label: 'Normal',
-        value: 1,
-        icon: 'remove'
-      },
-      {
-        id: 3,
-        label: 'Low',
-        value: 0,
-        icon: 'expand_more'
-      }]
+    es:
+      [
+        {
+          id: 1,
+          label: 'Alta',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Baja',
+          value: 0,
+          icon: 'expand_more'
+        }],
+    enUs:
+      [
+        {
+          id: 1,
+          label: 'High',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Low',
+          value: 0,
+          icon: 'expand_more'
+        }],
+    de:
+      [
+        {
+          id: 1,
+          label: 'High',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Low',
+          value: 0,
+          icon: 'expand_more'
+        }]
 
-  },
+  }
+  ,
 
   INDEX_MENU_DELETE: 4,
 
-  menuPopupTodo: {
-    it: [
-      {
-        id: 10,
-        label: '',
-        value: 120, // PROGRESS_BAR
-        icon: 'rowing',
-        checked: true
-      },
-      {
-        id: 20,
-        label: 'Imposta Priorità',
-        value: 130, // PRIORITY
-        icon: 'rowing',
-        checked: false
-      },
-      {
-        id: 30,
-        label: 'Completato',
-        value: 110, // COMPLETED
-        icon: 'check_circle',
-        checked: true
-      },
-      {
-        id: 40,
-        label: 'Imposta Scadenza',
-        value: 101, // TOGGLE_EXPIRING
-        icon: 'date_range',
-        checked: true
-      },
-      {
-        id: 50,
-        label: 'Elimina',
-        value: 100, // DELETE
-        icon: 'delete',
-        checked: false
-      }
-    ],
-    es: [
-      {
-        id: 10,
-        label: '',
-        value: 120, // PROGRESS_BAR
-        icon: 'rowing',
-        checked: true
-      },
-      {
-        id: 20,
-        label: 'Establecer Prioridad',
-        value: 130, // PRIORITY
-        icon: 'rowing',
-        checked: false
-      },
-      {
-        id: 30,
-        label: 'Completado',
-        value: 110, // COMPLETED
-        icon: 'check_circle',
-        checked: true
-      },
-      {
-        id: 40,
-        label: 'Establecer expiración',
-        value: 101, // TOGGLE_EXPIRING
-        icon: 'date_range',
-        checked: true
-      },
-      {
-        id: 50,
-        label: 'Borrar',
-        value: 100, // DELETE
-        icon: 'delete',
-        checked: false
-      }
-    ],
-    enUs: [
-      {
-        id: 10,
-        label: '',
-        value: 120, // PROGRESS_BAR
-        icon: 'check_circle',
-        checked: true
-      },
-      {
-        id: 20,
-        label: 'Set Priority',
-        value: 130, // PRIORITY
-        icon: 'high_priority',
-        checked: false
-      },
-      {
-        id: 30,
-        label: 'Completed',
-        value: 110, // COMPLETED
-        icon: 'check_circle',
-        checked: true
-      },
-      {
-        id: 40,
-        label: 'Set Expiring',
-        value: 101, // TOGGLE_EXPIRING
-        icon: 'date_range',
-        checked: true
-      },
-      {
-        id: 50,
-        label: 'Delete',
-        value: 100, // DELETE
-        icon: 'trash',
-        checked: false
-      }
-    ]
-  },
+  menuPopupTodo:
+    {
+      it: [
+        {
+          id: 10,
+          label: '',
+          value: 120, // PROGRESS_BAR
+          icon: 'rowing',
+          checked: true
+        },
+        {
+          id: 20,
+          label: 'Imposta Priorità',
+          value: 130, // PRIORITY
+          icon: 'rowing',
+          checked: false
+        },
+        {
+          id: 30,
+          label: 'Completato',
+          value: 110, // COMPLETED
+          icon: 'check_circle',
+          checked: true
+        },
+        {
+          id: 40,
+          label: 'Imposta Scadenza',
+          value: 101, // TOGGLE_EXPIRING
+          icon: 'date_range',
+          checked: true
+        },
+        {
+          id: 50,
+          label: 'Elimina',
+          value: 100, // DELETE
+          icon: 'delete',
+          checked: false
+        }
+      ],
+      es:
+        [
+          {
+            id: 10,
+            label: '',
+            value: 120, // PROGRESS_BAR
+            icon: 'rowing',
+            checked: true
+          },
+          {
+            id: 20,
+            label: 'Establecer Prioridad',
+            value: 130, // PRIORITY
+            icon: 'rowing',
+            checked: false
+          },
+          {
+            id: 30,
+            label: 'Completado',
+            value: 110, // COMPLETED
+            icon: 'check_circle',
+            checked: true
+          },
+          {
+            id: 40,
+            label: 'Establecer expiración',
+            value: 101, // TOGGLE_EXPIRING
+            icon: 'date_range',
+            checked: true
+          },
+          {
+            id: 50,
+            label: 'Borrar',
+            value: 100, // DELETE
+            icon: 'delete',
+            checked: false
+          }
+        ],
+      enUs:
+        [
+          {
+            id: 10,
+            label: '',
+            value: 120, // PROGRESS_BAR
+            icon: 'check_circle',
+            checked: true
+          },
+          {
+            id: 20,
+            label: 'Set Priority',
+            value: 130, // PRIORITY
+            icon: 'high_priority',
+            checked: false
+          },
+          {
+            id: 30,
+            label: 'Completed',
+            value: 110, // COMPLETED
+            icon: 'check_circle',
+            checked: true
+          },
+          {
+            id: 40,
+            label: 'Set Expiring',
+            value: 101, // TOGGLE_EXPIRING
+            icon: 'date_range',
+            checked: true
+          },
+          {
+            id: 50,
+            label: 'Delete',
+            value: 100, // DELETE
+            icon: 'trash',
+            checked: false
+          }
+        ]
+    }
+  ,
 
   menuPopupProj: {
     it: [
@@ -349,51 +431,54 @@ export const tools = {
         checked: false
       }
     ],
-    es: [
-      {
-        id: 10,
-        label: 'Editar',
-        value: 160, // EDIT
-        icon: 'create'
-      },
-      {
-        id: 40,
-        label: 'Establecer expiración',
-        value: 101, // TOGGLE_EXPIRING
-        icon: 'date_range',
-        checked: true
-      },
-      {
-        id: 50,
-        label: 'Borrar',
-        value: 100, // DELETE
-        icon: 'delete',
-        checked: false
-      }
-    ],
-    enUs: [
-      {
-        id: 10,
-        label: 'Edit',
-        value: 160, // EDIT
-        icon: 'create'
-      },
-      {
-        id: 40,
-        label: 'Set Expiring',
-        value: 101, // TOGGLE_EXPIRING
-        icon: 'date_range',
-        checked: true
-      },
-      {
-        id: 50,
-        label: 'Delete',
-        value: 100, // DELETE
-        icon: 'trash',
-        checked: false
-      }
-    ]
-  },
+    es:
+      [
+        {
+          id: 10,
+          label: 'Editar',
+          value: 160, // EDIT
+          icon: 'create'
+        },
+        {
+          id: 40,
+          label: 'Establecer expiración',
+          value: 101, // TOGGLE_EXPIRING
+          icon: 'date_range',
+          checked: true
+        },
+        {
+          id: 50,
+          label: 'Borrar',
+          value: 100, // DELETE
+          icon: 'delete',
+          checked: false
+        }
+      ],
+    enUs:
+      [
+        {
+          id: 10,
+          label: 'Edit',
+          value: 160, // EDIT
+          icon: 'create'
+        },
+        {
+          id: 40,
+          label: 'Set Expiring',
+          value: 101, // TOGGLE_EXPIRING
+          icon: 'date_range',
+          checked: true
+        },
+        {
+          id: 50,
+          label: 'Delete',
+          value: 100, // DELETE
+          icon: 'trash',
+          checked: false
+        }
+      ]
+  }
+  ,
 
   menuPopupConfigTodo: {
     it: [
@@ -404,23 +489,26 @@ export const tools = {
         icon: 'rowing'
       }
     ],
-    es: [
-      {
-        id: 10,
-        label: 'Mostrar Tareas',
-        value: 150,
-        icon: 'rowing'
-      }
-    ],
-    enUs: [
-      {
-        id: 10,
-        label: 'Show Task',
-        value: 150,
-        icon: 'rowing'
-      }
-    ]
-  },
+    es:
+      [
+        {
+          id: 10,
+          label: 'Mostrar Tareas',
+          value: 150,
+          icon: 'rowing'
+        }
+      ],
+    enUs:
+      [
+        {
+          id: 10,
+          label: 'Show Task',
+          value: 150,
+          icon: 'rowing'
+        }
+      ]
+  }
+  ,
 
   menuPopupConfigProject: {
     it: [
@@ -437,35 +525,38 @@ export const tools = {
         icon: 'rowing'
       }
     ],
-    es: [
-      {
-        id: 5,
-        label: 'Nuevo Projecto',
-        value: 200,  // ADD_PROJECT
-        icon: 'next_week'
-      },
-      {
-        id: 10,
-        label: 'Mostrar Tareas',
-        value: 150,
-        icon: 'rowing'
-      }
-    ],
-    enUs: [
-      {
-        id: 5,
-        label: 'New Project',
-        value: 200,  // ADD_PROJECT
-        icon: 'next_week'
-      },
-      {
-        id: 10,
-        label: 'Show Task',
-        value: 150,
-        icon: 'rowing'
-      }
-    ]
-  },
+    es:
+      [
+        {
+          id: 5,
+          label: 'Nuevo Projecto',
+          value: 200,  // ADD_PROJECT
+          icon: 'next_week'
+        },
+        {
+          id: 10,
+          label: 'Mostrar Tareas',
+          value: 150,
+          icon: 'rowing'
+        }
+      ],
+    enUs:
+      [
+        {
+          id: 5,
+          label: 'New Project',
+          value: 200,  // ADD_PROJECT
+          icon: 'next_week'
+        },
+        {
+          id: 10,
+          label: 'Show Task',
+          value: 150,
+          icon: 'rowing'
+        }
+      ]
+  }
+  ,
 
   listOptionShowTask: {
     it: [
@@ -491,53 +582,56 @@ export const tools = {
         checked: true
       }
     ],
-    es: [
-      {
-        id: 10,
-        label: 'Mostrar los ultimos N completados',
-        value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
-        icon: 'rowing',
-        checked: true
-      },
-      {
-        id: 20,
-        label: 'Tareas para completar',
-        value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
-        icon: 'rowing',
-        checked: false
-      },
-      {
-        id: 30,
-        label: 'Todos las Tareas',
-        value: costanti.ShowTypeTask.SHOW_ALL,
-        icon: 'check_circle',
-        checked: true
-      }
-    ],
-    enUs: [
-      {
-        id: 10,
-        label: 'Show last N Completed',
-        value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
-        icon: 'rowing',
-        checked: true
-      },
-      {
-        id: 20,
-        label: 'Task to complete',
-        value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
-        icon: 'rowing',
-        checked: false
-      },
-      {
-        id: 30,
-        label: 'All Tasks',
-        value: costanti.ShowTypeTask.SHOW_ALL,
-        icon: 'check_circle',
-        checked: true
-      }
-    ]
-  },
+    es:
+      [
+        {
+          id: 10,
+          label: 'Mostrar los ultimos N completados',
+          value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
+          icon: 'rowing',
+          checked: true
+        },
+        {
+          id: 20,
+          label: 'Tareas para completar',
+          value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
+          icon: 'rowing',
+          checked: false
+        },
+        {
+          id: 30,
+          label: 'Todos las Tareas',
+          value: costanti.ShowTypeTask.SHOW_ALL,
+          icon: 'check_circle',
+          checked: true
+        }
+      ],
+    enUs:
+      [
+        {
+          id: 10,
+          label: 'Show last N Completed',
+          value: costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED,
+          icon: 'rowing',
+          checked: true
+        },
+        {
+          id: 20,
+          label: 'Task to complete',
+          value: costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE,
+          icon: 'rowing',
+          checked: false
+        },
+        {
+          id: 30,
+          label: 'All Tasks',
+          value: costanti.ShowTypeTask.SHOW_ALL,
+          icon: 'check_circle',
+          checked: true
+        }
+      ]
+  }
+  ,
 
   getTitlePriority(priority) {
     let cl = ''
@@ -553,7 +647,8 @@ export const tools = {
     }
 
     return cl + ' titlePriority'
-  },
+  }
+  ,
 
   getStatusListByInd(index) {
     try {
@@ -567,7 +662,8 @@ export const tools = {
       console.log('Error: ', e)
     }
     return ''
-  },
+  }
+  ,
 
   getPriorityByInd(index) {
     // console.log('LANG in PRIOR', UserStore.state.lang)
@@ -582,34 +678,46 @@ export const tools = {
       console.log('Error: ', e)
     }
     return ''
-  },
+  }
+  ,
 
   logelem(mystr, elem) {
     console.log(mystr, 'elem [', elem._id, '] ', elem.descr, ' Pr(', tools.getPriorityByInd(elem.priority), ') [', elem.id_prev, '] modif=', elem.modified)
-  },
+  }
+  ,
 
   getelemprojstr(elem) {
     return 'elem [id= ' + elem._id + '] ' + elem.descr + ' [id_prev= ' + elem.id_prev + '] '
-  },
+  }
+  ,
 
-  logga_arrproj(myarr: IProject[]) {
+  logga_arrproj(myarr
+                  :
+                  IProject[]
+  ) {
     let mystr = '\n'
     myarr.forEach((item) => {
       mystr += tools.getelemprojstr(item) + '   '
     })
 
     return mystr
-  },
+  }
+  ,
 
   logelemprj(mystr, elem) {
     console.log(mystr, tools.getelemprojstr(elem))
-  },
+  }
+  ,
 
   getstrelem(elem) {
     return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + tools.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
-  },
+  }
+  ,
 
-  logga_arr(myarr: ITodo[]) {
+  logga_arr(myarr
+              :
+              ITodo[]
+  ) {
     let mystr = '\n'
     myarr.forEach((item) => {
       mystr += '[' + item.pos + '] ' + item.descr + ' Pr(' + tools.getPriorityByInd(item.priority) + ') [' + item.id_prev + '] modif=' + item.modified + '\n'
@@ -617,7 +725,8 @@ export const tools = {
     })
 
     return mystr
-  },
+  }
+  ,
 
   touchmove(scrollable) {
     if (window) {
@@ -628,11 +737,13 @@ export const tools = {
         }
       }, { passive: false })
     }
-  },
+  }
+  ,
 
   jsonCopy(src) {
     return JSON.parse(JSON.stringify(src))
-  },
+  }
+  ,
 
   getItemLS(item) {
     let ris = localStorage.getItem(item)
@@ -641,17 +752,20 @@ export const tools = {
     }
 
     return ris
-  },
+  }
+  ,
 
   notifyarraychanged(array) {
     if (array.length > 0) {
       array.splice(array.length - 1, 1, array[array.length - 1])
     }
-  },
+  }
+  ,
 
   isOkIndex(myarr, index) {
     return (index >= 0 && index < myarr.length)
-  },
+  }
+  ,
 
   update_idprev(myarr, indelemchange, indelemId) {
     if (tools.isOkIndex(myarr, indelemchange)) {
@@ -667,9 +781,10 @@ export const tools = {
       }
     }
     return null
-  },
+  }
+  ,
 
-  async swapGeneralElem(nametable, myarr, itemdragend, fieldtochange) {
+  async swapGeneralElem(nametable, myarr, itemdragend, listFieldsToChange) {
 
     if (itemdragend.field === 'priority') {
       // get last elem priority
@@ -735,11 +850,14 @@ export const tools = {
       const elem3 = tools.update_idprev(myarr, itemdragend.oldIndex, itemdragend.oldIndex - 1)       // 1, 0
       const elem4 = tools.update_idprev(myarr, itemdragend.oldIndex + 1, itemdragend.oldIndex)   // 2, 1
 
-      await ApiTables.table_ModifyRecord(nametable, elem1, fieldtochange)
-      await ApiTables.table_ModifyRecord(nametable, elem2, fieldtochange)
-      await ApiTables.table_ModifyRecord(nametable, elem3, fieldtochange)
-      await ApiTables.table_ModifyRecord(nametable, elem4, fieldtochange)
-
+      await
+        ApiTables.table_ModifyRecord(nametable, elem1, listFieldsToChange, 'id_prev')
+      await
+        ApiTables.table_ModifyRecord(nametable, elem2, listFieldsToChange, 'id_prev')
+      await
+        ApiTables.table_ModifyRecord(nametable, elem3, listFieldsToChange, 'id_prev')
+      await
+        ApiTables.table_ModifyRecord(nametable, elem4, listFieldsToChange, 'id_prev')
 
       tools.notifyarraychanged(myarr)
 
@@ -747,22 +865,33 @@ export const tools = {
 
       // Update the records:
     }
-  },
+  }
+  ,
 
   getIndexById(myarr, id) {
     return myarr.indexOf(tools.getElemById(myarr, id))
-  },
+  }
+  ,
 
   getElemById(myarr, id) {
     console.log('getElemById', myarr, id)
     return myarr.find((elem) => elem._id === id)
-  },
+  }
+  ,
 
   getElemPrevById(myarr, id) {
     return myarr.find((elem) => elem.id_prev === id)
-  },
+  }
+  ,
 
-  getLastFirstElemPriority(myarr, priority: number, atfirst: boolean, escludiId: string) {
+  getLastFirstElemPriority(myarr, priority
+    :
+    number, atfirst
+                             :
+                             boolean, escludiId
+                             :
+                             string
+  ) {
     if (myarr === null) {
       return -1
     }
@@ -796,11 +925,13 @@ export const tools = {
         return 0
       }
     }
-  },
+  }
+  ,
 
   getFirstList(myarr) {
     return myarr.find((elem) => elem.id_prev === ApiTables.LIST_START)
-  },
+  }
+  ,
 
   getModulesByTable(nametable) {
     if (nametable === 'todos') {
@@ -808,7 +939,8 @@ export const tools = {
     } else if (nametable === 'projects') {
       return Projects
     }
-  },
+  }
+  ,
 
   setArrayMainByTable(nametable, myarr) {
     if (nametable === 'todos') {
@@ -818,18 +950,21 @@ export const tools = {
       Projects.state.projects = tools.jsonCopy(myarr)
       return Projects.state.projects
     }
-  },
+  }
+  ,
 
   getmyid(id) {
     return 'row' + id
-  },
+  }
+  ,
 
   getLastListNotCompleted(nametable, cat) {
     const module = tools.getModulesByTable(nametable)
     const arr = module.getters.items_dacompletare(cat)
 
     return (arr.length > 0) ? arr[arr.length - 1] : null
-  },
+  }
+  ,
 
   getElemByIndex(myarr, index) {
     if (index >= 0 && index < myarr.length) {
@@ -838,11 +973,13 @@ export const tools = {
     else {
       return null
     }
-  },
+  }
+  ,
 
   existArr(x) {
     return x = (typeof x !== 'undefined' && x instanceof Array) ? x : []
-  },
+  }
+  ,
 
   json2array(json) {
     const result = []
@@ -851,9 +988,13 @@ export const tools = {
       result.push(json[key])
     })
     return result
-  },
+  }
+  ,
 
-  showNotif(q: any, msg, data ?: INotify | null) {
+  showNotif(q
+              :
+              any, msg, data ?: INotify | null
+  ) {
     let myicon = data ? data.icon : 'ion-add'
     if (!myicon) {
       myicon = 'ion-add'
@@ -869,11 +1010,13 @@ export const tools = {
       color: mycolor,
       timeout: 3000
     })
-  },
+  }
+  ,
 
   isRegistered() {
     return localStorage.getItem(tools.localStorage.userId) !== ''
-  },
+  }
+  ,
 
   checkIfUserExist(mythis) {
 
@@ -889,7 +1032,8 @@ export const tools = {
     }
 
     return true
-  },
+  }
+  ,
 
   checkLangPassed(mylang) {
 
@@ -918,15 +1062,18 @@ export const tools = {
     console.log('mylang calc : ', mylang)
 
     return mylang
-  },
+  }
+  ,
 
   getimglogo() {
     return 'statics/images/' + process.env.LOGO_REG
-  },
+  }
+  ,
 
   consolelogpao(strlog, strlog2 = '', strlog3 = '') {
     globalroutines(null, 'log', strlog + ' ' + strlog2 + ' ' + strlog3, null)
-  },
+  }
+  ,
 
   /*
   get todos_vista() {
@@ -940,7 +1087,7 @@ export const tools = {
 
   }
 
-*/
+  */
 
   /*
     public getArrTodos() {
@@ -966,7 +1113,8 @@ export const tools = {
         resolve('anything')
       }, numsec)
     })
-  },
+  }
+  ,
 
   dragula_option($service, dragname) {
     $service.options(dragname,
@@ -982,14 +1130,16 @@ export const tools = {
         },
         direction: 'vertical'
       })
-  },
+  }
+  ,
 
-  // _.cloneDeep(  Per clonare un oggetto
+// _.cloneDeep(  Per clonare un oggetto
 
   isLoggedToSystem() {
     const tok = tools.getItemLS(tools.localStorage.token)
     return !!tok
-  },
+  }
+  ,
 
   mapSort(linkedList) {
     const sortedList = []
@@ -1038,7 +1188,8 @@ export const tools = {
     // console.log('DOPO sortedList', sortedList);
 
     return sortedList
-  },
+  }
+  ,
 
   getProgressClassColor(progress) {
     if (progress > 66) {
@@ -1048,7 +1199,8 @@ export const tools = {
     } else {
       return 'lowperc'
     }
-  },
+  }
+  ,
 
   getProgressColor(progress) {
     if (progress > 66) {
@@ -1058,7 +1210,8 @@ export const tools = {
     } else {
       return 'red'
     }
-  },
+  }
+  ,
 
   getstrDate(mytimestamp) {
     console.log('getstrDate', mytimestamp)
@@ -1066,13 +1219,18 @@ export const tools = {
       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) {
+// mystrdate "26.04.2013"
+  convertstrtoDate(mystrdate
+                     :
+                     string
+  ) {
     if (mystrdate.length < 10) {
       return null
     }
@@ -1087,7 +1245,8 @@ export const tools = {
     }
     console.log('mystrdate', mystrdate, strdate, mydate)
     return mydate
-  },
+  }
+  ,
 
   capitalize(value) {
     if (!value) {
@@ -1099,16 +1258,18 @@ export const tools = {
 
   getDateNow() {
     const mydate = new Date()
-    console.log('mydate', mydate, mydate.getDate(), mydate.getUTCDate())
+    console.log('mydate', mydate)
     return mydate
-  },
+  }
+  ,
   getDateNull() {
-    const mydate = new Date(0)
-    return mydate
-  },
+    return new Date(0)
+  }
+  ,
   getTimeNow() {
     return new Date().getTime()
-  },
+  }
+  ,
   getTimestampsNow() {
     return new Date().valueOf()
   }
diff --git a/src/store/Modules/translation.ts b/src/store/Modules/translation.ts
new file mode 100644
index 0000000..8a9661c
--- /dev/null
+++ b/src/store/Modules/translation.ts
@@ -0,0 +1,14 @@
+export const translation = {
+  it: {
+    fase: 'Fase',
+    end: ''
+  },
+  es: {
+    fase: 'Fase',
+    end: ''
+  },
+  enUs: {
+    fase: 'Phase',
+    end: ''
+  }
+}
diff --git a/src/views/projects/proj-list/proj-list.scss b/src/views/projects/proj-list/proj-list.scss
index f3a01c1..c478e4a 100644
--- a/src/views/projects/proj-list/proj-list.scss
+++ b/src/views/projects/proj-list/proj-list.scss
@@ -74,7 +74,7 @@ $heightBtn: 100%;
 .categorytitle{
   color:blue;
   background-color: lightblue;
-  font-size: 1.25rem;
+  font-size: 1.25rem !important;
   font-weight: bold;
   text-align: center;
   flex: 1;
diff --git a/src/views/projects/proj-list/proj-list.ts b/src/views/projects/proj-list/proj-list.ts
index 6ac2f2e..9db2bd2 100644
--- a/src/views/projects/proj-list/proj-list.ts
+++ b/src/views/projects/proj-list/proj-list.ts
@@ -52,6 +52,7 @@ export default class ProjList extends Vue {
   public percProgress: string = 'percProgress'
 
   public selectStatus: [] = tools.selectStatus[UserStore.state.lang]
+  public selectPhase: [] = tools.selectPhase[UserStore.state.lang]
 
   public $refs: {
     singleproject: SingleProject[],
@@ -261,15 +262,6 @@ export default class ProjList extends Vue {
   public async updateitemproj({ myitem, field }) {
     console.log('calling MODIFY updateitemproj', myitem, field)
 
-    const itemdragend: IDrag = {
-      id_proj: this.idProjAtt,
-      field,
-      idelemtochange: myitem._id,
-      atfirst: false
-    }
-
-    // await Projects.actions.swapElems(itemdragend)
-
     await Projects.actions.modify({ myitem, field })
 
   }
diff --git a/src/views/projects/proj-list/proj-list.vue b/src/views/projects/proj-list/proj-list.vue
index d8672cb..c3a3ee8 100644
--- a/src/views/projects/proj-list/proj-list.vue
+++ b/src/views/projects/proj-list/proj-list.vue
@@ -193,12 +193,12 @@
                                       @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>
+                        <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"
+                                      :label="$t('todo.phase')" emit-value map-options
+                                      @input="watchupdatetodo('phase')">
+                            </q-select>
                         </div>
                     </div>
                     <div class="flex-container clMain">
@@ -239,7 +239,12 @@
                             </CDate>
                         </div>
                         <div style="margin: 10px;"></div>
+                        <q-icon class="flex-item flex-icon" name="event"/>
                         <div class="flex-item itemdata">
+                            <CDate :readonly="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>
                 </template>