- added Categories to the Task List.

- Drawer added SubMenu : Personal / Work Todo list categories.

src/components/todos/SingleTodo/SingleTodo.scss

@@ -1,4 +1,8 @@
 
+
+$colcompleted: #a2a2a2;
+$heightitem: 19px;
+
 .flex-item{
    // background-color: #d5e2eb;
   padding: 0px;
@@ -10,7 +14,7 @@
 
 
 .flex-container2 {
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   justify-content: space-between;
   margin: 2px 5px 2px 5px;  // top right bottom left
 }
@@ -46,8 +50,8 @@
   margin-right: 1px;
   padding-left: 1px;
   padding-right: 1px;
-  height: 36px;
-  line-height: 36px;
+  height: $heightitem;
+  line-height: $heightitem;
   text-align: center;
   // background-color: #ff4081;
   font-size: 0.75rem;
@@ -67,8 +71,8 @@
   max-width: 92px;
   min-width: 92px;
   margin: 0 auto;
-  height: 36px;
-  line-height: 36px;
+  height: $heightitem;
+  line-height: $heightitem;
   text-align: center;
   // background-color: #ff4081;
   font-size: 1rem;
@@ -135,8 +139,8 @@
 
 
 .percProgress {
-  height: 24px;
-  line-height: 24px;
+  height: $heightitem;
+  line-height: $heightitem;
   color: #888;
 }
 
@@ -157,6 +161,10 @@
   color: green;
 }
 
+.percompleted {
+  color: $colcompleted
+}
+
 .myexpired {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -164,10 +172,11 @@
 }
 
 .data-item {
-  //max-width: 100px;
+  max-width: 100px;
   //min-width: 100px;
   //display: flex;
   //visibility: initial;
+  margin-right: 3px;
   color: #ccc;
   order: 1;
   flex: 1;
@@ -264,7 +273,7 @@
 }
 
 .status_completed {
-  color:rgba(49, 68, 240, 0.7);
+  color: $colcompleted
 }
 
 .menuTitlePriority {

src/components/todos/SingleTodo/SingleTodo.ts

@@ -8,6 +8,8 @@ import { ITodo } from '../../../model/index'
 
 import $ from 'jquery'
 
+import { debounce } from '../../../classes/debounce'
+
 @Component({
   name: 'SingleTodo'
 })
@@ -22,7 +24,7 @@ export default class SingleTodo extends Vue {
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
-  public popover_menu: boolean = false
+  public popover_menu: boolean = false  // Serve
   public classRow: string = ''
   public sel: boolean = false
   public inEdit: boolean = false
@@ -102,6 +104,9 @@ export default class SingleTodo extends Vue {
       mycolcl = ' highperc'
     }
 
+    if (this.itemtodo.completed)
+      mycolcl = ' percompleted'
+
     this.colProgress = mycolcl
 
     this.menuProgress += mycolcl
@@ -124,7 +129,7 @@ export default class SingleTodo extends Vue {
       this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
     else {
       this.menuPopupTodo = []
-      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][0])
+      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][rescodes.INDEX_MENU_DELETE])
     }
 
   }
@@ -304,6 +309,8 @@ export default class SingleTodo extends Vue {
       this.enableExpiring()
     } else if (action === rescodes.MenuAction.COMPLETED) {
       this.setCompleted()
+    } else if (action === rescodes.MenuAction.PROGRESS_BAR) {
+      this.updatedata()
     }
 
   }

src/components/todos/todo/todo.scss

@@ -59,3 +59,12 @@
   min-height: 10px;
 }
 
+.categorytitle{
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.titleSubMenu {
+  font-size: 0.7rem;
+  font-weight: 350;
+}

src/components/todos/todo/todo.ts

@@ -15,6 +15,7 @@ import draggable from 'vuedraggable'
 import $ from 'jquery'
 
 @Component({
+
   components: { SingleTodo, draggable }
 })
 export default class Todo extends Vue {
@@ -41,6 +42,15 @@ export default class Todo extends Vue {
     console.log('drag = ' + this.drag)
   }
 
+  @Watch('$route.params.category') changecat() {
+    console.log('changecat')
+    this.load()
+  }
+
+  getCategory() {
+    return this.$route.params.category
+  }
+
   change(param) {
     console.log('Change... ' + param)
   }
@@ -257,6 +267,7 @@ export default class Todo extends Vue {
       priority: rescodes.Todos.PRIORITY_NORMAL,
       completed: false,
       created_at: new Date(),
+      category: '',
       modify_at: new Date(),
       expiring_at: mydateexp,
       enableExpiring: false,
@@ -286,6 +297,7 @@ export default class Todo extends Vue {
     const objtodo = this.initcat()
 
     objtodo.descr = this.todo
+    objtodo.category = this.getCategory()
     const lastelem = this.getLastList()
     objtodo.id_prev = (lastelem !== null) ? lastelem.id : rescodes.LIST_START
     objtodo.id_next = rescodes.LIST_END
@@ -432,6 +444,7 @@ export default class Todo extends Vue {
       // #Todo If need to filter the output database ...
       await this.$db.todos
         .where('userId').equals(UserStore.state.userId)
+        .and(todo => todo.category === this.getCategory())
         .toArray()
         .then((response) => {
           Promise.all(response.map(key => key))
@@ -442,6 +455,7 @@ export default class Todo extends Vue {
     } else {
       await this.$db.todos
         .where('userId').equals(UserStore.state.userId)
+        .and(todo => todo.category === this.getCategory())
         .toArray().then(ristodos => {
           arrtemp = ristodos
         })
@@ -541,6 +555,7 @@ export default class Todo extends Vue {
 
       this.modifyField(miorec, myobj, 'descr')
       this.modifyField(miorec, myobj, 'completed')
+      this.modifyField(miorec, myobj, 'category')
       this.modifyField(miorec, myobj, 'expiring_at')
       this.modifyField(miorec, myobj, 'priority')
       this.modifyField(miorec, myobj, 'id_prev')

src/components/todos/todo/todo.vue

@@ -3,6 +3,8 @@
         <div class="panel">
             <p class="caption"></p>
 
+            <div class="categorytitle">{{ getCategory() }}</div>
+
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div class="drag">