- added fields: longdescr, hoursworked, hoursplanned

2019-03-30 02:57:40 +01:00
parent de117d55e6
commit 38b3405664
33 changed files with 753 additions and 326 deletions
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -170,6 +170,8 @@ module.exports = function (ctx) {
        'QPageScroller',
        'QAvatar',
        'QImg',
+        'QSplitter',
+        'QSeparator',
        'QCarouselSlide'
      ],
      directives: [
--- a/src-pwa/custom-service-worker.js
+++ b/src-pwa/custom-service-worker.js
@@ -172,24 +172,24 @@ if (workbox) {
            console.log('*********+++++++++++++++++**********    Records ', table + ' Received from Server [', myarr.length, 'record]', myarr)

            if (table === 'todos') {
-              for (let cat in data.categories) {
+              for (const cat in data.categories) {
                promiseChain = promiseChain.then(() => {
                  return writeData('categories', { _id: cat, valore: data.categories[cat] })
                })
              }

-              for (let indrecCat in myarr) {
-                for (let indrec in myarr[indrecCat]) {
+              for (const arrsing of myarr) {
+                for (const rec of arrsing) {
                  promiseChain = promiseChain.then(() => {
-                    return writeData(table, myarr[indrecCat][indrec])
+                    return writeData(table, rec)
                  })
                }
              }
            } else {
              // Others tables
-              for (let indrec in myarr) {
+              for (const rec of myarr) {
                promiseChain = promiseChain.then(() => {
-                  return writeData(table, myarr[indrec])
+                  return writeData(table, rec)
                })
              }
            }
--- a/src/App.scss
+++ b/src/App.scss
@@ -50,3 +50,13 @@
  font-size: 1.1rem;
  text-align: center;
 }
+
+.lowperc {
+  color: red;
+}
+.medperc {
+  color: blue;
+}
+.highperc {
+  color: green;
+}
--- a/src/components/CProgress/CProgress.scss
+++ b/src/components/CProgress/CProgress.scss
@@ -0,0 +1,39 @@
+$heightBtn: 100%;
+
+.flex-item{
+  // background-color: #d5e2eb;
+  padding: 2px;
+  margin: 2px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 1rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  flex-direction: column;
+  order: 1;
+}
+
+.cpr-progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+  height:15px;
+}
+
+.cpr-percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}
--- a/src/components/CProgress/CProgress.ts
+++ b/src/components/CProgress/CProgress.ts
@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '@src/store/Modules/tools'
+
+@Component({
+  name: 'CProgress'
+})
+
+export default class CProgress extends Vue {
+  public cpr_colProgress: string = 'blue'
+  public cpr_percProgress: string = 'cpr-percProgress'
+
+  @Watch('progressval')
+  public changeprogress() {
+    this.updateclasses()
+  }
+
+  @Prop({ required: true }) public progressval: number
+  @Prop() public descr: string
+
+  public updateclasses() {
+    this.cpr_colProgress = tools.getProgressColor(this.progressval)
+  }
+
+  get getdescr(){
+    if (!!this.descr) {
+      return this.descr + ' : '
+    }
+  }
+
+  public create() {
+    this.updateclasses()
+  }
+
+}
--- a/src/components/CProgress/CProgress.vue
+++ b/src/components/CProgress/CProgress.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="flex-item progress-item shadow-1">
+        <q-linear-progress
+                stripe
+                rounded
+                :value="progressval / 100"
+                class="cpr-progrbar-item"
+                :color="cpr_colProgress"
+        >
+        </q-linear-progress>
+        <div :class="cpr_percProgress">
+            {{getdescr}} {{progressval}}%
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CProgress.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CProgress.scss';
+</style>
--- a/src/components/CProgress/index.ts
+++ b/src/components/CProgress/index.ts
@@ -0,0 +1 @@
+export {default as CProgress} from './CProgress.vue'
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from '../views/categories'
 export * from './todos'
 export * from './logo'
+export * from './CProgress'
--- a/src/components/projects/SingleProject/SingleProject.scss
+++ b/src/components/projects/SingleProject/SingleProject.scss
@@ -9,8 +9,8 @@ $heightdescr: 20px;

 .flex-item{
   // background-color: #d5e2eb;
-  padding: 0px;
-  margin: 1px;
+  padding: 2px;
+  margin: 2px;
  margin-left: 3px;
  margin-right: 3px;
  color: #000;
@@ -195,16 +195,6 @@ $heightdescr: 20px;
 .colProgress {
 }

-.lowperc {
-  color: red;
-}
-.medperc {
-  color: blue;
-}
-.highperc {
-  color: green;
-}
-
 .percompleted {
  color: $colcompleted
 }
@@ -264,6 +254,7 @@ $heightdescr: 20px;

 .divdescrTot, .divdescrTot > div > div > div > div > textarea {
  font-size: 1rem;
+  cursor: pointer;
 }

 .divdescrTot {
--- a/src/components/projects/SingleProject/SingleProject.ts
+++ b/src/components/projects/SingleProject/SingleProject.ts
@@ -54,6 +54,16 @@ export default class SingleProject extends Vue {
    this.precDescr = this.itemproject.descr
  }

+  @Watch('itemproject.longdescr') public valueChangedlongdescr() {
+    this.watchupdate('longdescr')
+  }
+
+  @Watch('itemproject.hoursplanned') public valueChangedhoursplanned() {
+    this.watchupdate('hoursplanned')
+  }
+  @Watch('itemproject.hoursworked') public valueChangedhoursworked() {
+    this.watchupdate('hoursworked')
+  }
  @Watch('itemproject.progressCalc') public valueChanged6() {
    console.log('itemproject.progressCalc')
    this.updateClasses()
@@ -106,18 +116,9 @@ export default class SingleProject extends Vue {

    this.percProgress = 'percProgress'

-    let mycolcl = ''
-    if (this.itemproject.progressCalc < 33) {
-      mycolcl = ' lowperc'
-    } else if (this.itemproject.progressCalc < 66) {
-      mycolcl = ' medperc'
-    } else {
-      mycolcl = ' highperc'
-    }
+    this.colProgress = tools.getProgressColor(this.itemproject.progressCalc)

-    this.colProgress = mycolcl
-
-    this.percProgress += mycolcl
+    this.percProgress += ' ' + tools.getProgressClassColor(this.itemproject.progressCalc)

    this.clButtPopover = this.sel ? 'pos-item-popover comp_selected' : 'pos-item-popover'

@@ -165,7 +166,7 @@ export default class SingleProject extends Vue {

    if (!this.sel) {
      if (!this.inEdit) {
-        this.attivaEdit = true
+        // this.attivaEdit = true
        this.$emit('deselectAllRows', this.itemproject, true)

        if (!this.sel) {
@@ -209,10 +210,25 @@ export default class SingleProject extends Vue {
    }
  }

-  public clickRow() {
+  public clickProject() {
+    this.$emit('idsel', this.itemproject._id)
    this.clickRiga()
  }

+  public activeEdit(){
+    console.log('Attiva Edit')
+    this.attivaEdit = true
+    this.editProject()
+  }
+
+  get getrouteto(){
+    return '/projects/' + this.itemproject._id
+  }
+
+  public goIntoTheProject() {
+    this.$router.replace('/projects/' + this.itemproject._id)
+  }
+
  public editProject() {
    console.log('INIZIO - editProject')
    if (this.attivaEdit) {
@@ -269,7 +285,7 @@ export default class SingleProject extends Vue {
      this.deselectRiga()
      this.clickMenu(tools.MenuAction.DELETE)
        .then(() => {
-          this.faiFocus('insertTask', true)
+          this.faiFocus('insertProjectBottom', true)
          return
        })
    }
@@ -297,7 +313,7 @@ export default class SingleProject extends Vue {
      this.deselectRiga()
      this.clickMenu(tools.MenuAction.DELETE)
        .then(() => {
-          this.faiFocus('insertTask', true)
+          this.faiFocus('insertProjectBottom', true)
          return
        })
    }
@@ -310,14 +326,14 @@ export default class SingleProject extends Vue {
      } else {
        e.preventDefault()
        this.deselectRiga()
-        this.faiFocus('insertTask', false)
+        this.faiFocus('insertProjectBottom', false)
      }
    }

    // console.log('keyDownArea', e)
    if (e.key === 'Escape') {
      this.deselectRiga()
-      // this.faiFocus('insertTask', true)
+      // this.faiFocus('insertProject', true)
      console.log('LOAD this.precDescr', this.precDescr)
      this.precDescr = this.itemproject.descr
    }
@@ -397,10 +413,8 @@ export default class SingleProject extends Vue {
      return await this.askConfirmDelete()
    } else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
      return await this.enableExpiring()
-    } else if (action === tools.MenuAction.COMPLETED) {
-      return await this.setCompleted()
-    } else if (action === tools.MenuAction.PROGRESS_BAR) {
-      return await this.updatedata('progressCalc')
+    } else if (action === tools.MenuAction.EDIT) {
+      this.activeEdit()
    } else if (action === 0) {
      this.deselectAndExitEdit()
    }
--- a/src/components/projects/SingleProject/SingleProject.vue
+++ b/src/components/projects/SingleProject/SingleProject.vue
@@ -1,8 +1,11 @@
 <template>
-    <div :class="getClassRow()" @click="clickRow">
+    <div :class="getClassRow()" @click="clickProject">
+
+        <q-btn class="flex-item donotdrag " size="sm" push color="primary" round icon="arrow_forward"
+        :to="getrouteto" />

        <div class="flex-item donotdrag divdescrTot">
-            <q-input v-if="(sel)" hide-underline type="textarea" ref="inputdescr"
+            <q-input v-if="(sel && inEdit)" hide-underline type="textarea" ref="inputdescr"
                     v-model.trim="precDescr"
                     autogrow
                     borderless
--- a/src/components/projects/SubMenusProj/SubMenusProj.vue
+++ b/src/components/projects/SubMenusProj/SubMenusProj.vue
@@ -77,6 +77,6 @@
 <script lang="ts" src="./SubMenusProj.ts">
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
    @import './SubMenusProj.scss';
 </style>
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -196,16 +196,6 @@ $heightdescr: 20px;
 .colProgress {
 }

-.lowperc {
-  color: red;
-}
-.medperc {
-  color: blue;
-}
-.highperc {
-  color: green;
-}
-
 .percompleted {
  color: $colcompleted
 }
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -126,20 +126,15 @@ export default class SingleTodo extends Vue {
    this.menuProgress = 'menuProgress'
    this.percProgress = 'percProgress'

-    let mycolcl = ''
-    if (this.itemtodo.progress < 33) {
-      mycolcl = ' lowperc'
-    } else if (this.itemtodo.progress < 66) {
-      mycolcl = ' medperc'
-    } else {
-      mycolcl = ' highperc'
-    }
+    let mycolcl = ' ' + tools.getProgressClassColor(this.itemtodo.progress)
+    this.colProgress = tools.getProgressColor(this.itemtodo.progress)

    if (this.itemtodo.completed) {
      mycolcl = ' percompleted'
+      this.colProgress = 'gray'
    }

-    this.colProgress = mycolcl
+    this.colProgress = tools.getProgressColor(this.itemtodo.progress)

    this.menuProgress += mycolcl
    this.percProgress += mycolcl
--- a/src/components/todos/SubMenus/SubMenus.vue
+++ b/src/components/todos/SubMenus/SubMenus.vue
@@ -80,6 +80,6 @@
 <script lang="ts" src="./SubMenus.ts">
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
    @import './SubMenus.scss';
 </style>
--- a/src/model/Projects.ts
+++ b/src/model/Projects.ts
@@ -1,22 +1,31 @@
+import objectId from '@src/js/objectId'
+import { UserStore } from '@store'
+import { tools } from '@src/store/Modules/tools'
+
 export interface IProject {
  _id?: any,
  userId?: string
  category?: string
-  descr?: string,
-  priority?: number,
-  completed?: boolean,
-  created_at?: Date,
-  modify_at?: Date,
-  completed_at?: Date,
-  expiring_at?: Date,
-  enableExpiring?: boolean,
-  id_prev?: string,
-  modified?: boolean,
-  pos?: number,
-  order?: number,
+  id_parent?: string
+  descr?: string
+  longdescr?: string
+  hoursplanned?: number
+  hoursworked?: number
+  priority?: number
+  completed?: boolean
+  created_at?: Date
+  modify_at?: Date
+  completed_at?: Date
+  expiring_at?: Date
+  enableExpiring?: boolean
+  id_prev?: string
+  modified?: boolean
+  pos?: number
+  order?: number
  progressCalc?: number
 }

+
 export interface IParamIProject {
  categorySel?: string
  checkPending?: boolean
--- a/src/model/Todos.ts
+++ b/src/model/Todos.ts
@@ -31,7 +31,8 @@ export interface IDrag {
  prioritychosen?: number
  oldIndex?: number
  newIndex?: number
-  category: string
+  category?: string
+  id_proj?: string
  atfirst?: boolean
 }

--- a/src/router/route-config.ts
+++ b/src/router/route-config.ts
@@ -92,13 +92,13 @@ export const routesList: IMyRouteConfig[] = [
    component: () => import('@/views/offline/offline.vue')
  },
  {
-    path: '/projects',
+    path: '/projects/:idProj',
    name: 'progetti',
    component: () => import('@/views/projects/proj-list/proj-list.vue'),
    meta: {
      requiresAuth: true,
      async asyncData() {
-        await Projects.actions.dbLoad({ checkPending: false })
+        await Projects.actions.dbLoad({ checkPending: false, onlyiffirsttime: true })
      }
      // middleware: [auth]
    }
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -235,6 +235,13 @@ const messages = {
      newVersionAvailable: 'Aggiorna'
    },
    connection: 'Connessione',
+    proj: {
+      longdescr: 'Descrizione',
+      hoursplanned: 'Ore Preventivate',
+      hoursadded: 'Ore Aggiuntive',
+      hoursworked: 'Ore Lavorate',
+      progresstask: 'Progressione Compiti'
+    }
  },
  'es': {
    dialog: {
@@ -466,6 +473,13 @@ const messages = {
      newVersionAvailable: 'Actualiza'
    },
    connection: 'Connection',
+    proj: {
+      longdescr: 'Descripción',
+      hoursplanned: 'Horas Estimadas',
+      hoursadded: 'Horas Adicional',
+      hoursworked: 'Horas Trabajadas',
+      progresstask: 'Progresion Tareas'
+    }
  },
  'enUs': {
    dialog: {
@@ -697,6 +711,13 @@ const messages = {
      newVersionAvailable: 'Upgrade'
    },
    connection: 'Conexión',
+    proj: {
+      longdescr: 'Description',
+      hoursplanned: 'Estimated Hours',
+      hoursadded: 'Additional Hours',
+      hoursworked: 'Worked Hours',
+      progresstask: 'Todos progression'
+    }
  },
 };

--- a/src/statics/js/storage.js
+++ b/src/statics/js/storage.js
@@ -112,6 +112,7 @@ let idbKeyval = (() => {
      // console.log('setdata', table, value)

      await withStore('readwrite', table, store => {
+
        req = store.put(value);
      });
      return req.result;
--- a/src/store/Api/Instance.ts
+++ b/src/store/Api/Instance.ts
@@ -48,7 +48,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, axiosInstance.defaults)
+    console.log('Axios Request', path, type)
    let response: AxiosResponse
    if (type === 'post' || type === 'put' || type === 'patch') {
      response = await axiosInstance[type](path, payload, {
@@ -58,7 +58,7 @@ async function Request(type: string, path: string, payload: any): Promise<Types.
        }
      })
      ricevuto = true
-      console.log('Request Response: ', response)
+      // console.log('Request Response: ', response)
      // console.log(new Types.AxiosSuccess(response.data, response.status))

      const setAuthToken = (path === '/updatepwd')
--- a/src/store/Api/index.ts
+++ b/src/store/Api/index.ts
@@ -123,7 +123,7 @@ export namespace ApiTool {
  }

  export async function syncAlternative(mystrparam) {
-    console.log('[ALTERNATIVE Background syncing', mystrparam)
+    // console.log('[ALTERNATIVE Background syncing', mystrparam)

    const multiparams = mystrparam.split('|')
    if (multiparams) {
--- a/src/store/Modules/ApiTables.ts
+++ b/src/store/Modules/ApiTables.ts
@@ -98,7 +98,7 @@ 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, item.descr, id, msg)

  let cmdSw = cmd
  if ((cmd === DB.CMD_SYNC_NEW) || (cmd === DB.CMD_DELETE)) {
@@ -108,7 +108,7 @@ async function Sync_Execute(cmd, tablesync, nametab, method, item: ITodo, id, ms
  if ('serviceWorker' in navigator) {
    return await navigator.serviceWorker.ready
      .then((sw) => {
-        console.log('----------------------      navigator.serviceWorker.ready')
+        // console.log('----------------------      navigator.serviceWorker.ready')

        return globalroutines(null, 'write', tablesync, item, id)
          .then((id) => {
@@ -120,7 +120,7 @@ async function Sync_Execute(cmd, tablesync, nametab, method, item: ITodo, id, ms
              _id: multiparams,
              value: multiparams
            }
-            console.log('*** swmsg')
+            // console.log('*** swmsg')
            return globalroutines(null, 'write', 'swmsg', mymsgkey, multiparams)
              .then((ris) => {
                // if ('SyncManager' in window) {
@@ -288,7 +288,8 @@ async function sendSwMsgIfAvailable() {
 }

 async function waitAndRefreshData() {
-  return await Projects.actions.dbLoad({ checkPending: false })
+  // #Todo++ Check if is OK
+  await Projects.actions.dbLoad({ checkPending: false, onlyiffirsttime: false })
  return await Todos.actions.dbLoad({ checkPending: false })
 }

@@ -357,7 +358,7 @@ sendMessageToSW(recdata, method) {

 function setmodifiedIfchanged(recOut, recIn, field) {
  if (String(recOut[field]) !== String(recIn[field])) {
-    // console.log('***************  CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
+    console.log('***************  CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
    recOut.modified = true
    recOut[field] = recIn[field]
    return true
@@ -366,14 +367,25 @@ function setmodifiedIfchanged(recOut, recIn, field) {
 }

 export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
-
  if (myitem === null) {
    return new Promise((resolve, reject) => {
      resolve()
    })
  }
+
+  console.log('--> table_ModifyRecord', nametable, myitem.descr)
+
  const myobjsaved = tools.jsonCopy(myitem)

+/*
+  const mymodule = tools.getModulesByTable(nametable)
+  let param2 = ''
+  if (nametable === 'todos') {
+    param2 = myitem.category
+  }
+  const miorec = mymodule.getters.getRecordById(myobjsaved._id, param2)
+*/
+
  // get record from IndexedDb
  const miorec = await globalroutines(null, 'read', nametable, null, myobjsaved._id)
  if (miorec === undefined) {
@@ -381,6 +393,8 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
    return
  }

+  console.log('miorec', miorec.descr, miorec.id_prev)
+
  if (nametable === 'todos') {
    if (setmodifiedIfchanged(miorec, myobjsaved, 'completed')) {
      miorec.completed_at = new Date().getDate()
@@ -392,7 +406,7 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
  })

  if (miorec.modified) {
-    console.log(nametable + ' MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB')
+    console.log('    ' + nametable + ' MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB')
    miorec.modify_at = new Date().getDate()
    miorec.modified = false

@@ -407,6 +421,8 @@ export async function table_ModifyRecord(nametable, myitem, fieldtochange) {
        Sync_SaveItem(nametable, 'PATCH', miorec)

      })
+  } else {
+    console.log('      ', miorec.descr, 'NON MODIF!')
  }
 }

--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -131,7 +131,7 @@ namespace Getters {
              route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'format_list_numbered', name: 'pages.Todo',
              routes2: listatodo
            },
-            { route: '/projects', faIcon: 'fa fa-list-alt', materialIcon: 'next_week', name: 'pages.Projects' },
+            { route: '/projects/' + tools.FIRST_PROJ, faIcon: 'fa fa-list-alt', materialIcon: 'next_week', name: 'pages.Projects' },

            { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
            { route: '/admin/cfgserv', faIcon: 'fa fa-database', materialIcon: 'event_seat', name: 'pages.Admin' },
--- a/src/store/Modules/Projects.ts
+++ b/src/store/Modules/Projects.ts
@@ -1,4 +1,4 @@
-import { IProject, IProjectsState, IParamTodo, IDrag } from 'model'
+import { IProject, IProjectsState, IDrag } from 'model'
 import { storeBuilder } from './Store/Store'

 import Api from '@api'
@@ -20,7 +20,7 @@ const state: IProjectsState = {
  visuLastCompleted: 10
 }

-const fieldtochange: string [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress']
+const fieldtochange: string [] = ['descr', 'longdescr', 'hoursplanned', 'hoursworked', 'id_parent', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress']

 const b = storeBuilder.module<IProjectsState>('Projects', state)
 const stateGetter = b.state()
@@ -39,81 +39,94 @@ function getarrByCategory(category: string) {

 function initcat() {

-  const tomorrow = new Date()
-  tomorrow.setDate(tomorrow.getDate() + 1)
-
-  const objproj: IProject = {
-    // _id: new Date().toISOString(),  // Create NEW
-    _id: objectId(),
-    userId: UserStore.state.userId,
-    descr: '',
-    priority: tools.Priority.PRIORITY_NORMAL,
-    completed: false,
-    created_at: new Date(),
-    modify_at: new Date(),
-    completed_at: new Date(),
-    category: '',
-    expiring_at: tomorrow,
-    enableExpiring: false,
-    id_prev: '',
-    pos: 0,
-    modified: false,
-    progressCalc: 0
-  }
  // return this.copy(objproj)
-  return objproj
+  let rec = Getters.getters.getRecordEmpty()
+  rec.userId = UserStore.state.userId
+
+  return rec

 }

 namespace Getters {
-  const items_dacompletare = b.read((state: IProjectsState) => (cat: string): IProject[] => {
+  const getRecordEmpty = b.read((state: IProjectsState) => (): IProject => {
+    // const tomorrow = new Date()
+    // tomorrow.setDate(tomorrow.getDate() + 1)
+
+    const obj: IProject = {
+      _id: objectId(),
+      descr: '',
+      id_parent: '',
+      priority: tools.Priority.PRIORITY_NORMAL,
+      completed: false,
+      created_at: new Date(),
+      modify_at: new Date(),
+      completed_at: new Date(),
+      category: '',
+      // expiring_at: tomorrow,
+      enableExpiring: false,
+      id_prev: '',
+      pos: 0,
+      modified: false,
+      progressCalc: 0
+    }
+
+    return obj
+  }, 'getRecordEmpty')
+
+  const items_dacompletare = b.read((state: IProjectsState) => (id_parent: string): IProject[] => {
    if (state.projects) {
-      return state.projects.filter((proj) => !proj.completed)
+      return tools.mapSort(state.projects.filter((proj) => proj.id_parent === id_parent))
    } else {
      return []
    }
  }, 'items_dacompletare')

-  const projs_completati = b.read((state: IProjectsState) => (cat: string): IProject[] => {
+  const getDescrById = b.read((state: IProjectsState) => (id: string): string => {
+    if (id === tools.FIRST_PROJ)
+      return 'Projects'
    if (state.projects) {
-      if (state.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED) {
-        return state.projects.filter((proj) => proj.completed).slice(0, state.visuLastCompleted)
-      }  // Show only the first N completed
-      else if (state.showtype === costanti.ShowTypeTask.SHOW_ALL) {
-        return state.projects.filter((proj) => proj.completed)
-      }
-      else {
-        return []
-      }
-    } else {
-      return []
+      const item = state.projects.find((item) => item._id === id)
+      if (!!item)
+        return item.descr
    }
-  }, 'projs_completati')

-  const doneProjectsCount = b.read((state: IProjectsState) => (cat: string): number => {
-    return getters.projs_completati(cat).length
-  }, 'doneProjectsCount')
-  const ProjectsCount = b.read((state: IProjectsState) => (cat: string): number => {
+    return ''
+  }, 'getDescrById')
+
+  const getParentById = b.read((state: IProjectsState) => (id: string): string => {
    if (state.projects) {
-      return state.projects.length
-    } else {
-      return 0
+      const item = state.projects.find((item) => item._id === id)
+      if (!!item)
+        return item.id_parent
    }
-  }, 'ProjectsCount')
+
+    return ''
+  }, 'getParentById')
+
+  const getRecordById = b.read((state: IProjectsState) => (id: string): IProject => {
+    if (state.projects) {
+      return state.projects.find((item) => item._id === id)
+    }
+    return null
+  }, 'getRecordById')

  export const getters = {
+    get getRecordEmpty() {
+      return getRecordEmpty()
+    },
    get items_dacompletare() {
      return items_dacompletare()
    },
-    get projs_completati() {
-      return projs_completati()
+    get getDescrById() {
+      return getDescrById()
    },
-    get doneProjectsCount() {
-      return doneProjectsCount()
+    get getParentById() {
+      return getParentById()
    },
-    get ProjectsCount() {
-      return ProjectsCount()
+    get getRecordById() {
+      return getRecordById()
    }
+
  }
 }

@@ -154,13 +167,21 @@ namespace Mutations {

 namespace Actions {

-  async function dbLoad(context, { checkPending }) {
-    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
+  async function dbLoad(context, { checkPending, onlyiffirsttime }) {
+
+    if (onlyiffirsttime) {
+      if (state.projects.length > 0) {
+        // if already set, then exit.
+        return false
+      }
+    }

    if (UserStore.state.userId === '') {
      return false  // Login not made
    }

+    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
+
    const ris = await Api.SendReq('/projects/' + UserStore.state.userId, 'GET', null)
      .then((res) => {
        if (res.data.projects) {  // console.log('RISULTANTE CATEGORIES DAL SERVER = ', res.data.categories)
@@ -190,10 +211,10 @@ namespace Actions {
    ApiTables.aftercalling(ris, checkPending, 'categories')
  }

-  async function deleteItem(context, { cat, idobj }) {
+  async function deleteItem(context, { idobj }) {
    console.log('deleteItem: KEY = ', idobj)

-    const myarr = getarrByCategory(cat)
+    const myarr = getarrByCategory('')

    const myobjtrov = tools.getElemById(myarr, idobj)

@@ -218,6 +239,7 @@ namespace Actions {

    objproj.descr = myobj.descr
    objproj.category = myobj.category
+    objproj.id_parent = myobj.id_parent

    let elemtochange: IProject = null

@@ -230,7 +252,7 @@ namespace Actions {
    } else {
      console.log('INSERT AT THE BOTTOM')
      // INSERT AT THE BOTTOM , so GET LAST ITEM
-      const lastelem = tools.getLastListNotCompleted(nametable, objproj.category)
+      const lastelem = tools.getLastListNotCompleted(nametable, objproj.id_parent)

      objproj.id_prev = (!!lastelem) ? lastelem._id : ApiTables.LIST_START
    }
@@ -254,50 +276,6 @@ namespace Actions {

    // 3) send to the Server
    return await ApiTables.Sync_SaveItem(nametable, 'POST', objproj)
-      .then((ris) => {
-        // *** Check if need to be moved because of the --- Priority Ordering --- ...
-
-        const indelem = tools.getIndexById(myarr, objproj._id)
-        let itemdragend
-        if (atfirst) {
-          // Check the second item, if it's different priority, then move to the first position of the priority
-          const secondindelem = indelem + 1
-          if (tools.isOkIndex(myarr, secondindelem)) {
-            const secondelem = tools.getElemByIndex(myarr, secondindelem)
-            if (secondelem.priority !== objproj.priority) {
-              itemdragend = {
-                field: 'priority',
-                idelemtochange: objproj._id,
-                prioritychosen: objproj.priority,
-                category: objproj.category,
-                atfirst
-              }
-            }
-          }
-
-        } else {
-          // get previous of the last
-          const prevlastindelem = indelem - 1
-          if (tools.isOkIndex(myarr, prevlastindelem)) {
-            const prevlastelem = tools.getElemByIndex(myarr, prevlastindelem)
-            if (prevlastelem.priority !== objproj.priority) {
-              itemdragend = {
-                field: 'priority',
-                idelemtochange: objproj._id,
-                prioritychosen: objproj.priority,
-                category: objproj.category,
-                atfirst
-              }
-            }
-          }
-        }
-
-        if (itemdragend) {
-          swapElems(context, itemdragend)
-        }
-        return ris
-      })
-
  }

  async function modify(context, { myitem, field }) {
@@ -307,8 +285,7 @@ namespace Actions {
  async function swapElems(context, itemdragend: IDrag) {
    console.log('PROJECT swapElems', itemdragend, state.projects)

-    const cat = itemdragend.category
-    const myarr = state.projects
+    const myarr = Getters.getters.items_dacompletare(itemdragend.id_proj)

    tools.swapGeneralElem(nametable, myarr, itemdragend, fieldtochange)

--- a/src/store/Modules/Todos.ts
+++ b/src/store/Modules/Todos.ts
@@ -1,4 +1,4 @@
-import { ITodo, ITodosState, IParamTodo, IDrag } from 'model'
+import { ITodo, ITodosState, IParamTodo, IDrag, IProjectsState, IProject } from 'model'
 import { storeBuilder } from './Store/Store'

 import Api from '@api'
@@ -111,6 +111,14 @@ namespace Getters {
    }
  }, 'TodosCount')

+  const getRecordById = b.read((state: ITodosState) => (id: string, cat: string): ITodo => {
+    const indcat = getindexbycategory(cat)
+    if (state.todos) {
+      return state.todos[indcat].find((item) => item._id === id)
+    }
+    return null
+  }, 'getRecordById')
+
  export const getters = {
    get items_dacompletare() {
      return items_dacompletare()
@@ -123,6 +131,9 @@ namespace Getters {
    },
    get TodosCount() {
      return TodosCount()
+    },
+    get getRecordById() {
+      return getRecordById()
    }
  }
 }
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -6,7 +6,7 @@ import router from '@router'

 import { serv_constants } from '../Modules/serv_constants'
 import { tools } from '../Modules/tools'
-import { GlobalStore, UserStore, Todos } from '@store'
+import { GlobalStore, UserStore, Todos, Projects } from '@store'
 import globalroutines from './../../globalroutines/index'

 import translate from './../../globalroutines/util'
@@ -503,6 +503,7 @@ namespace Actions {
    await GlobalStore.actions.loadAfterLogin()
      .then(() => {
        Todos.actions.dbLoad({ checkPending: true })
+        Projects.actions.dbLoad({ checkPending: true, onlyiffirsttime: true })
      })
  }

--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -2,7 +2,7 @@ import { Todos, Projects, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
 import { costanti } from './costanti'
 import Quasar from 'quasar'
-import { ITodo } from '@src/model'
+import { IProject, ITodo } from '@src/model'
 import * as ApiTables from '@src/store/Modules/ApiTables'

 export interface INotify {
@@ -21,7 +21,7 @@ export const tools = {
  DUPLICATE_EMAIL_ID: 11000,
  DUPLICATE_USERNAME_ID: 11100,

-  FIRST_PROJ: '__FIRSTPROJ',
+  FIRST_PROJ: '__PROJECTS',

  arrLangUsed: ['enUs', 'it', 'es'],

@@ -52,7 +52,8 @@ export const tools = {
    COMPLETED: 110,
    PROGRESS_BAR: 120,
    PRIORITY: 130,
-    SHOW_TASK: 150
+    SHOW_TASK: 150,
+    EDIT: 160
  },

  selectPriority: {
@@ -253,6 +254,12 @@ export const tools = {

  menuPopupProj: {
    it: [
+      {
+        id: 10,
+        label: 'Modifica',
+        value: 160, // EDIT
+        icon: 'create'
+      },
      {
        id: 40,
        label: 'Imposta Scadenza',
@@ -269,6 +276,12 @@ export const tools = {
      }
    ],
    es: [
+      {
+        id: 10,
+        label: 'Editar',
+        value: 160, // EDIT
+        icon: 'create'
+      },
      {
        id: 40,
        label: 'Establecer expiración',
@@ -285,6 +298,12 @@ export const tools = {
      }
    ],
    enUs: [
+      {
+        id: 10,
+        label: 'Edit',
+        value: 160, // EDIT
+        icon: 'create'
+      },
      {
        id: 40,
        label: 'Set Expiring',
@@ -463,6 +482,23 @@ export const tools = {
    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[]) {
+    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 + ' '
  },
@@ -512,13 +548,15 @@ export const tools = {
  },

  update_idprev(myarr, indelemchange, indelemId) {
-    if (indelemchange >= 0 && indelemchange < myarr.length) {
+    if (tools.isOkIndex(myarr, indelemchange)) {
      const id_prev = (indelemId >= 0) ? myarr[indelemId]._id : ApiTables.LIST_START
+      console.log('update_idprev [', indelemchange, ']', '[id_prev=', id_prev, ']')
      if (myarr[indelemchange].id_prev !== id_prev) {
-        myarr[indelemchange].id_prev = id_prev
-        tools.notifyarraychanged(myarr[indelemchange])
+        // tools.notifyarraychanged(myarr)
        // myarr[indelemchange].modified = true
-        console.log('Index=', indelemchange, 'indtoget', indelemId, tools.getstrelem(myarr[indelemchange]))
+        // console.log('update_idprev Index=', indelemchange, 'indtoget', indelemId, tools.getstrelem(myarr[indelemchange]))
+        console.log('   MODIFICATO! ', myarr[indelemchange].descr , ' PRIMA:', myarr[indelemchange].id_prev, 'DOPO: ', id_prev)
+        myarr[indelemchange].id_prev = id_prev
        return myarr[indelemchange]
      }
    }
@@ -536,54 +574,71 @@ export const tools = {
      console.log('swapElems PRIORITY', itemdragend)
    }

-    if (itemdragend.newIndex === itemdragend.oldIndex)
+    console.log('swapGeneralElem', 'new =', itemdragend.newIndex, 'Old =', itemdragend.oldIndex, itemdragend)
+
+    if (itemdragend.newIndex === itemdragend.oldIndex) {
      return
+    }

    if (tools.isOkIndex(myarr, itemdragend.newIndex) && tools.isOkIndex(myarr, itemdragend.oldIndex)) {
+
+      console.log('SPLICE!')
+      console.log('   PRIMA!', tools.logga_arrproj(myarr))
      myarr.splice(itemdragend.newIndex, 0, myarr.splice(itemdragend.oldIndex, 1)[0])
-      tools.notifyarraychanged(myarr[itemdragend.newIndex])
-      tools.notifyarraychanged(myarr[itemdragend.oldIndex])
+      console.log('   DOPO!', tools.logga_arrproj(myarr))

-      if (itemdragend.field !== 'priority') {
-        const precind = itemdragend.newIndex - 1
-        const nextind = itemdragend.newIndex + 1
+      // Ora inverti gli indici
+      const indold = itemdragend.oldIndex
+      itemdragend.oldIndex = itemdragend.newIndex
+      itemdragend.newIndex = indold

-        if (tools.isOkIndex(myarr, precind) && tools.isOkIndex(myarr, nextind)) {
-          if ((myarr[precind].priority === myarr[nextind].priority) && (myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
-            // console.log('   1)')
-            myarr[itemdragend.newIndex].priority = myarr[precind].priority
-            tools.notifyarraychanged(myarr[itemdragend.newIndex])
-          }
-        } else {
-          if (!tools.isOkIndex(myarr, precind)) {
-            if ((myarr[nextind].priority !== myarr[itemdragend.newIndex].priority)) {
-              // console.log('   2)')
-              myarr[itemdragend.newIndex].priority = myarr[nextind].priority
-              tools.notifyarraychanged(myarr[itemdragend.newIndex])
-            }
+      if (nametable === 'todos') {
+        if (itemdragend.field !== 'priority') {
+          const precind = itemdragend.newIndex - 1
+          const nextind = itemdragend.newIndex + 1

-          } else {
-            if ((myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
-              console.log('   3)')
+          if (tools.isOkIndex(myarr, precind) && tools.isOkIndex(myarr, nextind)) {
+            if ((myarr[precind].priority === myarr[nextind].priority) && (myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
+              console.log('   1)')
              myarr[itemdragend.newIndex].priority = myarr[precind].priority
-              tools.notifyarraychanged(myarr[itemdragend.newIndex])
+              tools.notifyarraychanged(myarr)
            }
-          }
+          } else {
+            if (!tools.isOkIndex(myarr, precind)) {
+              if ((myarr[nextind].priority !== myarr[itemdragend.newIndex].priority)) {
+                console.log('   2)')
+                myarr[itemdragend.newIndex].priority = myarr[nextind].priority
+                tools.notifyarraychanged(myarr)
+              }

+            } else {
+              if ((myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
+                console.log('   3)')
+                myarr[itemdragend.newIndex].priority = myarr[precind].priority
+                tools.notifyarraychanged(myarr)
+              }
+            }
+
+          }
        }
      }

      // Update the id_prev property
-      const elem1 = tools.update_idprev(myarr, itemdragend.newIndex, itemdragend.newIndex - 1)
-      const elem2 = tools.update_idprev(myarr, itemdragend.newIndex + 1, itemdragend.newIndex)
-      const elem3 = tools.update_idprev(myarr, itemdragend.oldIndex, itemdragend.oldIndex - 1)
-      const elem4 = tools.update_idprev(myarr, itemdragend.oldIndex + 1, itemdragend.oldIndex)
+      const elem1 = tools.update_idprev(myarr, itemdragend.newIndex, itemdragend.newIndex - 1)       // 0, -1
+      const elem2 = tools.update_idprev(myarr, itemdragend.newIndex + 1, itemdragend.newIndex)   // 1, 0
+      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)

+
+      tools.notifyarraychanged(myarr)
+
+      console.log('arr FINALE', tools.logga_arrproj(myarr))
+
      // Update the records:
    }
  },
@@ -650,7 +705,7 @@ export const tools = {

  getLastListNotCompleted(nametable, cat) {
    const module = tools.getModulesByTable(nametable)
-    let arr = module.getters.items_dacompletare(cat)
+    const arr = module.getters.items_dacompletare(cat)

    return (arr.length > 0) ? arr[arr.length - 1] : null
  },
@@ -813,6 +868,75 @@ export const tools = {
  isLoggedToSystem() {
    const tok = tools.getItemLS(tools.localStorage.token)
    return !!tok
+  },
+
+  mapSort(linkedList) {
+    const sortedList = []
+    const map = new Map()
+    let currentId = null
+
+    // console.log('linkedList', linkedList)
+
+    // index the linked list by previous_item_id
+    for (let i = 0; i < linkedList.length; i++) {
+      const item = linkedList[i]
+      // tools.logelemprj(i, item)
+      if (item.id_prev === ApiTables.LIST_START) {
+        // first item
+        currentId = String(item._id)
+        // console.log('currentId', currentId);
+        sortedList.push(item)
+      } else {
+        map.set(item.id_prev, i)
+      }
+    }
+
+    let i = 0
+    while (sortedList.length < linkedList.length) {
+      // get the item with a previous item ID referencing the current item
+      const nextItem = linkedList[map.get(currentId)]
+      if (nextItem === undefined) {
+        break
+      }
+      sortedList.push(nextItem)
+      // tools.logelemprj('FATTO:' + i, nextItem)
+      currentId = String(nextItem._id)
+      i++
+    }
+
+    if (sortedList.length < linkedList.length) {
+      console.log('!!!!! NON CI SONO TUTTI !!!!!', sortedList.length, linkedList.length)
+      // Forget something not in a List !
+      for (const itemsorted of sortedList) {
+        if (linkedList.filter((item) => item._id === itemsorted._id)) {
+
+        }
+      }
+    }
+
+    // console.log('DOPO sortedList', sortedList);
+
+    return sortedList
+  },
+
+  getProgressClassColor(progress) {
+    if (progress > 66) {
+      return 'highperc'
+    } else if (progress > 33) {
+      return 'medperc'
+    } else {
+      return 'lowperc'
+    }
+  },
+
+  getProgressColor(progress) {
+    if (progress > 66) {
+      return 'green'
+    } else if (progress > 33) {
+      return 'blue'
+    } else {
+      return 'red'
+    }
  }

 }
--- a/src/views/admin/testp1/testp1.ts
+++ b/src/views/admin/testp1/testp1.ts
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { Component, Watch } from 'vue-property-decorator'

 import { GlobalStore, UserStore } from '@store'
-import { Getter } from "vuex-class"
+import { Getter } from 'vuex-class'
 import { ICfgServer, IGlobalState, ITodo, ITodosState } from '../../../model/index'

 const namespace: string = 'GlobalModule'
--- a/src/views/projects/proj-list/proj-list.scss
+++ b/src/views/projects/proj-list/proj-list.scss
@@ -1,6 +1,11 @@
+.clMain {
+  min-width: 350px;
+}
+
 .flex-container{
  background-color: rgb(250, 250, 250);
-  padding: 2px;
+  padding: 4px;
+  margin: 2px;
  display: flex;
  align-items: center;
  flex-direction: row;
@@ -60,10 +65,6 @@
  min-height: 10px;
 }

-.divtitlecat {
-  margin: 5px;
-  padding: 5px;
-}

 .categorytitle{
  color:blue;
@@ -74,6 +75,40 @@
  flex: 1;
 }

+.projecttitle{
+  color: white;
+  // color:blue;
+  background-color: rgba(65, 152, 239, 0.6);
+  font-size: 1.25rem;
+  font-weight: bold;
+  text-align: center;
+  flex: 1;
+}
+
+.itemdescr{
+  font-size: 1rem;
+  flex: 1;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  order: 1;
+}
+
+.progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+  height: 10px;
+}
+
+.flex-icon{
+  padding: 3px;
+}
+
 .titleSubMenu {
  font-size: 0.7rem;
  font-weight: 350;
@@ -108,3 +143,11 @@
  min-width: 30px;
  width: 30px;
 }
+
+.percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}
--- a/src/views/projects/proj-list/proj-list.ts
+++ b/src/views/projects/proj-list/proj-list.ts
@@ -12,11 +12,14 @@ import { UserStore } from '@store'

 import { Getter } from 'vuex-class'

+import { Screen } from 'quasar'
+import { CProgress } from '@src/components/CProgress'
+
 const namespace: string = 'Projects'

@Component({

-  components: { SingleProject },
+  components: { SingleProject, CProgress },
  filters: {
    capitalize(value) {
      if (!value) {
@@ -34,13 +37,24 @@ export default class ProjList extends Vue {
  public polling = null
  public service: any
  public scrollable = true
-  public categoryAtt: string = tools.FIRST_PROJ
  public dragname: string = 'second'
+  public idProjAtt: string = tools.FIRST_PROJ
+  public idProjParentAtt: string = ''
+  public splitterModel = 50 // start at 50%
+  public itemproj: IProject = null
+  public idsel: string = ''
+  public itemsel: IProject = Projects.getters.getRecordEmpty()
+  public colProgress: string = 'blue'
+  public percProgress: string = 'percProgress'

  public $refs: {
    single: SingleProject[]
  }

+  get getrouteup() {
+    return '/projects/' + this.idProjParentAtt
+  }
+
  get tools() {
    return tools
  }
@@ -54,10 +68,6 @@ export default class ProjList extends Vue {
    GlobalStore.mutations.setShowType(value)
  }

-  get doneProjectsCount() {
-    return Projects.getters.doneProjectsCount(this.categoryAtt)
-  }
-
  get menuPopupConfigProject() {
    return tools.menuPopupConfigProject[UserStore.state.lang]
  }
@@ -66,19 +76,30 @@ export default class ProjList extends Vue {
    return tools.listOptionShowTask[UserStore.state.lang]
  }

-  get ProjectsCount() {
-    return Projects.getters.ProjectsCount(this.categoryAtt)
+  get descrParent() {
+    return Projects.getters.getDescrById(this.idProjParentAtt)
  }

+  get descrProject() {
+    return Projects.getters.getDescrById(this.idProjAtt)
+  }
+
+  // get ProjectsCount() {
+  //   return Projects.getters.ProjectsCount(this.idProjParentAtt)
+  // }
+
  @Getter('items_dacompletare', { namespace })
-  public items_dacompletare: (state: IProjectsState, category: string) => IProject[]
+  public items_dacompletare: (state: IProjectsState, id_parent: string) => IProject[]

-  @Getter('projs_completati', { namespace })
-  public projs_completati: (state: IProjectsState, category: string) => IProject[]
+  @Watch('$route.params.idProj')
+  public changeparent() {
+    this.idProjAtt = this.$route.params.idProj
+    this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
+  }

-  @Watch('$route.params.category')
-  public changecat() {
-    this.categoryAtt = this.$route.params.category
+  @Watch('itemsel.progressCalc')
+  public changeprogress() {
+    this.updateclasses()
  }

  public getmyid(id) {
@@ -97,10 +118,13 @@ export default class ProjList extends Vue {
    const $service = this.$dragula.$service
    tools.dragula_option($service, this.dragname)

+    this.updateclasses()
+
    $service.eventBus.$on('dragend', (args) => {

      const itemdragend: IDrag = {
-        category: this.categoryAtt,
+        field: '',
+        id_proj: this.idProjAtt,
        newIndex: this.getElementIndex(args.el),
        oldIndex: this.getElementOldIndex(args.el)
      }
@@ -120,19 +144,32 @@ export default class ProjList extends Vue {
  }

  public mounted() {
-    this.categoryAtt = this.$route.params.category
+
+    console.log('Screen.width', Screen.width)
+
+    if (Screen.width < 400) {
+      this.splitterModel = 100
+    } else {
+      this.splitterModel = 50
+    }
+    this.idProjAtt = this.$route.params.idProj
+    this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)

    tools.touchmove(this.scrollable)
  }

  public async load() {
    console.log('LOAD PROJECTS....')
-    if (!!this.$route.params.category) {
-      this.categoryAtt = this.$route.params.category
+    if (!!this.$route.params.idProj) {
+      this.idProjAtt = this.$route.params.idProj
+      this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
+      this.itemproj = Projects.getters.getRecordById(this.idProjAtt)
    }

+    // console.log('this.idProjAtt', this.idProjAtt, this.idProjParentAtt)
+
    // Set last category selected
-    localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
+    // localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)

    this.checkUpdate_everytime()
  }
@@ -150,7 +187,7 @@ export default class ProjList extends Vue {

  public mydeleteItem(idobj: string) {
    // console.log('mydeleteItem', idobj)
-    return Projects.actions.deleteItem({ cat: this.categoryAtt, idobj })
+    return Projects.actions.deleteItem({ idobj })
  }

  public dbInsert(atfirst: boolean = false) {
@@ -166,7 +203,7 @@ export default class ProjList extends Vue {

    const myobj: IProject = {
      descr,
-      category: this.categoryAtt
+      id_parent: this.idProjAtt
    }

    this.projbottom = ''
@@ -174,18 +211,22 @@ export default class ProjList extends Vue {
    return Projects.actions.dbInsert({ myobj, atfirst })
  }

+  public setidsel(id: string) {
+    this.idsel = id
+    this.itemsel = Projects.getters.getRecordById(this.idsel)
+  }
+
  public async updateitem({ myitem, field }) {
    console.log('calling MODIFY updateitem', myitem, field)

    const itemdragend: IDrag = {
-      category: this.categoryAtt,
+      id_proj: this.idProjAtt,
      field,
      idelemtochange: myitem._id,
-      prioritychosen: myitem.priority,
      atfirst: false
    }

-    await Projects.actions.swapElems(itemdragend)
+    // await Projects.actions.swapElems(itemdragend)

    await Projects.actions.modify({ myitem, field })

@@ -213,6 +254,10 @@ export default class ProjList extends Vue {
    }
  }

+  public updateclasses() {
+    this.colProgress = tools.getProgressColor(this.itemsel.progressCalc)
+  }
+
  public checkUpdate() {
    ApiTables.waitAndcheckPendingMsg()
  }
@@ -225,4 +270,11 @@ export default class ProjList extends Vue {
    return parseInt(el.attributes.index.value, 10)
  }

+  get getCalcHoursWorked() {
+    let myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
+
+    return myperc
+
+  }
+
 }
--- a/src/views/projects/proj-list/proj-list.vue
+++ b/src/views/projects/proj-list/proj-list.vue
@@ -1,89 +1,155 @@
 <template>
    <q-page>
        <div class="panel">
-            <div class="divtitlecat">
-                <div class="flex-container">
-                    <div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
-                    <div class="flex-item">
-                        <q-btn push
-                               icon="settings">
-                            <q-menu id="popconfig" self="top right">
-                                <q-list link separator no-border class="todo-menu">
-                                    <q-item clickable v-for="field in menuPopupConfigProject" :key="field.value">
-                                        <q-item-section avatar>
-                                            <q-icon :name="field.icon"/>
-                                        </q-item-section>

-                                        <q-item-section>{{field.label}}</q-item-section>
+            <q-splitter
+                    v-model="splitterModel"
+                    :limits="[50, 100]"
+            >

-                                        <q-item-section side v-if="showTask(field.value)">
-                                            <q-item-section side>
-                                                <q-icon name="keyboard_arrow_right"/>
-                                            </q-item-section>
+                <template v-slot:before class="clMain">
+                    <div>
+                        <div class="divtitlecat clMain">
+                            <div class="flex-container clMain">
+                                <q-btn v-if="!!idProjParentAtt" size="sm" push color="secondary" round
+                                       icon="arrow_back"
+                                       :to="getrouteup"/>
+                                <div class="flex-item categorytitle shadow-4">{{descrProject | capitalize}}</div>
+                                <div class="flex-item">
+                                    <q-btn push
+                                           size="sm"
+                                           icon="settings">
+                                        <q-menu id="popconfig" self="top right">
+                                            <q-list link separator no-border class="todo-menu">
+                                                <q-item clickable v-for="field in menuPopupConfigProject"
+                                                        :key="field.value">
+                                                    <q-item-section avatar>
+                                                        <q-icon :name="field.icon"/>
+                                                    </q-item-section>

-                                            <q-menu auto-close anchor="bottom middle" self="top middle">
-                                                <q-list dense>
-                                                    <q-item side :icon="field.icon">
+                                                    <q-item-section>{{field.label}}</q-item-section>

-                                                        <q-item-section>
+                                                    <q-item-section side v-if="showTask(field.value)">
+                                                        <q-item-section side>
+                                                            <q-icon name="keyboard_arrow_right"/>
+                                                        </q-item-section>
+
+                                                        <q-menu auto-close anchor="bottom middle" self="top middle">
                                                            <q-list dense>
-                                                                <q-item clickable v-ripple
-                                                                        v-for="opt in listOptionShowTask"
-                                                                        :key="opt.value"
-                                                                        @click="showtype = opt.value">
-                                                                    <q-item-section avatar>
-                                                                        <q-icon :name="opt.icon" inverted
-                                                                                color="primary"/>
-                                                                    </q-item-section>
+                                                                <q-item side :icon="field.icon">
+
                                                                    <q-item-section>
-                                                                        {{opt.label}}
+                                                                        <q-list dense>
+                                                                            <q-item clickable v-ripple
+                                                                                    v-for="opt in listOptionShowTask"
+                                                                                    :key="opt.value"
+                                                                                    @click="showtype = opt.value">
+                                                                                <q-item-section avatar>
+                                                                                    <q-icon :name="opt.icon"
+                                                                                            inverted
+                                                                                            color="primary"/>
+                                                                                </q-item-section>
+                                                                                <q-item-section>
+                                                                                    {{opt.label}}
+                                                                                </q-item-section>
+                                                                            </q-item>
+                                                                        </q-list>
                                                                    </q-item-section>
                                                                </q-item>
                                                            </q-list>
-                                                        </q-item-section>
-                                                    </q-item>
-                                                </q-list>
-                                            </q-menu>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                    </div>
-                </div>
-            </div>
+                                                        </q-menu>
+                                                    </q-item-section>
+                                                </q-item>
+                                            </q-list>
+                                        </q-menu>
+                                    </q-btn>
+                                </div>
+                            </div>
+                        </div>

-            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
-            <div>
-                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container" v-dragula="items_dacompletare(categoryAtt)" drake="second">
-                    <div :id="getmyid(myproj._id)" :index="index"
-                         v-for="(myproj, index) in items_dacompletare(categoryAtt)"
-                         :key="myproj._id" class="myitemdrag">
+                        <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
+                        <div>
+                            <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                            <div class="container" v-dragula="items_dacompletare(idProjAtt)" drake="second">
+                                <div :id="getmyid(myproj._id)" :index="index"
+                                     v-for="(myproj, index) in items_dacompletare(idProjAtt)"
+                                     :key="myproj._id" class="myitemdrag">

-                        <SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
-                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd2"
-                                    :itemproject='myproj'/>
+                                    <SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)"
+                                                   @eventupdate="updateitem"
+                                                   @idsel="setidsel"
+                                                   @deselectAllRows="deselectAllRows" @onEnd="onEnd2"
+                                                   :itemproject='myproj'/>

-                        <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
+                                </div>
+                            </div>
+                            <!--</q-infinite-scroll>-->

-                        <div style="display: none">{{ prior = myproj.priority, priorcomplet = myproj.completed }}
+
+                            <q-input ref="insertProjectBottom" v-model="projbottom"
+                                     style="margin-left: 6px;"
+                                     color="blue-12"
+                                     :label="$t('todo.insertbottom')"
+                                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                                     v-on:keyup.enter="dbInsert(false)"/>
+
+                            <br>
                        </div>
                    </div>
-                </div>
-                <!--</q-infinite-scroll>-->
+                </template>
+                <template v-if="!!itemsel.descr" v-slot:after>
+                    <div class="q-pa-xs clMain">
+                        <div class="flex-container clMain">
+                            <q-icon class="flex-item flex-icon" name="format_align_center"/>
+                            <div class="flex-item projecttitle shadow-4">
+                                {{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">
+                                <q-input
+                                        ref="input"
+                                        v-model="itemsel.longdescr"
+                                        :label="$t('proj.longdescr')"
+                                        outlined
+                                        debounce="500"
+                                        autogrow
+                                />

+                            </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="itemsel.hoursworked"
+                                        type="number"
+                                        rounded outlined
+                                        :label="$t('proj.hoursworked')"
+                                        debounce="500"
+                                />
+                                <CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>

-                <q-input ref="insertTaskBottom" v-model="projbottom"
-                         style="margin-left: 6px;"
-                         color="blue-12"
-                         :label="$t('todo.insertbottom')"
-                         :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                         v-on:keyup.enter="dbInsert(false)"/>
-
-                <br>
-
-            </div>
+                            </div>
+                            <q-icon class="flex-item flex-icon" name="watch_later"/>
+                            <div class="flex-item itemdescr content-center">
+                                <q-input
+                                        ref="input"
+                                        type="number"
+                                        v-model="itemsel.hoursplanned"
+                                        rounded outlined
+                                        :label="$t('proj.hoursplanned')"
+                                        debounce="500"
+                                />
+                                <CProgress :descr="$t('proj.progresstask')" :progressval="itemsel.progressCalc"></CProgress>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </q-splitter>
        </div>
    </q-page>

--- a/src/views/todo/todo.vue
+++ b/src/views/todo/todo.vue
@@ -6,6 +6,7 @@
                    <div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
                    <div class="flex-item">
                        <q-btn push
+                               size="sm"
                               icon="settings">
                            <q-menu id="popconfig" self="top right">
                                <q-list link separator no-border class="todo-menu">
				`@@ -0,0 +1 @@`
				`export {default as CProgress} from './CProgress.vue'`