Files
alfresco-ng2-components/demo-shell/src/app/components/card-view/card-view.component.ts
davidcanonieto a0d4160c11 [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
2019-07-18 12:09:50 +02:00

175 lines
5.4 KiB
TypeScript

/*!
* @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, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import {
CardViewTextItemModel,
CardViewDateItemModel,
CardViewDatetimeItemModel,
CardViewBoolItemModel,
CardViewIntItemModel,
CardViewFloatItemModel,
CardViewKeyValuePairsItemModel,
CardViewSelectItemModel,
CardViewUpdateService,
CardViewMapItemModel,
UpdateNotification,
DecimalNumberPipe
} from '@alfresco/adf-core';
import { of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
templateUrl: './card-view.component.html',
styleUrls: ['./card-view.component.scss']
})
export class CardViewComponent implements OnInit, OnDestroy {
@ViewChild('console') console: ElementRef;
isEditable = true;
properties: any;
logs: string[];
private onDestroy$ = new Subject<boolean>();
constructor(private cardViewUpdateService: CardViewUpdateService,
private decimalNumberPipe: DecimalNumberPipe) {
this.logs = [];
this.createCard();
}
respondToCardClick() {
this.logs.push(`clickable field`);
}
ngOnInit() {
this.cardViewUpdateService.itemUpdated$
.pipe(takeUntil(this.onDestroy$))
.subscribe(this.onItemChange.bind(this));
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
createCard() {
this.properties = [
new CardViewTextItemModel({
label: 'CardView Text Item',
value: 'Spock',
key: 'name',
default: 'default bar',
multiline: false,
icon: 'icon',
editable: this.isEditable
}),
new CardViewDateItemModel({
label: 'CardView Date Item',
value: new Date(1983, 11, 24, 10, 0, 30),
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
format: 'shortDate',
editable: this.isEditable
}),
new CardViewDatetimeItemModel({
label: 'CardView Datetime Item',
value: new Date(1983, 11, 24, 10, 0, 0),
key: 'datetime',
default: new Date(1983, 11, 24, 10, 0, 0),
format: 'short',
editable: this.isEditable
}),
new CardViewBoolItemModel({
label: 'CardView Boolean Item',
value: true,
key: 'boolean',
default: false,
editable: this.isEditable
}),
new CardViewIntItemModel({
label: 'CardView Int Item',
value: 213,
key: 'int',
default: 1,
editable: this.isEditable
}),
new CardViewFloatItemModel({
label: 'CardView Float Item',
value: 9.9,
key: 'float',
default: 0.0,
editable: this.isEditable,
pipes: [{ pipe: this.decimalNumberPipe}]
}),
new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',
value: [],
key: 'key-value-pairs',
editable: this.isEditable
}),
new CardViewSelectItemModel({
label: 'CardView Select Item',
value: 'one',
options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
key: 'select',
editable: this.isEditable
}),
new CardViewMapItemModel({
label: 'My map',
value: new Map([['999', 'My Value']]),
key: 'map',
default: 'default map value'
}),
new CardViewTextItemModel({
label: 'This is clickable ',
value: 'click here',
key: 'click',
default: 'click here',
editable: this.isEditable,
clickable: true,
clickCallBack: () => {
this.respondToCardClick();
}
})
];
}
onItemChange(notification: UpdateNotification) {
let value = notification.changed[notification.target.key];
if (notification.target.type === 'keyvaluepairs') {
value = JSON.stringify(value);
}
this.logs.push(`[${notification.target.label}] - ${value}`);
this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
}
toggleEditable() {
this.isEditable = !this.isEditable;
this.createCard();
}
reset() {
this.isEditable = true;
this.createCard();
this.logs = [];
}
}