From 7497822a465bdb69d80a20eb313db41fc13fe79c Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Tue, 11 Jun 2019 09:35:35 +0100 Subject: [PATCH] [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 | 1 + demo-shell/src/app.config.json | 7 ++- demo-shell/src/app/app.routes.ts | 9 +++ .../app-layout/app-layout.component.ts | 1 + .../app/components/date/date.component.html | 32 +++++++++++ .../app/components/date/date.component.scss | 7 +++ .../src/app/components/date/date.component.ts | 36 ++++++++++++ .../src/app/components/date/date.module.ts | 39 +++++++++++++ .../app/components/files/files.component.html | 13 ++++- .../task-list-demo.component.html | 4 +- .../trashcan/trashcan.component.html | 2 +- docs/core/pipes/localized-date.pipe.md | 28 ++++++++++ docs/core/pipes/time-ago.pipe.md | 6 ++ docs/user-guide/internationalization.md | 25 +++++++++ .../process-header-cloud.e2e.ts | 2 +- .../task-header-cloud.e2e.ts | 2 +- lib/core/app-config/schema.json | 23 ++++++++ .../card-view-dateitem.component.ts | 14 +++-- lib/core/core.module.ts | 35 ++++++++++++ .../datatable-cell.component.spec.ts | 10 ++-- .../datatable/datatable.component.html | 4 +- .../datatable/date-cell.component.ts | 26 +++++---- .../components/widgets/date/date.widget.ts | 7 ++- .../editors/date/date.editor.html | 2 +- .../dynamic-table/editors/date/date.editor.ts | 1 + .../editors/datetime/datetime.editor.html | 20 ++++--- .../editors/datetime/datetime.editor.ts | 12 ++-- lib/core/pipes/localized-date.pipe.spec.ts | 56 +++++++++++++++++++ lib/core/pipes/localized-date.pipe.ts | 50 +++++++++++++++++ lib/core/pipes/pipe.module.ts | 10 +++- lib/core/pipes/public-api.ts | 1 + lib/core/pipes/time-ago.pipe.spec.ts | 16 +++++- lib/core/pipes/time-ago.pipe.ts | 20 ++++++- .../process-header-cloud.component.spec.ts | 4 +- .../process-header-cloud.component.ts | 2 - .../task-header-cloud.component.spec.ts | 2 +- .../components/task-header-cloud.component.ts | 8 +-- package.json | 3 +- 38 files changed, 473 insertions(+), 67 deletions(-) create mode 100644 demo-shell/src/app/components/date/date.component.html create mode 100644 demo-shell/src/app/components/date/date.component.scss create mode 100644 demo-shell/src/app/components/date/date.component.ts create mode 100644 demo-shell/src/app/components/date/date.module.ts create mode 100644 docs/core/pipes/localized-date.pipe.md create mode 100644 lib/core/pipes/localized-date.pipe.spec.ts create mode 100644 lib/core/pipes/localized-date.pipe.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index ae7b463f39..af6270f2e0 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -78,6 +78,7 @@ "UPLOADER": "Uploader", "WEBSCRIPT": "Webscript", "TAG": "Tag", + "DATE": "Date", "TRASHCAN": "Trashcan", "SOCIAL": "Social", "SETTINGS": "Settings", diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index 538a71df95..1972bfc2e4 100644 --- a/demo-shell/src/app.config.json +++ b/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", diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index b4411f38b1..d6005ad0eb 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/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: [ diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 3c4e449b95..686a5fd604 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/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' }, diff --git a/demo-shell/src/app/components/date/date.component.html b/demo-shell/src/app/components/date/date.component.html new file mode 100644 index 0000000000..a4821deb0f --- /dev/null +++ b/demo-shell/src/app/components/date/date.component.html @@ -0,0 +1,32 @@ +
+

Date Pipes

+ + + + + + + + + {{language.label}} + + + + +

AdfLocalizedDate Pipe - Default

+
{{ today | adfLocalizedDate }}
+
+

AdfLocalizedDate Pipe - Custom format

+
{{ today | adfLocalizedDate : format }}
+
+

AdfLocalizedDate Pipe - Custom format and locale

+
{{ today | adfLocalizedDate : format : locale }}
+
+

AdfTimeAgo Pipe

+
{{ today | adfTimeAgo }}
+
+

AdfTimeAgo Pipe - Custom locale

+
{{ today | adfTimeAgo : locale}}
+
diff --git a/demo-shell/src/app/components/date/date.component.scss b/demo-shell/src/app/components/date/date.component.scss new file mode 100644 index 0000000000..720ae78a4d --- /dev/null +++ b/demo-shell/src/app/components/date/date.component.scss @@ -0,0 +1,7 @@ +.adf-date-pipes-container { + padding: 20px; +} + +.adf-date-field { + margin: 20px; +} diff --git a/demo-shell/src/app/components/date/date.component.ts b/demo-shell/src/app/components/date/date.component.ts new file mode 100644 index 0000000000..372621d1d6 --- /dev/null +++ b/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', []); + } +} diff --git a/demo-shell/src/app/components/date/date.module.ts b/demo-shell/src/app/components/date/date.module.ts new file mode 100644 index 0000000000..84d757f2d4 --- /dev/null +++ b/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 {} diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 450ebec68d..d7278b7d82 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -250,12 +250,13 @@ key="$thumbnail" type="image" [sortable]="false" - class="adf-image-table-cell " + class="adf-image-table-cell" [class.adf-cell-thumbnail]="thumbnails"> @@ -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"> + class="adf-desktop-only adf-ellipsis-cell">