[AAE-8306] - Managed to disable complete/claim/release buttons on first click (#8166)

* AAE-8306: Managed to disable complete/save/claim buttons on user click

* AAE-8306: reverted back save button disable

* AAE-8306: Managed to disable unclaim or release button on user click

* AAE-8306: Fixed formatting issues

* AAE-8306: Fixed formatting issues

lib/core/src/lib/form/components/form-base.component.ts

@@ -174,6 +174,8 @@ export abstract class FormBaseComponent {
                 }
 
                 if (outcome.id === FormBaseComponent.COMPLETE_OUTCOME_ID) {
+                    this.disableSaveButton = true;
+                    this.disableCompleteButton = true;
                     this.completeTaskForm();
                     return true;
                 }
@@ -201,6 +203,8 @@ export abstract class FormBaseComponent {
     }
 
     handleError(err: any): any {
+        this.disableSaveButton = false;
+        this.disableCompleteButton = false;
         this.error.emit(err);
     }
 

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

@@ -1019,6 +1019,43 @@ describe('FormCloudComponent', () => {
         expect(radioFieldById.value).toBe('option_2');
     });
 
+    it('should disable complete & save buttons on [complete] outcome click', () => {
+        const formModel = new FormModel();
+        const outcome = new FormOutcomeModel(formModel, {
+            id: FormCloudComponent.COMPLETE_OUTCOME_ID,
+            name: 'COMPLETE',
+            isSystem: true
+        });
+        formComponent.form = formModel;
+
+        formComponent.onOutcomeClicked(outcome);
+
+        expect(formComponent.disableSaveButton).toBeTrue();
+        expect(formComponent.disableCompleteButton).toBeTrue();
+    });
+
+    it('should ENABLE complete & save buttons when something goes wrong during completion process', (done) => {
+        const errorMessage = 'Something went wrong.';
+        spyOn(formCloudService, 'completeTaskForm').and.callFake(() => throwError(errorMessage));
+
+        formCloudService.completeTaskForm('test-app', '123', '333-444', '123', {
+            pfx_property_one: 'testValue',
+            pfx_property_two: true,
+            pfx_property_three: 'opt_1',
+            pfx_property_four: 'option_2',
+            pfx_property_five: 'orange',
+            pfx_property_none: 'no_form_field'
+        }, 'Complete', 123).subscribe({
+            next: _ => done.fail('expected an error, not data'),
+            error: error => {
+                expect(error).toBe(errorMessage);
+                expect(formComponent.disableSaveButton).toBeFalse();
+                expect(formComponent.disableCompleteButton).toBeFalse();
+                done();
+            }
+        });
+    });
+
     describe('form validations', () => {
         it('should be able to set visibility conditions for Attach File widget', async () => {
             spyOn(formCloudService, 'getForm').and.returnValue(of(conditionalUploadWidgetsMock));

lib/process-services-cloud/src/lib/task/directives/claim-task-cloud.directive.spec.ts

@@ -24,6 +24,7 @@ import { ClaimTaskCloudDirective } from './claim-task-cloud.directive';
 import { taskClaimCloudMock } from '../task-header/mocks/fake-claim-task.mock';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 describe('ClaimTaskCloudDirective', () => {
 
@@ -80,6 +81,25 @@ describe('ClaimTaskCloudDirective', () => {
         expect(taskCloudService.claimTask).toHaveBeenCalled();
         expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
     });
+
+    it('should DISABLE the button on task completion', () => {
+        spyOn(taskCloudService, 'claimTask').and.returnValue(of(taskClaimCloudMock));
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(taskCloudService.claimTask).toHaveBeenCalled();
+        expect(button.disabled).toBe(true);
+    });
+
+    it('should ENABLE the button on api failure', () => {
+        spyOn(taskCloudService, 'claimTask').and.throwError('process key not found');
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(button.disabled).toBeFalsy();
+    });
 });
 
 describe('Claim Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/claim-task-cloud.directive.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
+import { Directive, Input, HostListener, Output, EventEmitter, OnInit, ElementRef, Renderer2 } from '@angular/core';
 import { IdentityUserService } from '../../people/services/identity-user.service';
 import { TaskCloudService } from '../services/task-cloud.service';
 
@@ -44,6 +44,8 @@ export class ClaimTaskCloudDirective implements OnInit {
     invalidParams: string[] = [];
 
     constructor(
+        private readonly el: ElementRef,
+        private readonly renderer: Renderer2,
         private taskListService: TaskCloudService,
         private identityUserService: IdentityUserService) { }
 
@@ -85,11 +87,13 @@ export class ClaimTaskCloudDirective implements OnInit {
     private async claimTask() {
         const currentUser: string = this.identityUserService.getCurrentUserInfo().username;
         try {
+            this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');
             const result = await this.taskListService.claimTask(this.appName, this.taskId, currentUser).toPromise();
             if (result) {
                 this.success.emit(result);
             }
         } catch (error) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
             this.error.emit(error);
         }
     }

lib/process-services-cloud/src/lib/task/directives/complete-task.directive.spec.ts

@@ -24,6 +24,7 @@ import { taskCompleteCloudMock } from '../task-header/mocks/fake-complete-task.m
 import { TaskCloudService } from '../services/task-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 describe('CompleteTaskDirective', () => {
 
@@ -84,6 +85,25 @@ describe('CompleteTaskDirective', () => {
         expect(taskCloudService.completeTask).toHaveBeenCalled();
         expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
     });
+
+    it('should DISABLE the button on task completion', () => {
+        spyOn(taskCloudService, 'completeTask').and.returnValue(of(taskCompleteCloudMock));
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(taskCloudService.completeTask).toHaveBeenCalled();
+        expect(button.disabled).toBe(true);
+    });
+
+    it('should ENABLE the button on api failure', () => {
+        spyOn(taskCloudService, 'completeTask').and.throwError('process key not found');
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(button.disabled).toBeFalsy();
+    });
 });
 
 describe('Complete Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/complete-task.directive.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
+import { Directive, Input, HostListener, Output, EventEmitter, OnInit, ElementRef, Renderer2 } from '@angular/core';
 import { TaskCloudService } from '../services/task-cloud.service';
 
 @Directive({
@@ -42,7 +42,11 @@ export class CompleteTaskDirective implements OnInit {
 
     invalidParams: string[] = [];
 
-    constructor(private taskListService: TaskCloudService) {}
+    constructor(
+        private readonly el: ElementRef,
+        private readonly renderer: Renderer2,
+        private readonly taskListService: TaskCloudService
+    ) { }
 
     ngOnInit() {
         this.validateInputs();
@@ -72,11 +76,13 @@ export class CompleteTaskDirective implements OnInit {
     @HostListener('click')
     async onClick() {
         try {
+            this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');
             const result = await this.taskListService.completeTask(this.appName, this.taskId).toPromise();
             if (result) {
                 this.success.emit(result);
             }
         } catch (error) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
             this.error.emit(error);
         }
 

lib/process-services-cloud/src/lib/task/directives/unclaim-task-cloud.directive.spec.ts

@@ -24,6 +24,7 @@ import { UnClaimTaskCloudDirective } from './unclaim-task-cloud.directive';
 import { taskClaimCloudMock } from '../task-header/mocks/fake-claim-task.mock';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 describe('UnClaimTaskCloudDirective', () => {
 
@@ -80,6 +81,25 @@ describe('UnClaimTaskCloudDirective', () => {
         expect(taskCloudService.unclaimTask).toHaveBeenCalled();
         expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
     });
+
+    it('should DISABLE the button on task completion', () => {
+        spyOn(taskCloudService, 'unclaimTask').and.returnValue(of(taskClaimCloudMock));
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(taskCloudService.unclaimTask).toHaveBeenCalled();
+        expect(button.disabled).toBe(true);
+    });
+
+    it('should ENABLE the button on api failure', () => {
+        spyOn(taskCloudService, 'unclaimTask').and.throwError('process key not found');
+        const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+        button.click();
+
+        expect(button.disabled).toBeFalsy();
+    });
 });
 
 describe('UnClaim Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/unclaim-task-cloud.directive.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
+import { Directive, Input, HostListener, Output, EventEmitter, OnInit, ElementRef, Renderer2 } from '@angular/core';
 import { TaskCloudService } from '../services/task-cloud.service';
 
 @Directive({
@@ -43,6 +43,8 @@ export class UnClaimTaskCloudDirective implements OnInit {
     invalidParams: string[] = [];
 
     constructor(
+        private readonly el: ElementRef,
+        private readonly renderer: Renderer2,
         private taskListService: TaskCloudService) { }
 
     ngOnInit() {
@@ -73,9 +75,11 @@ export class UnClaimTaskCloudDirective implements OnInit {
     @HostListener('click')
     async onClick() {
         try {
+            this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');
             await this.taskListService.unclaimTask(this.appName, this.taskId).toPromise();
             this.success.emit(this.taskId);
         } catch (error) {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
             this.error.emit(error);
         }
     }