feat(upload): adiciona opção para envio de pastas

Adicionado a propriedade `p-directory` que possibilita o envio de pastas.

Fixes DTHFUI-787

Author: samir-ayoub

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

@@ -5,6 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { PoButtonGroupModule } from '../po-button-group/index';
 import { PoButtonModule } from '../po-button/index';
+import { PoContainerModule } from '../po-container/index';
 import { PoDisclaimerModule } from './../po-disclaimer/po-disclaimer.module';
 import { PoLoadingModule } from '../po-loading/index';
 import { PoModalModule } from '../po-modal/po-modal.module';
@@ -64,6 +65,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
     HttpClientModule,
     PoButtonGroupModule,
     PoButtonModule,
+    PoContainerModule,
     PoDisclaimerModule,
     PoLoadingModule,
     PoModalModule,

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

@@ -27,24 +27,48 @@ export interface PoUploadLiterals {
    */
   deleteFile?: string;
 
-  /** Texto exibido na área onde podem ser arrastados os arquivos ao utilizar a opção de *dragDrop*. */
+  /** Texto indicativo para a área onde os arquivos devem ser arrastados quando utilizada a propriedade `p-drag-drop`. */
   dragFilesHere?: string;
 
-  /** Texto exibido na área onde podem ser arrastados os arquivos ao utilizar a opção de *dragDrop*. */
+  /** Texto indicativo para a área onde os diretórios devem ser arrastados quando utilizada a propriedade `p-drag-drop`. */
+  dragFoldersHere?: string;
+
+  /** Texto indicativo para a área onde os arquivos devem ser soltos quando utilizada a propriedade `p-drag-drop` */
   dropFilesHere?: string;
 
+  /** Texto indicativo para a área onde os diretórios devem ser soltos quando utilizada a propriedade `p-drag-drop`. */
+  dropFoldersHere?: string;
+
+  /** Parâmetro *files* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. */
+  files?: string;
+
+  /** Parâmetro *folders* para o texto de exibição quando arrastado um arquivo para um local inválido com a opção de *dragDrop*. */
+  folders?: string;
+
   /** Texto exibido caso o usuário arrastar um arquivo para um local inválido ao utilizar a opção de *dragDrop*. */
   invalidDropArea?: string;
 
   /** Texto exibido no label do botão de seleção dos arquivos. */
   selectFile?: string;
 
+  /** Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-multiple`. */
+  selectFiles?: string;
+
+  /** Texto exibido no label do botão de seleção dos arquivos ao utilizar a propriedade `p-directory`. */
+  selectFolder?: string;
+
   /**
    * Texto utilizado para indicar a possibilidade de seleção de arquivos na área onde podem ser arrastados os arquivos
    * ao utilizar a opção de *dragDrop*.
    */
   selectFilesOnComputer?: string;
 
+  /**
+   * Texto utilizado para indicar a possibilidade de seleção de diretório na área onde podem ser arrastados os arquivos
+   * ao utilizar a opção de *dragDrop*.
+   */
+  selectFolderOnComputer?: string;
+
   /** Texto exibido no label do botão para iniciar o envio dos arquivos. */
   startSending?: string;
 

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

@@ -28,6 +28,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
   }
 
   sendFeedback() {}
+  setDirectoryAttribute() {}
 }
 
 describe('PoUploadBaseComponent:', () => {
@@ -431,6 +432,22 @@ describe('PoUploadBaseComponent:', () => {
       expect(component['updateExistsFileInFiles']).not.toHaveBeenCalled();
     });
 
+    it('insertFileInFiles: should call `files.push` with newFile if `directory` is true and `existsFileSameName` is false', () => {
+      const files = [];
+      component.directory = true;
+      component.isMultiple = true;
+
+      spyOn(files, 'push');
+      spyOn(component, <any> 'existsFileSameName').and.returnValue(false);
+      spyOn(component, <any> 'updateExistsFileInFiles');
+
+      component['insertFileInFiles'](file, files);
+
+      expect(files.push).toHaveBeenCalledWith(file);
+      expect(component['existsFileSameName']).toHaveBeenCalled();
+      expect(component['updateExistsFileInFiles']).not.toHaveBeenCalled();
+    });
+
     it('insertFileInFiles: should call `updateExistsFileInFiles` when `existsFileSameName` is true', () => {
       const files = [];
 
@@ -670,6 +687,96 @@ describe('PoUploadBaseComponent:', () => {
       expectPropertiesValues(component, 'hideSendButton', invalidValues, false);
     });
 
+    it('directory: should set `directory` with valid values', () => {
+      const validValues = ['', true, 1, [], {}, 'true'];
+
+      expectPropertiesValues(component, 'directory', validValues, true);
+    });
+
+    it('directory: should set `directory` to false with invalid values', () => {
+      const invalidValues = [null, undefined, NaN, false, 0, 'false', 'teste'];
+
+      expectPropertiesValues(component, 'directory', invalidValues, false);
+    });
+
+    it('directory: should apply true to `canHandleDirectory` if directory is true and `isIE` plus `isMobile` return false', () => {
+      component.canHandleDirectory = undefined;
+
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(false);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(false);
+
+      component.directory = true;
+
+      expect(component.canHandleDirectory).toBeTruthy();
+    });
+
+    it('directory: should apply false to `canHandleDirectory` if directory is true but `isIE` returns true', () => {
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(true);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(false);
+
+      component.directory = true;
+
+      expect(component.canHandleDirectory).toBeFalsy();
+    });
+
+    it('directory: should apply false to `canHandleDirectory` if directory is true but `isMobile` returns true', () => {
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(false);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(true);
+
+      component.directory = true;
+
+      expect(component.canHandleDirectory).toBeFalsy();
+    });
+
+    it('directory: should apply false to `canHandleDirectory` if directory is false', () => {
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(false);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(false);
+
+      component.directory = false;
+
+      expect(component.canHandleDirectory).toBeFalsy();
+    });
+
+    it(`directory: call 'setDirectoryAttribute' passing true as parameter`, () => {
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(false);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(false);
+      spyOn(component, 'setDirectoryAttribute');
+
+      component.directory = true;
+
+      expect(component['canHandleDirectory']).toBe(true);
+      expect(component.setDirectoryAttribute).toHaveBeenCalledWith(true);
+    });
+
+    it(`directory: should call 'setDirectoryAttribute' passing false as parameter`, () => {
+      spyOn(utilsFunctions, <any>'isIE').and.returnValue(false);
+      spyOn(utilsFunctions, <any>'isMobile').and.returnValue(true);
+      spyOn(component, 'setDirectoryAttribute');
+
+      component.directory = false;
+
+      expect(component['canHandleDirectory']).toBe(false);
+      expect(component.setDirectoryAttribute).toHaveBeenCalledWith(false);
+    });
+
+    it('isMultiple: should set `isMultiple` with `true` if valid values', () => {
+      const validValues = ['', true, 1, [], {}, 'true'];
+
+      expectPropertiesValues(component, 'isMultiple', validValues, true);
+    });
+
+    it('isMultiple: should set `isMultiple` with `false` if invalid values', () => {
+      const invalidValues = [null, undefined, NaN, false, 0, 'false', 'teste'];
+
+      expectPropertiesValues(component, 'isMultiple', invalidValues, false);
+    });
+
+    it('isMultiple: should return true if `diretory` is true', () => {
+      component.directory = true;
+
+      expect(component.isMultiple).toBe(true);
+    });
+
   });
 
 });

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

@@ -1,7 +1,7 @@
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { EventEmitter, Input, Output } from '@angular/core';
 
-import { browserLanguage, convertToBoolean, isEquals, poLocaleDefault } from '../../../utils/util';
+import { browserLanguage, convertToBoolean, isEquals, isIE, isMobile, poLocaleDefault } from '../../../utils/util';
 import { requiredFailed } from '../validators';
 
 import { PoUploadFile } from './po-upload-file';
@@ -12,15 +12,23 @@ import { PoUploadStatus } from './po-upload-status.enum';
 
 export const poUploadLiteralsDefault = {
   en: <PoUploadLiterals> {
+    files: 'files',
+    folders: 'folders',
     selectFile: 'Select file',
+    selectFiles: 'Select files',
+    selectFolder: 'Select folder',
     deleteFile: 'Delete',
     cancel: 'Cancel',
     tryAgain: 'Try again',
     startSending: 'Start sending',
     dragFilesHere: 'Drag files here',
+    dragFoldersHere: 'Drag folders here',
     selectFilesOnComputer: 'or select files on your computer',
+    selectFolderOnComputer: 'or select folder on your computer',
     dropFilesHere: 'Drop files here',
-    invalidDropArea: 'Files were not dropped in the correct area',
+    dropFoldersHere: 'Drop folders here',
+    invalidDropArea: '{0} were not dropped in the correct area',
+    invalidFileType: 'Failed to load {0} file(s) as it is not the allowed file type.',
     invalidAmount: 'Failed to load {0} file(s), as it exceeds the limit amount of files.',
     invalidFormat: 'Failed to load {0} file(s), as it does not match the format(s): {1}.',
     invalidSize: 'Failed to load {0} files(s), as it is not the allowed size: from {1} to {2}.',
@@ -33,15 +41,23 @@ export const poUploadLiteralsDefault = {
     sentWithSuccess: 'Sent with success'
   },
   es: <PoUploadLiterals> {
+    files: 'archivos',
+    folders: 'carpetas',
     selectFile: 'Seleccionar archivo',
+    selectFiles: 'Seleccionar archivos',
+    selectFolder: 'Seleccionar carpeta',
     deleteFile: 'Borrar',
     cancel: 'Cancelar',
     tryAgain: 'Intentar de nuevo',
     startSending: 'Iniciar carga',
     dragFilesHere: 'Arrastra los archivos aquí',
+    dragFoldersHere: 'Arrastra las carpetas aquí',
     selectFilesOnComputer: 'o selecciona los archivos en tu computadora',
+    selectFolderOnComputer: 'o selecciona la carpeta en tu computadora',
     dropFilesHere: 'Deja los archivos aquí',
-    invalidDropArea: 'Los archivos no se insertaron en la ubicación correcta',
+    dropFoldersHere: 'Deja las carpetas aquí',
+    invalidDropArea: 'Los {0} no se insertaron en la ubicación correcta',
+    invalidFileType: 'Error al cargar {0} archivo (s) ya que no es el tipo de archivo permitido',
     invalidAmount: 'Error al cargar {0} archivo (s) ya que excede la cantidad limite de archivos.',
     invalidFormat: 'Error al cargar {0} archivo (s) ya que no coincide con el formato (s): {1}.',
     invalidSize: 'Error al cargar {0} archivo (s) ya que no cumple con el tamaño permitido: desde {1} hasta {2}.',
@@ -54,15 +70,23 @@ export const poUploadLiteralsDefault = {
     sentWithSuccess: 'Enviado con éxito'
   },
   pt: <PoUploadLiterals> {
+    files: 'arquivos',
+    folders: 'diretórios',
     selectFile: 'Selecionar arquivo',
+    selectFiles: 'Selecionar arquivos',
+    selectFolder: 'Selecionar pasta',
     deleteFile: 'Excluir',
     cancel: 'Cancelar',
     tryAgain: 'Tentar Novamente',
     startSending: 'Iniciar envio',
     dragFilesHere: 'Arraste os arquivos aqui',
+    dragFoldersHere: 'Arraste as pastas aqui',
     selectFilesOnComputer: 'ou selecione os arquivos no computador',
+    selectFolderOnComputer: 'ou selecione a pasta no computador',
     dropFilesHere: 'Solte os arquivos aqui',
-    invalidDropArea: 'Os arquivos não foram inseridos no local correto',
+    dropFoldersHere: 'Solte as pastas aqui',
+    invalidDropArea: 'Os {0} não foram inseridos no local correto',
+    invalidFileType: 'Falha ao carregar {0} arquivo (s), pois não é o tipo de arquivo permitido',
     invalidAmount: 'Falha ao carregar {0} arquivo(s), pois excede(m) a quantidade limite de arquivos.',
     invalidFormat: 'Falha ao carregar {0} arquivo(s), pois não corresponde(m) ao(s) formato(s): {1}.',
     invalidSize: 'Falha ao carregar {0} arquivo(s), pois não atende ao tamanho permitido: {1} até {2}.',
@@ -86,6 +110,7 @@ const poUploadMinFileSize = 0;
  *
  * O componente `po-upload` permite que o usuário envie arquivo(s) ao servidor e acompanhe o progresso.
  * Este componente também possibilita algumas configurações como:
+ *  – Envio de diretórios, onde ele acessa o diretório selecionado assim como seus sub-diretórios;
  *  - Múltipla seleção, onde o usuário pode enviar mais de um arquivo ao servidor.
  *  - Auto envio, onde o arquivo é enviado imediatamente após a seleção do usuário, não necessitando que o usuário
  * clique em enviar.
@@ -96,19 +121,22 @@ const poUploadMinFileSize = 0;
  */
 export abstract class PoUploadBaseComponent implements ControlValueAccessor, Validator {
 
+  private _directory?: boolean;
   private _disabled?: boolean;
   private _dragDrop?: boolean = false;
   private _fileRestrictions?: PoUploadFileRestrictions;
   private _formField?: string;
   private _hideRestrictionsInfo?: boolean;
   private _hideSelectButton?: boolean;
   private _hideSendButton?: boolean;
+  private _isMultiple?: boolean;
   private _literals?: any;
   private _required?: boolean;
 
   allowedExtensions: string;
   currentFiles: Array<PoUploadFile>;
 
+  canHandleDirectory: boolean;
   onModelChange: any;
   onModelTouched: any;
 
@@ -118,6 +146,30 @@ export abstract class PoUploadBaseComponent implements ControlValueAccessor, Val
   protected quantityNotAllowed = 0;
   protected sizeNotAllowed = 0;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite a seleção de diretórios contendo um ou mais arquivos para envio.
+   *
+   * > A habilitação desta propriedade se restringe apenas à seleção de diretórios.
+   *
+   * > Definição não suportada pelo browser **Internet Explorer**, todavia será possível a seleção de arquivos padrão.
+   *
+   * @default `false`
+   */
+  @Input('p-directory') set directory(value: boolean) {
+    this._directory = convertToBoolean(value);
+
+    this.canHandleDirectory = this._directory && !isIE() && !isMobile();
+    this.setDirectoryAttribute(this.canHandleDirectory);
+  }
+
+  get directory() {
+    return this._directory;
+  }
+
   /**
    * @optional
    *
@@ -341,8 +393,16 @@ export abstract class PoUploadBaseComponent implements ControlValueAccessor, Val
    * @description
    *
    * Define se pode selecionar mais de um arquivo.
+   *
+   * > Se utilizada a `p-directory`, habilita-se automaticamente esta propriedade.
    */
-  @Input('p-multiple') isMultiple?: boolean;
+  @Input('p-multiple') set isMultiple(value: boolean) {
+    this._isMultiple = convertToBoolean(value);
+  }
+
+  get isMultiple() {
+    return this.canHandleDirectory ? true : this._isMultiple;
+  }
 
   /**
    * @optional
@@ -569,4 +629,6 @@ export abstract class PoUploadBaseComponent implements ControlValueAccessor, Val
     return files;
   }
 
+  abstract setDirectoryAttribute(value: boolean);
+
 }

projects/ui/src/lib/components/po-field/po-upload/po-upload-drag-drop/po-upload-drag-drop-area-overlay/po-upload-drag-drop-area-overlay.component.html

@@ -2,6 +2,7 @@
 
   <po-upload-drag-drop-area #DragDropAreaFixed
     class="po-upload-drag-drop-area-overlay"
+    [p-directory-compatible]="directoryCompatible"
     [p-disabled]="disabled"
     [p-literals]="literals"
     [p-overlay]="true">

projects/ui/src/lib/components/po-field/po-upload/po-upload-drag-drop/po-upload-drag-drop-area-overlay/po-upload-drag-drop-area-overlay.component.ts

@@ -12,6 +12,8 @@ export class PoUploadDragDropAreaOverlayComponent implements AfterViewInit {
 
   @ViewChild('DragDropAreaFixed', { read: ElementRef, static: true }) DragDropAreaFixed: ElementRef;
 
+  @Input('p-directory-compatible') directoryCompatible: boolean;
+
   @Input('p-disabled') disabled: boolean;
 
   @Input('p-literals') literals: PoUploadLiterals;