[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

demo-shell/resources/i18n/en.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "DATE": "Date",
     "TRASHCAN": "Trashcan",
     "SOCIAL": "Social",
     "SETTINGS": "Settings",

demo-shell/src/app.config.json

@@ -79,7 +79,7 @@
       "direction": "rtl"
     },
     {
-      "key": "cz",
+      "key": "cs",
       "label": "Czech"
     },
     {
@@ -438,6 +438,11 @@
       20
     ]
   },
+  "dateValues":{
+    "defaultDateFormat": "medium",
+    "defaultDateTimeFormat": "DD/MM/YYYY HH:mm",
+    "defaultLocale": "en-US"
+  },
   "files": {
     "excluded": [
       ".DS_Store",

demo-shell/src/app/app.routes.ts

@@ -126,6 +126,15 @@ export const appRoutes: Routes = [
                     }
                 ]
             },
+            {
+                path: 'date',
+                children: [
+                    {
+                        path: '',
+                        loadChildren: 'app/components/date/date.module#AppDateModule'
+                    }
+                ]
+            },
             {
                 path: 'card-view',
                 children: [

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -72,6 +72,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
+        { href: '/date', icon: 'calendar_today', title: 'APP_LAYOUT.DATE' },
         { href: '/settings-layout', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
         { href: '/config-editor', icon: 'code', title: 'APP_LAYOUT.CONFIG-EDITOR' },
         { href: '/extendedSearch', icon: 'search', title: 'APP_LAYOUT.SEARCH' },

demo-shell/src/app/components/date/date.component.html

@@ -0,0 +1,32 @@
+<div class="adf-date-pipes-container">
+    <h2>Date Pipes</h2>
+
+    <mat-form-field class="adf-date-field">
+        <input matInput
+               placeholder="Format"
+               [(ngModel)]="format">
+    </mat-form-field>
+
+    <mat-form-field class="adf-date-field">
+        <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
+            <mat-option *ngFor="let language of languages" [value]="language.key">
+                {{language.label}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <h3>AdfLocalizedDate Pipe - Default</h3>
+    <div>{{ today | adfLocalizedDate }} </div>
+    <br>
+    <h3>AdfLocalizedDate Pipe - Custom format</h3>
+    <div>{{ today | adfLocalizedDate : format }} </div>
+    <br>
+    <h3>AdfLocalizedDate Pipe - Custom format and locale</h3>
+    <div>{{ today | adfLocalizedDate : format : locale }} </div>
+    <br>
+    <h3>AdfTimeAgo Pipe</h3>
+    <div>{{ today | adfTimeAgo }} </div>
+    <br>
+    <h3>AdfTimeAgo Pipe - Custom locale</h3>
+    <div>{{ today | adfTimeAgo : locale}} </div>
+</div>

demo-shell/src/app/components/date/date.component.scss

@@ -0,0 +1,7 @@
+.adf-date-pipes-container {
+    padding: 20px;
+}
+
+.adf-date-field {
+    margin: 20px;
+}

demo-shell/src/app/components/date/date.component.ts

@@ -0,0 +1,36 @@
+/*!
+ * @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 { Component } from '@angular/core';
+import { AppConfigService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-date-page',
+    templateUrl: './date.component.html',
+    styleUrls: ['date.component.scss']
+})
+export class DateComponent {
+
+    today = new Date();
+    locale: string;
+    format: string;
+    languages: any[];
+
+    constructor(private appConfig: AppConfigService) {
+        this.languages = this.appConfig.get('languages', []);
+    }
+}

demo-shell/src/app/components/date/date.module.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DateComponent } from './date.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: DateComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [DateComponent]
+})
+export class AppDateModule {}

demo-shell/src/app/components/files/files.component.html

@@ -256,6 +256,7 @@
                     <data-column
                         *ngIf="showNameColumn && hyperlinkNavigation"
                         key="name"
+                        class="adf-ellipsis-cell"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip">
                         <ng-template let-context>
@@ -282,7 +283,7 @@
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         *ngIf="searchTerm"
@@ -313,7 +314,7 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
                             <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
@@ -333,6 +334,12 @@
                         [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
                         class="adf-desktop-only adf-ellipsis-cell">
                     </data-column>
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
+                        key="createdAt"
+                        type="date"
+                        class="adf-desktop-only adf-ellipsis-cell">
+                    </data-column>
 
                 </data-columns>
 

demo-shell/src/app/components/task-list-demo/task-list-demo.component.html

@@ -171,12 +171,12 @@
             <data-column key="description" title="Description"></data-column>
             <data-column key="created" title="Created">
                 <ng-template let-entry="$implicit">
-                    <div>{{entry.row.obj.created | date:'MMM d, yyyy' }} </div>
+                    <div>{{entry.row.obj.created | adfLocalizedDate: 'MMM d, yyyy' }} </div>
                 </ng-template>
             </data-column>
             <data-column key="dueDate" title="Due Date" type="date">
                 <ng-template let-entry="$implicit">
-                    <div>{{entry.row.obj.dueDate | date:'MMM d, yyyy' }} </div>
+                    <div>{{entry.row.obj.dueDate | adfLocalizedDate: 'MMM d, yyyy' }} </div>
                 </ng-template>
             </data-column>
             <data-column key="processInstanceId" title="Process Instance Id"></data-column>

demo-shell/src/app/components/trashcan/trashcan.component.html

@@ -76,7 +76,7 @@
                     key="archivedAt"
                     title="DOCUMENT_LIST.COLUMNS.DELETED_ON">
                     <ng-template let-value="value">
-                        <span title="{{ value | date:'medium' }}"
+                        <span title="{{ value | adfLocalizedDate: 'medium' }}"
                               class="adf-datatable-cell-value">{{ value | adfTimeAgo: currentLocale }}</span>
                     </ng-template>
                 </data-column>

docs/core/pipes/localized-date.pipe.md

@@ -0,0 +1,28 @@
+# [Localized Date pipe](../../../lib/core/pipes/localized-date.pipe.ts "Defined in localized-date.pipe.ts")
+
+Converts a date to an given format and locale.
+
+## Basic Usage
+
+<!-- {% raw %} -->
+
+```HTML
+<div>
+    Created date: {{ date | adfLocalizedDate }}
+</div>
+```
+
+<!-- {% endraw %} -->
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| format | string | 'medium' | A format to apply to the date value. [Date Pipe Formats.](https://angular.io/api/common/DatePipe#custom-format-options) |
+| locale | string | 'en-US' | A locale id for the locale format rules to use. |
+
+## Details
+
+The pipe takes a date and formats it and localizes it so the date is displayed in the proper format for the region. It uses the [Angular Date Pipe](https://angular.io/api/common/DatePipe#custom-format-options) so all the pre-defined and custom formats can be used. 
+
+When localizing a date, you will need to add the specific locale file for your region in order to use it. Read more about internationalization [here](https://angular.io/guide/i18n#i18n-pipes).

docs/core/pipes/time-ago.pipe.md

@@ -21,8 +21,14 @@ Converts a recent past date into a number of days ago.
 
 <!-- {% endraw %} -->
 
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| locale | string | 'en-US' | A locale id for the locale format rules to use. |
+
 ## Details
 
 The pipe finds the difference between the input date and the current date. If it
 is less than seven days then then the date will be formatted as "X days ago".
 Otherwise, the usual full date format is used.
+
+By default, it localizes the date to the language that is currently in use by the app. Furthermore, a different locale id can be passed to the pipe to overwrite the locale id to set a custom one.

docs/user-guide/internationalization.md

@@ -18,6 +18,7 @@ fairly straightforward to maintain.
 -   [I18n concepts](#i18n-concepts)
 -   [ADF support for i18n](#adf-support-for-i18n)
 -   [Using the translate pipe](#using-the-translate-pipe)
+-   [Using the localized date pipe](#using-the-localized-date-pipe)
 -   [Adding and replacing messages](#adding-and-replacing-messages)
 -   [Interpolations](#interpolations)
 -   [How the display language is selected](#how-the-display-language-is-selected)
@@ -153,6 +154,30 @@ component's `.ts` file:
 
 <!-- {% endraw %} -->
 
+## Using the localized date pipe
+
+Date values are also localized in your ADF app. By default they are localized to en-US, although you can easily change this by adding the localization files provided by Angular.
+
+If you want to use a different locale simply add the locale file for your region in your `app.module.ts`.
+
+<!-- {% raw %} -->
+
+    import { registerLocaleData } from '@angular/common';
+    import localeFr from '@angular/common/locales/fr';
+
+    registerLocaleData(localeFr);
+
+<!-- {% endraw %} -->
+
+Usage of the [localized date pipe](../core/pipes/localized-date.pipe.md).
+<!-- {% raw %} -->
+
+    {{ date | adfLocalizedDate: format : locale }}
+
+<!-- {% endraw %} -->
+
+Find more info about this in the [Angular sDocs](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app).
+
 ## Adding and replacing messages
 
 The built-in translations certainly won't cover everything you will need for

e2e/process-services-cloud/process-header-cloud.e2e.ts

@@ -44,7 +44,7 @@ describe('Process Header cloud component', () => {
 
         const simpleApp = resources.ACTIVITI7_APPS.SIMPLE_APP.name;
         const subProcessApp = resources.ACTIVITI7_APPS.SUB_PROCESS_APP.name;
-        const formatDate = 'DD-MM-YYYY';
+        const formatDate = 'MMM D YYYY';
 
         const processHeaderCloudPage = new ProcessHeaderCloudPage();
 

e2e/process-services-cloud/task-header-cloud.e2e.ts

@@ -39,7 +39,7 @@ describe('Task Header cloud component', () => {
     const simpleApp = resources.ACTIVITI7_APPS.SIMPLE_APP.name;
     const priority = 30;
     const description = 'descriptionTask';
-    const formatDate = 'DD-MM-YYYY';
+    const formatDate = 'MMM D YYYY';
 
     const taskHeaderCloudPage = new TaskHeaderCloudPage();
 

lib/core/app-config/schema.json

@@ -518,6 +518,29 @@
         }
       }
     },
+    "dateValues": {
+      "description": "Configuration of date formats in the app",
+      "type": "object",
+      "required": [
+        "defaultDateFormat",
+        "defaultDateTimeFormat",
+        "defaultLocale"
+      ],
+      "properties": {
+        "defaultDateFormat": {
+          "description": "Default date format",
+          "type": "string"
+        },
+        "defaultDateTimeFormat": {
+          "description": "Default date time format",
+          "type": "string"
+        },
+        "defaultLocale": {
+          "description": "Default date locale",
+          "type": "string"
+        }
+      }
+    },
     "files": {
       "description": "Configuration of rules applied to file upload",
       "type": "object",

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -26,6 +26,7 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { UserPreferencesService, UserPreferenceValues } from '../../../services/user-preferences.service';
 import { MomentDateAdapter } from '../../../utils/momentDateAdapter';
 import { MOMENT_DATE_FORMATS } from '../../../utils/moment-date-formats.model';
+import { AppConfigService } from '../../../app-config/app-config.service';
 
 @Component({
     providers: [
@@ -40,8 +41,6 @@ import { MOMENT_DATE_FORMATS } from '../../../utils/moment-date-formats.model';
 })
 export class CardViewDateItemComponent implements OnInit {
 
-    public SHOW_FORMAT: string = 'MMM DD YY';
-
     @Input()
     property: CardViewDateItemModel;
 
@@ -55,10 +54,13 @@ export class CardViewDateItemComponent implements OnInit {
     public datepicker: MatDatetimepicker<any>;
 
     valueDate: Moment;
+    dateFormat: string;
 
     constructor(private cardViewUpdateService: CardViewUpdateService,
                 private dateAdapter: DateAdapter<Moment>,
-                private userPreferencesService: UserPreferencesService) {
+                private userPreferencesService: UserPreferencesService,
+                private appConfig: AppConfigService) {
+        this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
     }
 
     ngOnInit() {
@@ -66,10 +68,10 @@ export class CardViewDateItemComponent implements OnInit {
             this.dateAdapter.setLocale(locale);
         });
 
-        (<MomentDateAdapter> this.dateAdapter).overrideDisplayFormat = this.SHOW_FORMAT;
+        (<MomentDateAdapter> this.dateAdapter).overrideDisplayFormat = this.dateFormat;
 
         if (this.property.value) {
-            this.valueDate = moment(this.property.value, this.SHOW_FORMAT);
+            this.valueDate = moment(this.property.value, this.dateFormat);
         }
     }
 
@@ -87,7 +89,7 @@ export class CardViewDateItemComponent implements OnInit {
 
     onDateChanged(newDateValue) {
         if (newDateValue) {
-            const momentDate = moment(newDateValue.value, this.SHOW_FORMAT, true);
+            const momentDate = moment(newDateValue.value, this.dateFormat, true);
             if (momentDate.isValid()) {
                 this.valueDate = momentDate;
                 this.cardViewUpdateService.update(this.property, momentDate.toDate());

lib/core/core.module.ts

@@ -57,6 +57,41 @@ import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { directionalityConfigFactory } from './services/directionality-config-factory';
 import { DirectionalityConfigService } from './services/directionality-config.service';
 
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import localeDe from '@angular/common/locales/de';
+import localeIt from '@angular/common/locales/it';
+import localeEs from '@angular/common/locales/es';
+import localeJa from '@angular/common/locales/ja';
+import localeNl from '@angular/common/locales/nl';
+import localePt from '@angular/common/locales/pt';
+import localeNb from '@angular/common/locales/nb';
+import localeRu from '@angular/common/locales/ru';
+import localeCh from '@angular/common/locales/zh';
+import localeAr from '@angular/common/locales/ar';
+import localeCs from '@angular/common/locales/cs';
+import localePl from '@angular/common/locales/pl';
+import localeFi from '@angular/common/locales/fi';
+import localeDa from '@angular/common/locales/da';
+import localeSv from '@angular/common/locales/sv';
+
+registerLocaleData(localeFr);
+registerLocaleData(localeDe);
+registerLocaleData(localeIt);
+registerLocaleData(localeEs);
+registerLocaleData(localeJa);
+registerLocaleData(localeNl);
+registerLocaleData(localePt);
+registerLocaleData(localeNb);
+registerLocaleData(localeRu);
+registerLocaleData(localeCh);
+registerLocaleData(localeAr);
+registerLocaleData(localeCs);
+registerLocaleData(localePl);
+registerLocaleData(localeFi);
+registerLocaleData(localeDa);
+registerLocaleData(localeSv);
+
 @NgModule({
     imports: [
         TranslateModule,

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,7 +121,7 @@
                                 <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') ">
+                                 [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"

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"
+                title="{{ tooltip | adfLocalizedDate: format }}"
-            >
+                class="adf-datatable-cell-value"
-                {{ value$ | async | date: format }}
+                [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)

lib/core/form/components/widgets/date/date.widget.ts

@@ -39,9 +39,10 @@ import { baseHost, WidgetComponent } from './../widget.component';
 })
 export class DateWidgetComponent extends WidgetComponent implements OnInit {
 
+    DATE_FORMAT = 'DD/MM/YYYY';
+
     minDate: Moment;
     maxDate: Moment;
-
     displayDate: Moment;
 
     constructor(public formService: FormService,
@@ -60,11 +61,11 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit {
 
         if (this.field) {
             if (this.field.minValue) {
-                this.minDate = moment(this.field.minValue, 'DD/MM/YYYY');
+                this.minDate = moment(this.field.minValue, this.DATE_FORMAT);
             }
 
             if (this.field.maxValue) {
-                this.maxDate = moment(this.field.maxValue, 'DD/MM/YYYY');
+                this.maxDate = moment(this.field.maxValue, this.DATE_FORMAT);
             }
         }
         this.displayDate = moment(this.field.value, this.field.dateDisplayFormat);

lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html

@@ -1,6 +1,6 @@
 <div>
     <mat-form-field class="adf-date-editor">
-        <label [attr.for]="column.id">{{column.name}} (d-M-yyyy)</label>
+        <label [attr.for]="column.id">{{column.name}} (DATE_FORMAT)</label>
         <input matInput
             id="dateInput"
             type="text"

lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -18,6 +18,7 @@
 /* tslint:disable:component-selector  */
 
 import { UserPreferencesService, UserPreferenceValues } from '../../../../../../services/user-preferences.service';
+
 import { MomentDateAdapter } from '../../../../../../utils/momentDateAdapter';
 import { MOMENT_DATE_FORMATS } from '../../../../../../utils/moment-date-formats.model';
 import { Component, Input, OnInit } from '@angular/core';

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html

@@ -1,6 +1,6 @@
 <div>
     <mat-form-field class="adf-date-editor">
-        <label [attr.for]="column.id">{{column.name}} {{DATE_FORMAT}}</label>
+        <label [attr.for]="column.id">{{column.name}} {{DATE_TIME_FORMAT}}</label>
         <input matInput
             [matDatetimepicker]="datetimePicker"
             [(ngModel)]="value"
@@ -9,12 +9,16 @@
             [disabled]="!column.editable"
             (focusout)="onDateChanged($event.srcElement.value)"
             (dateChange)="onDateChanged($event)">
-            <mat-datetimepicker-toggle matSuffix [for]="datetimePicker"
+            <mat-datetimepicker-toggle
-                            *ngIf="column.editable"
+                matSuffix
-                            class="adf-date-editor-button"></mat-datetimepicker-toggle>
+                [for]="datetimePicker"
+                class="adf-date-editor-button">
+            </mat-datetimepicker-toggle>
     </mat-form-field>
-    <mat-datetimepicker #datetimePicker
+    <mat-datetimepicker
+        #datetimePicker
         type="datetime"
         openOnFocus="true"
-                        timeInterval="5"></mat-datetimepicker>
+        timeInterval="5">
+    </mat-datetimepicker>
 </div>

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.ts

@@ -43,7 +43,7 @@ import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetim
 })
 export class DateTimeEditorComponent implements OnInit {
 
-    DATE_FORMAT: string = 'D-M-YYYY hh:mm A';
+    DATE_TIME_FORMAT: string = 'DD/MM/YYYY HH:mm';
 
     value: any;
 
@@ -69,19 +69,19 @@ export class DateTimeEditorComponent implements OnInit {
         });
 
         const momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
-        momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT;
+        momentDateAdapter.overrideDisplayFormat = this.DATE_TIME_FORMAT;
 
-        this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
+        this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_TIME_FORMAT);
     }
 
     onDateChanged(newDateValue) {
         if (newDateValue && newDateValue.value) {
-            const newValue = moment(newDateValue.value, this.DATE_FORMAT);
+            const newValue = moment(newDateValue.value, this.DATE_TIME_FORMAT);
-            this.row.value[this.column.id] = newDateValue.value.format(this.DATE_FORMAT);
+            this.row.value[this.column.id] = newDateValue.value.format(this.DATE_TIME_FORMAT);
             this.value = newValue;
             this.table.flushValue();
         } else if (newDateValue) {
-            const newValue = moment(newDateValue, this.DATE_FORMAT);
+            const newValue = moment(newDateValue, this.DATE_TIME_FORMAT);
             this.value = newValue;
             this.row.value[this.column.id] = newDateValue;
             this.table.flushValue();

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 '';
     }

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts

@@ -128,7 +128,7 @@ describe('ProcessHeaderCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
-            expect(valueEl.nativeElement.innerText.trim()).toBe('09-03-2019');
+            expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 09 2019');
         });
     }));
 
@@ -138,7 +138,7 @@ describe('ProcessHeaderCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
-            expect(valueEl.nativeElement.innerText.trim()).toBe('09-03-2019');
+            expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 09 2019');
         });
     }));
 

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.ts

@@ -102,14 +102,12 @@ export class ProcessHeaderCloudComponent implements OnChanges {
                 {
                     label: 'ADF_CLOUD_PROCESS_HEADER.PROPERTIES.START_DATE',
                     value: this.processInstanceDetails.startDate,
-                    format: 'DD-MM-YYYY',
                     key: 'startDate'
                 }),
             new CardViewDateItemModel(
                 {
                     label: 'ADF_CLOUD_PROCESS_HEADER.PROPERTIES.LAST_MODIFIED',
                     value: this.processInstanceDetails.lastModified,
-                    format: 'DD-MM-YYYY',
                     key: 'lastModified'
                 }),
             new CardViewTextItemModel(

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts

@@ -118,7 +118,7 @@ describe('TaskHeaderCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
-            expect(valueEl.nativeElement.innerText.trim()).toBe('18-12-2018');
+            expect(valueEl.nativeElement.innerText.trim()).toBe('Dec 18 2018');
         });
     }));
 

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -59,6 +59,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
     properties: CardViewItem[];
     inEdit: boolean = false;
     parentTaskName: string;
+    dateFormat: string;
 
     private subscriptions: Subscription[] = [];
 
@@ -68,7 +69,9 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
         private appConfig: AppConfigService,
         private router: Router,
         private cardViewUpdateService: CardViewUpdateService
-    ) { }
+    ) {
+        this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
+    }
 
     ngOnInit() {
         if ((this.appName || this.appName === '') && this.taskId) {
@@ -122,7 +125,6 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE',
                     value: this.taskDetails.dueDate,
                     key: 'dueDate',
-                    format: 'DD-MM-YYYY',
                     default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT'),
                     editable: true
                 }
@@ -139,7 +141,6 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
                 {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CREATED',
                     value: this.taskDetails.createdDate,
-                    format: 'DD-MM-YYYY',
                     key: 'created'
                 }
             ),
@@ -162,7 +163,6 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
                 {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.END_DATE',
                     value: this.taskDetails.completedDate,
-                    format: 'DD-MM-YYYY',
                     key: 'endDate'
                 }
             ),

package.json

@@ -25,6 +25,7 @@
     "coverage": "./lib/config/create-coverage-index.sh && lite-server -c ./lib/config/proxy-coverage.json",
     "03": "echo -------------------------------------------- Lint  -----------------------------------------------",
     "03s": "",
+    "lint-demo": "./node_modules/.bin/tslint -p ./demo-shell/tsconfig.json -c ./demo-shell/tslint.json",
     "lint-lib": "./node_modules/.bin/tslint -p ./lib/tsconfig.json -c ./lib/tslint.json",
     "lint-e2e": "tsc -p ./e2e/tsconfig.e2e.json && ./node_modules/.bin/tslint -p ./e2e/tsconfig.e2e.json -c ./tslint.json",
     "validate-config": "ajv validate -s ./lib/core/app-config/schema.json -d ./demo-shell/src/app.config.json --errors=text --verbose",
@@ -237,7 +238,7 @@
   "typings": "./index.d.ts",
   "lint-staged": {
     "linters": {
-      "**/demo-shell/src/**/*.ts": "npm run lint-lib -- --fix",
+      "**/demo-shell/src/**/*.ts": "npm run lint-demo -- --fix",
       "**/lib/**/*.ts": "npm run lint-lib -- --fix",
       "**/e2e/**/*.ts": "npm run lint-e2e -- --fix",
       "*.scss": "npm run stylelint --  --fix"