Angular 任務列表頁

時間 2019-11-05

標籤 angular 任務列表欄目 AngularJS 简体版

原文原文鏈接

新建一個任務Modulecss

$ ng g m taskhtml

功能：項目列表顯示，增長，修改，刪除項目。邀請其它人員加入項目。數據結構

單一性原則：但願搭建多個組件，每一個組件負責本身的功能。app

1、task相關組件

$ ng g c task/task-homeide

$ ng g c task/task-listsvg

$ ng g c task/task-item佈局

$ ng g c task/task-headerui

$ ng g c task/new-taskthis

$ ng g c task/copy-taskspa

$ ng g c task/new-task-list

須要把NewTaskComponent和CopyTaskComponent放在entryComponents中。

@NgModule({
  declarations: [
    TaskHomeComponent,
    TaskListComponent,
    TaskItemComponent,
    TaskHeaderComponent,
    NewTaskComponent,
    CopyTaskComponent
  ],
  imports: [SharedModule, TaskRoutingModule],
  entryComponents:[NewTaskComponent,CopyTaskComponent]
})

3、TaskHome

<div class="task-list">
  <app-task-list *ngFor="let list of lists" class="list-container">
    <app-task-header [header]="list.name"> </app-task-header>
    <app-task-item *ngFor="let task of list.tasks"> </app-task-item>
  </app-task-list>
</div>

<button
  class="ab-buttonmad-fab fab-button"
  mat-fab
  type="button"
  (click)="openNewProjectDialog()"
>
  <mat-icon>add</mat-icon>
</button>

TaskHome中處理新建任務，修改任務，移動任務，刪除任務列表：

<app-task-header [header]="list.name"
(newTask)="lauchNewTaskDialog()"
(moveAll)="lauchCopyTaskDialog()"
(deleteList)="lauchConfirmDialog()"
> </app-task-header>

  lauchNewTaskDialog() {
    // this.dialog.open(NewTaskComponent);
    const dialogRef = this.dialog.open(NewTaskComponent,{data:{title:'新建任務'}});
  }
  lauchCopyTaskDialog(){
    const dialogRef = this.dialog.open(CopyTaskComponent,{data:{lists:this.lists}});
  }

  launchUpdateTaskDialog(task){
    const dialogRef = this.dialog.open(NewTaskComponent,{data:{title:'修改任務',task:task}});
  }

  lauchConfirmDialog(){
    const dialogRef = this.dialog.open(ConfirmDialogComponent,{data:{title:'刪除任務列表',content:'您肯定要刪除該任務列表嗎？'}});
  }

4、TaskList

app-task-list組件裏面是能夠放內容的。

<mat-list>
  <ng-content>
  </ng-content>
</mat-list>

list裏面內容不去管。

5、Header

<div mat-subheader class="fill">
  <div class="header-container">
    <h3>{{header}}</h3>
  </div>
  <div>
    <div class="fill">
      <button mat-button>
        <mat-icon>add_circle_outine</mat-icon>
        <span>新任務</span>
      </button>
    </div>
  </div>

  <div>
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>keyboard_arrow_down</mat-icon>
    </button>
  </div>
</div>

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>
      mode_edit
    </mat-icon>
    <span>
      修改列表名稱
    </span>
  </button>
  <button mat-menu-item>
    <mat-icon svgIcon="move">
    </mat-icon>
    <span>
      移動列表全部內容
    </span>
  </button>
  <button mat-menu-item>
    <mat-icon>
      delete_forever
    </mat-icon>
    <span>
      刪除列表
    </span>
  </button>
</mat-menu>

View Code

6、ListItem

一、經過優先級不一樣讓任務有一個不一樣顏色的邊框。

  .priority-normal {
    border-left: 3px solid #A6A6A6;
  }
  .priority-important {
    border-left: 3px solid #FFAF38;
  }
  .priority-emergency {
    border-left: 3px solid red;
  }

<mat-list-item class="container" 
[ngClass]="{
  'priority-normal':item.priority===3,
  'priority-important':item.priority===2,
  'priority-emergency':item.priority===1
}">

二、list超出後顯示...,鼠標移上去後給出提示。

從

    <div class="content" mat-line [ngClass]="{'completed':item.completed}">
      {{item.desc}}
    </div>

改成：

    <div class="content" mat-line [ngClass]="{'completed':item.completed}">
      <span [matTooltip]="item.desc">{{item.desc}}</span>
    </div>

所有佈局

<mat-list-item class="container" [ngClass]="{
  'priority-normal':item.priority===3,
  'priority-important':item.priority===2,
  'priority-emergency':item.priority===1
}">
  <mat-checkbox [checked]="item.completed" class="status"> </mat-checkbox>
  <div class="content" mat-line [ngClass]="{'completed':item.completed}">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
  </div>
  <div class="bottom-bar" mat-line>
    <span class="due-date" *ngIf="item.dueDate">
      {{item.dueDate | date:"yy-MM-dd"}}
    </span>
    <mat-icon *ngIf="item.reminder">
      alarm
    </mat-icon>
  </div>
  <mat-icon [svgIcon]="avatar" mat-list-avatar class="avatar">

  </mat-icon>
</mat-list-item>

View Code

mat-icon.avatar {
  overflow: hidden;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 12px;
  order: 3;
}

.completed {
  opacity: 0.64;
  color: #d9d9d9;
  text-decoration: line-through;
}

.priority-normal {
  border-left: 3px solid #a6a6a6;
}

.priority-important {
  border-left: 3px solid #ffaf38;
}

.priority-emergency {
  border-left: 3px solid red;
}

.checkbox-section {
  border: 0 solid #a6a6a6;
}

.duedate {
  background-color: #ff4f3e;
  color: #fff;
}

.alarm {
  font-size: 18px;
}

.bottom-bar {
  margin-top: 3px;
  margin-bottom: 2px;
  font-size: 10px;
  width: 100%;
  order: 1;
}

.status {
  order: -1;
}

.content {
  order: 1;
  width: 100%;
  padding: 5px;
}

.container {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.drag-start {
  opacity: 0.5;
  border: #ff525b dashed 2px;
}

:host {
  width: 100%;
}

View Code

7、NewTask

一、任務優先級：

<mat-radio-group>
      <mat-radio-button *ngFor="let priority of priorities" [value]="priority.value">
        {{priority.label}}
      </mat-radio-button>
</mat-radio-group>

export class NewTaskComponent implements OnInit {
  priorities = [
    {
      label: '緊急',
      value: 1
    },
    {
      label: '重要',
      value: 2
    },
    {
      label: '普通',
      value: 3
    }
  ];
  constructor() { }

  ngOnInit() {
  }
}

二、任務截止日期

    <mat-form-field class="full-width">
      <input type="text" [matDatepicker]="dueDatepicker" matInput [matDatepicker]="" placeholder="任務截止日期">
      <mat-datepicker-toggle matSuffix [for]="dueDatepicker"></mat-datepicker-toggle>
    </mat-form-field>
    <mat-datepicker #dueDatepicker></mat-datepicker>

三、調起NewTask組件

在header中把新建任務的事件發射出來

<button mat-button (click)="onNewTaskClick()">
        <mat-icon>add_circle_outine</mat-icon>
        <span>新任務</span>
</button>

  @Output() newTask= new EventEmitter<void>() ;
  onNewTaskClick(){
    this.newTask.emit();
  }

在TaskHome中監聽

<app-task-header [header]="list.name" (newTask)="lauchNewTaskDialog()"> </app-task-header>

  lauchNewTaskDialog() {
    this.dialog.open(NewTaskComponent);
  }

四、修改任務

taskHome中去監聽taskItem的click事件

    <app-task-item *ngFor="let task of list.tasks" [item]="task" (taskClick)="launchUpdateTaskDialog(task)"> </app-task-item> launchUpdateTaskDialog(task){ const dialogRef = this.dialog.open(NewTaskComponent,{data:{title:'修改任務',task:task}}); }

修改NewTask組件，首先須要有一個title

title:'';
constructor(@Inject(MAT_DIALOG_DATA) private data: any) {
    this.title = this.data.title;
    console.log(JSON.stringify(this.data.task));
}

  <h2 md-dialog-title>{{title}}</h2>

在新建任何和修改任務時候都會傳入title，新建任務時候不會傳入task

  lauchNewTaskDialog() {
    // this.dialog.open(NewTaskComponent);
    const dialogRef = this.dialog.open(NewTaskComponent,{data:{title:'新建任務'}});
  }

  launchUpdateTaskDialog(task){
    const dialogRef = this.dialog.open(NewTaskComponent,{data:{title:'修改任務',task:task}});
  }

問題：點擊checkbox的時候也會彈出修改任務對話框。

解決：

  <mat-checkbox [checked]="item.completed" class="status" (click)="onCheckBoxClick($event)"> </mat-checkbox>

  onCheckBoxClick(event: Event): void {
    event.stopPropagation();
  }

8、移動內容

<mat-select placeholder="請選擇目標列表">
      <mat-option *ngFor="let list of lists" [value]="list">{{list.name}}</mat-option>
</mat-select>

export class CopyTaskComponent implements OnInit {
  lists: any[];
  constructor(@Inject(MAT_DIALOG_DATA) private data: any,
  public dialogRef: MatDialogRef<CopyTaskComponent>) { }

  ngOnInit() {
    this.lists = this.data.lists;
  }

}

9、新建，修改任務列表

新建任務列表和更名字用的同一個Component

<form>
  <h2 md-dialog-title>新建項目列表</h2>
    <div mat-dialog-content>
      <mat-form-field class="full-width">
        <input type="text" matInput placeholder="列表名稱">
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button type="button" mat-raised-button color="primary" (click)="onSave()">保存</button>
      <button type="button" mat-button mat-dialog-close>關閉</button>
    </div>
</form>

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-new-task-list',
  templateUrl: './new-task-list.component.html',
  styleUrls: ['./new-task-list.component.scss']
})
export class NewTaskListComponent implements OnInit {
  title='';

  constructor(@Inject(MAT_DIALOG_DATA) private data,
  private dialogRef: MatDialogRef<NewTaskListComponent>) { }

  ngOnInit() {
  }

  onSave(){
    this.dialogRef.close(this.title);
  }
}

View Code

在TaskHome組件中去處理事件

  launchEditListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "更改列表名稱" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }
  launchNewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "新建列表名稱" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }

10、數據結構的演變

一、

lists=[
    {
      "id":1,
      "name": "待辦",
      "tasks" :[
        {
          id:1,
          desc: '任務一： 去星巴克買咖啡',
          owner:{
            id:1,
            name:'張三',
            avatar:'avatars:svg-11'
          },
          dueDate: new Date()
        },
        {
          id:2,
          desc: '任務一： 完成老闆佈置的PPT做業',
          owner:{
            id:2,
            name:'李四',
            avatar:'avatars:svg-12'
          },
          dueDate: new Date()
        }
      ]
    },
    {
      "id":2,
      "name": "進行中",
      "tasks" :[
        {
          id:1,
          desc: '任務三： 項目代碼評審',
          owner:{
            id:1,
            name:'王五',
            avatar:'avatars:svg-13'
          },
          dueDate: new Date()
        },
        {
          id:2,
          desc: '任務一： 制定項目計劃',
          owner:{
            id:2,
            name:'李四',
            avatar:'avatars:svg-12'
          },
          dueDate: new Date()
        }
      ]
    }
  ]

二、每個任務Item都加一個完成狀態completed

lists = [
    {
      id: 1,
      name: "待辦",
      tasks: [
        {
          id: 1,
          desc: "任務一： 去星巴克買咖啡",
          completed: true,
          owner: {
            id: 1,
            name: "張三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任務一： 完成老闆佈置的PPT做業",
          completed: false,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "進行中",
      tasks: [
        {
          id: 1,
          desc: "任務三： 項目代碼評審",
          completed: false,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任務一： 制定項目計劃",
          completed: false,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];

View Code

三、有些任務加reminder

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-task-home",
  templateUrl: "./task-home.component.html",
  styleUrls: ["./task-home.component.scss"]
})
export class TaskHomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  lists = [
    {
      id: 1,
      name: "待辦",
      tasks: [
        {
          id: 1,
          desc: "任務一： 去星巴克買咖啡",
          completed: true,
          owner: {
            id: 1,
            name: "張三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任務一： 完成老闆佈置的PPT做業",
          completed: false,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "進行中",
      tasks: [
        {
          id: 1,
          desc: "任務三： 項目代碼評審",
          completed: false,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任務一： 制定項目計劃",
          completed: false,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];
}

View Code

四、爲每一個任務添加優先級priority

lists = [
    {
      id: 1,
      name: "待辦",
      tasks: [
        {
          id: 1,
          desc: "任務一： 去星巴克買咖啡",
          completed: true,
          priority: 3,
          owner: {
            id: 1,
            name: "張三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任務一： 完成老闆佈置的PPT做業",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "進行中",
      tasks: [
        {
          id: 1,
          desc: "任務三： 項目代碼評審",
          completed: false,
          priority: 1,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任務一： 制定項目計劃",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];