feat(http-interceptor): permite exibição múltiplas mensagens do back end

Exibe em uma modal os detalhamentos de mensagens de erro e sucesso
recebidas do back end.

Fixes DTHFUI-898

Author: Rafaelly

projects/ui/src/lib/interceptors/po-http-interceptor/po-http-interceptor-base.service.spec.ts

@@ -1,9 +1,16 @@
+import { ComponentRef } from '@angular/core';
 import { HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpEvent, HttpErrorResponse } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
+import { PoComponentInjectorService } from '../../services/po-component-injector/po-component-injector.service';
+import { PoHttpInterceptorDetail } from './po-http-interceptor-detail/po-http-interceptor-detail.interface';
+import { PoHttpInterceptorDetailComponent } from './po-http-interceptor-detail/po-http-interceptor-detail.component';
+
+// DEPRECATED 4.x.x
 const NO_ERROR_HEADER_PARAM = 'X-Portinari-No-Error';
+const NO_MESSAGE_HEADER_PARAM = 'X-Portinari-No-Message';
 
 /**
  * @description
@@ -15,31 +22,40 @@ const NO_ERROR_HEADER_PARAM = 'X-Portinari-No-Error';
  * Ao analisar o objeto `_messages` retornado pela requisição, o serviço exibirá notificações com mensagens na tela.
  * Os retornos de erros com códigos 4xx e 5xx são tratados automaticamente, sem a necessidade de incluir o `_messages`.
  *
- * Também existe a possibilidade de não apresentar a notificação quando houver algum erro com códigos 4xx e 5xx,
- * utilizando o parâmetro `X-Portinari-No-Error` que foi definido conforme o
- * [**Guia de implementação das APIs TOTVS**](http://tdn.totvs.com/pages/viewpage.action?pageId=484701395) (em Cabeçalhos Customizados).
- * O parâmetro `X-Portinari-No-Error` deve ser informado no cabeçalho da requisição com o valor `'true'` para funcionar corretamente,
- * por exemplo:
+ * É possível dispensar a notificação para o usuário utilizando-se no cabeçalho da requisição os parâmetros listados abaixo com o valor
+ * igual a `true`:
+ *
+ * - `X-Portinari-No-Message`: Não exibe notificações de erro e/ou sucesso.
+ *
+ * - **Depreciado** `X-Portinari-No-Error`: não mostra notificações de erro com códigos `4xx` e `5xx`.
  *
  * ```
  * ...
- *  const headers = { 'X-Portinari-No-Error': 'true' };
+ *  const headers = { 'X-Portinari-No-Message': 'true' };
  *
  *  this.http.get(`/customers/1`, { headers: headers });
  * ...
  *
  * ```
- * > Após a validação no interceptor, o parâmetro será removido do cabeçalho da requisição.
+ *
+ * Mais detalhes no tópico sobre cabeçalhos customizados no
+ * [**Guia de implementação das APIs TOTVS**](http://tdn.totvs.com/pages/viewpage.action?pageId=484701395)
+ *
+ * > Após a validação no interceptor, os parâmetros serão removidos do cabeçalho da requisição.
  *
  * O `Content-Type` deve ser `application/json` e a estrutura de mensagem recebida pelo serviço deve seguir o
  * [**Guia de implementação das APIs TOTVS**](http://tdn.totvs.com/pages/viewpage.action?pageId=484701395)
  * (em Mensagens de sucesso para coleções), exemplo:
- *  - _messages: lista de mensagens de erro ou informativo resultante do serviço.
- *    - type: success, warning, error, e information;
+ *  - _messages: lista de mensagens ou objeto de mensagem, resultante do serviço.
+ *    - type: success, warning, error, e information (será exibido a `tag` apenas se esta propriedade possuir valor);
  *    - code: título ou código da mensagem;
  *    - message: texto da mensagem;
  *    - detailedMessage: detalhamento do erro ou informativo;
  *
+ * Ao clicar na ação 'Detalhes' no
+ * [`po-notification`](/documentation/po-notification) os detalhes das mensagens de sucesso e de erro são apresentados em
+ * um [`po-modal`](/documentation/po-modal) com um [`po-accordion`](/documentation/po-accordion) que possui um item por mensagem.
+ *
  * Ao importar o módulo `PoModule` na aplicação, o `po-http-interceptor` é automaticamente configurado sem a necessidade
  * de qualquer configuração extra.
  *
@@ -69,18 +85,20 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
 
   notificationTypes = ['success', 'warning', 'error', 'information'];
 
-  constructor(private notification: any, private dialog: any) { }
+  private httpInterceptorDetailComponent: ComponentRef<PoHttpInterceptorDetailComponent> = undefined;
+
+  constructor(private componentInjector: PoComponentInjectorService, private notification: any) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     const cloneRequest = request.clone();
 
-    request = request.headers.has(NO_ERROR_HEADER_PARAM) ? this.cloneRequestWithoutNoErrorHeaderParam(request) : request;
+    request = request && this.hasParameters(request) ? this.cloneRequestWithoutParameters(request) : request;
 
     return next.handle(request).pipe(tap((response: HttpEvent<any>) => {
 
       if (response instanceof HttpResponse) {
 
-        this.processResponse(response);
+        this.processResponse(response, cloneRequest);
 
       }
     }, (error: HttpErrorResponse) => {
@@ -90,13 +108,15 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
     }));
   }
 
-  processResponse(response: HttpResponse<any>) {
-    if (response.body && response.body._messages) {
+  processResponse(response: HttpResponse<any>, request: HttpRequest<any>) {
+    const hasNoMessageParam = this.hasNoMessageParam(request);
+
+    if (!hasNoMessageParam && response.body && response.body._messages) {
 
       const messages = response.body._messages;
 
       if (messages instanceof Array) {
-        messages.forEach((message: any) => {
+        messages.forEach((message: PoHttpInterceptorDetail) => {
           this.showNotification(message);
         });
       } else {
@@ -111,15 +131,41 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
       : { code: 0, message: 'Servidor não está respondendo.', detailedMessage: response.message };
 
     const hasNoErrorParam = this.hasNoErrorParam(request);
+    const hasNoMessageParam = this.hasNoMessageParam(request);
 
-    // not show the notification when has NoError parameter on header of request.
-    if (errorResponse && errorResponse.message && !hasNoErrorParam) {
+    if (errorResponse && errorResponse.message && !hasNoErrorParam && !hasNoMessageParam) {
       this.showNotification({ ...errorResponse, type: 'error' });
     }
   }
 
-  private cloneRequestWithoutNoErrorHeaderParam(request: HttpRequest<any>): HttpRequest<any> {
-    return request && request.clone({headers: request.headers.delete(NO_ERROR_HEADER_PARAM)});
+  private cloneRequestWithoutParameters(request: HttpRequest<any>): HttpRequest<any> {
+    const headers = request.headers
+      .delete(NO_ERROR_HEADER_PARAM)
+      .delete(NO_MESSAGE_HEADER_PARAM);
+
+    return request.clone({ headers });
+  }
+
+  private createModal(responseMessage: PoHttpInterceptorDetail) {
+    const details = responseMessage.details ? [ responseMessage, ...responseMessage.details ] : [ responseMessage ];
+
+    this.httpInterceptorDetailComponent = this.componentInjector.createComponentInApplication(PoHttpInterceptorDetailComponent);
+    this.httpInterceptorDetailComponent.instance.detail = details;
+    this.httpInterceptorDetailComponent.instance.closed.subscribe(() => this.destroyModal());
+    this.httpInterceptorDetailComponent.instance.open();
+  }
+
+  private destroyModal() {
+    if (this.httpInterceptorDetailComponent) {
+      this.componentInjector.destroyComponentInApplication(this.httpInterceptorDetailComponent);
+      this.httpInterceptorDetailComponent = undefined;
+    }
+  }
+
+  private hasMessage(responseMessage: PoHttpInterceptorDetail) {
+    const hasMessageProperties = responseMessage.message;
+
+    return responseMessage && hasMessageProperties;
   }
 
   private hasNoErrorParam(request: HttpRequest<any>): boolean {
@@ -128,7 +174,22 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
     return noErrorParam && noErrorParam.toString().toLocaleLowerCase() === 'true';
   }
 
+  private hasNoMessageParam(request: HttpRequest<any>): boolean {
+    const noMessageParam = request && request.headers.get(NO_MESSAGE_HEADER_PARAM);
+
+    return noMessageParam && noMessageParam.toString().toLocaleLowerCase() === 'true';
+  }
+
+  private hasParameters(request: HttpRequest<any>) {
+    return request.headers.has(NO_ERROR_HEADER_PARAM) || request.headers.has(NO_MESSAGE_HEADER_PARAM);
+  }
+
   private showNotification(response: any) {
+
+    if (!this.hasMessage(response)) {
+      return;
+    }
+
     const typeNotification = this.notificationTypes.includes(response.type) ? response.type : 'information';
 
     const notificationAction = this.generateNotificationAction(response);
@@ -140,26 +201,26 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
     });
   }
 
-  private generateNotificationAction(errorResponse: any) {
+  private generateDetailModal(responseMessage: any) {
+    return () => {
+      if (!this.httpInterceptorDetailComponent) {
+        this.createModal(responseMessage);
+      }
+    };
+  }
+
+  private generateNotificationAction(responseMessage: any) {
 
     let notificationAction;
     let notificationLabel;
 
-    let notificationMessage = errorResponse.message.concat(` ${errorResponse.detailedMessage}`);
-
-    if (errorResponse.details && errorResponse.details instanceof Array) {
-      errorResponse.details.forEach((detailError: any) => {
-        notificationMessage += `\n${detailError.message}`;
-      });
-    }
-
-    if (errorResponse.helpUrl && !(errorResponse.detailedMessage || errorResponse.details)) {
+    if (responseMessage.helpUrl && !(responseMessage.detailedMessage || responseMessage.details)) {
       notificationLabel = 'Ajuda';
-      notificationAction = this.generateUrlHelpFunction(errorResponse.helpUrl);
+      notificationAction = this.generateUrlHelpFunction(responseMessage.helpUrl);
 
-    } else if (errorResponse.detailedMessage || errorResponse.details) {
+    } else if (responseMessage.detailedMessage || responseMessage.details) {
       notificationLabel = 'Detalhes';
-      notificationAction = this.generateDialogDetailFunction(errorResponse, notificationMessage);
+      notificationAction = this.generateDetailModal(responseMessage);
     }
     return { label: notificationLabel, action: notificationAction };
   }
@@ -168,13 +229,4 @@ export abstract class PoHttpInterceptorBaseService implements HttpInterceptor {
     return () => { window.open(helpUrl, '_blank'); };
   }
 
-  private generateDialogDetailFunction(errorResponse: any, notificationMessage: string) {
-    return () => {
-      this.dialog.alert({
-        title: errorResponse.code,
-        message: notificationMessage,
-        ok: errorResponse.helpUrl ? this.generateUrlHelpFunction(errorResponse.helpUrl) : undefined
-      });
-    };
-  }
 }

projects/ui/src/lib/interceptors/po-http-interceptor/po-http-interceptor-base.service.ts

@@ -0,0 +1,38 @@
+export const poHttpInterceptorDetailLiteralsDefault = {
+  en: <any> {
+    closeButton: 'Close',
+    details: 'Details',
+    detail: 'Detail',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+    success: 'Success'
+  },
+  es: <any> {
+    closeButton: 'Cerrar',
+    details: 'Detalles',
+    detail: 'Detalle',
+    error: 'Error',
+    warning: 'Advertencia',
+    info: 'Informacion',
+    success: 'Éxito'
+  },
+  pt: <any> {
+    closeButton: 'Fechar',
+    details: 'Detalhes',
+    detail: 'Detalhe',
+    error: 'Erro',
+    warning: 'Aviso',
+    info: 'Informação',
+    success: 'Sucesso'
+  },
+  ru: <any>{
+    closeButton: 'близко',
+    details: 'Детали',
+    detail: 'деталь',
+    error: 'ошибка',
+    warning: 'предупреждение',
+    info: 'информация',
+    success: 'Yспех'
+  }
+};

projects/ui/src/lib/interceptors/po-http-interceptor/po-http-interceptor-detail/po-http-interceptor-detail-literals.interface.ts

@@ -0,0 +1,22 @@
+<po-modal
+  p-hide-close p-size="lg"
+  [p-primary-action]="primaryAction"
+  [p-title]="title">
+
+  <div class="po-row">
+    <po-accordion class="po-md-12 po-mt-1 po-mb-1">
+      <po-accordion-item *ngFor="let detail of details" [p-label]="formatDetailItemTitle(detail)">
+
+        <div *ngIf="detail.type" class="po-row po-mb-1">
+          <po-tag [p-color]="typeColor(detail.type)" [p-value]="typeValue(detail.type)"></po-tag>
+        </div>
+
+        <div class="po-row">
+          <p>{{detail.detailedMessage}}</p>
+        </div>
+
+      </po-accordion-item>
+    </po-accordion>
+  </div>
+
+</po-modal>