- adding Progress %

2019-01-29 00:48:04 +01:00
parent e087bdcef5
commit 0225f27535
9 changed files with 131 additions and 13 deletions
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -150,6 +150,8 @@ module.exports = function (ctx) {
        'QSlideTransition',
        'QTable',
        'QContextMenu',
+        'QProgress',
+        'QSlider',
      ],
      directives: [
        'Ripple',
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/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;
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/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
+  }
 }
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/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">-->
--- a/src/components/todos/todo/todo.ts
+++ b/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()
--- a/src/components/todos/todo/todo.vue
+++ b/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>
--- a/src/model/Todos.ts
+++ b/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 {
--- a/src/plugins/vue-idb.js
+++ b/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' },
--- a/src/store/Modules/rescodes.ts
+++ b/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',