@WidgetComponent
File
Metadata
selector |
nm-item-info |
styleUrls |
item-info.component.scss |
templateUrl |
./item-info.component.html |
Index
Widget inputs
|
|
|
|
|
Widget outputs
|
|
Properties
|
|
Methods
|
|
Methods
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
Public
_id
|
_id:
|
Decorators : WidgetId
|
|
Public
assetHref
|
assetHref:
|
Default value : new ReplaySubject<any>(1)
|
|
Public
attributes
|
attributes: string[]
|
Type : string[]
|
|
Public
firstItem
|
firstItem:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Public
item
|
item: null
|
Type : null
|
Default value : null
|
|
Public
productNo
|
productNo:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Public
resetWidgets
|
resetWidgets:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Private
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
import { distinctUntilChanged, debounceTime, takeUntil } from "rxjs/operators";
import { Component } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { getOrDefault, WidgetConfig } from "../../../widget.configuration";
import {
WidgetComponent,
WidgetId,
WidgetConfiguration,
WidgetConfigure,
WidgetInput,
WidgetOutput,
} from "../../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
declare var $: any;
@WidgetComponent("nm-item-info")
@Component({
selector: "nm-item-info",
templateUrl: "./item-info.component.html",
styleUrls: ["./item-info.component.scss"],
})
export class ItemInfoWidgetComponent {
public title: string;
public item = null;
public attributes: string[];
private unsubscribe = NgUnsubscribe.create();
@WidgetId()
public _id;
// The item to be displayed large
@WidgetInput()
public firstItem = new Subject<any>();
public assetHref = new ReplaySubject<any>(1);
@WidgetConfiguration()
public configuration: WidgetConfig;
@WidgetInput()
public productNo = new Subject<any>();
// Resets the widget to display nothing
@WidgetInput()
public resetWidgets = new Subject<any>();
constructor(private _widgetframeService: WidgetframeService) {}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig) {
this.title = this.configuration.configuration["title"];
this.attributes = getOrDefault(
this.configuration.configuration["attributes"],
[]
);
this.resetWidgets.subscribe((reset) => {
this.item = null;
});
this.firstItem
.pipe(
takeUntil(this.unsubscribe),
debounceTime(100),
distinctUntilChanged()
)
.subscribe((item) => {
if (item != undefined) {
this.item = item;
if (item != null) {
this.assetHref.next(item._links.assets.href);
}
} else {
this.item = null;
}
});
}
ngOnInit() {}
ngOnDestroy() {
this.unsubscribe.destroy();
}
}
<nm-widgetframe
[header]="configuration.configuration['header']"
widgetId="{{ _id }}"
>
<div slot="title" class="nm-widgetframe__title">
{{ title | translate }}
<nm-help-icon
*ngIf="configuration.configuration['infoText']"
style="position: absolute; display: inline; right: 50px; z-index: 666"
[info-text]="configuration.configuration['infoText'] | translate"
[info-title]="configuration.configuration['title'] | translate"
[info-placement]="'left'"
[wiki-link]="configuration.configuration['wikiLink']"
></nm-help-icon>
</div>
<div slot="content" class="nm-widgetframe__content" style="min-height: 62px">
<nm-gallery
[href]="assetHref"
*ngIf="item !== null"
[thumbnailsEnabled]="false"
[width]="'250px'"
>
</nm-gallery>
<div class="info" *ngIf="item !== null">
<h3>{{ item["ItemNameWebshop"] }}</h3>
<div>{{ item["itemNo"] }}</div>
<div *ngFor="let default of item?.attributes?.default">
<div *ngIf="attributes.indexOf(default.identifier) !== -1">
{{ default?.value }}
</div>
</div>
<br />
<div *ngFor="let dimension of item?.attributes?.dimensions">
<div>{{ dimension?.value }}</div>
</div>
<div class="nm-bottom"></div>
</div>
</div>
</nm-widgetframe>
Legend
Html element with directive