[ADF-4342] Create localized pipe and centralize date format (#4813)

* [ADF-4342] Date Format defined in app config

* [ADF-4342] Create localized pipe and centralize date format

* Add unit test for new date pipe

* Add info internationalization docs

* Fix lining

* Fix linting

* Fix date pipe unit test

* [ADF-4342] Add supported language files

* Fix e2e tests

lib/core/datatable/components/datatable/datatable-cell.component.spec.ts

@@ -28,14 +28,14 @@ describe('DataTableCellComponent', () => {
     });
 
     it('should use medium format by default', () => {
-        const component = new DateCellComponent(null, null);
+        const component = new DateCellComponent(null, null, new AppConfigService(null));
         expect(component.format).toBe('medium');
     });
 
     it('should use column format', () => {
         const component = new DateCellComponent(null, <any> {
             nodeUpdated: new Subject<any>()
-        });
+        }, new AppConfigService(null));
         component.column = {
             key: 'created',
             type: 'date',
@@ -49,7 +49,8 @@ describe('DataTableCellComponent', () => {
     it('should update cell data on alfrescoApiService.nodeUpdated event', () => {
         const component = new DateCellComponent(
             null,
-            alfrescoApiService
+            alfrescoApiService,
+            new AppConfigService(null)
         );
 
         component.column = {
@@ -83,7 +84,8 @@ describe('DataTableCellComponent', () => {
     it('not should update cell data if ids don`t match', () => {
         const component = new DateCellComponent(
             null,
-            alfrescoApiService
+            alfrescoApiService,
+            new AppConfigService(null)
         );
 
         component.column = {

lib/core/datatable/components/datatable/datatable.component.html

@@ -121,8 +121,8 @@
                                 <mat-icon>{{ data.getValue(row, col) }}</mat-icon>
                             </div>
                             <div *ngSwitchCase="'date'" class="adf-cell-value"
-                                 [attr.data-automation-id]="'date_' + (data.getValue(row, col) | date: 'medium') ">
-                                <adf-date-cell class = "adf-datatable-center-date-column-ie"
+                                 [attr.data-automation-id]="'date_' + (data.getValue(row, col) | adfLocalizedDate: 'medium') ">
+                                <adf-date-cell class="adf-datatable-center-date-column-ie"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row"

lib/core/datatable/components/datatable/date-cell.component.ts

@@ -22,6 +22,7 @@ import {
     UserPreferenceValues
 } from '../../../services/user-preferences.service';
 import { AlfrescoApiService } from '../../../services/alfresco-api.service';
+import { AppConfigService } from '../../../app-config/app-config.service';
 
 @Component({
     selector: 'adf-date-cell',
@@ -30,20 +31,19 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
         <ng-container>
             <span
                 [attr.aria-label]="value$ | async | adfTimeAgo: currentLocale"
-                title="{{ tooltip | date: 'medium' }}"
+                title="{{ tooltip | adfLocalizedDate: 'medium' }}"
                 class="adf-datatable-cell-value"
-                *ngIf="format === 'timeAgo'; else standard_date"
-            >
+                *ngIf="format === 'timeAgo'; else standard_date">
                 {{ value$ | async | adfTimeAgo: currentLocale }}
             </span>
         </ng-container>
         <ng-template #standard_date>
             <span
-                title="{{ tooltip | date: format }}"
                 class="adf-datatable-cell-value"
-                [attr.aria-label]="value$ | async | date: format"
-            >
-                {{ value$ | async | date: format }}
+                title="{{ tooltip | adfLocalizedDate: format }}"
+                class="adf-datatable-cell-value"
+                [attr.aria-label]="value$ | async | adfLocalizedDate: format">
+                {{ value$ | async | adfLocalizedDate: format }}
             </span>
         </ng-template>
     `,
@@ -51,21 +51,27 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
     host: { class: 'adf-date-cell adf-datatable-content-cell' }
 })
 export class DateCellComponent extends DataTableCellComponent {
+
+    static DATE_FORMAT = 'medium';
+
     currentLocale: string;
+    dateFormat: string;
 
     get format(): string {
         if (this.column) {
-            return this.column.format || 'medium';
+            return this.column.format || this.dateFormat;
         }
-        return 'medium';
+        return this.dateFormat;
     }
 
     constructor(
         userPreferenceService: UserPreferencesService,
-        alfrescoApiService: AlfrescoApiService
+        alfrescoApiService: AlfrescoApiService,
+        appConfig: AppConfigService
     ) {
         super(alfrescoApiService);
 
+        this.dateFormat = appConfig.get('dateValues.defaultDateFormat', DateCellComponent.DATE_FORMAT);
         if (userPreferenceService) {
             userPreferenceService
                 .select(UserPreferenceValues.Locale)