nm-chiplist-widget
src/app/shared/widgets/imarket/chiplistwidget/chiplistwidget.component.ts
OnInit
OnDestroy
OnChanges
CellWidget
| selector | nm-chiplist-widget |
| styleUrls | chiplistwidget.component.scss |
| templateUrl | ./chiplistwidget.component.html |
Widget inputs |
Widget outputs |
Properties |
|
Methods |
|
constructor(_widgetframeService: WidgetframeService)
|
||||||
|
Parameters :
|
| Protected configureWidget | ||||||
configureWidget(configuration: WidgetConfig
|
||||||
Decorators : WidgetConfigure
|
||||||
|
Parameters :
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onChipClick | ||||
onChipClick(chip: )
|
||||
|
Parameters :
Returns :
void
|
| Public _id |
_id:
|
Decorators : WidgetId
|
| Public addChip |
addChip:
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Adds chip or array of chips to chip list |
| Public chipClicked |
chipClicked:
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
Output clicked chip (and row if used in cell widget) |
| Public chips |
chips:
|
Type : any[]
|
Default value : []
|
| Private chipsData |
chipsData:
|
Type : ReplaySubject<any[]>
|
Default value : new ReplaySubject<any[]>(1)
|
Decorators : WidgetInput
|
|
Sets chips data using an array of chips |
| Public configuration |
configuration:
|
Type : WidgetConfig<ChipsConfiguration>
|
Decorators : WidgetConfiguration
|
| Public disableChipList |
disableChipList:
|
Default value : false
|
| Public disableChips |
disableChips:
|
Type : Subject<boolean>
|
Default value : new Subject<boolean>()
|
Decorators : WidgetInput
|
|
Disables the chip list |
| Public rearrangedArray |
rearrangedArray:
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
Output changed array after chips added or removed |
| Public removableChips |
removableChips:
|
Type : boolean
|
| Public removeChip |
removeChip:
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Removes chip or array of chips from chip list |
| Public row |
row:
|
Type : any
|
| Public selectable |
selectable:
|
Type : boolean
|
Default value : true
|
| Private unsubscribe |
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
| Public updatedArray |
updatedArray:
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
|
Output changed array after reordering |
| uri |
uri:
|
Type : ReplaySubject<any>
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetInput
|
|
The uri to fetch chip data |
| Public value |
value:
|
Type : any
|
import { Component, OnInit, OnDestroy, OnChanges } from "@angular/core";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
WidgetComponent,
WidgetId,
WidgetConfiguration,
WidgetConfigure,
WidgetInput,
WidgetOutput,
} from "../../widget.metadata";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import {
ReplaySubject,
Subject,
empty as observableEmpty,
of as observableOf,
BehaviorSubject,
} from "rxjs";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { mergeMap, catchError, takeUntil } from "rxjs/operators";
import { ChipsConfiguration } from "../../../components/imarket/chiplist/chiplist.component";
import { CellWidget } from "../../../components/list-cell";
@WidgetComponent("nm-chiplist-widget")
@Component({
selector: "nm-chiplist-widget",
templateUrl: "./chiplistwidget.component.html",
styleUrls: ["./chiplistwidget.component.scss"],
})
export class ChipListWidgetComponent
implements OnInit, OnDestroy, OnChanges, CellWidget
{
/**
* The uri to fetch chip data
*/
@WidgetInput("uri") uri: ReplaySubject<any> = new ReplaySubject<any>(1);
/**
* Sets chips data using an array of chips
*/
@WidgetInput("chipsData")
private chipsData: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
/**
* Adds chip or array of chips to chip list
*/
@WidgetInput("addChip")
public addChip: Subject<any> = new Subject<any>();
/**
* Removes chip or array of chips from chip list
*/
@WidgetInput("removeChip")
public removeChip: Subject<any> = new Subject<any>();
/**
* Takes [toAdd, toRemove] arrays and adds the first and removes the second respectively
*/
@WidgetInput("addAndRemoveChip")
public addAndRemoveChip: Subject<any> = new Subject<any>();
/**
* Disables the chip list
*/
@WidgetInput("disableChips")
public disableChips: Subject<boolean> = new Subject<boolean>();
/**
* Output changed array after reordering
*/
@WidgetOutput("updatedArray")
public updatedArray: Subject<any> = new Subject<any>();
/**
* Output changed array after chips added or removed
*/
@WidgetOutput("rearrangedArray")
public rearrangedArray: Subject<any> = new Subject<any>();
/**
* Output clicked chip (and row if used in cell widget)
*/
@WidgetOutput("clicked")
public chipClicked: Subject<any> = new Subject<any>();
@WidgetConfiguration()
public configuration: WidgetConfig<ChipsConfiguration>;
@WidgetId()
public _id;
private unsubscribe = NgUnsubscribe.create();
public row: any;
public value: any;
public chips: any[] = [];
public disableChipList = false;
public removableChips: boolean;
public selectable: boolean = true;
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig<ChipsConfiguration>) {
this.removableChips = getOrDefault(
configuration.configuration.removableChips,
false
);
}
constructor(private _widgetframeService: WidgetframeService) {}
ngOnInit() {
if (this.value) {
this.chips = this.value.source ? this.value.source : this.value;
if (this.value.selectable) {
this.selectable = this.value.selectable;
}
}
this.uri
.pipe(
mergeMap((uri) => {
return observableOf(uri).pipe(
mergeMap((uri) => {
return this._widgetframeService.getData(uri);
}),
catchError((error) => {
return observableEmpty();
})
);
}),
takeUntil(this.unsubscribe)
)
.subscribe((data) => {
this.chips = data;
});
this.chipsData
.pipe(takeUntil(this.unsubscribe))
.subscribe((data) => (this.chips = data));
this.disableChips
.pipe(takeUntil(this.unsubscribe))
.subscribe((disable) => (this.disableChipList = disable));
}
onChipClick(chip) {
this.row
? this.chipClicked.next({ chip: chip, row: this.row })
: this.chipClicked.next(chip);
}
ngOnChanges() {
if (this.value) {
this.chips = this.value.source ? this.value.source : this.value;
if (this.value.selectable) {
this.selectable = this.value.selectable;
}
}
}
ngOnDestroy() {
this.unsubscribe.destroy();
}
}
<nm-chiplist
[chipsData]="chips"
[configuration]="configuration.configuration"
[addChip]="addChip"
[removeChip]="removeChip"
[removableChips]="removableChips"
[addAndRemoveChip]="addAndRemoveChip"
[disabled]="disableChipList"
[selectable]="selectable"
(updatedArray)="updatedArray.next($event)"
(rearrangedArray)="rearrangedArray.next($event)"
(onChipClick)="onChipClick($event)"
></nm-chiplist>