@WidgetComponent

nm-item-list-seletion

File

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

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector nm-item-list-seletion
styleUrls item-list.component.scss
templateUrl ./item-list.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_widgetframeService: WidgetframeService, _changeDetectorRef: ChangeDetectorRef)
Parameters :
Name Type Optional
_widgetframeService WidgetframeService no
_changeDetectorRef ChangeDetectorRef no

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
Returns : void
keydown
keydown(event: any)
Parameters :
Name Type Optional
event any no
Returns : void
keynavigation
keynavigation(direction: , currentSelection: )
Parameters :
Name Optional
direction no
currentSelection no
Returns : void
keyup
keyup(event: any)
Parameters :
Name Type Optional
event any no
Returns : void
onRowClick
onRowClick($event: )
Parameters :
Name Optional
$event no
Returns : void
onRowSelectChange
onRowSelectChange($event: )
Parameters :
Name Optional
$event no
Returns : void
resetWidget
resetWidget()
Returns : any
selectFirstRow
selectFirstRow()
Returns : void
selectMasterLevelItems
selectMasterLevelItems(selectedProductLevel: )
Parameters :
Name Optional
selectedProductLevel no
Returns : void
selectRowsBetweenIndexes
selectRowsBetweenIndexes(indexes: )
Parameters :
Name Optional
indexes no
Returns : void

Properties

Public _id
_id:
Decorators : WidgetId
Public arr
arr:
Default value : Array
Public cols
cols: any[]
Type : any[]
Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
datatable
datatable: any
Type : any
Decorators : ViewChild
Public dimsColsNo
dimsColsNo: number
Type : number
Public dimsGroupColIndex
dimsGroupColIndex: number
Type : number
Public dimsGroupSpanHeader
dimsGroupSpanHeader: any
Type : any
Public headerColumnGroup
headerColumnGroup: boolean
Type : boolean
Public inputLink
inputLink: string
Type : string
Public items
items: any
Type : any
Public lastSelectedRowIndex
lastSelectedRowIndex: number
Type : number
Default value : 0
Public priorSelectedRows
priorSelectedRows: any[]
Type : any[]
Default value : []
Public productNo
productNo:
Default value : new Subject<any>()
Decorators : WidgetInput
Public reload
reload:
Default value : new Subject<any>()
Decorators : WidgetInput
Public resetWidgets
resetWidgets:
Default value : new Subject<any>()
Decorators : WidgetInput
Private selectedItems
selectedItems: Subject<any>
Type : Subject<any>
Default value : new Subject<any>()
Decorators : WidgetOutput
Public selectedProductLevel
selectedProductLevel:
Default value : new BehaviorSubject<any>(1)
Decorators : WidgetInput
Public selectedProductLevelValue
selectedProductLevelValue: string
Type : string
Public selectedRows
selectedRows: any[]
Type : any[]
Default value : []
Public shiftIsPressed
shiftIsPressed: boolean
Type : boolean
Default value : false
Public uri
uri:
Default value : new Subject<any>()
Decorators : WidgetInput
import {
  combineLatest as observableCombineLatest,
  Subject,
  Observable,
  BehaviorSubject,
} from "rxjs";

import {
  map,
  mergeMap,
  distinctUntilChanged,
  onErrorResumeNext,
} from "rxjs/operators";
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ViewChild,
} from "@angular/core";

import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

@WidgetComponent("nm-item-list-seletion")
@Component({
  selector: "nm-item-list-seletion",
  templateUrl: "./item-list.component.html",
  styleUrls: ["./item-list.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    "(window:keydown)": "keydown($event)",
    "(window:keyup)": "keyup($event)",
  },
})
export class ItemListSelectionWidgetComponent {
  public cols: any[];
  public items: any;
  public dimsGroupSpanHeader: any;
  public headerColumnGroup: boolean;
  public dimsGroupColIndex: number;
  public dimsColsNo: number;
  public arr = Array;
  public selectedRows: any[] = [];
  public priorSelectedRows: any[] = [];
  public selectedProductLevelValue: string;
  public shiftIsPressed: boolean = false;
  public lastSelectedRowIndex: number = 0;

  public inputLink: string;

  @WidgetInput()
  public productNo = new Subject<any>();

  @WidgetInput()
  public uri = new Subject<any>();

  @WidgetInput()
  public reload = new Subject<any>();

  @WidgetInput()
  public resetWidgets = new Subject<any>();

  @WidgetInput()
  public selectedProductLevel = new BehaviorSubject<any>(1);

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id;

  @WidgetOutput("selectedItems")
  private selectedItems: Subject<any> = new Subject<any>();

  @ViewChild("dt") datatable: any;

  constructor(
    private _widgetframeService: WidgetframeService,
    private _changeDetectorRef: ChangeDetectorRef
  ) {}

  onRowSelectChange($event) {
    if ($event != undefined) {
      this.priorSelectedRows = this.selectedRows;
      this.selectedItems.next(this.selectedRows);
      this.selectMasterLevelItems(this.selectedProductLevelValue);
      this._changeDetectorRef.markForCheck();
    }
  }

  onRowClick($event) {
    if (navigator.userAgent.indexOf("Firefox") !== -1) {
      if (this.shiftIsPressed) {
        this.selectRowsBetweenIndexes([
          this.lastSelectedRowIndex,
          this.datatable["dataToRender"].indexOf($event.data),
        ]);
      }
      this.lastSelectedRowIndex = this.datatable["dataToRender"].indexOf(
        $event.data
      );
    }
  }

  keydown(event: any) {
    if (event.shiftKey && event.keyCode === 38) {
      this.keynavigation(-1, this.selectedRows[0]);
    }
    if (event.shiftKey && event.keyCode === 40) {
      this.keynavigation(+1, this.selectedRows[this.selectedRows.length - 1]);
    }

    if (event.keyCode === 16) {
      this.shiftIsPressed = true;
    }
    this._changeDetectorRef.markForCheck();
  }

  keyup(event: any) {
    if (event.keyCode === 16) {
      this.shiftIsPressed = false;
    }
  }

  selectRowsBetweenIndexes(indexes) {
    indexes.sort(function (a, b) {
      return a - b;
    });

    for (var i = indexes[0]; i <= indexes[1]; i++) {
      this.selectedRows.push(this.datatable["dataToRender"][i]);
    }

    this.selectedRows = this.selectedRows.filter((obj, pos, arr) => {
      return (
        arr.map((mapObj) => mapObj["itemNo"]).indexOf(obj["itemNo"]) === pos
      );
    });

    this.datatable["_selection"] = this.selectedRows;
    this.selectedItems.next(this.selectedRows);
  }

  keynavigation(direction, currentSelection) {
    let currentrow = this.datatable["dataToRender"].filter(
      (item) => item.itemNo == currentSelection.itemNo
    );
    let index = this.datatable["dataToRender"].indexOf(currentrow[0]);
    if (this.datatable["dataToRender"][index + direction] != undefined) {
      this.selectedRows = [];
      this.selectedRows.push(this.datatable["dataToRender"][index + direction]);
      this.selectedItems.next(this.selectedRows);
    }
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let href = configuration._links["items"]["href"];
    let template;

    this.selectedProductLevel
      .pipe(distinctUntilChanged())
      .subscribe((selectedProductLevel) => {
        this.selectedProductLevelValue = selectedProductLevel;
        this.selectMasterLevelItems(this.selectedProductLevelValue);
        this.priorSelectedRows = [];
        if (this.datatable !== undefined) {
          if (
            selectedProductLevel === "item" ||
            selectedProductLevel === "product"
          ) {
            var that = this;
            setTimeout(function () {
              if (!(that.datatable["dataToRender"] == undefined)) {
                that.selectedRows = [];
                that.selectedRows.push(that.datatable["dataToRender"][0]);
                that.selectedItems.next(that.selectedRows);
                that._changeDetectorRef.markForCheck();
              }
            }, 1);
          }
        }
      });

    this.resetWidgets.subscribe((data) => {
      this.items = null;
      //this.selectedItems.next(null);
      this.uri.next(" ");
    });

    observableCombineLatest(
      this.uri.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (uri, reloadEvent) => uri
    )
      .pipe(
        map((uri) => uriTemplates(uri).fill({})),
        mergeMap((href) =>
          this._widgetframeService
            .getData(href)
            .pipe(onErrorResumeNext(this.resetWidget()))
        ),
        map((res) => <any>res)
      )
      .subscribe((data) => {
        if (data["_embedded"]["items"].length == 0) {
          return;
        }
        let dimsCols: any[] = new Array();
        this.cols = [].concat(configuration.configuration["columns"]);
        this.dimsGroupColIndex = this.cols.findIndex(
          (col) => col.group === "dimensions"
        );
        if (this.dimsGroupColIndex > -1) {
          let dimsGroupCol = this.cols[this.dimsGroupColIndex];
          this.dimsGroupSpanHeader = dimsGroupCol["header-span"];
          this.headerColumnGroup = true;
          if (this.dimsGroupColIndex === 1) {
            this.dimsGroupSpanHeader = "dimension";
          }
          for (var attribute in data["_embedded"]["items"][0].attributes[
            "dimensions"
          ]) {
            let dim = {
              field: "",
              header: "",
              sortable: false,
              filter: false,
            };
            let attr =
              data["_embedded"]["items"][0].attributes.dimensions[attribute];
            if (attr.value != "") {
              dim["field"] = attr.identifier;
              dim["header"] = attr[dimsGroupCol["header-field"]];
              dim["sortable"] = dimsGroupCol.sortable;
              dim["filter"] = dimsGroupCol.filter;
              dimsCols.push(dim);
            }
          }
          Array.prototype.splice.apply(
            this.cols,
            [this.dimsGroupColIndex, 1].concat(dimsCols)
          );
        } else {
          this.headerColumnGroup = false;
        }
        this.dimsColsNo = dimsCols.length;
        let tempitems: any = data["_embedded"]["items"];
        for (var item in tempitems) {
          if (tempitems[item].attributes) {
            for (var attribute in tempitems[item].attributes["default"]) {
              let attr = tempitems[item].attributes.default[attribute];
              tempitems[item][attr.identifier] = attr.value;
            }

            for (var attribute in tempitems[item].attributes["dimensions"]) {
              let attr = tempitems[item].attributes.dimensions[attribute];
              tempitems[item][attr.identifier] = attr.value;
            }
          }
        }

        this.items = tempitems;

        this.selectFirstRow();

        if (this.priorSelectedRows.length > 0) {
          setTimeout(() => {
            this.selectedRows = [];

            for (let item of this.items) {
              let selected = this.priorSelectedRows.filter(
                (priorSelected) => item.itemNo === priorSelected.itemNo
              );

              if (selected.length > 0) {
                this.selectedRows.push(item);
              }
            }
            if (this.selectedRows.length > 0) {
              this.selectedItems.next(this.selectedRows);
              this._changeDetectorRef.markForCheck();
            }
          }, 100);
        }

        if (this.selectedRows.length === 0) {
          this.selectFirstRow();
        }

        this.selectMasterLevelItems(this.selectedProductLevelValue);
        this._changeDetectorRef.markForCheck();
      });
  }

  selectFirstRow() {
    this.selectedRows = [];
    this.selectedRows.push(this.items[0]);
    this.selectedItems.next(this.selectedRows);
  }

  resetWidget() {
    this._changeDetectorRef.markForCheck();
    this.items = null;
    // this.selectedItems.next(null);
    return null;
  }

  selectMasterLevelItems(selectedProductLevel) {
    this._changeDetectorRef.markForCheck();
    if (selectedProductLevel === "master") {
      if (this.selectedRows["0"] != undefined) {
        let selectedVariantenRef = this.selectedRows["0"]["VariantenRef"];
        this.selectedRows = [];
        for (var item of this.items) {
          if (item["VariantenRef"] === selectedVariantenRef) {
            this.selectedRows.push(item);
          }
        }
        this.selectedItems.next(this.selectedRows);
      }
    }
  }
}
<nm-widgetframe
  [header]="configuration.configuration['header']"
  widgetId="{{ _id }}"
>
  <div slot="title" class="nm-widgetframe__title">
    {{ "nm-item-list" | translate }}
  </div>

  <div
    slot="content"
    class="nm-widgetframe__content"
    class="nm-itemlist myTexter"
    [ngClass]="cols?.length.toString()"
  >
    <p-dataTable
      [value]="items"
      *ngIf="items !== null"
      [paginator]="false"
      [rows]="10"
      [scrollable]="false"
      [pageLinks]="3"
      emptyMessage=" "
      selectionMode="multiple"
      [(selection)]="selectedRows"
      (onRowClick)="onRowClick($event)"
      (onRowSelect)="onRowSelectChange($event)"
      #dt
    >
      <p-headerColumnGroup
        *ngIf="headerColumnGroup && cols?.length > dimsGroupColIndex"
      >
        <p-row>
          <p-column
            *ngFor="let i of arr(dimsGroupColIndex).fill(1)"
            header=""
          ></p-column>

          <p-column
            *ngFor="let i of arr(cols?.length - dimsGroupColIndex - 1).fill(1)"
            header=""
          ></p-column>
        </p-row>
        <p-row>
          <p-column
            *ngFor="let col of cols"
            [sortable]="col.sortable"
            [filter]="col.sortable"
            [field]="col.field"
            filterMatchMode="contains"
            [header]="col.header | translate"
          >
            <ng-template pTemplate="filter" let-col *ngIf="col.filter">
              <mat-form-field>
                <input
                  matInput
                  placeholder="{{ col.header }}"
                  type="text"
                  pInputText
                  class="ui-column-filter"
                  *ngIf="col.filter == true"
                  (click)="dt.onFilterInputClick($event)"
                  (input)="
                    dt.onFilterKeyup(
                      $event.target.value,
                      col.field,
                      col.filterMatchMode
                    )
                  "
                />
              </mat-form-field>
            </ng-template>

            <ng-template pTemplate="filter" let-col *ngIf="!col.filter">
              <span class="nm-column-title">{{ col.header }}</span>
            </ng-template>
          </p-column>
        </p-row>
      </p-headerColumnGroup>

      <p-column
        *ngFor="let col of cols"
        [sortable]="col.sortable"
        [filter]="col.sortable"
        [field]="col.field"
        filterMatchMode="contains"
        [header]="col.header | translate"
      >
        <ng-template pTemplate="filter" let-col *ngIf="col.filter">
          <mat-form-field>
            <input
              matInput
              placeholder="{{ col.header }}"
              type="text"
              pInputText
              class="ui-column-filter"
              *ngIf="col.filter == true"
              (click)="dt.onFilterInputClick($event)"
              (input)="
                dt.onFilterKeyup(
                  $event.target.value,
                  col.field,
                  col.filterMatchMode
                )
              "
            />
          </mat-form-field>
        </ng-template>

        <ng-template pTemplate="filter" let-col *ngIf="!col.filter">
          <span class="nm-column-title">{{ col.header }}</span>
        </ng-template>

        <ng-template let-col let-results="rowData" pTemplate type="body">
          <div style="width: 100%">
            <div [ngSwitch]="col.field">
              <span *ngSwitchCase="'main-asset'">
                <nm-image
                  [container]="results"
                  asset="main-asset"
                  size="thumbnail"
                  width="auto"
                  height="auto"
                  max-width="48px"
                  max-height="48px"
                ></nm-image>
              </span>

              <span *ngSwitchCase="'my-texter-contains-text'">
                <mat-icon
                  *ngIf="results[col.field] === true"
                  popover="{{ 'app.ipim-my-texter.contains-text' | translate }}"
                  placement="right"
                  container="body"
                  triggers="mouseenter:mouseleave"
                  class="mat-24"
                  >done</mat-icon
                >
                <mat-icon
                  *ngIf="!results[col.field]"
                  popover=" {{
                    'app.ipim-my-texter.not.contains-text' | translate
                  }}"
                  placement="right"
                  container="body"
                  triggers="mouseenter:mouseleave"
                  class="mat-24"
                  >priority_high</mat-icon
                >
              </span>

              <span *ngSwitchCase="'texter-contains-text'">
                <mat-icon
                  *ngIf="results[col.field] === true"
                  popover="{{ 'app.ipim-my-texter.contains-text' | translate }}"
                  placement="right"
                  container="body"
                  triggers="mouseenter:mouseleave"
                  class="mat-24"
                  >done</mat-icon
                >
                <mat-icon
                  *ngIf="!results[col.field]"
                  popover="{{
                    'app.ipim-my-texter.not.contains-text' | translate
                  }}"
                  placement="right"
                  container="body"
                  triggers="mouseenter:mouseleave"
                  class="mat-24"
                  >priority_high</mat-icon
                >
              </span>

              <div *ngSwitchDefault class="nm-break" style="max-width: 90px">
                <nm-ellipsis [content]="results[col.field]"></nm-ellipsis>
              </div>
            </div>
          </div>
        </ng-template>
      </p-column>

      <footer>
        <div class="ui-helper-clearfix" style="width: 100%"></div>
      </footer>
    </p-dataTable>
  </div>
</nm-widgetframe>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""