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-4713] Add new DecimalNumber Pipe to transform and localize numbers (#4926)

Browse Source 
* [ADF-4713] Add new DecimalNumber Pipe to transform and localize numbers

* Unsubscribe from userPreference service

* Make Pipe impure

* Add documentation in localization page
This commit is contained in:
davidcanonieto
2019-07-18 11:09:50 +01:00
committed by Eugenio Romano
parent 8ee5cd1908
commit a0d4160c11
25 changed files with 457 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -438,11 +438,16 @@
20
]
},
"dateValues":{
"dateValues": {
"defaultDateFormat": "mediumDate",
"defaultDateTimeFormat": "MMM d, y, H:mm",
"defaultLocale": "en"
},
"decimalValues": {
"minIntegerDigits": 1,
"minFractionDigits": 0,
"maxFractionDigits": 2
},
"files": {
"excluded": [
".DS_Store",

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

@@ -127,11 +127,11 @@ export const appRoutes: Routes = [
]
},
{
path: 'date',
path: 'pipes',
children: [
{
path: '',
loadChildren: 'app/components/date/date.module#AppDateModule'
loadChildren: 'app/components/pipes/pipes.module#AppPipesModule'
}
]
},

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

@@ -74,7 +74,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
{ 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: '/pipes', icon: 'layers', title: 'APP_LAYOUT.PIPES' },
{ 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' },

9
demo-shell/src/app/components/card-view/card-view.component.ts
View File

@@ -27,7 +27,8 @@ import {
CardViewSelectItemModel,
CardViewUpdateService,
CardViewMapItemModel,
UpdateNotification
UpdateNotification,
DecimalNumberPipe
} from '@alfresco/adf-core';
import { of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -46,7 +47,8 @@ export class CardViewComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject<boolean>();
constructor(private cardViewUpdateService: CardViewUpdateService) {
constructor(private cardViewUpdateService: CardViewUpdateService,
private decimalNumberPipe: DecimalNumberPipe) {
this.logs = [];
this.createCard();
}
@@ -112,7 +114,8 @@ export class CardViewComponent implements OnInit, OnDestroy {
value: 9.9,
key: 'float',
default: 0.0,
editable: this.isEditable
editable: this.isEditable,
pipes: [{ pipe: this.decimalNumberPipe}]
}),
new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',

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

@@ -1,32 +0,0 @@
<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
View File

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

109
demo-shell/src/app/components/pipes/pipes.component.html Normal file
View File

@@ -0,0 +1,109 @@
<h2>ADF Pipes</h2>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Localized dates
</mat-panel-title>
<mat-panel-description>
adfLocalizedDate
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Format" [(ngModel)]="format">
</mat-form-field>
<mat-form-field class="adf-input-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>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Time ago
</mat-panel-title>
<mat-panel-description>
adfTimeAgo
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Format" [(ngModel)]="format">
</mat-form-field>
<mat-form-field class="adf-input-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>AdfTimeAgo Pipe - Default</h3>
<div>{{ today | adfTimeAgo }} </div>
<br>
<h3>AdfTimeAgo Pipe - Custom locale</h3>
<div>{{ today | adfTimeAgo : locale}} </div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Decimal numbers
</mat-panel-title>
<mat-panel-description>
adfDecimalNumber
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Number" [(ngModel)]="number">
</mat-form-field>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Min Integer Digits" [(ngModel)]="decimalValues.minIntegerDigits">
</mat-form-field>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Min Fraction Digits" [(ngModel)]="decimalValues.minFractionDigits">
</mat-form-field>
<mat-form-field class="adf-input-field">
<input matInput placeholder="Max Fraction Digits" [(ngModel)]="decimalValues.maxFractionDigits">
</mat-form-field>
<mat-form-field class="adf-input-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>AdfDecimalNumber Pipe - Default</h3>
<div>{{ number | adfDecimalNumber }} </div>
<br>
<h3>AdfDecimalNumber Pipe - Custom digits config</h3>
<div>{{ number | adfDecimalNumber : decimalValues }} </div>
<br>
<h3>AdfDecimalNumber Pipe - Custom locale</h3>
<div>{{ number | adfDecimalNumber : {} : locale }} </div>
<br>
<h3>AdfDecimalNumber Pipe - Custom digits config and locale</h3>
<div>{{ number | adfDecimalNumber : decimalValues : locale }} </div>
<br>
</mat-expansion-panel>
</mat-accordion>

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

@@ -0,0 +1,7 @@
h2 {
padding: 20px;
}
.adf-input-field {
margin: 20px;
}

14
demo-shell/src/app/components/date/date.component.ts → demo-shell/src/app/components/pipes/pipes.component.ts
View File

@@ -19,15 +19,21 @@ import { Component } from '@angular/core';
import { AppConfigService } from '@alfresco/adf-core';
@Component({
selector: 'app-date-page',
templateUrl: './date.component.html',
styleUrls: ['date.component.scss']
selector: 'app-pipes-page',
templateUrl: './pipes.component.html',
styleUrls: ['pipes.component.scss']
})
export class DateComponent {
export class PipesComponent {
today = new Date();
locale: string;
format: string;
number = 12345.56;
decimalValues = {
minIntegerDigits: undefined,
minFractionDigits: undefined,
maxFractionDigits: undefined
};
languages: any[];
constructor(private appConfig: AppConfigService) {

8
demo-shell/src/app/components/date/date.module.ts → demo-shell/src/app/components/pipes/pipes.module.ts
View File

@@ -17,14 +17,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DateComponent } from './date.component';
import { PipesComponent } from './pipes.component';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
const routes: Routes = [
{
path: '',
component: DateComponent
component: PipesComponent
}
];
@@ -34,6 +34,6 @@ const routes: Routes = [
CoreModule.forChild(),
RouterModule.forChild(routes)
],
declarations: [DateComponent]
declarations: [PipesComponent]
})
export class AppDateModule {}
export class AppPipesModule {}