@WidgetComponent

nm-color-search-button

File

src/app/shared/widgets/apps/my-shop-md/color-search-button/color-search-button.component.ts

Implements

OnDestroy

Metadata

selector nm-color-search-button
styleUrls color-search-button.component.scss
templateUrl ./color-search-button.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_progressbarService: ProgressbarService)
Parameters :
Name Type Optional
_progressbarService ProgressbarService no

Methods

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

Properties

actionButton
actionButton: ElementRef
Type : ElementRef
Decorators : ViewChild
Public actionStream
actionStream:
Default value : new Subject<any>()
Decorators : WidgetInput
Public colorSearchInput
colorSearchInput:
Default value : new Subject<any>()
Decorators : WidgetInput
Private colorSearchInputString
colorSearchInputString: string
Type : string
Private context
context: string
Type : string
Public isDisabled
isDisabled: Boolean
Type : Boolean
Default value : false
Public payload
payload:
Default value : new Subject<any>()
Decorators : WidgetInput
Public placeholder
placeholder: string
Type : string
Default value : ""
Public reload
reload:
Default value : new Subject<any>()
Decorators : WidgetOutput
Public reset
reset:
Default value : new Subject<any>()
Decorators : WidgetOutput
Public selectedPurchaseCategory
selectedPurchaseCategory:
Default value : new Subject<any>()
Decorators : WidgetInput
Private selectedPurchaseCategoryString
selectedPurchaseCategoryString: string
Type : string
Public selectedSeason
selectedSeason:
Default value : new Subject<any>()
Decorators : WidgetInput
Private selectedSeasonString
selectedSeasonString: string
Type : string
Public storeEvent
storeEvent:
Default value : new Subject<any>()
Decorators : WidgetInput
Public triggerSearch
triggerSearch:
Default value : new Subject<any>()
Decorators : WidgetInput
Private unsubscribe
unsubscribe:
Default value : NgUnsubscribe.create()
Public uriForSearch
uriForSearch:
Default value : new Subject<any>()
Decorators : WidgetOutput
Public urlString
urlString: string
Type : string
Default value : ""
Public urltemplate
urltemplate: string
Type : string
import {
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  ViewChild,
  HostListener,
  Renderer2,
} from "@angular/core";
import { Subject, Observable } from "rxjs";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { ProgressbarService } from "../../../../components/progressbar/progressbar.service";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
declare var $;

@WidgetComponent("nm-color-search-button")
@Component({
  selector: "nm-color-search-button",
  templateUrl: "./color-search-button.component.html",
  styleUrls: ["./color-search-button.component.scss"],
})
export class ColorSearchButtonWidgetComponent implements OnDestroy {
  @ViewChild("actionButton", { read: ElementRef, static: true })
  actionButton: ElementRef;

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

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

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

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

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

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

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

  @WidgetOutput()
  public uriForSearch = new Subject<any>();

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

  @WidgetOutput()
  public reset = new Subject<any>();

  public placeholder: string = "";

  public isDisabled: Boolean = false;
  public urlString: string = "";
  public urltemplate: string;
  private colorSearchInputString: string;
  private selectedSeasonString: string;
  private selectedPurchaseCategoryString: string;
  private context: string;
  private unsubscribe = NgUnsubscribe.create();

  constructor(private _progressbarService: ProgressbarService) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.urltemplate = configuration["_links"]["search"]["href"];
    this.context = configuration.configuration["context"];

    this.colorSearchInput.subscribe((uri) => {
      this.colorSearchInputString = uri;
    });

    this.selectedSeason.subscribe((selectedSeason) => {
      this.selectedSeasonString = selectedSeason;
    });

    this.selectedPurchaseCategory.subscribe((selectedPurchaseCategory) => {
      this.selectedPurchaseCategoryString = selectedPurchaseCategory;
    });

    this.triggerSearch.subscribe((triggerSearch) => {
      this.onClick();
    });
  }

  onReset() {
    this.reset.next(new Date());
    $(".nm-searchinput").focus();
    this._progressbarService.requestFinished();
  }

  onClick() {
    let template = uriTemplates(this.urltemplate);
    if (!this.isDisabled) {
      let uriParams = {};
      if (
        !!this.colorSearchInputString &&
        !!this.colorSearchInputString.trim()
      ) {
        uriParams["q"] = this.colorSearchInputString;
      }
      if (!!this.selectedPurchaseCategoryString) {
        uriParams["category"] = this.selectedPurchaseCategoryString;
      }
      if (!!this.selectedSeasonString) {
        uriParams["filter"] = this.selectedSeasonString;
      }
      uriParams["context"] = this.context;
      let url = template.fill(uriParams);
      this.uriForSearch.next(url);
    }
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }
}
<button
  mat-raised-button
  type="button"
  class="btn-black nm-footer-button"
  style="margin-left: 10px !important; left: 10px"
  [disabled]="isDisabled"
  (click)="onReset()"
>
  {{ "app.ipim-my-shop-md.placeholder.reset" | translate }}
</button>

<button
  #actionButton
  mat-raised-button
  type="button"
  class="btn-orange nm-footer-button"
  [disabled]="isDisabled"
  (click)="onClick()"
>
  {{ "startSearch" | translate }}
</button>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""