feat(progress): adiciona evento de tentar novamente

Possibilita informar um evento para que o mesmo seja disparado quando o progresso estiver com status de erro.

Fixes DTHFUI-1863

Author: jhonyeduardo

projects/ui/src/lib/components/po-progress/po-progress-base.component.spec.ts

@@ -1,8 +1,6 @@
 import { expectPropertiesValues } from '../../util-test/util-expect.spec';
-import { Observable } from 'rxjs';
 
 import { PoProgressBaseComponent } from './po-progress-base.component';
-import { PoProgressStatus } from './enums/po-progress-status.enum';
 
 describe('PoProgressBaseComponent:', () => {
 
@@ -43,52 +41,29 @@ describe('PoProgressBaseComponent:', () => {
 
   describe('Methods:', () => {
 
-    it(`emitCancellation: should call 'emit' with 'status'`, () => {
-      component.status = PoProgressStatus.Success;
-
-      spyOn(component.cancel, 'emit');
-
-      component.emitCancellation();
-
-      expect(component.cancel.emit).toHaveBeenCalledWith(component.status);
-    });
-
-    it(`isCancel: should be 'true' if 'cancel' contain 'function'`, () => {
-      const cancelFunction = () => {};
-      component.cancel.observers.push(<any>[new Observable(cancelFunction)]);
-
-      expect(component.isCancel()).toBeTruthy();
-    });
-
-    it(`isCancel: should be 'false' if 'cancel' does not contain 'function'`, () => {
-      component.cancel.observers.length = 0;
-
-      expect(component.isCancel()).toBeFalsy();
-    });
-
     it(`isProgressRangeValue: should be 'true' if 'value' is greater than 0`, () => {
       const value = 20;
-      expect(component.isProgressRangeValue(value)).toBeTruthy();
+      expect(component['isProgressRangeValue'](value)).toBeTruthy();
     });
 
     it(`isProgressRangeValue: should be 'true' if 'value' equals 0`, () => {
       const value = 0;
-      expect(component.isProgressRangeValue(value)).toBeTruthy();
+      expect(component['isProgressRangeValue'](value)).toBeTruthy();
     });
 
     it(`isProgressRangeValue: should be 'true' if 'value' equals 100`, () => {
       const value = 100;
-      expect(component.isProgressRangeValue(value)).toBeTruthy();
+      expect(component['isProgressRangeValue'](value)).toBeTruthy();
     });
 
     it(`isProgressRangeValue: should be 'false' if 'value' is less than 0`, () => {
       const value = -2;
-      expect(component.isProgressRangeValue(value)).toBeFalsy();
+      expect(component['isProgressRangeValue'](value)).toBeFalsy();
     });
 
     it(`isProgressRangeValue: should be 'false' if 'value' is greater than 100`, () => {
       const value = 120;
-      expect(component.isProgressRangeValue(value)).toBeFalsy();
+      expect(component['isProgressRangeValue'](value)).toBeFalsy();
     });
 
   });

projects/ui/src/lib/components/po-progress/po-progress-base.component.ts

@@ -19,19 +19,6 @@ export class PoProgressBaseComponent {
   private _indeterminate?: boolean;
   private _value?: number = 0;
 
-  /**
-   * @optional
-   *
-   * @description
-   *
-   * Evento que será disparado ao clicar no ícone de cancelamento ("x") na parte inferior da barra de progresso.
-   *
-   * Ao ser disparado, a função receberá como parâmetro o status atual da barra de progresso.
-   *
-   * > Se nenhuma função for passada para o evento, o ícone de cancelamento não será exibido.
-   */
-  @Output('p-cancel') cancel: EventEmitter<any> = new EventEmitter();
-
   /**
    * @optional
    *
@@ -116,15 +103,33 @@ export class PoProgressBaseComponent {
     return this._value;
   }
 
-  emitCancellation() {
-    this.cancel.emit(this.status);
-  }
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento que será disparado ao clicar no ícone de cancelamento ("x") na parte inferior da barra de progresso.
+   *
+   * Ao ser disparado, a função receberá como parâmetro o status atual da barra de progresso.
+   *
+   * > Se nenhuma função for passada para o evento ou a barra de progresso estiver com o status `PoProgressStatus.Success`,
+   * o ícone de cancelamento não será exibido.
+   */
+  @Output('p-cancel') cancel: EventEmitter<any> = new EventEmitter();
 
-  isCancel(): boolean {
-    return !!this.cancel.observers.length;
-  }
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento que será disparado ao clicar no ícone de tentar novamente na parte inferior da barra de progresso.
+   *
+   * > o ícone será exibido apenas se informar uma função neste evento e o status da barra de progresso for
+   * `PoProgressStatus.Error`.
+   */
+  @Output('p-retry') retry: EventEmitter<any> = new EventEmitter();
 
-  isProgressRangeValue(value: number): boolean {
+  private isProgressRangeValue(value: number): boolean {
     return value >= poProgressMinValue && value <= poProgressMaxValue;
   }
 

projects/ui/src/lib/components/po-progress/po-progress.component.html

@@ -1,6 +1,6 @@
 <div class="po-progress" [ngClass]="statusClass">
 
-  <label class="po-progress-description-mobile po-progress-description-text">
+  <label *ngIf="text" class="po-progress-description-mobile po-progress-description-text">
     {{ text }}
   </label>
 
@@ -10,18 +10,23 @@
     [p-value]="value">
   </po-progress-bar>
 
-  <div class="po-progress-description">
+  <div *ngIf="text" class="po-progress-description">
     <label class="po-progress-description-text">
       {{ text }}
     </label>
   </div>
 
-  <div class="po-progress-info">
-    <span class="po-progress-info-icon po-icon {{ infoIcon }}"></span>
-    <span class="po-progress-info-text">{{ info }}</span>
+  <div *ngIf="isAllowProgressInfo" class="po-progress-info">
+    <span *ngIf="infoIcon" class="po-progress-info-icon po-icon {{ infoIcon }}"></span>
+    <span *ngIf="info" class="po-progress-info-text">{{ info }}</span>
 
-    <button *ngIf="isCancel()"
-      class="po-progress-info-icon-close po-icon po-icon-close po-clickable"
+    <button *ngIf="isAllowRetry"
+      class="po-progress-info-icon-action po-icon po-icon-refresh po-clickable"
+      (click)="emitRetry()">
+    </button>
+
+    <button *ngIf="isAllowCancel"
+      class="po-progress-info-icon-action po-icon po-icon-close po-clickable"
       (click)="emitCancellation()">
     </button>
 

projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts

@@ -33,6 +33,30 @@ describe('PoProgressComponent:', () => {
     expect(component instanceof PoProgressComponent).toBeTruthy();
   });
 
+  describe('Methods:', () => {
+
+    it(`emitCancellation: should call 'emit' with 'status'`, () => {
+      component.status = PoProgressStatus.Success;
+
+      spyOn(component.cancel, 'emit');
+
+      component.emitCancellation();
+
+      expect(component.cancel.emit).toHaveBeenCalledWith(component.status);
+    });
+
+    it(`emitRetry: should call 'emit'`, () => {
+      component.status = PoProgressStatus.Success;
+
+      spyOn(component.retry, 'emit');
+
+      component.emitRetry();
+
+      expect(component.retry.emit).toHaveBeenCalled();
+    });
+
+  });
+
   describe('Properties:', () => {
 
     it('statusClass: should return `po-progress-success` if `status` is `PoProgressStatus.Success`', () => {
@@ -65,6 +89,52 @@ describe('PoProgressComponent:', () => {
       expect(component.statusClass).toBe('po-progress-default');
     });
 
+    it(`isAllowCancel: should be 'true' if 'cancel' contain 'function' and status is PoProgressStatus.Default`, () => {
+      const cancelFunction = () => {};
+      component.cancel.observers.push(<any>[new Observable(cancelFunction)]);
+      component.status = PoProgressStatus.Default;
+
+      expect(component.isAllowCancel).toBe(true);
+    });
+
+    it(`isAllowCancel: should be 'false' if 'cancel' does not contain 'function' and status is PoProgressStatus.Success`, () => {
+      component.cancel.observers.length = 0;
+      component.status = PoProgressStatus.Success;
+
+      expect(component.isAllowCancel).toBe(false);
+    });
+
+    it(`isAllowCancel: should be 'false' if 'cancel' contain 'function' and status is PoProgressStatus.Success`, () => {
+      const cancelFunction = () => {};
+      component.cancel.observers.push(<any>[new Observable(cancelFunction)]);
+      component.status = PoProgressStatus.Success;
+
+      expect(component.isAllowCancel).toBe(false);
+    });
+
+    it(`isAllowRetry: should be 'true' if 'retry' contain 'function' and status is PoProgressStatus.Error`, () => {
+      const retryFunction = () => {};
+      component.retry.observers.push(<any>[new Observable(retryFunction)]);
+      component.status = PoProgressStatus.Error;
+
+      expect(component.isAllowRetry).toBe(true);
+    });
+
+    it(`isAllowRetry: should be 'false' if 'retry' does not contain 'function' and status isn't PoProgressStatus.Error`, () => {
+      component.retry.observers.length = 0;
+      component.status = PoProgressStatus.Default;
+
+      expect(component.isAllowRetry).toBe(false);
+    });
+
+    it(`isAllowRetry: should be 'false' if 'retry' contain 'function' and status isn't PoProgressStatus.Error`, () => {
+      const retryFunction = () => {};
+      component.retry.observers.push(<any>[new Observable(retryFunction)]);
+      component.status = PoProgressStatus.Default;
+
+      expect(component.isAllowRetry).toBe(false);
+    });
+
   });
 
   describe('Templates:', () => {
@@ -92,6 +162,16 @@ describe('PoProgressComponent:', () => {
       expect(infoIcon.classList).toContain('po-icon-agro-business');
     });
 
+    it('shouldn`t find `.po-progress-info-icon` if `infoIcon` is `undefined`', () => {
+      component.infoIcon = undefined;
+
+      fixture.detectChanges();
+
+      const infoIcon = nativeElement.querySelector('.po-progress-info-icon');
+
+      expect(infoIcon).toBe(null);
+    });
+
     it('should contain `p-info` value', () => {
       component.info = 'test info';
 
@@ -102,6 +182,16 @@ describe('PoProgressComponent:', () => {
       expect(info).toBe(component.info);
     });
 
+    it('shouldn`t find `.po-progress-info-text` if `info` is undefined ', () => {
+      component.info = undefined;
+
+      fixture.detectChanges();
+
+      const info = nativeElement.querySelector('.po-progress-info-text');
+
+      expect(info).toBe(null);
+    });
+
     it('should contain `po-progress-default` if `status` is `default`', () => {
       component.status = PoProgressStatus.Default;
 
@@ -182,6 +272,56 @@ describe('PoProgressComponent:', () => {
       expect(component.cancel.emit).toHaveBeenCalledWith(component.status);
     });
 
+    it('should emit retry with status if `retry` is clicked', () => {
+      const retryFunction = () => {};
+
+      component.retry.observers.push(<any>[new Observable(retryFunction)]);
+      component.status = PoProgressStatus.Error;
+
+      fixture.detectChanges();
+
+      spyOn(component.retry, 'emit');
+
+      nativeElement.querySelector('.po-icon-refresh').click();
+
+      expect(component.retry.emit).toHaveBeenCalled();
+    });
+
+    it('shouldn`t find `.po-progress-description` and `.po-progress-description-mobile` if `text` is undefined', () => {
+      component.text = undefined;
+
+      fixture.detectChanges();
+
+      const descriptionMobile = nativeElement.querySelector('.po-progress-description-mobile');
+      const description = nativeElement.querySelector('.po-progress-description');
+
+      expect(descriptionMobile).toBe(null);
+      expect(description).toBe(null);
+    });
+
+    it('should find `.po-progress-info` if `info` is truthy', () => {
+      component.info = 'filename.jpg';
+
+      fixture.detectChanges();
+
+      const progressInfo = nativeElement.querySelector('.po-progress-info');
+
+      expect(progressInfo).toBeTruthy();
+    });
+
+    it('shouldn`t find `.po-progress-info` if `info`, `infoIcon`, `isAllowRetry` and `isAllowCancel` are falsy', () => {
+      component.info = undefined;
+      component.infoIcon = undefined;
+      component.retry.observers.length = 0;
+      component.cancel.observers.length = 0;
+
+      fixture.detectChanges();
+
+      const progressInfo = nativeElement.querySelector('.po-progress-info');
+
+      expect(progressInfo).toBe(null);
+    });
+
   });
 
 });

projects/ui/src/lib/components/po-progress/po-progress.component.ts

@@ -29,6 +29,18 @@ import { PoProgressStatus } from './enums/po-progress-status.enum';
 })
 export class PoProgressComponent extends PoProgressBaseComponent {
 
+  get isAllowCancel(): boolean {
+    return !!this.cancel.observers.length && this.status !== PoProgressStatus.Success;
+  }
+
+  get isAllowProgressInfo(): boolean {
+    return !!(this.info || this.infoIcon || this.isAllowCancel || this.isAllowRetry);
+  }
+
+  get isAllowRetry(): boolean {
+    return !!this.retry.observers.length && this.status === PoProgressStatus.Error;
+  }
+
   get statusClass(): string {
 
     if (this.status === PoProgressStatus.Success) {
@@ -42,4 +54,12 @@ export class PoProgressComponent extends PoProgressBaseComponent {
     return 'po-progress-default';
   }
 
+  emitCancellation() {
+    this.cancel.emit(this.status);
+  }
+
+  emitRetry() {
+    this.retry.emit();
+  }
+
 }

projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.html

@@ -5,7 +5,8 @@
   [p-status]="status"
   [p-text]="text"
   [p-value]="value"
-  (p-cancel)="cancel()">
+  (p-cancel)="onEvent('p-cancel')"
+  (p-retry)="onEvent('p-retry')">
 </po-progress>
 
 <po-divider></po-divider>

projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts

@@ -37,8 +37,8 @@ export class SamplePoProgressLabsComponent implements OnInit {
     this.restore();
   }
 
-  cancel() {
-    this.event = 'cancel';
+  onEvent(event) {
+    this.event = event;
   }
 
   restore() {