[ADF-4128] ProcessCloud - add complete task directive (#4364)

* [ADF-4128] ProcessCloud - add complete task directive

* [ADF-4128]  ProcessCloud - fix completion functionality and add documentation

* [ADF-4128] ProcessCloud - PR changes

* [ADF-4128] ProcessCloud - lint

* [ADF-4148] ProcessServicesCloud - change layout

* [ADF-4128] fix PR changes

* [ADF-4128] - refractor complete task directive

* [ADF-4128] - fix lint

* [ADF-4128] - PR changes

* [ADF-4128] - replace isCompleted method  from service with model method

* [ADF-4128] fix unit tests

* [ADF-4128] - change travis yml

* [ADF-4128] - fix travis.yml

* [ADF-4128] - travis lint

demo-shell/src/app/app.module.ts

@@ -64,7 +64,7 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
 import { AuthBearerInterceptor } from './services';
-import { ProcessServicesCloudModule, GroupCloudModule } from '@alfresco/adf-process-services-cloud';
+import { ProcessServicesCloudModule, GroupCloudModule, TaskDirectiveModule } from '@alfresco/adf-process-services-cloud';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component';
 import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud-demo.component';
@@ -102,7 +102,9 @@ import { NestedMenuPositionDirective } from './components/app-layout/cloud/direc
         ThemePickerModule,
         ChartsModule,
         MonacoEditorModule.forRoot(),
-        GroupCloudModule
+        ProcessServicesCloudModule,
+        GroupCloudModule,
+        TaskDirectiveModule
     ],
     declarations: [
         AppComponent,

demo-shell/src/app/components/app-layout/cloud/task-details-cloud-demo.component.html

@@ -1,12 +1,13 @@
-
-<button data-automation-id="go-back" mat-icon-button (click)="onGoBack()">
-    <mat-icon>arrow_back</mat-icon> Go Back
-</button>
-
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
 
-<adf-cloud-task-header
-    [appName]="appName"
-    [taskId]="taskId"
-    [readOnly]="readOnly">
-</adf-cloud-task-header>
+<div class="adf-task-detail-container">
+    <div class="adf-task-control">
+        <button mat-button (click)="goBack()">Cancel</button>
+        <button mat-button color="primary" *ngIf="canCompleteTask()" adf-cloud-complete-task [appName]="appName" [taskId]="taskId"
+            (success)="onCompletedTask($event)">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
+    </div>
+
+    <adf-cloud-task-header class="adf-demop-card-container" [appName]="appName" [taskId]="taskId" [readOnly]="readOnly">
+    </adf-cloud-task-header>
+
+</div>

demo-shell/src/app/components/app-layout/cloud/task-details-cloud-demo.component.scss

@@ -0,0 +1,20 @@
+
+.adf {
+
+    &-task-detail-container {
+        display: flex;
+    }
+
+    &-task-tiitle {
+        margin-left:15px;
+    }
+
+    &-task-control {
+        width:70%;
+    }
+
+    &-demop-card-container {
+        width:30%;
+        font-family: inherit;
+    }
+}

demo-shell/src/app/components/app-layout/cloud/task-details-cloud-demo.component.ts

@@ -15,20 +15,26 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { TaskCloudService, TaskDetailsCloudModel } from '@alfresco/adf-process-services-cloud';
 
 @Component({
     templateUrl: './task-details-cloud-demo.component.html',
     styleUrls: ['./task-details-cloud-demo.component.scss']
 })
-export class TaskDetailsCloudDemoComponent {
+export class TaskDetailsCloudDemoComponent implements OnInit {
 
+    taskDetails: TaskDetailsCloudModel;
     taskId: string;
     appName: string;
     readOnly = false;
 
-    constructor(private route: ActivatedRoute, private router: Router) {
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private taskCloudService: TaskCloudService
+        ) {
         this.route.params.subscribe((params) => {
             this.taskId = params.taskId;
         });
@@ -37,8 +43,30 @@ export class TaskDetailsCloudDemoComponent {
         });
     }
 
-    onGoBack() {
-        this.router.navigate([`/cloud/${this.appName}/`]);
+    ngOnInit() {
+        this.loadTaskDetailsById(this.appName, this.taskId);
+    }
 
+    loadTaskDetailsById(appName: string, taskId: string): any {
+        this.taskCloudService.getTaskById(appName, taskId).subscribe(
+            (taskDetails) => {
+                this.taskDetails = taskDetails;
+            });
+    }
+
+    isTaskValid() {
+        return this.appName && this.taskId;
+    }
+
+    canCompleteTask() {
+        return this.taskDetails && this.taskCloudService.canCompleteTask(this.taskDetails);
+    }
+
+    goBack() {
+        this.router.navigate([`/cloud/${this.appName}/`]);
+    }
+
+    onCompletedTask(evt: any) {
+        this.goBack();
     }
 }