feat(table): permite traduzir literais usando serviço i18n

Author: jhosefmarks

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

@@ -3,6 +3,7 @@ import { Directive } from '@angular/core';
 import * as utilsFunctions from '../../utils/util';
 import { expectPropertiesValues, expectSettersMethod } from '../../util-test/util-expect.spec';
 import { PoDateService } from '../../services/po-date/po-date.service';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { poLocaleDefault } from '../../utils/util';
 
 import { PoTableAction } from './interfaces/po-table-action.interface';
@@ -18,14 +19,16 @@ class PoTableComponent extends PoTableBaseComponent {
 
 describe('PoTableBaseComponent:', () => {
   let dateService: PoDateService;
+  let languageService: PoLanguageService;
   let component: PoTableComponent;
   let actions: Array<PoTableAction>;
   let columns: Array<PoTableColumn>;
   let items;
 
   beforeEach(() => {
     dateService = new PoDateService();
-    component = new PoTableComponent(dateService);
+    languageService = new PoLanguageService();
+    component = new PoTableComponent(dateService, languageService);
 
     actions = [
       {
@@ -1106,47 +1109,47 @@ describe('PoTableBaseComponent:', () => {
 
     describe('p-literals:', () => {
       it('should be in portuguese if browser is setted with an unsupported language', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('zw');
+        component['language'] = 'zw';
 
         component.literals = {};
 
         expect(component.literals).toEqual(poTableLiteralsDefault[poLocaleDefault]);
       });
 
       it('should be in portuguese if browser is setted with `pt`', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('pt');
+        component['language'] = 'pt';
 
         component.literals = {};
 
         expect(component.literals).toEqual(poTableLiteralsDefault.pt);
       });
 
       it('should be in english if browser is setted with `en`', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('en');
+        component['language'] = 'en';
 
         component.literals = {};
 
         expect(component.literals).toEqual(poTableLiteralsDefault.en);
       });
 
       it('should be in spanish if browser is setted with `es`', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('es');
+        component['language'] = 'es';
 
         component.literals = {};
 
         expect(component.literals).toEqual(poTableLiteralsDefault.es);
       });
 
       it('should be in russian if browser is setted with `ru`', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('ru');
+        component['language'] = 'ru';
 
         component.literals = {};
 
         expect(component.literals).toEqual(poTableLiteralsDefault.ru);
       });
 
       it('should accept custom literals', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue(poLocaleDefault);
+        component['language'] = poLocaleDefault;
 
         const customLiterals = Object.assign({}, poTableLiteralsDefault[poLocaleDefault]);
 
@@ -1161,13 +1164,13 @@ describe('PoTableBaseComponent:', () => {
       it('should update property with default literals if is setted with invalid values', () => {
         const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
 
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue(poLocaleDefault);
+        component['language'] = poLocaleDefault;
 
         expectPropertiesValues(component, 'literals', invalidValues, poTableLiteralsDefault[poLocaleDefault]);
       });
 
       it('should get literals directly from poTableLiteralsDefault if it not initialized', () => {
-        spyOn(utilsFunctions, <any>'browserLanguage').and.returnValue('pt');
+        component['language'] = 'pt';
         expect(component.literals).toEqual(poTableLiteralsDefault['pt']);
       });
     });

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

@@ -1,14 +1,8 @@
 import { EventEmitter, Input, OnChanges, Output, Directive, SimpleChanges } from '@angular/core';
 
-import {
-  browserLanguage,
-  capitalizeFirstLetter,
-  convertToBoolean,
-  isTypeof,
-  sortValues,
-  poLocaleDefault
-} from '../../utils/util';
+import { capitalizeFirstLetter, convertToBoolean, isTypeof, sortValues, poLocaleDefault } from '../../utils/util';
 import { PoDateService } from '../../services/po-date/po-date.service';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 
 import { PoTableAction } from './interfaces/po-table-action.interface';
 import { PoTableColumn } from './interfaces/po-table-column.interface';
@@ -96,6 +90,7 @@ export abstract class PoTableBaseComponent implements OnChanges {
   private _loading?: boolean = false;
   private _selectable?: boolean;
   private _columnManager?: boolean = true;
+  private language: string = poLocaleDefault;
 
   allColumnsWidthPixels: boolean;
   columnMasterDetail: PoTableColumn;
@@ -259,21 +254,22 @@ export abstract class PoTableBaseComponent implements OnChanges {
    * </po-table>
    * ```
    *
-   *  > O objeto padrão de literais será traduzido de acordo com o idioma do *browser* (pt, en, es).
+   * > O objeto padrão de literais será traduzido de acordo com o idioma do
+   * [`PoI18nService`](/documentation/po-i18n) ou do browser.
    */
   @Input('p-literals') set literals(value: PoTableLiterals) {
     if (value instanceof Object && !(value instanceof Array)) {
       this._literals = {
         ...poTableLiteralsDefault[poLocaleDefault],
-        ...poTableLiteralsDefault[browserLanguage()],
+        ...poTableLiteralsDefault[this.language],
         ...value
       };
     } else {
-      this._literals = poTableLiteralsDefault[browserLanguage()];
+      this._literals = poTableLiteralsDefault[this.language];
     }
   }
   get literals() {
-    return this._literals || poTableLiteralsDefault[browserLanguage()];
+    return this._literals || poTableLiteralsDefault[this.language];
   }
 
   /**
@@ -524,7 +520,9 @@ export abstract class PoTableBaseComponent implements OnChanges {
     return this.sortedColumn.ascending ? PoTableColumnSortType.Ascending : PoTableColumnSortType.Descending;
   }
 
-  constructor(private poDate: PoDateService) {}
+  constructor(private poDate: PoDateService, languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (this.singleSelect || this.hideSelectAll) {

projects/ui/src/lib/components/po-table/po-table-column-manager/po-table-column-manager.component.ts

@@ -13,9 +13,10 @@ import {
   ViewChild
 } from '@angular/core';
 
-import { browserLanguage, capitalizeFirstLetter, convertToInt, poLocaleDefault } from '../../../utils/util';
+import { capitalizeFirstLetter, convertToInt, poLocaleDefault } from '../../../utils/util';
 import { PoCheckboxGroupOption } from '../../po-field/po-checkbox-group/interfaces/po-checkbox-group-option.interface';
 import { PoPopoverComponent } from '../../po-popover/po-popover.component';
+import { PoLanguageService } from '../../../services/po-language/po-language.service';
 
 import { PoTableColumn } from '../interfaces/po-table-column.interface';
 
@@ -47,11 +48,8 @@ export const poTableColumnManagerLiteralsDefault = {
 export class PoTableColumnManagerComponent implements OnInit, OnChanges, OnDestroy {
   private _maxColumns: number = PoTableColumnManagerMaxColumnsDefault;
 
+  literals;
   columnsOptions: Array<PoCheckboxGroupOption> = [];
-  literals = {
-    ...poTableColumnManagerLiteralsDefault[poLocaleDefault],
-    ...poTableColumnManagerLiteralsDefault[browserLanguage()]
-  };
   visibleColumns: Array<string> = [];
 
   private defaultColumns: Array<PoTableColumn> = [];
@@ -73,7 +71,14 @@ export class PoTableColumnManagerComponent implements OnInit, OnChanges, OnDestr
 
   @ViewChild(PoPopoverComponent) popover: PoPopoverComponent;
 
-  constructor(private renderer: Renderer2) {}
+  constructor(private renderer: Renderer2, languageService: PoLanguageService) {
+    const language = languageService.getShortLanguage();
+
+    this.literals = {
+      ...poTableColumnManagerLiteralsDefault[poLocaleDefault],
+      ...poTableColumnManagerLiteralsDefault[language]
+    };
+  }
 
   ngOnInit() {
     this.updateColumnsOptions(this.columns);

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

@@ -20,6 +20,7 @@ import { Router } from '@angular/router';
 
 import { convertToBoolean } from '../../utils/util';
 import { PoDateService } from '../../services/po-date/po-date.service';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoPopupComponent } from '../po-popup/po-popup.component';
 
 import { PoTableAction } from './interfaces/po-table-action.interface';
@@ -121,11 +122,12 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     differs: IterableDiffers,
     viewRef: ViewContainerRef,
     renderer: Renderer2,
+    poLanguageService: PoLanguageService,
     private changeDetector: ChangeDetectorRef,
     private decimalPipe: DecimalPipe,
     private router: Router
   ) {
-    super(poDate);
+    super(poDate, poLanguageService);
 
     this.differ = differs.find([]).create(null);