- added fields: longdescr, hoursworked, hoursplanned

quasar.conf.js

@@ -170,6 +170,8 @@ module.exports = function (ctx) {
         'QPageScroller',
         'QAvatar',
         'QImg',
+        'QSplitter',
+        'QSeparator',
         'QCarouselSlide'
       ],
       directives: [

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 (const arrsing of myarr) {
-                for (let indrec in myarr[indrecCat]) {
+                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)
                 })
               }
             }

src/App.scss

@@ -50,3 +50,13 @@
   font-size: 1.1rem;
   text-align: center;
 }
+
+.lowperc {
+  color: red;
+}
+.medperc {
+  color: blue;
+}
+.highperc {
+  color: green;
+}

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;
+}

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()
+  }
+
+}

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>

src/components/CProgress/index.ts

@@ -0,0 +1 @@
+export {default as CProgress} from './CProgress.vue'

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from '../views/categories'
 export * from './todos'
 export * from './logo'
+export * from './CProgress'

src/components/projects/SingleProject/SingleProject.scss

@@ -9,8 +9,8 @@ $heightdescr: 20px;
 
 .flex-item{
    // background-color: #d5e2eb;
-  padding: 0px;
+  padding: 2px;
-  margin: 1px;
+  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 {

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 = ''
+    this.colProgress = tools.getProgressColor(this.itemproject.progressCalc)
-    if (this.itemproject.progressCalc < 33) {
-      mycolcl = ' lowperc'
-    } else if (this.itemproject.progressCalc < 66) {
-      mycolcl = ' medperc'
-    } else {
-      mycolcl = ' highperc'
-    }
 
-    this.colProgress = mycolcl
+    this.percProgress += ' ' + tools.getProgressClassColor(this.itemproject.progressCalc)
-
-    this.percProgress += mycolcl
 
     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) {
+    } else if (action === tools.MenuAction.EDIT) {
-      return await this.setCompleted()
+      this.activeEdit()
-    } else if (action === tools.MenuAction.PROGRESS_BAR) {
-      return await this.updatedata('progressCalc')
     } else if (action === 0) {
       this.deselectAndExitEdit()
     }

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

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>

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
 }

src/components/todos/SingleTodo/SingleTodo.ts

@@ -126,20 +126,15 @@ export default class SingleTodo extends Vue {
     this.menuProgress = 'menuProgress'
     this.percProgress = 'percProgress'
 
-    let mycolcl = ''
+    let mycolcl = ' ' + tools.getProgressClassColor(this.itemtodo.progress)
-    if (this.itemtodo.progress < 33) {
+    this.colProgress = tools.getProgressColor(this.itemtodo.progress)
-      mycolcl = ' lowperc'
-    } else if (this.itemtodo.progress < 66) {
-      mycolcl = ' medperc'
-    } else {
-      mycolcl = ' highperc'
-    }
 
     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

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>

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,
+  id_parent?: string
-  priority?: number,
+  descr?: string
-  completed?: boolean,
+  longdescr?: string
-  created_at?: Date,
+  hoursplanned?: number
-  modify_at?: Date,
+  hoursworked?: number
-  completed_at?: Date,
+  priority?: number
-  expiring_at?: Date,
+  completed?: boolean
-  enableExpiring?: boolean,
+  created_at?: Date
-  id_prev?: string,
+  modify_at?: Date
-  modified?: boolean,
+  completed_at?: Date
-  pos?: number,
+  expiring_at?: Date
-  order?: number,
+  enableExpiring?: boolean
+  id_prev?: string
+  modified?: boolean
+  pos?: number
+  order?: number
   progressCalc?: number
 }
 
+
 export interface IParamIProject {
   categorySel?: string
   checkPending?: boolean

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
 }
 

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

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'
+    }
   },
 };
 

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;

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

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

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!')
   }
 }
 

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' },

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) {
+      const item = state.projects.find((item) => item._id === id)
-        return state.projects.filter((proj) => proj.completed).slice(0, state.visuLastCompleted)
+      if (!!item)
-      }  // Show only the first N completed
+        return item.descr
-      else if (state.showtype === costanti.ShowTypeTask.SHOW_ALL) {
-        return state.projects.filter((proj) => proj.completed)
-      }
-      else {
-        return []
-      }
-    } else {
-      return []
     }
-  }, 'projs_completati')
 
-  const doneProjectsCount = b.read((state: IProjectsState) => (cat: string): number => {
+    return ''
-    return getters.projs_completati(cat).length
+  }, 'getDescrById')
-  }, 'doneProjectsCount')
+
-  const ProjectsCount = b.read((state: IProjectsState) => (cat: string): number => {
+  const getParentById = b.read((state: IProjectsState) => (id: string): string => {
     if (state.projects) {
-      return state.projects.length
+      const item = state.projects.find((item) => item._id === id)
-    } else {
+      if (!!item)
-      return 0
+        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() {
+    get getDescrById() {
-      return projs_completati()
+      return getDescrById()
     },
-    get doneProjectsCount() {
+    get getParentById() {
-      return doneProjectsCount()
+      return getParentById()
     },
-    get ProjectsCount() {
+    get getRecordById() {
-      return ProjectsCount()
+      return getRecordById()
     }
+
   }
 }
 
@@ -154,13 +167,21 @@ namespace Mutations {
 
 namespace Actions {
 
-  async function dbLoad(context, { checkPending }) {
+  async function dbLoad(context, { checkPending, onlyiffirsttime }) {
-    console.log('dbLoad', nametable, checkPending, 'userid=', UserStore.state.userId)
+
+    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 = Getters.getters.items_dacompletare(itemdragend.id_proj)
-    const myarr = state.projects
 
     tools.swapGeneralElem(nametable, myarr, itemdragend, fieldtochange)
 

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()
     }
   }
 }

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

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)
-        tools.notifyarraychanged(myarr[indelemchange])
         // 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])
+      console.log('   DOPO!', tools.logga_arrproj(myarr))
-      tools.notifyarraychanged(myarr[itemdragend.oldIndex])
 
-      if (itemdragend.field !== 'priority') {
+      // Ora inverti gli indici
-        const precind = itemdragend.newIndex - 1
+      const indold = itemdragend.oldIndex
-        const nextind = itemdragend.newIndex + 1
+      itemdragend.oldIndex = itemdragend.newIndex
+      itemdragend.newIndex = indold
 
-        if (tools.isOkIndex(myarr, precind) && tools.isOkIndex(myarr, nextind)) {
+      if (nametable === 'todos') {
-          if ((myarr[precind].priority === myarr[nextind].priority) && (myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
+        if (itemdragend.field !== 'priority') {
-            // console.log('   1)')
+          const precind = itemdragend.newIndex - 1
-            myarr[itemdragend.newIndex].priority = myarr[precind].priority
+          const nextind = itemdragend.newIndex + 1
-            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])
-            }
 
-          } else {
+          if (tools.isOkIndex(myarr, precind) && tools.isOkIndex(myarr, nextind)) {
-            if ((myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
+            if ((myarr[precind].priority === myarr[nextind].priority) && (myarr[precind].priority !== myarr[itemdragend.newIndex].priority)) {
-              console.log('   3)')
+              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 elem1 = tools.update_idprev(myarr, itemdragend.newIndex, itemdragend.newIndex - 1)       // 0, -1
-      const elem2 = tools.update_idprev(myarr, itemdragend.newIndex + 1, itemdragend.newIndex)
+      const elem2 = tools.update_idprev(myarr, itemdragend.newIndex + 1, itemdragend.newIndex)   // 1, 0
-      const elem3 = tools.update_idprev(myarr, itemdragend.oldIndex, itemdragend.oldIndex - 1)
+      const elem3 = tools.update_idprev(myarr, itemdragend.oldIndex, itemdragend.oldIndex - 1)       // 1, 0
-      const elem4 = tools.update_idprev(myarr, itemdragend.oldIndex + 1, itemdragend.oldIndex)
+      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'
+    }
   }
 
 }

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'

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;
+}

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() {
+  get descrParent() {
-    return Projects.getters.ProjectsCount(this.categoryAtt)
+    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 })
+  @Watch('$route.params.idProj')
-  public projs_completati: (state: IProjectsState, category: string) => IProject[]
+  public changeparent() {
+    this.idProjAtt = this.$route.params.idProj
+    this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
+  }
 
-  @Watch('$route.params.category')
+  @Watch('itemsel.progressCalc')
-  public changecat() {
+  public changeprogress() {
-    this.categoryAtt = this.$route.params.category
+    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) {
+    if (!!this.$route.params.idProj) {
-      this.categoryAtt = this.$route.params.category
+      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
+
+  }
+
 }

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)">
+                <template v-slot:before class="clMain">
-                                            <q-item-section side>
+                    <div>
-                                                <q-icon name="keyboard_arrow_right"/>
+                        <div class="divtitlecat clMain">
-                                            </q-item-section>
+                            <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-item-section>{{field.label}}</q-item-section>
-                                                <q-list dense>
-                                                    <q-item side :icon="field.icon">
 
-                                                        <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
+                                                                <q-item side :icon="field.icon">
-                                                                        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-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-menu>
-                                                    </q-item>
+                                                    </q-item-section>
-                                                </q-list>
+                                                </q-item>
-                                            </q-menu>
+                                            </q-list>
-                                        </q-item-section>
+                                        </q-menu>
-                                    </q-item>
+                                    </q-btn>
-                                </q-list>
+                                </div>
-                            </q-menu>
+                            </div>
-                        </q-btn>
+                        </div>
-                    </div>
-                </div>
-            </div>
 
-            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
+                        <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
-            <div>
+                        <div>
-                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                            <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container" v-dragula="items_dacompletare(categoryAtt)" drake="second">
+                            <div class="container" v-dragula="items_dacompletare(idProjAtt)" drake="second">
-                    <div :id="getmyid(myproj._id)" :index="index"
+                                <div :id="getmyid(myproj._id)" :index="index"
-                         v-for="(myproj, index) in items_dacompletare(categoryAtt)"
+                                     v-for="(myproj, index) in items_dacompletare(idProjAtt)"
-                         :key="myproj._id" class="myitemdrag">
+                                     :key="myproj._id" class="myitemdrag">
 
-                        <SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
+                                    <SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)"
-                                    @deselectAllRows="deselectAllRows" @onEnd="onEnd2"
+                                                   @eventupdate="updateitem"
-                                    :itemproject='myproj'/>
+                                                   @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>
+                </template>
-                <!--</q-infinite-scroll>-->
+                <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"
+                            </div>
-                         style="margin-left: 6px;"
+                            <q-icon class="flex-item flex-icon" name="watch_later"/>
-                         color="blue-12"
+                            <div class="flex-item itemdescr content-center">
-                         :label="$t('todo.insertbottom')"
+                                <q-input
-                         :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                                        ref="input"
-                         v-on:keyup.enter="dbInsert(false)"/>
+                                        type="number"
-
+                                        v-model="itemsel.hoursplanned"
-                <br>
+                                        rounded outlined
-
+                                        :label="$t('proj.hoursplanned')"
-            </div>
+                                        debounce="500"
+                                />
+                                <CProgress :descr="$t('proj.progresstask')" :progressval="itemsel.progressCalc"></CProgress>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </q-splitter>
         </div>
     </q-page>
 

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