- added fields: longdescr, hoursworked, hoursplanned

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

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

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

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>