nm-color-search-button
src/app/shared/widgets/apps/my-shop-md/color-search-button/color-search-button.component.ts
| selector | nm-color-search-button |
| styleUrls | color-search-button.component.scss |
| templateUrl | ./color-search-button.component.html |
Widget inputs |
Widget outputs |
Properties |
|
Methods |
|
constructor(_progressbarService: ProgressbarService)
|
||||||
|
Parameters :
|
| Protected configureWidget | ||||||
configureWidget(configuration: WidgetConfig)
|
||||||
Decorators : WidgetConfigure
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| onClick |
onClick()
|
|
Returns :
void
|
| onReset |
onReset()
|
|
Returns :
void
|
| actionButton |
actionButton:
|
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:
|
Type : string
|
| Private context |
context:
|
Type : string
|
| Public isDisabled |
isDisabled:
|
Type : Boolean
|
Default value : false
|
| Public payload |
payload:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
| Public placeholder |
placeholder:
|
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:
|
Type : string
|
| Public selectedSeason |
selectedSeason:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
| Private selectedSeasonString |
selectedSeasonString:
|
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:
|
Type : string
|
Default value : ""
|
| Public urltemplate |
urltemplate:
|
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>