[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/pipes/localized-date.pipe.spec.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LocalizedDatePipe } from './localized-date.pipe';
+import { async, TestBed } from '@angular/core/testing';
+import { AppConfigService } from '../app-config/app-config.service';
+import { UserPreferencesService } from '../services/user-preferences.service';
+import { of } from 'rxjs';
+import { setupTestBed } from '../testing/setupTestBed';
+import { CoreTestingModule } from '../testing/core.testing.module';
+
+describe('LocalizedDatePipe', () => {
+
+    let pipe: LocalizedDatePipe;
+    let userPreferences: UserPreferencesService;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(async(() => {
+        userPreferences = TestBed.get(UserPreferencesService);
+        spyOn(userPreferences, 'select').and.returnValue(of(''));
+        pipe = new LocalizedDatePipe(userPreferences, new AppConfigService(null));
+    }));
+
+    it('should return time with locale en-US', () => {
+        const date = new Date('1990-11-03');
+        expect(pipe.transform(date)).toBe('Nov 3, 1990, 12:00:00 AM');
+    });
+
+    it('should return correct date when formating and locating it', () => {
+        const date = new Date();
+        expect(new Date(pipe.transform(date)).toDateString()).toBe(date.toDateString());
+    });
+
+    it('should return formated time when a formar is given', () => {
+        const date = new Date('1990-11-03');
+        expect(pipe.transform(date, 'MMM dd')).toBe('Nov 03');
+    });
+
+});

lib/core/pipes/localized-date.pipe.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DatePipe } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+import { AppConfigService } from '../app-config/app-config.service';
+import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
+
+@Pipe({
+    name: 'adfLocalizedDate',
+    pure: false
+})
+export class LocalizedDatePipe implements PipeTransform {
+
+    static DEFAULT_LOCALE = 'en-US';
+    static DEFAULT_DATE_TIME_FORMAT = 'medium';
+
+    defaultLocale: string;
+    defaultFormat: string;
+
+    constructor(public userPreferenceService: UserPreferencesService,
+                public appConfig: AppConfigService) {
+        this.userPreferenceService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.defaultLocale = locale || LocalizedDatePipe.DEFAULT_LOCALE;
+        });
+        this.defaultFormat = this.appConfig.get<string>('dateValues.defaultFormat', LocalizedDatePipe.DEFAULT_DATE_TIME_FORMAT);
+    }
+
+    transform(value: any, format?: string, locale?: string): any {
+        const actualFormat = format || this.defaultFormat;
+        const actualLocale = locale || this.defaultLocale;
+        const datePipe: DatePipe = new DatePipe(actualLocale);
+        return datePipe.transform(value, actualFormat);
+    }
+
+}

lib/core/pipes/pipe.module.ts

@@ -28,6 +28,7 @@ import { FullNamePipe } from './full-name.pipe';
 import { FormatSpacePipe } from './format-space.pipe';
 import { FileTypePipe } from './file-type.pipe';
 import { MultiValuePipe } from './multi-value.pipe';
+import { LocalizedDatePipe } from './localized-date.pipe';
 
 @NgModule({
     imports: [
@@ -43,7 +44,8 @@ import { MultiValuePipe } from './multi-value.pipe';
         NodeNameTooltipPipe,
         FormatSpacePipe,
         FileTypePipe,
-        MultiValuePipe
+        MultiValuePipe,
+        LocalizedDatePipe
     ],
     providers: [
         FileSizePipe,
@@ -54,7 +56,8 @@ import { MultiValuePipe } from './multi-value.pipe';
         NodeNameTooltipPipe,
         FormatSpacePipe,
         FileTypePipe,
-        MultiValuePipe
+        MultiValuePipe,
+        LocalizedDatePipe
     ],
     exports: [
         FileSizePipe,
@@ -66,7 +69,8 @@ import { MultiValuePipe } from './multi-value.pipe';
         NodeNameTooltipPipe,
         FormatSpacePipe,
         FileTypePipe,
-        MultiValuePipe
+        MultiValuePipe,
+        LocalizedDatePipe
     ]
 })
 export class PipeModule {

lib/core/pipes/public-api.ts

@@ -23,5 +23,6 @@ export * from './time-ago.pipe';
 export * from './user-initial.pipe';
 export * from './full-name.pipe';
 export * from './multi-value.pipe';
+export * from './localized-date.pipe';
 
 export * from './pipe.module';

lib/core/pipes/time-ago.pipe.spec.ts

@@ -16,14 +16,26 @@
  */
 
 import { TimeAgoPipe } from './time-ago.pipe';
-import { async } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
+import { AppConfigService } from '../app-config/app-config.service';
+import { UserPreferencesService } from '../services/user-preferences.service';
+import { setupTestBed } from '../testing/setupTestBed';
+import { CoreTestingModule } from '../testing/core.testing.module';
+import { of } from 'rxjs';
 
 describe('TimeAgoPipe', () => {
 
     let pipe: TimeAgoPipe;
+    let userPreferences: UserPreferencesService;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
 
     beforeEach(async(() => {
-        pipe = new TimeAgoPipe();
+        userPreferences = TestBed.get(UserPreferencesService);
+        spyOn(userPreferences, 'select').and.returnValue(of(''));
+        pipe = new TimeAgoPipe(userPreferences, new AppConfigService(null));
     }));
 
     it('should return time difference for a given date', () => {

lib/core/pipes/time-ago.pipe.ts

@@ -17,20 +17,34 @@
 
 import moment from 'moment-es6';
 import { Pipe, PipeTransform } from '@angular/core';
+import { AppConfigService } from '../app-config/app-config.service';
+import { UserPreferenceValues, UserPreferencesService } from '../services/user-preferences.service';
 
 @Pipe({
     name: 'adfTimeAgo'
 })
 export class TimeAgoPipe implements PipeTransform {
 
-    defaultLocale = 'en-US';
+    static DEFAULT_LOCALE = 'en-US';
+    static DEFAULT_DATE_TIME_FORMAT = 'DD/MM/YYYY HH:mm';
+
+    defaultLocale: string;
+    defaultDateTimeFormat: string;
+
+    constructor(public userPreferenceService: UserPreferencesService,
+                public appConfig: AppConfigService) {
+        this.userPreferenceService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.defaultLocale = locale || TimeAgoPipe.DEFAULT_LOCALE;
+        });
+        this.defaultDateTimeFormat = this.appConfig.get<string>('dateValues.defaultDateTimeFormat', TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT);
+    }
 
     transform(value: Date, locale?: string) {
         if (value !== null && value !== undefined ) {
-            const actualLocale = locale ? locale : this.defaultLocale;
+            const actualLocale = locale || this.defaultLocale;
             const then = moment(value);
             const diff = moment().locale(actualLocale).diff(then, 'days');
-            return diff > 7 ? then.locale(actualLocale).format('DD/MM/YYYY HH:mm') : then.locale(actualLocale).fromNow();
+            return diff > 7 ? then.locale(actualLocale).format(this.defaultDateTimeFormat) : then.locale(actualLocale).fromNow();
         }
         return '';
     }