feat(page: detail): can add tags to item

src/app/pages/main/detail/detail.component.html

@@ -11,6 +11,28 @@
     </div>
     <label nz-checkbox (click)="$event.stopPropagation()" [(ngModel)]="currentTodo.completedFlag"></label>
     <span>标记完成</span>
+    <nz-divider nzText="标签" nzOrientation="left"></nz-divider>
+    <div class="input-container">
+      <nz-tag
+        *ngFor="let tagName of currentTodo.tags; let i = index"
+        nzMode="closeable"
+        (nzAfterClose)="handleTagClose(i)">{{ tagName }}</nz-tag>
+      <nz-tag
+        *ngIf="!addTagInputVisible"
+        class="editable-tag"
+        (click)="showAddTagInput()">
+        <i class="anticon anticon-plus"></i> New Tag
+      </nz-tag>
+      <input
+        *ngIf="addTagInputVisible"
+        #tagNameInput
+        style="width: 78px;"
+        nz-input
+        [(ngModel)]="newTagName"
+        nzSize="small"
+        (blur)="handleAddTagConfirm()"
+        (keyup.enter)="handleAddTagConfirm()">
+    </div>
     <nz-divider nzText="标题" nzOrientation="left"></nz-divider>
     <div class="input-container">
       <input nz-input [(ngModel)]="currentTodo.title" placeholder="待办事项" [disabled]="!!currentTodo.completedFlag" id="title" name="title">

src/app/pages/main/detail/detail.component.ts

@@ -3,7 +3,9 @@ import {
   EventEmitter,
   OnInit,
   Output,
-  HostBinding
+  HostBinding,
+  ViewChild,
+  ElementRef
 } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
@@ -23,11 +25,15 @@ import { detailTransition } from './detail.animation';
 export class DetailComponent implements OnInit {
   @HostBinding('@detailTransition') state = 'activated';
   @Output() changedTodo = new EventEmitter();
+  @ViewChild('tagNameInput') tagNameInput: ElementRef;
 
   private trueSource: Todo;
   currentTodo: Todo;
   dueDate: Date;
   planDate: Date;
+  tags: string[];
+  addTagInputVisible = false;
+  newTagName = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -41,7 +47,7 @@ export class DetailComponent implements OnInit {
       const id = paramsMap.get('id');
       const todo = this.todoService.getByUUID(id);
       this.trueSource = todo;
-      this.currentTodo = Object.assign({}, todo) as Todo;
+      this.currentTodo = { ...todo, tags: [...(todo.tags || [])] };
       if (todo.dueAt) {
         this.dueDate = new Date(todo.dueAt);
       }
@@ -105,4 +111,23 @@ export class DetailComponent implements OnInit {
     this.todoService.delete(this.currentTodo._id);
     this.goBack();
   }
+
+  showAddTagInput(): void {
+    this.addTagInputVisible = true;
+    setTimeout(() => {
+      this.tagNameInput.nativeElement.focus();
+    }, 10);
+  }
+
+  handleAddTagConfirm(): void {
+    if (this.newTagName && this.currentTodo.tags.indexOf(this.newTagName) ===  -1) {
+      this.currentTodo.tags.push(this.newTagName);
+    }
+    this.newTagName = '';
+    this.addTagInputVisible = false;
+  }
+
+  handleTagClose(index: number): void {
+    this.currentTodo.tags.splice(index, 1);
+  }
 }

src/app/pages/main/right-control/todo/todo.component.html

@@ -5,6 +5,7 @@
         <ng-template #nzTitle>
           <label nz-checkbox (click)="$event.stopPropagation()" [(ngModel)]="item.completedFlag" (ngModelChange)="toggle(item._id)"></label>
           <span [class.strikethrough]="item.completedFlag">{{ item.title }}</span>
+          <nz-tag *ngFor="let tagName of item.tags">{{ tagName }}</nz-tag>
         </ng-template>
         <ng-template #nzDescription>
           <span *ngIf="item.dueAt" class="todo-desc">

src/domain/entities.ts

@@ -11,6 +11,7 @@ export class Todo {
   dueAt: number;
   planAt: number;
   notifyMe = false;
+  tags: string[] = [];
 
   constructor(title: string, listUUID?: string) {
     this._id = generateUUID();