feat(datepicker-range): suporte locale russo

Padroniza exibição de data no datepicker-range quando utilizado locale russo

fixes DTHFUI-6949

Author: jcorrea97

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

@@ -96,13 +96,17 @@ describe('PoDatepickerRangeBaseComponent:', () => {
     });
 
     it('should be update property p-locale', () => {
-      // expectPropertiesValues(component, 'locale', '', 'pt'); // @TODO: corrigir teste
       expectPropertiesValues(component, 'locale', ['pt', 'x'], 'pt');
       expectPropertiesValues(component, 'locale', 'en', 'en');
       expectPropertiesValues(component, 'locale', 'es', 'es');
       expectPropertiesValues(component, 'locale', 'ru', 'ru');
     });
 
+    it('should be update property p-locale with the default value ', () => {
+      component['language'] = 'pt';
+      expectPropertiesValues(component, 'locale', '', 'pt');
+    });
+
     it('disabled: should update with true value.', () => {
       const booleanValidTrueValues = [true, 'true', 1, ''];
 

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

@@ -5,10 +5,17 @@ import { poLocaleDefault } from '../../../services/po-language/po-language.const
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
 import { requiredFailed } from '../validators';
 import { PoDateService } from './../../../services/po-date/po-date.service';
-import { convertIsoToDate, convertToBoolean, setYearFrom0To100, validateDateRange } from './../../../utils/util';
+import {
+  convertIsoToDate,
+  convertToBoolean,
+  setYearFrom0To100,
+  validateDateRange,
+  replaceFormatSeparator
+} from './../../../utils/util';
 import { PoDatepickerRangeLiterals } from './interfaces/po-datepicker-range-literals.interface';
 import { PoDatepickerRange } from './interfaces/po-datepicker-range.interface';
 import { poDatepickerRangeLiteralsDefault } from './po-datepicker-range.literals';
+import { PoMask } from '../po-input/po-mask';
 
 /**
  * @description
@@ -115,6 +122,7 @@ export abstract class PoDatepickerRangeBaseComponent implements ControlValueAcce
   protected isDateRangeInputFormatValid: boolean = true;
   protected isStartDateRangeInputValid: boolean = true;
   protected onTouchedModel: any;
+  protected poMaskObject: PoMask;
 
   private _clean?: boolean = false;
   private _disabled?;
@@ -384,16 +392,22 @@ export abstract class PoDatepickerRangeBaseComponent implements ControlValueAcce
   @Input('p-locale') set locale(value: string) {
     if (value) {
       this._locale = value.length >= 2 ? value : poLocaleDefault;
+      this.poMaskObject = this.buildMask(
+        replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+      );
     } else {
       this._locale = this.language;
+      this.poMaskObject = this.buildMask(
+        replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+      );
     }
   }
 
   get locale(): string {
     return this._locale || this.language;
   }
 
-  constructor(protected poDateService: PoDateService, languageService: PoLanguageService) {
+  constructor(protected poDateService: PoDateService, private languageService: PoLanguageService) {
     this.language = languageService.getShortLanguage();
   }
 
@@ -507,6 +521,17 @@ export abstract class PoDatepickerRangeBaseComponent implements ControlValueAcce
     this.updateScreenByModel(this.dateRange);
   }
 
+  // Retorna um objeto do tipo PoMask com a mascara configurada.
+  protected buildMask(format: string = this.format): PoMask {
+    let mask = format.toUpperCase();
+
+    mask = mask.replace(/DD/g, '99');
+    mask = mask.replace(/MM/g, '99');
+    mask = mask.replace(/YYYY/g, '9999');
+
+    return new PoMask(mask, true);
+  }
+
   protected dateFormatFailed(value: string): boolean {
     return value && !this.poDateService.isValidIso(value);
   }

projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.spec.ts

@@ -256,6 +256,33 @@ describe('PoDatepickerRangeComponent:', () => {
       expect(spy).not.toHaveBeenCalled();
     });
 
+    it(`ngOnChanges: shouldn't call 'updateScreenByModel' if 'changes' contain locale`, () => {
+      const changes: any = {
+        locale: 'pt'
+      };
+
+      const spy = spyOn(component, <any>'buildMask');
+
+      component.ngOnChanges(changes);
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it(`ngOnChanges: shouldn't call 'updateScreenByModel' if 'changes' contain locale and contain 'dateRange'`, () => {
+      const changes: any = {
+        locale: 'pt'
+      };
+      component.dateRange = { start: '2023-01-25', end: '2023-02-21' };
+
+      const spyBuildMask = spyOn(component, <any>'buildMask');
+      const spyUpdateScreenByModel = spyOn(component, <any>'updateScreenByModel');
+
+      component.ngOnChanges(changes);
+
+      expect(spyBuildMask).toHaveBeenCalled();
+      expect(spyUpdateScreenByModel).toHaveBeenCalled();
+    });
+
     it('clear: should call `updateScreenByModel`, `resetDateRangeInputValidation` and `updateModel`', () => {
       spyOn(component, 'updateScreenByModel');
       spyOn(component, <any>'resetDateRangeInputValidation');
@@ -604,6 +631,13 @@ describe('PoDatepickerRangeComponent:', () => {
       expect(component['formatDate'](format, ...date)).toBe('2018-03-0');
     });
 
+    it('formatDate: should convert date to `yyyy-mm-` with default format value', () => {
+      component['format'] = 'yyyy-mm-dd';
+      const date = [undefined, '3', '2018'];
+
+      expect(component['formatDate'](undefined, ...date)).toBe('2018-03-0');
+    });
+
     it('formatScreenToModel: should return empty string if value is undefined', () => {
       const value = undefined;
 

projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts

@@ -19,8 +19,8 @@ import { PoControlPositionService } from './../../../services/po-control-positio
 import { PoDatepickerRange } from './interfaces/po-datepicker-range.interface';
 import { PoDatepickerRangeBaseComponent } from './po-datepicker-range-base.component';
 import { PoDateService } from './../../../services/po-date/po-date.service';
-import { PoMask } from '../po-input/po-mask';
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
+import { replaceFormatSeparator } from './../../../utils/util';
 
 const arrowLeftKey = 37;
 const arrowRightKey = 39;
@@ -93,7 +93,6 @@ export class PoDatepickerRangeComponent
   private clickListener;
   private eventResizeListener;
   private poDatepickerRangeElement: ElementRef<any>;
-  private poMaskObject: PoMask;
 
   get autocomplete() {
     return this.noAutocomplete ? 'off' : 'on';
@@ -139,9 +138,9 @@ export class PoDatepickerRangeComponent
     private controlPosition: PoControlPositionService,
     private renderer: Renderer2,
     private cd: ChangeDetectorRef,
+    private poLanguageService: PoLanguageService,
     poDateService: PoDateService,
-    poDatepickerRangeElement: ElementRef,
-    poLanguageService: PoLanguageService
+    poDatepickerRangeElement: ElementRef
   ) {
     super(poDateService, poLanguageService);
     this.poDatepickerRangeElement = poDatepickerRangeElement;
@@ -170,13 +169,23 @@ export class PoDatepickerRangeComponent
 
   ngOnInit() {
     // Classe de máscara
-    this.poMaskObject = this.buildMask();
+    this.poMaskObject = this.buildMask(
+      replaceFormatSeparator(this.format, this.poLanguageService.getDateSeparator(this.locale))
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.minDate || changes.maxDate) {
       this.validateModel(this.dateRange);
     }
+    if (changes.locale) {
+      if (this.dateRange) {
+        this.updateScreenByModel(this.dateRange);
+      }
+      this.poMaskObject = this.buildMask(
+        replaceFormatSeparator(this.format, this.poLanguageService.getDateSeparator(this.locale))
+      );
+    }
   }
 
   ngOnDestroy() {
@@ -309,19 +318,11 @@ export class PoDatepickerRangeComponent
     this.dateRangeField.nativeElement.classList.add('po-datepicker-range-field-focused');
   }
 
-  // Retorna um objeto do tipo PoMask com a mascara configurada.
-  private buildMask(): PoMask {
-    let mask = this.format.toUpperCase();
-
-    mask = mask.replace(/DD/g, '99');
-    mask = mask.replace(/MM/g, '99');
-    mask = mask.replace(/YYYY/g, '9999');
-
-    return new PoMask(mask, true);
-  }
-
   private formatDate(format: string, day: string = '', month: string = '', year: string = ''): string {
-    let dateFormatted = format;
+    let dateFormatted = replaceFormatSeparator(
+      format || this.format,
+      this.poLanguageService.getDateSeparator(this.locale)
+    );
 
     day = day && day.includes('T') ? day.slice(0, 2) : day;
 
@@ -333,7 +334,7 @@ export class PoDatepickerRangeComponent
   }
 
   private formatScreenToModel(value: string = ''): string {
-    const [day, month, year] = value.split('/');
+    const [day, month, year] = value.split(this.poLanguageService.getDateSeparator(this.locale));
 
     return value ? this.formatDate('yyyy-mm-dd', day, month, year) : '';
   }

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

@@ -24,7 +24,7 @@ describe('PoDatepickerBaseComponent:', () => {
   const languageService: PoLanguageService = new PoLanguageService();
 
   beforeEach(() => {
-    component = new PoDatepickerComponent();
+    component = new PoDatepickerComponent(languageService);
     component['shortLanguage'] = 'pt';
   });
 

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

@@ -9,7 +9,8 @@ import {
   formatYear,
   isTypeof,
   setYearFrom0To100,
-  validateDateRange
+  validateDateRange,
+  replaceFormatSeparator
 } from '../../../utils/util';
 import { dateFailed, requiredFailed } from './../validators';
 import { InputBoolean } from '../../../decorators';
@@ -290,13 +291,17 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
       value = value.toLowerCase();
       if (value.match(/dd/) && value.match(/mm/) && value.match(/yyyy/)) {
         this._format = value;
-        this.objMask = this.buildMask(this.replaceFormatSeparator());
+        this.objMask = this.buildMask(
+          replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+        );
         this.refreshValue(this.date);
         return;
       }
     }
     this._format = poDatepickerFormatDefault;
-    this.objMask = this.buildMask(this.replaceFormatSeparator());
+    this.objMask = this.buildMask(
+      replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+    );
   }
 
   get format() {
@@ -337,18 +342,22 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
   @Input('p-locale') set locale(value: string) {
     if (value) {
       this._locale = value.length >= 2 ? value : poLocaleDefault;
-      this.objMask = this.buildMask(this.replaceFormatSeparator());
+      this.objMask = this.buildMask(
+        replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+      );
     } else {
       this._locale = this.shortLanguage;
-      this.objMask = this.buildMask(this.replaceFormatSeparator());
+      this.objMask = this.buildMask(
+        replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+      );
     }
     this.refreshValue(this.date);
   }
   get locale() {
     return this._locale || this.shortLanguage;
   }
 
-  constructor() {}
+  constructor(protected languageService: PoLanguageService) {}
 
   set date(value: any) {
     this._date = typeof value === 'string' ? convertIsoToDate(value, false, false) : value;
@@ -360,7 +369,9 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
 
   ngOnInit() {
     // Classe de máscara
-    this.objMask = this.buildMask(this.replaceFormatSeparator());
+    this.objMask = this.buildMask(
+      replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.locale))
+    );
   }
 
   // Converte um objeto string em Date
@@ -484,8 +495,6 @@ export abstract class PoDatepickerBaseComponent implements ControlValueAccessor,
     return new PoMask(mask, true);
   }
 
-  protected abstract replaceFormatSeparator(): any;
-
   abstract writeValue(value: any): void;
 
   abstract refreshValue(value: Date): void;

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

@@ -699,7 +699,7 @@ describe('PoDatepickerComponent:', () => {
       const expectedData: any = '28/02/2019';
 
       spyOn(UtilsFunctions, 'formatYear').and.returnValue('2019');
-      spyOn(component, <any>'replaceFormatSeparator').and.returnValue('28/02/2019');
+      spyOn(UtilsFunctions, <any>'replaceFormatSeparator').and.returnValue('28/02/2019');
 
       const formattedDate = component.formatToDate(newDate);
       expect(formattedDate).toBe(expectedData);
@@ -1146,34 +1146,4 @@ describe('PoDatepickerComponent:', () => {
       expect(fixture.debugElement.nativeElement.querySelector('po-clean')).toBe(null);
     });
   });
-  describe('replaceFormatSeparator: ', () => {
-    it('should show date separator as . according to russian locale selected', () => {
-      component.locale = 'ru';
-      component.format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd.mm.yyyy';
-      const newFormat = component['replaceFormatSeparator']();
-      expect(newFormat).toBe(expectedFormat);
-    });
-    it('should show date separator as / according to portuguese locale selected', () => {
-      component.locale = 'pt';
-      component.format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd/mm/yyyy';
-      const newFormat = component['replaceFormatSeparator']();
-      expect(newFormat).toBe(expectedFormat);
-    });
-    it('should show date separator as / according to english locale selected', () => {
-      component.locale = 'en';
-      component.format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd/mm/yyyy';
-      const newFormat = component['replaceFormatSeparator']();
-      expect(newFormat).toBe(expectedFormat);
-    });
-    it('should show date separator as / according to spanish locale selected', () => {
-      component.locale = 'es';
-      component.format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd/mm/yyyy';
-      const newFormat = component['replaceFormatSeparator']();
-      expect(newFormat).toBe(expectedFormat);
-    });
-  });
 });