feat(upload): utiliza o componente progress como barra de progresso

Atualiza a identidade visual da barra de progresso no componente upload e
também utiliza a ideia de componentização

Fixes DTHFUI-1587

Author: jhonyeduardo

projects/ui/src/lib/components/po-field/po-field.module.ts

@@ -4,11 +4,13 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { PoButtonGroupModule } from '../po-button-group/index';
-import { PoButtonModule } from '../../components/po-button/index';
+import { PoButtonModule } from '../po-button/index';
 import { PoDisclaimerModule } from './../po-disclaimer/po-disclaimer.module';
-import { PoLoadingModule } from '../../components/po-loading/index';
-import { PoModalModule } from '../../components/po-modal/po-modal.module';
-import { PoTableModule } from '../../components/po-table/po-table.module';
+import { PoLoadingModule } from '../po-loading/index';
+import { PoModalModule } from '../po-modal/po-modal.module';
+import { PoProgressModule } from './../po-progress/po-progress.module';
+import { PoServicesModule } from '../../services/services.module';
+import { PoTableModule } from '../po-table/po-table.module';
 import { PoTooltipModule } from './../../directives/po-tooltip/po-tooltip.module';
 
 import { PoCalendarComponent } from './po-datepicker/po-calendar/po-calendar.component';
@@ -37,7 +39,6 @@ import { PoPasswordComponent } from './po-password/po-password.component';
 import { PoRadioGroupComponent } from './po-radio-group/po-radio-group.component';
 import { PoSelectComponent } from './po-select/po-select.component';
 import { PoSelectOptionTemplateDirective } from './po-select/po-select-option-template/po-select-option-template.directive';
-import { PoServicesModule } from '../../services/services.module';
 import { PoSwitchComponent } from './po-switch/po-switch.component';
 import { PoTextareaComponent } from './po-textarea/po-textarea.component';
 import { PoUploadComponent } from './po-upload/po-upload.component';
@@ -66,6 +67,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
     PoDisclaimerModule,
     PoLoadingModule,
     PoModalModule,
+    PoProgressModule,
     PoServicesModule,
     PoTableModule,
     PoTooltipModule

projects/ui/src/lib/components/po-field/po-upload/interfaces/po-upload-literals.interface.ts

@@ -7,10 +7,24 @@
  */
 export interface PoUploadLiterals {
 
-  /** Texto exibido no label para cancelar o envio. */
+  /**
+   * @deprecated 3.X.X
+   * @description
+   *
+   * **Deprecated**
+   *
+   * Texto exibido no label para cancelar o envio.
+   */
   cancel?: string;
 
-  /** Texto exibido no label para excluir o arquivo. */
+  /**
+   * @deprecated 3.X.X
+   * @description
+   *
+   * **Deprecated**
+   *
+   * Texto exibido no label para excluir o arquivo.
+   */
   deleteFile?: string;
 
   /** Texto exibido na área onde podem ser arrastados os arquivos ao utilizar a opção de *dragDrop*. */
@@ -34,7 +48,20 @@ export interface PoUploadLiterals {
   /** Texto exibido no label do botão para iniciar o envio dos arquivos. */
   startSending?: string;
 
-  /** Texto exibido no label para tentar novamente. */
+  /**
+   * @deprecated 3.X.X
+   * @description
+   *
+   * **Deprecated**
+   *
+   * Texto exibido no label para tentar novamente.
+   */
   tryAgain?: string;
 
+  /** Texto a ser exibido quando ocorrer erro no envio do arquivo. */
+  errorOccurred?: string;
+
+  /** Texto a ser exibido quando o envio do arquivo for realizado com sucesso. */
+  sentWithSuccess?: string;
+
 }

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

@@ -28,7 +28,9 @@ export const poUploadLiteralsDefault = {
     allowedFormats: 'Accepted file formats: {0}.',
     allowedFileSizeRange: 'Size limit per file: from {0} to {1}',
     maxFileSizeAllowed: 'Size limit per file: {0} maximum',
-    minFileSizeAllowed: 'Size limit per file: {0} minimum'
+    minFileSizeAllowed: 'Size limit per file: {0} minimum',
+    errorOccurred: 'An error has occurred',
+    sentWithSuccess: 'Sent with success'
   },
   es: <PoUploadLiterals> {
     selectFile: 'Seleccionar archivo',
@@ -47,7 +49,9 @@ export const poUploadLiteralsDefault = {
     allowedFormats: 'Formatos aceptados: {0}.',
     allowedFileSizeRange: 'Limite de tamaño de archivo: desde {0} hasta {1}',
     maxFileSizeAllowed: 'Limite de tamaño de archivo: hasta {0}',
-    minFileSizeAllowed: 'Limite de tamaño de archivo: minimo {0}'
+    minFileSizeAllowed: 'Limite de tamaño de archivo: minimo {0}',
+    errorOccurred: 'Ocurrio un error',
+    sentWithSuccess: 'Enviado con éxito'
   },
   pt: <PoUploadLiterals> {
     selectFile: 'Selecionar arquivo',
@@ -66,7 +70,9 @@ export const poUploadLiteralsDefault = {
     allowedFormats: 'Formatos adotados: {0}.',
     allowedFileSizeRange: 'Limite de tamanho por arquivo: de {0} até {1}',
     maxFileSizeAllowed: 'Limite de tamanho por arquivo: até {0}',
-    minFileSizeAllowed: 'Limite de tamanho por arquivo: no mínimo {0}'
+    minFileSizeAllowed: 'Limite de tamanho por arquivo: no mínimo {0}',
+    errorOccurred: 'Ocorreu um erro',
+    sentWithSuccess: 'Enviado com sucesso'
   }
 };
 

projects/ui/src/lib/components/po-field/po-upload/po-upload-file.spec.ts

@@ -39,4 +39,20 @@ describe('PoUploadFile', () => {
     expect(poUploadFile.extension).toEqual('');
   });
 
+  describe('Methods:', () => {
+
+    it('getFileSize: should return the size in kbytes', () => {
+      poUploadFile = new PoUploadFile(null);
+
+      let kbSize = poUploadFile['getFileSize'](3000);
+
+      expect(kbSize).toEqual('3 KB');
+
+      kbSize = poUploadFile['getFileSize'](0);
+
+      expect(kbSize).toEqual('0 KB');
+    });
+
+  });
+
 });

projects/ui/src/lib/components/po-field/po-upload/po-upload-file.ts

@@ -15,9 +15,16 @@ export class PoUploadFile {
   // Tamanho do arquivo em bytes;
   public size: number;
 
+  // propriedade para auxiliar a exibição do texto no componente progress
+  displayName?: string;
+
+  // porcentagem utilizada para repassar ao componente progress
+  percent?: number;
+
   constructor(file: any) {
     if (file) {
       this.name = file.name;
+      this.displayName = `${file.name} - ${this.getFileSize(file.size)}`;
       this.extension = this.getExtension(file.name);
       this.size = file.size;
       this.rawFile = file;
@@ -45,4 +52,16 @@ export class PoUploadFile {
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
       s4() + '-' + s4() + s4() + s4();
   }
+
+  // Retorna o tamanho do arquivo em KBytes.
+  private getFileSize(size: number): string {
+    let kbSize = 0;
+
+    if (size) {
+        kbSize = Math.ceil(size / 1024);
+    }
+
+    return `${kbSize} KB`;
+  }
+
 }

projects/ui/src/lib/components/po-field/po-upload/po-upload.component.html

@@ -40,49 +40,27 @@
       [p-min-file-size]="fileRestrictions?.minFileSize">
     </po-upload-file-restrictions>
 
-    <div class="po-upload-progress" *ngFor="let file of currentFiles" [id]="file.uid">
-      <div class="po-upload-progress-status"></div>
-      <div class="po-upload-filename-foreground">
-
-        <div class="po-upload-filename">
-          <span class="po-icon {{ getPoIcon(file) }}"></span> {{ file.name }} - {{ getFileSize(file.size) }}
-        </div>
-
-        <div class="po-upload-group-actions">
-          <span
-            *ngIf="isStatusFile('None', file) || isStatusFile('Error', file)"
-            class="po-upload-action"
-            (click)="removeFile(file)">
-            {{ literals.deleteFile }}
-          </span>
-
-          <span
-            *ngIf="isStatusFile('Uploading', file)"
-            class="po-upload-action"
-            (click)="stopUpload(file)">
-            {{ literals.cancel }}
-          </span>
-
-          <span
-            *ngIf="isStatusFile('Error', file)"
-            class="po-upload-action"
-            (click)="uploadFiles([file])">
-
-            {{ literals.tryAgain }}
-          </span>
-        </div>
-
-      </div>
+    <div *ngIf="currentFiles && currentFiles.length" class="po-upload-progress-container">
+      <po-progress
+        *ngFor="let file of currentFiles; trackBy: trackByFn"
+        [p-info]="infoByUploadStatus[file.status]?.text(file.percent)"
+        [p-info-icon]="infoByUploadStatus[file.status]?.icon"
+        [p-status]="progressStatusByFileStatus[file.status]"
+        [p-text]="file.displayName"
+        [p-value]="file.percent"
+        (p-cancel)="cancel(file)"
+        (p-retry)="uploadFiles([file])">
+      </po-progress>
     </div>
 
     <po-button
       *ngIf="displaySendButton"
+      class="po-upload-send-button"
       p-type="primary"
       [p-disabled]="hasAnyFileUploading(currentFiles)"
       [p-label]="literals.startSending"
       (p-click)="uploadFiles(currentFiles)">
     </po-button>
-
   </div>
 
 </po-field-container>