Flowable的REST API（三）

在上一篇文章中，我写了一篇关于使用Angular，Angular Material和Flowable的REST API来创建一个定制的Task List组件的文章：

在这篇文章中，我们将使用Angular，Angular Material和Flowable的REST API来创建一个定制的Task组件：

Master/Detail Components

目前，我们有一个任务列表组件，显示任务列表。当用户单击任务列表中的任务时，我们还希望显示所选任务的详细信息。

将所有功能保存在一个组件中绝不是一个好主意，因此我们将创建一个负责显示所选任务详细信息的新组件。

任务组件
使用Angular CLI在flowable库中生成Task组件：

ng generate component components/task --project=flowable --skip-import

我们来看看Task模板：

<!-- Task Header -->

<div *ngIf="task" class="task-header">

  <div class="task-header-content">

    <h2> {{ task.name }} </h2>
    <button mat-raised-button
            color="accent"
            [disabled]="!isValid()"
            (click)="onComplete()">
      {{ completeButton }}
    </button>

  </div>

</div>

<!-- Task Content -->

<div *ngIf="taskFormGroup" class="task-content">

  <dynamic-form autocomplete="off"
                [className]="'crm-nested-grid-container'"
                [formGroup]="taskFormGroup"
                [model]="taskModel">
  </dynamic-form>

</div>

任务模板分为两个部分：标题部分和内容部分。

在标题部分，模板绑定到组件的task.name属性，并包含一个COMPLETE按钮：

如果任务具有关联的表单（task.formKey），那么它将在模板的内容部分中呈现（使用Serendipity的动态表单库）：

添加@Input（）任务属性

该task属性是一个Input属性，使用@Input()装饰器注释：

import { TaskModel } from '../../models/task-list.model';

...

@Component({
  selector: 'flow-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.scss']
})
export class TaskComponent implements OnInit, OnChanges, OnDestroy {

  @Input() task: TaskModel;
  
  ...
   
}

更新任务列表模板

任务组件选择器是“flow-task”。在任务列表组件模板的底部附近添加<flow-task>元素：

  <div class="crm-task-list-container">

    <mat-nav-list>

      ...

    </mat-nav-list>

  </div>

  <div class="crm-task-container">
    <flow-task [task]="selectedItem"> </flow-task>
  </div>

并将Task List组件的selectedItem属性绑定到<flow-task>元素的task属性。

现在，当您选择任务时，将显示任务的详细信息：

您可以填写表格，然后点击COMPLETE按钮来完成任务。

Flowable Task

如果您导航到“任务”选项卡（在Flowable的任务应用程序中），您可以查看已完成的任务：

源代码：
GitHub: Serendipity
GitHub: Serendipity - Flowable library
GitHub: Serendipity - Dynamic Forms library
参考文献：
Angular docs：Master/Detail Components