feat(page: right-control): completed todo item can be hide

NG-ZORRO · Sep 16, 2018 · cc11969 · cc11969
1 parent 3ff7fa3
commit cc11969
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 29 deletions.
diff --git a/src/app/pages/main/left-control/list/list.component.ts b/src/app/pages/main/left-control/list/list.component.ts
@@ -83,7 +83,6 @@ export class ListComponent implements OnInit, OnDestroy {
     this.renameListModalVisible = true;
     setTimeout(() => {
       const title = this.lists.find(l => l._id === this.contextListUuid).title;
-      console.log(title);
       this.listRenameInput.nativeElement.value = title;
       this.listRenameInput.nativeElement.focus();
     });

diff --git a/src/app/pages/main/right-control/header/header.component.html b/src/app/pages/main/right-control/header/header.component.html
@@ -14,24 +14,32 @@
       </div>
     </nz-dropdown>
   </div>
-  <div class="sort-btn-wrapper">
+  <div class="action-btn-wrapper">
     <nz-dropdown [nzPlacement]="'bottomRight'">
       <a nz-dropdown>
-        排序
-        <i class="anticon anticon-down"></i>
+        <i class="anticon anticon-setting"></i>
+        设置
       </a>
-      <ul nz-menu nzSelectable>
-        <li nz-menu-item (click)="switchRankType('title')">
-          名称
+      <ul nz-menu>
+        <li nz-menu-item (click)="toggleCompletedHide()">
+          {{ completedHide ? '显示已完成' : '隐藏已完成' }}
         </li>
-        <li nz-menu-item (click)="switchRankType('planAt')">
-          计划时间
-        </li>
-        <li nz-menu-item (click)="switchRankType('dueAt')">
-          截止时间
-        </li>
-        <li nz-menu-item (click)="switchRankType('completeFlag')">
-          完成状态
+        <li nz-submenu>
+          <span title>排序</span>
+          <ul nzSelectable class="sort-option-list">
+            <li nz-menu-item (click)="switchRankType('title')">
+              名称
+            </li>
+            <li nz-menu-item (click)="switchRankType('planAt')">
+              计划时间
+            </li>
+            <li nz-menu-item (click)="switchRankType('dueAt')">
+              截止时间
+            </li>
+            <li nz-menu-item (click)="switchRankType('completeFlag')">
+              完成状态
+            </li>
+          </ul>
         </li>
       </ul>
     </nz-dropdown>

diff --git a/src/app/pages/main/right-control/header/header.component.less b/src/app/pages/main/right-control/header/header.component.less
@@ -25,7 +25,7 @@
     right: 20px;
   }
 
-  .sort-btn-wrapper {
+  .action-btn-wrapper {
     position: absolute;
     bottom: 0;
     right: 20px;
@@ -38,3 +38,8 @@
   max-height: 400px;
   overflow: scroll;
 }
+
+.sort-option-list {
+  padding-left: 0;
+  list-style: none;
+}
diff --git a/src/app/pages/main/right-control/header/header.component.ts b/src/app/pages/main/right-control/header/header.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { RankBy } from '../../../../../domain/type';
 import { ListService } from '../../../../services/list/list.service';
 import { TodoService } from '../../../../services/todo/todo.service';
@@ -9,23 +10,38 @@ import { TodoService } from '../../../../services/todo/todo.service';
   templateUrl: './header.component.html',
   styleUrls: [ './header.component.less' ]
 })
-export class HeaderComponent implements OnInit {
-  private listTitle$: Subscription;
+export class HeaderComponent implements OnInit, OnDestroy {
+  private unsubscribe$ = new Subject<void>();
 
   listTitle = '';
+  completedHide = false;
 
   constructor(
     private listService: ListService,
     private todoService: TodoService
   ) { }
 
-  ngOnInit() {
-    this.listTitle$ = this.listService.current$.subscribe(list => {
-      this.listTitle = list ? list.title : '';
-    });
+  ngOnInit(): void {
+    this.listService.current$
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe(list => {
+        this.listTitle = list ? list.title : '';
+      });
+    this.todoService.completedHide$
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe(hide => this.completedHide = hide);
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
   }
 
   switchRankType(e: RankBy): void {
     this.todoService.toggleRank(e);
   }
+
+  toggleCompletedHide(): void {
+    this.todoService.toggleCompletedHide(!this.completedHide);
+  }
 }
diff --git a/src/app/pages/main/right-control/todo/todo.component.ts b/src/app/pages/main/right-control/todo/todo.component.ts
@@ -45,10 +45,15 @@ export class TodoComponent implements OnInit, OnDestroy {
         this.lists = lists;
       });
 
-    combineLatest(this.listService.currentUuid$, this.todoService.todo$, this.todoService.rank$)
+    combineLatest(
+      this.listService.currentUuid$,
+      this.todoService.todo$,
+      this.todoService.rank$,
+      this.todoService.completedHide$
+      )
       .pipe(takeUntil(this.destory$))
       .subscribe(sources => {
-        this.processTodos(sources[ 0 ], sources[ 1 ], sources[ 2 ]);
+        this.processTodos(sources[ 0 ], sources[ 1 ], sources[ 2 ], sources[3]);
       });
 
     this.todoService.getAll();
@@ -57,17 +62,19 @@ export class TodoComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.destory$.next();
+    this.destory$.complete();
   }
 
-  private processTodos(listUUID: string, todos: Todo[], rank: RankBy): void {
+  private processTodos(listUUID: string, todos: Todo[], rank: RankBy, completedHide: boolean): void {
     const filteredTodos = todos
       .filter(todo => {
         return ((listUUID === 'today' && todo.planAt && floorToDate(todo.planAt) <= getTodayTime())
           || (listUUID === 'todo' && (!todo.listUUID || todo.listUUID === 'todo'))
           || (listUUID === todo.listUUID));
       })
       .map(todo => Object.assign({}, todo) as Todo)
-      .sort(rankerGenerator(rank));
+      .sort(rankerGenerator(rank))
+      .filter(todo => completedHide ? !todo.completedFlag : todo);
 
     this.todos = [].concat(filteredTodos);
   }

diff --git a/src/app/services/todo/todo.service.ts b/src/app/services/todo/todo.service.ts
@@ -11,9 +11,11 @@ import { RankBy } from '../../../domain/type';
 export class TodoService {
   todo$ = new Subject<Todo[]>();
   rank$ = new Subject<RankBy>();
+  completedHide$ = new Subject<boolean>();
 
   private todos: Todo[] = [];
   private rank: RankBy = 'title';
+  private completedHide = false;
 
   constructor(
     private listService: ListService,
@@ -25,6 +27,7 @@ export class TodoService {
   private broadCast(): void {
     this.todo$.next(this.todos);
     this.rank$.next(this.rank);
+    this.completedHide$.next(this.completedHide);
   }
 
   private persist(): void {
@@ -58,6 +61,7 @@ export class TodoService {
       todo.completedFlag = !todo.completedFlag;
       todo.completedAt = todo.completedFlag ? getCurrentTime() : undefined;
       this.persist();
+      this.completedHide$.next(this.completedHide);
     }
   }
 
@@ -97,7 +101,7 @@ export class TodoService {
     const index = this.todos.findIndex(t => t._id === uuid);
     if (index !== -1) {
       this.todos.splice(index, 1);
-      this.persist()
+      this.persist();
       this.broadCast();
     }
   }
@@ -111,4 +115,9 @@ export class TodoService {
     this.rank = r;
     this.rank$.next(r);
   }
+
+  toggleCompletedHide(hide: boolean): void {
+    this.completedHide = hide;
+    this.completedHide$.next(hide);
+  }
 }