- adding Progress %

quasar.conf.js

@@ -150,6 +150,8 @@ module.exports = function (ctx) {
         'QSlideTransition',
         'QTable',
         'QContextMenu',
+        'QProgress',
+        'QSlider',
       ],
       directives: [
         'Ripple',

src/components/todos/SingleTodo/SingleTodo.scss

@@ -42,7 +42,10 @@
 .pos-item {
   max-width: 24px;
   min-width: 24px;
-  margin: 0 auto;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding-left: 1px;
+  padding-right: 1px;
   height: 36px;
   line-height: 36px;
   text-align: center;
@@ -122,6 +125,38 @@
   min-width: 24px;
 }
 
+.progress-item {
+  max-width: 32px;
+  min-width: 24px;
+  flex: 1;
+  order: 2;
+  text-align: right;
+}
+
+
+.percProgress {
+  height: 24px;
+  line-height: 24px;
+  color: #888;
+}
+
+.menuProgress {
+  width:50px;
+}
+
+.colProgress {
+}
+
+.lowperc {
+  color: red;
+}
+.medperc {
+  color: blue;
+}
+.highperc {
+  color: green;
+}
+
 .myexpired {
   padding-top: 0px;
   padding-bottom: 0px;

src/components/todos/SingleTodo/SingleTodo.ts

@@ -27,6 +27,9 @@ export default class SingleTodo extends Vue {
   public sel: boolean = false
   public inEdit: boolean = false
   public precDescr: string = ''
+  public menuProgress: string = 'menuprogress'
+  public percProgress: string = 'percProgress'
+  public colProgress: string = 'blue'
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -48,10 +51,15 @@ export default class SingleTodo extends Vue {
     this.watchupdate()
   }
 
+
   @Watch('itemtodo.descr') valueChanged5() {
     this.precDescr = this.itemtodo.descr
   }
 
+  @Watch('itemtodo.progress') valueChanged6() {
+    this.updateClasses()
+  }
+
   isTodo() {
     return this.isTodoByElem(this.itemtodo)
   }
@@ -82,6 +90,23 @@ export default class SingleTodo extends Vue {
       this.classExpiringEx += ' status_completed'
     }
 
+    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'
+    }
+
+    this.colProgress = mycolcl
+
+    this.menuProgress += mycolcl
+    this.percProgress += mycolcl
+
     // if (this.inEdit) {
     //   this.classDescr += ' hide'
     //   this.classDescrEdit += ' show'
@@ -293,4 +318,11 @@ export default class SingleTodo extends Vue {
 
     // this.$q.notify('setPriority: ' + elem)
   }
+
+  getPercentageProgress() {
+    if (this.itemtodo.completed)
+      return 100
+    else
+      return this.itemtodo.progress
+  }
 }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="getClassRow()" >
+    <div :class="getClassRow()">
         <q-context-menu>
             <q-list link separator no-border class="todo-menu">
                 <q-item v-for="field in menuPopupTodo" :key="field.value"
@@ -16,6 +16,16 @@
                     <q-item-side v-if="field.value === 110">
                         <q-checkbox v-model="itemtodo.completed"/>
                     </q-item-side>
+
+                    <q-item-side v-if="field.value === 120">
+                        <q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
+                    </q-item-side>
+                    <q-item-side v-if="field.value === 120">
+                        <div :class="percProgress">
+                            {{getPercentageProgress()}}%
+                        </div>
+                    </q-item-side>
+
                 </q-item>
             </q-list>
         </q-context-menu>
@@ -41,6 +51,14 @@
                             <q-item-side v-if="field.value === 110">
                                 <q-checkbox v-model="itemtodo.completed"/>
                             </q-item-side>
+                            <q-item-side v-if="field.value === 120">
+                                <q-slider :class="menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
+                            </q-item-side>
+                            <q-item-side v-if="field.value === 120">
+                                <div :class="percProgress">
+                                    {{getPercentageProgress()}}%
+                                </div>
+                            </q-item-side>
                         </q-item>
                     </q-list>
                 </q-popover>
@@ -87,16 +105,29 @@
         <!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
 
         <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
-            <!--<q-field>{{ itemtodo.descr }}</q-field>-->
+        <!--<q-field>{{ itemtodo.descr }}</q-field>-->
         <!--</div>-->
 
+        <div v-if="isTodo()" class="flex-item progress-item">
+            <q-progress
+                    :percentage="getPercentageProgress()"
+                    class="progress-item"
+                    :color="colProgress"
+            >
+            </q-progress>
+            <div :class="percProgress">
+                {{getPercentageProgress()}}%
+            </div>
+        </div>
+
 
         <div v-if="itemtodo.enableExpiring">
             <div :class="classExpiring">
                 <q-datetime
                         :class="classExpiringEx"
                         v-model="itemtodo.expiring_at"
-                        class="myexpired"/>
+                        class="myexpired">
+                </q-datetime>
             </div>
         </div>
         <!--<div class="flex-item btn-item">-->

src/components/todos/todo/todo.ts

@@ -263,7 +263,8 @@ export default class Todo extends Vue {
       id_prev: 0,
       id_next: 0,
       pos: 0,
-      modified: true
+      modified: true,
+      progress: 0
     }
     return objtodo
 
@@ -546,6 +547,8 @@ export default class Todo extends Vue {
       this.modifyField(miorec, myobj, 'id_next')
       this.modifyField(miorec, myobj, 'pos')
       this.modifyField(miorec, myobj, 'enableExpiring')
+      this.modifyField(miorec, myobj, 'progress')
+
 
       if (miorec.modified) {
         miorec.modify_at = new Date()

src/components/todos/todo/todo.vue

@@ -3,10 +3,6 @@
         <div class="panel">
             <p class="caption"></p>
 
-            <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
-                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="insertTodo"/>
-
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div class="drag">
@@ -31,6 +27,9 @@
                     </transition-group>
                 </draggable>
             </div>
+            <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertTodo"/>
 
         </div>
     </q-page>

src/model/Todos.ts

@@ -11,7 +11,8 @@ export interface ITodo {
   id_prev?: number,
   id_next?: number,
   modified?: boolean,
-  pos?: number
+  pos?: number,
+  progress?: number
 }
 
 export interface ITodosState {

src/plugins/vue-idb.js

@@ -9,7 +9,7 @@ export default ({ Vue }) => {
     database: 'test',
     schemas: [
       { categories: '++id, sub_categ_id, descr_it, campo2bool, campo3bool' },
-      { todos: '++id, userId, pos, descr, priority, completed, created_at, modify_at, expiring_at' }
+      { todos: '++id, userId, pos, descr, priority, completed, created_at, modify_at, expiring_at, progress, enableExpiring' }
     ],
     options: {
       todos: { type: 'list', primary: 'pos', label: 'label', updated_at: 'updated_at' },

src/store/Modules/rescodes.ts

@@ -27,7 +27,8 @@ export const rescodes = {
   MenuAction: {
     DELETE: 100,
     TOGGLE_EXPIRING: 101,
-    COMPLETED: 110
+    COMPLETED: 110,
+    PROGRESS_BAR: 120
   },
 
 
@@ -77,6 +78,13 @@ export const rescodes = {
     'it': [
       {
         id: 1,
+        label: 'Progressi',
+        value: 120, // PROGRESS_BAR
+        icon: 'check_circle',
+        checked: true
+      },
+      {
+        id: 2,
         label: 'Completato',
         value: 110, // COMPLETED
         icon: 'check_circle',
@@ -100,13 +108,20 @@ export const rescodes = {
     'enUk': [
       {
         id: 1,
+        label: 'Progress',
+        value: 120, // PROGRESS_BAR
+        icon: 'check_circle',
+        checked: true
+      },
+      {
+        id: 2,
         label: 'Completed',
         value: 110, // COMPLETED
         icon: 'check_circle',
         checked: true
       },
       {
-        id: 2,
+        id: 3,
         label: 'Set Expiring',
         value: 101, // TOGGLE_EXPIRING
         icon: 'date_range',