inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
davidcanonieto
2019-06-11 09:35:35 +01:00
committed by Denys Vuika
parent 990fa4625b
commit 7497822a46
38 changed files with 473 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell/resources/i18n/en.json
View File

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

7
demo-shell/src/app.config.json
View File

@@ -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",

9
demo-shell/src/app/app.routes.ts
View File

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

1
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -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' },

32
demo-shell/src/app/components/date/date.component.html Normal file
View File

@@ -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>

7
demo-shell/src/app/components/date/date.component.scss Normal file
View File

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

36
demo-shell/src/app/components/date/date.component.ts Normal file
View File

@@ -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', []);
}
}

39
demo-shell/src/app/components/date/date.module.ts Normal file
View File

@@ -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 {}

13
demo-shell/src/app/components/files/files.component.html
View File

@@ -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">
</data-column>
<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>

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

@@ -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>

2
demo-shell/src/app/components/trashcan/trashcan.component.html
View File

@@ -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>