[ADF-4544] Cloud Task From - Refresh the buttons and form after an action is complete (#4726)

* [ADF-4544] Reloaded task on action

* [ADF-4544] Changed routing in demo component

* [ADF-4544] Added tests

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

@@ -7,9 +7,7 @@
                 [appName]="appName"
                 [taskId]="taskId"
                 (cancelClick)="goBack()"
-                (taskClaimed)="onClaimTask()"
                 (taskCompleted)="onTaskCompleted()"
-                (taskUnclaimed)="onUnclaimTask()"
                 (formSaved)="onFormSaved()">
             </adf-cloud-task-form>
         </div>

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

@@ -50,18 +50,6 @@ export class TaskDetailsCloudDemoComponent {
         this.router.navigate([`/cloud/${this.appName}/`]);
     }
 
-    onCompletedTask() {
-        this.goBack();
-    }
-
-    onUnclaimTask() {
-        this.goBack();
-    }
-
-    onClaimTask() {
-        this.goBack();
-    }
-
     onTaskCompleted() {
         this.goBack();
     }

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="taskDetails">
+<div *ngIf="!loading; else loadingTemplate">
     <adf-cloud-form *ngIf="hasForm(); else withoutForm"
         [appName]="appName"
         [taskId]="taskId"
@@ -61,3 +61,9 @@
         </mat-card>
     </ng-template>
 </div>
+
+<ng-template #loadingTemplate>
+    <div fxLayout="row" fxLayoutAlign="center stretch">
+        <mat-spinner></mat-spinner>
+    </div>
+</ng-template>

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts

@@ -347,6 +347,80 @@ describe('TaskFormCloudComponent', () => {
             component.onError({});
         });
 
+        it('should emit taskCompleted when task is completed', () => {
+
+            spyOn(taskCloudService, 'completeTask').and.returnValue(of({}));
+            const reloadSpy = spyOn(component, 'loadTask').and.callThrough();
+
+            component.appName = 'app1';
+            component.taskId = 'task1';
+
+            component.loadTask();
+            fixture.detectChanges();
+            const completeBtn = debugElement.query(By.css('[adf-cloud-complete-task]'));
+
+            completeBtn.nativeElement.click();
+            expect(reloadSpy).toHaveBeenCalled();
+        });
+
+        it('should emit taskClaimed when task is claimed', () => {
+            spyOn(taskCloudService, 'claimTask').and.returnValue(of({}));
+            const reloadSpy = spyOn(component, 'loadTask').and.callThrough();
+
+            taskDetails.status = 'CREATED';
+            getTaskSpy.and.returnValue(of(new TaskDetailsCloudModel(taskDetails)));
+
+            component.appName = 'app1';
+            component.taskId = 'task1';
+
+            component.loadTask();
+            fixture.detectChanges();
+            const claimBtn = debugElement.query(By.css('[adf-cloud-claim-task]'));
+
+            claimBtn.nativeElement.click();
+            expect(reloadSpy).toHaveBeenCalled();
+        });
+
+        it('should emit taskUnclaimed when task is unclaimed', () => {
+            spyOn(taskCloudService, 'unclaimTask').and.returnValue(of({}));
+            const reloadSpy = spyOn(component, 'loadTask').and.callThrough();
+
+            taskDetails.status = 'ASSIGNED';
+            getTaskSpy.and.returnValue(of(new TaskDetailsCloudModel(taskDetails)));
+
+            component.appName = 'app1';
+            component.taskId = 'task1';
+
+            component.loadTask();
+            fixture.detectChanges();
+            const unclaimBtn = debugElement.query(By.css('[adf-cloud-unclaim-task]'));
+
+            unclaimBtn.nativeElement.click();
+            expect(reloadSpy).toHaveBeenCalled();
+        });
+
+        it('should show loading template while task data is being loaded', () => {
+            component.loading = true;
+            fixture.detectChanges();
+
+            const loadingTemplate = debugElement.query(By.css('mat-spinner'));
+
+            expect(loadingTemplate).toBeDefined();
+        });
+
+        it('should not show loading template while task data is not being loaded', () => {
+            component.loading = false;
+            component.appName = 'app1';
+            component.taskId = 'task1';
+
+            component.loadTask();
+            fixture.detectChanges();
+
+            const loadingTemplate = debugElement.query(By.css('mat-spinner'));
+
+            expect(loadingTemplate).toBeNull();
+        });
+
     });
 });
 

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts

@@ -91,6 +91,8 @@ export class TaskFormCloudComponent implements OnChanges {
 
     taskDetails: TaskDetailsCloudModel;
 
+    loading: boolean = false;
+
     constructor(
         private taskCloudService: TaskCloudService,
         private formRenderingService: FormRenderingService) {
@@ -114,11 +116,17 @@ export class TaskFormCloudComponent implements OnChanges {
     }
 
     loadTask() {
+        this.loading = true;
         this.taskCloudService.getTaskById(this.appName, this.taskId).subscribe((details: TaskDetailsCloudModel) => {
             this.taskDetails = details;
+            this.loading = false;
         });
     }
 
+    private reloadTask() {
+        this.loadTask();
+    }
+
     hasForm(): boolean {
         return this.taskDetails && !!this.taskDetails.formKey;
     }
@@ -140,14 +148,17 @@ export class TaskFormCloudComponent implements OnChanges {
     }
 
     onCompleteTask() {
+        this.reloadTask();
         this.taskCompleted.emit(this.taskId);
     }
 
     onClaimTask() {
+        this.reloadTask();
         this.taskClaimed.emit(this.taskId);
     }
 
     onUnclaimTask() {
+        this.reloadTask();
         this.taskUnclaimed.emit(this.taskId);
     }
 

lib/process-services-cloud/src/lib/task/task-form/task-form.module.ts

@@ -23,6 +23,7 @@ import { TaskDirectiveModule } from '../directives/task-directive.module';
 
 import { TaskFormCloudComponent } from './components/task-form-cloud.component';
 import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
     imports: [
@@ -30,7 +31,8 @@ import { CoreModule } from '@alfresco/adf-core';
         CommonModule,
         MaterialModule,
         FormCloudModule,
-        TaskDirectiveModule
+        TaskDirectiveModule,
+        FlexLayoutModule
     ],
     declarations: [
         TaskFormCloudComponent