feat(page-default): define literais para idiomas suportados

Definidas literais para o componente para que traduza de acordo com idioma suportado. Agora também permite a customização da literal.

Fixes DTHFUI-1896

Author: samir-ayoub

projects/ui/src/lib/components/po-page/index.ts

@@ -1,5 +1,6 @@
 export * from './po-page-default/po-page-default.component';
 export * from './po-page-default/po-page-default.interface';
+export * from './po-page-default/po-page-default-literals.interface';
 export * from './po-page-detail/po-page-detail-literals.interface';
 export * from './po-page-detail/po-page-detail.component';
 export * from './po-page-edit/po-page-edit-literals.interface';

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

@@ -1,44 +1,117 @@
 import { Directive } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 
-import { PoPageDefaultBaseComponent } from './po-page-default-base.component';
+import * as UtilFunctions from './../../../utils/util';
 import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
+import { PoLanguageService } from './../../../services/po-language/po-language.service';
+import { poLocaleDefault } from './../../../services/po-language/po-language.constant';
+
+import { PoPageDefaultBaseComponent, poPageDefaultLiteralsDefault } from './po-page-default-base.component';
 
 @Directive()
 class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
   setDropdownActions() {}
 }
 
 describe('PoPageDefaultBaseComponent:', () => {
-  const component = new PoPageDefaultComponent();
+  let languageService: PoLanguageService;
+  let component: PoPageDefaultComponent;
+
+  beforeEach(() => {
+    languageService = new PoLanguageService();
+    component = new PoPageDefaultComponent(languageService);
+  });
 
   it('should be created', () => {
     expect(component instanceof PoPageDefaultBaseComponent).toBeTruthy();
   });
 
-  it('should get title and call recalculateHeaderSize when set title', fakeAsync(() => {
-    component.poPageContent = <any>{
-      recalculateHeaderSize: () => {}
-    };
+  describe('Properties:', () => {
+    describe('p-literals:', () => {
+      it('should be in portuguese if `getShortLanguage` return an unsupported language.', () => {
+        component['language'] = 'zw';
+
+        component.literals = {};
 
-    spyOn(component.poPageContent, 'recalculateHeaderSize');
+        expect(component.literals).toEqual(poPageDefaultLiteralsDefault[poLocaleDefault]);
+      });
 
-    component.title = 'teste';
+      it('should be in portuguese if `getShortLanguage` return `pt`.', () => {
+        component['language'] = 'pt';
 
-    tick();
+        component.literals = {};
 
-    expect(component.title).toBe('teste');
-    expect(component.poPageContent.recalculateHeaderSize).toHaveBeenCalled();
-  }));
+        expect(component.literals).toEqual(poPageDefaultLiteralsDefault.pt);
+      });
 
-  describe('Properties:', () => {
-    it('should update property `p-actions` to empty if is invalid values.', () => {
+      it('should be in english if `getShortLanguage` return `en`.', () => {
+        component['language'] = 'en';
+
+        component.literals = {};
+
+        expect(component.literals).toEqual(poPageDefaultLiteralsDefault.en);
+      });
+
+      it('should be in spanish if `getShortLanguage` return `es`.', () => {
+        component['language'] = 'es';
+
+        component.literals = {};
+
+        expect(component.literals).toEqual(poPageDefaultLiteralsDefault.es);
+      });
+
+      it('should be in russian if `getShortLanguage` return `ru`.', () => {
+        component['language'] = 'ru';
+
+        component.literals = {};
+
+        expect(component.literals).toEqual(poPageDefaultLiteralsDefault.ru);
+      });
+
+      it('should accept custom literals.', () => {
+        spyOn(UtilFunctions, <any>'browserLanguage').and.returnValue(poLocaleDefault);
+
+        const customLiterals = poPageDefaultLiteralsDefault[poLocaleDefault];
+
+        // Custom some literals
+        customLiterals.otherActions = 'Other actions';
+
+        component.literals = customLiterals;
+
+        expect(component.literals).toEqual(customLiterals);
+      });
+
+      it('should update property with default literals if is setted with invalid values.', () => {
+        const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
+
+        component['language'] = poLocaleDefault;
+
+        expectPropertiesValues(component, 'literals', invalidValues, poPageDefaultLiteralsDefault[poLocaleDefault]);
+      });
+    });
+
+    it('p-title: should get title and call recalculateHeaderSize when set title', fakeAsync(() => {
+      component.poPageContent = <any>{
+        recalculateHeaderSize: () => {}
+      };
+
+      spyOn(component.poPageContent, 'recalculateHeaderSize');
+
+      component.title = 'teste';
+
+      tick();
+
+      expect(component.title).toBe('teste');
+      expect(component.poPageContent.recalculateHeaderSize).toHaveBeenCalled();
+    }));
+
+    it('p-actions: should update property `p-actions` to empty if is invalid values.', () => {
       const invalidValues = [undefined, null, '', true, false, 0, 1, 'string', [], {}];
 
       expectPropertiesValues(component, 'actions', invalidValues, []);
     });
 
-    it('should update property `p-actions` if is valid values.', () => {
+    it('p-actions: should update property `p-actions` if is valid values.', () => {
       const validValues = [[{ label: 'Share', icon: 'po-icon-share' }]];
 
       expectPropertiesValues(component, 'actions', validValues, validValues);

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

@@ -1,9 +1,28 @@
 import { Input, ViewChild, Directive } from '@angular/core';
 
+import { PoLanguageService } from './../../../services/po-language/po-language.service';
+import { poLocaleDefault } from './../../../services/po-language/po-language.constant';
+
 import { PoBreadcrumb } from '../../po-breadcrumb/po-breadcrumb.interface';
 import { PoPageAction } from '../po-page-action.interface';
+import { PoPageDefaultLiterals } from './po-page-default-literals.interface';
 import { PoPageContentComponent } from '../po-page-content/po-page-content.component';
 
+export const poPageDefaultLiteralsDefault = {
+  en: <PoPageDefaultLiterals>{
+    otherActions: 'Other actions'
+  },
+  es: <PoPageDefaultLiterals>{
+    otherActions: 'Otras acciones'
+  },
+  pt: <PoPageDefaultLiterals>{
+    otherActions: 'Outras ações'
+  },
+  ru: <PoPageDefaultLiterals>{
+    otherActions: 'Другие действия'
+  }
+};
+
 /**
  * @description
  *
@@ -12,8 +31,11 @@ import { PoPageContentComponent } from '../po-page-content/po-page-content.compo
 @Directive()
 export abstract class PoPageDefaultBaseComponent {
   private _actions?: Array<PoPageAction> = [];
+  private _literals: PoPageDefaultLiterals;
   private _title: string;
 
+  protected language: string;
+
   @ViewChild(PoPageContentComponent, { static: true }) poPageContent: PoPageContentComponent;
 
   /**
@@ -35,6 +57,55 @@ export abstract class PoPageDefaultBaseComponent {
   /** Objeto com propriedades do breadcrumb. */
   @Input('p-breadcrumb') breadcrumb?: PoBreadcrumb;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Objeto com as literais usadas no `po-page-default`.
+   *
+   * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
+   *
+   * ```
+   *  const customLiterals: PoPageDefaultLiterals = {
+   *    otherActions: 'Mais ações'
+   *  };
+   * ```
+   *
+   * Ou passando apenas as literais que deseja customizar:
+   *
+   * ```
+   *  const customLiterals: PoPageDefaultLiterals = {
+   *    otherActions: 'Ações da página'
+   *  };
+   * ```
+   *
+   * E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
+   *
+   * ```
+   * <po-page-default
+   *   [p-literals]="customLiterals">
+   * </po-page-default>
+   * ```
+   *
+   * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*.
+   */
+  @Input('p-literals') set literals(value: PoPageDefaultLiterals) {
+    if (value instanceof Object && !(value instanceof Array)) {
+      this._literals = {
+        ...poPageDefaultLiteralsDefault[poLocaleDefault],
+        ...poPageDefaultLiteralsDefault[this.language],
+        ...value
+      };
+    } else {
+      this._literals = poPageDefaultLiteralsDefault[this.language];
+    }
+  }
+
+  get literals() {
+    return this._literals || poPageDefaultLiteralsDefault[this.language];
+  }
+
   /** Título da página. */
   @Input('p-title') set title(title: string) {
     this._title = title;
@@ -45,6 +116,10 @@ export abstract class PoPageDefaultBaseComponent {
     return this._title;
   }
 
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+
   // Seta a lista de ações no dropdown.
   abstract setDropdownActions();
 }

projects/ui/src/lib/components/po-page/po-page-default/po-page-default-literals.interface.ts

@@ -0,0 +1,11 @@
+/**
+ * @usedBy PoPageDefaultComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-page-default`.
+ */
+export interface PoPageDefaultLiterals {
+  /** Legenda do `po-dropdown` de ações. */
+  otherActions?: string;
+}

projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.html

@@ -3,7 +3,11 @@
   <po-page-header *ngIf="hasPageHeader()" [p-breadcrumb]="breadcrumb" [p-title]="title">
     <!-- OPERATIONS -->
     <div class="po-page-header-actions">
-      <po-dropdown *ngIf="actions.length > limitPrimaryActions" p-label="Outras ações" [p-actions]="dropdownActions">
+      <po-dropdown
+        *ngIf="actions.length > limitPrimaryActions"
+        [p-label]="literals.otherActions"
+        [p-actions]="dropdownActions"
+      >
       </po-dropdown>
 
       <po-button

projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts

@@ -1,6 +1,8 @@
 import { AfterContentInit, Component, OnChanges, Renderer2, SimpleChange, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { PoLanguageService } from './../../../services/po-language/po-language.service';
+
 import { callFunction, isExternalLink, isTypeof, openExternalLink } from '../../../utils/util';
 import { PoPageAction } from '../po-page-action.interface';
 
@@ -38,8 +40,13 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement
 
   private maxWidthMobile: number = 480;
 
-  constructor(viewRef: ViewContainerRef, private renderer: Renderer2, private router: Router) {
-    super();
+  constructor(
+    viewRef: ViewContainerRef,
+    languageService: PoLanguageService,
+    private renderer: Renderer2,
+    private router: Router
+  ) {
+    super(languageService);
   }
 
   public ngAfterContentInit(): void {

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

@@ -1,4 +1,5 @@
-<po-page-default [p-actions]="actions" [p-breadcrumb]="breadcrumb" [p-title]="title"> </po-page-default>
+<po-page-default [p-actions]="actions" [p-breadcrumb]="breadcrumb" [p-literals]="customLiterals" [p-title]="title">
+</po-page-default>
 
 <hr />
 
@@ -132,6 +133,16 @@
 <form #formPage="ngForm">
   <div class="po-row">
     <po-input class="po-md-12" name="title" [(ngModel)]="title" p-label="Title" p-required> </po-input>
+
+    <po-input
+      class="po-lg-12"
+      name="literals"
+      [(ngModel)]="literals"
+      p-help='Ex.: {"otherActions": "Mais ações"}'
+      p-label="Literals"
+      (p-change)="changeLiterals()"
+    >
+    </po-input>
   </div>
 
   <div class="po-row">

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

@@ -4,7 +4,7 @@ import { PoBreadcrumb, PoBreadcrumbItem } from '@po-ui/ng-components';
 import { PoCheckboxGroupOption, PoSelectOption } from '@po-ui/ng-components';
 
 import { PoNotificationService } from '@po-ui/ng-components';
-import { PoPageAction } from '@po-ui/ng-components';
+import { PoPageAction, PoPageDefaultLiterals } from '@po-ui/ng-components';
 
 @Component({
   selector: 'sample-po-page-default-labs',
@@ -16,6 +16,8 @@ export class SamplePoPageDefaultLabsComponent implements OnInit {
   breadcrumb: PoBreadcrumb;
   breadcrumbItem: PoBreadcrumbItem;
   breadcrumbParams: any;
+  customLiterals: PoPageDefaultLiterals;
+  literals: string;
   title: string;
 
   public readonly actionOptions: Array<PoCheckboxGroupOption> = [
@@ -67,11 +69,20 @@ export class SamplePoPageDefaultLabsComponent implements OnInit {
     this.breadcrumbParams = {};
   }
 
+  changeLiterals() {
+    try {
+      this.customLiterals = JSON.parse(this.literals);
+    } catch {
+      this.customLiterals = undefined;
+    }
+  }
+
   restore() {
     this.actions = [];
     this.breadcrumb = { items: [] };
     this.breadcrumbItem = { label: undefined, link: undefined };
     this.breadcrumbParams = {};
+    this.literals = '';
     this.title = 'PO Page Default';
     this.restoreActionForm();
   }