@WidgetComponent

nm-item-info

File

src/app/shared/widgets/apps/my-texter/item-info/item-info.component.ts

Metadata

selector nm-item-info
styleUrls item-info.component.scss
templateUrl ./item-info.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_widgetframeService: WidgetframeService)
Parameters :
Name Type Optional
_widgetframeService WidgetframeService no

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

Public _id
_id:
Decorators : WidgetId
Public assetHref
assetHref:
Default value : new ReplaySubject<any>(1)
Public attributes
attributes: string[]
Type : string[]
Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
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
Public title
title: string
Type : string
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
Component
Html element with directive

results matching ""

    No results matching ""