mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-17 14:21:29 +00:00
[ADF-4713] Add new DecimalNumber Pipe to transform and localize numbers (#4926)
* [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
committed by
Eugenio Romano
Eugenio Romano
parent
8ee5cd1908
commit
a0d4160c11
109
demo-shell/src/app/components/pipes/pipes.component.html
Normal file
109
demo-shell/src/app/components/pipes/pipes.component.html
Normal 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
7
demo-shell/src/app/components/pipes/pipes.component.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
h2 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.adf-input-field {
|
||||
margin: 20px;
|
||||
}
|
||||
42
demo-shell/src/app/components/pipes/pipes.component.ts
Normal file
42
demo-shell/src/app/components/pipes/pipes.component.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
/*!
|
||||
* @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-pipes-page',
|
||||
templateUrl: './pipes.component.html',
|
||||
styleUrls: ['pipes.component.scss']
|
||||
})
|
||||
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) {
|
||||
this.languages = this.appConfig.get('languages', []);
|
||||
}
|
||||
}
|
||||
39
demo-shell/src/app/components/pipes/pipes.module.ts
Normal file
39
demo-shell/src/app/components/pipes/pipes.module.ts
Normal 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 { PipesComponent } from './pipes.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PipesComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CoreModule.forChild(),
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [PipesComponent]
|
||||
})
|
||||
export class AppPipesModule {}
|
||||
Reference in New Issue
Block a user