@WidgetComponent
File
Implements
Metadata
| selector |
nm-search-attribute-configuration |
| styleUrls |
search-attribute-configuration.component.scss |
| templateUrl |
./search-attribute-configuration.component.html |
Index
Widget inputs
|
|
|
Widget outputs
|
|
|
Properties
|
|
|
Methods
|
|
|
Constructor
constructor(dialogRef: MatDialogRef, translateService: TranslateService)
|
|
|
|
|
Methods
|
Private
getFilterFieldForModifier
|
getFilterFieldForModifier(modifier: )
|
|
|
Parameters :
| Name |
Optional |
| modifier |
no
|
|
|
Public
onInputEvent
|
onInputEvent(event: )
|
|
|
|
|
|
Public
rangeChange
|
rangeChange(event: )
|
|
|
|
|
|
Public
attributeSupportsRange
|
attributeSupportsRange: boolean
|
Type : boolean
|
Default value : true
|
|
|
|
Public
availableModifiers
|
availableModifiers: []
|
Type : []
|
Default value : [
{
identifier: null,
description: "",
icon: "",
},
{
identifier: "OR",
description: "label.or",
},
{
identifier: "NOT_EXISTS",
description: "label.not.exists",
},
]
|
|
|
|
Public
availableModifiersFilter
|
availableModifiersFilter:
|
Default value : new LookupFilter(
"description",
this.availableModifiers,
(entry) => this.getFilterFieldForModifier(entry)
)
|
|
|
|
Public
currentLocale
|
currentLocale:
|
|
|
|
Public
editAttributeService
|
editAttributeService:
|
|
|
|
Public
fieldIsRange
|
fieldIsRange:
|
|
|
|
Public
formcontrolNameFor
|
formcontrolNameFor:
|
|
|
|
Public
infoText
|
infoText:
|
|
|
|
Public
infoTitle
|
infoTitle:
|
|
|
|
Public
inputEvent
|
inputEvent:
|
Default value : new EventEmitter<object>()
|
|
|
|
Public
onAttributeRangeChange
|
onAttributeRangeChange:
|
Default value : new EventEmitter<object>()
|
|
|
|
Public
onfieldRangeChange
|
onfieldRangeChange:
|
Default value : new EventEmitter<object>()
|
|
|
|
Public
showLabel
|
showLabel: boolean
|
Type : boolean
|
Default value : false
|
|
|
import { Component, EventEmitter, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { Attribute } from "../../../components/edit-attribute/attribute";
import { deepCopy } from "../../../components/util/util.service";
import { LookupFilter } from "../../../util/lookup.filter";
import { TranslateService } from "@ngx-translate/core";
import { FormWidgetField } from "../advanced/search-advanced.component";
@Component({
selector: "nm-search-attribute-configuration",
templateUrl: "./search-attribute-configuration.component.html",
styleUrls: ["./search-attribute-configuration.component.scss"],
})
export class SearchAttributeConfigurationDialog implements OnInit {
public infoText;
public infoTitle;
//Attribute
public attribute: Attribute;
public orgAttribute: Attribute;
public inputAttribute: Attribute;
public attributeSupportsRange: boolean = true;
public showLabel: boolean = false;
public availableModifiers = [
{
identifier: null,
description: "",
icon: "",
},
{
identifier: "OR",
description: "label.or",
},
{
identifier: "NOT_EXISTS",
description: "label.not.exists",
},
];
public availableModifiersFilter = new LookupFilter(
"description",
this.availableModifiers,
(entry) => this.getFilterFieldForModifier(entry)
);
public onAttributeRangeChange = new EventEmitter<object>();
public editAttributeService;
//Field
public form;
public field: FormWidgetField;
public lookups;
public inputEvent = new EventEmitter<object>();
public onfieldRangeChange = new EventEmitter<object>();
public fieldIsRange;
public currentLocale;
public formcontrolNameFor;
constructor(
public dialogRef: MatDialogRef<SearchAttributeConfigurationDialog>,
private translateService: TranslateService
) {}
private getFilterFieldForModifier(modifier) {
return this.translateService.instant(modifier.description);
}
ngOnInit() {
if (this.inputAttribute) {
this.attribute = deepCopy(this.inputAttribute);
}
}
cancel() {
if (this.attribute) {
this.attribute = deepCopy(this.orgAttribute);
this.dialogRef.close(this.orgAttribute);
}
}
public rangeChange(event) {
if (this.attribute) {
if (this.attributeSupportsRange) {
this.attribute.displayRange = !this.attribute.displayRange;
if (this.attribute.from) {
if (!this.attribute.displayRange) {
delete this.attribute.from;
delete this.attribute.to;
}
} else if (this.attribute.displayRange) {
const fromClone: Attribute = JSON.parse(
JSON.stringify(this.attribute)
);
const toClone: Attribute = JSON.parse(JSON.stringify(this.attribute));
fromClone.identifier = fromClone.identifier + "-from";
toClone.identifier = toClone.identifier + "-to";
this.attribute.from = fromClone;
this.attribute.to = toClone;
}
}
}
this.fieldIsRange = !this.fieldIsRange;
let element = this.attribute ? this.attribute : this.field;
let payload = { event: event, element: element };
this.attribute
? this.onAttributeRangeChange.emit(payload)
: this.onfieldRangeChange.emit(payload);
}
public onInputEvent(event) {
this.inputEvent.emit(event);
}
}
<nm-dialog
[dialogRef]="dialogRef"
[infoText]=""
class="nm-dialog nm-select-attributes-dialog"
>
<ng-container slot="title">
{{ "edit.attribute.search.settings" | translate }}
</ng-container>
<ng-container slot="content">
<ng-container *ngIf="attribute">
<div class="range-wrapper">
<mat-form-field style="" class="modifier-selection">
<mat-select
[(value)]="attribute.modifier"
[placeholder]="'placeholder.modifier' | translate"
>
<mat-option>
<ngx-mat-select-search
[formControl]="availableModifiersFilter.getFilterControl()"
placeholderLabel="{{ 'placeholder.search' | translate }}"
noEntriesFoundLabel="{{ 'select.no.options' | translate }}"
(keydown.escape)="selectSearch.matSelect.focus()"
#selectSearch
></ngx-mat-select-search>
</mat-option>
<mat-option
*ngFor="
let availableModifier of availableModifiersFilter.getFilteredLookups()
| async
"
[value]="availableModifier.identifier"
>
{{ availableModifier.description | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<ng-container *ngIf="showLabel; else noLabel">
<div class="nm-attribute-list-description" *ngIf="showLabel">
<nm-ellipsis [content]="attribute.description"></nm-ellipsis>
</div>
<div class="nm-attribute-list-value">
<nm-edit-attribute
[attribute]="attribute"
[copyContentButton]="false"
[onlyInputsForTexts]="true"
[editAttributeService]="editAttributeService"
[triggerAsChipList]="true"
[floatingLabel]="null"
>
</nm-edit-attribute>
</div>
</ng-container>
<ng-template #noLabel>
<ng-container *ngIf="attribute.displayRange; else noRange">
<div class="range-wrapper-left">
<nm-edit-attribute
[attribute]="attribute.from"
[copyContentButton]="false"
[onlyInputsForTexts]="true"
[loadOptionsLazy]="true"
[displayValueAssets]="true"
[editAttributeService]="editAttributeService"
[triggerAsChipList]="true"
[floatingLabel]="
('from' | translate) + ' ' + attribute.description
"
>
</nm-edit-attribute>
</div>
<div class="range-wrapper-right">
<nm-edit-attribute
[attribute]="attribute.to"
[copyContentButton]="false"
[onlyInputsForTexts]="true"
[loadOptionsLazy]="true"
[displayValueAssets]="true"
[editAttributeService]="editAttributeService"
[triggerAsChipList]="true"
[floatingLabel]="
('to' | translate) + ' ' + attribute.description
"
>
</nm-edit-attribute>
</div>
</ng-container>
<ng-template #noRange>
<nm-edit-attribute
class="range-wrapper-single"
[attribute]="attribute"
[copyContentButton]="false"
[onlyInputsForTexts]="true"
[loadOptionsLazy]="true"
[displayValueAssets]="true"
[triggerAsChipList]="true"
[editAttributeService]="editAttributeService"
[floatingLabel]="null"
>
</nm-edit-attribute>
</ng-template>
</ng-template>
</div>
<div class="maintenance-input">
<nm-context-selector
[contexts]="'all-clients'"
[placeholder]="'table.head.maintenance-level' | translate"
[multi-selection]="true"
field="identifier"
[(ngModel)]="attribute.maintenanceLevel"
>
</nm-context-selector>
</div>
<div class="locale-input">
<nm-locale-selector
multiple="{{ true }}"
[(locale)]="attribute.locale"
></nm-locale-selector>
</div>
</ng-container>
<form [formGroup]="form" autocomplete="off" *ngIf="field">
<div class="form-container">
<div class="form-row range-wrapper">
<div class="form-input">
<ng-container *ngIf="fieldIsRange; else noRange">
<nm-search-input
class="range-wrapper-left"
[field]="field"
[lookups]="lookups"
(event)="onInputEvent($event)"
[locale]="currentLocale"
[placeholder]="
('from' | translate) + ' ' + (field.description | translate)
"
[formControlName]="field.identifier + 'From'"
></nm-search-input>
<nm-search-input
class="range-wrapper-right"
[field]="field"
[lookups]="lookups"
(event)="onInputEvent($event)"
[locale]="currentLocale"
[placeholder]="
('to' | translate) + ' ' + (field.description | translate)
"
[formControlName]="field.identifier + 'Until'"
></nm-search-input>
</ng-container>
<ng-template #noRange>
<nm-search-input
[field]="field"
(event)="onInputEvent($event)"
[lookups]="lookups"
[placeholder]="field.description | translate"
[locale]="currentLocale"
[formControlName]="formcontrolNameFor"
></nm-search-input>
</ng-template>
</div>
</div>
</div>
</form>
</ng-container>
<ng-container slot="actions">
<mat-slide-toggle
*ngIf="
attribute
? attributeSupportsRange
: field.allowRange || (field.range && field.range === 'choose')
"
[checked]="attribute ? attribute.displayRange : fieldIsRange"
(change)="rangeChange($event)"
>
{{ "placeholder.range.search" | translate }}</mat-slide-toggle
>
<button mat-button type="button" (click)="dialogRef.close(null)">
{{ "button.cancel" | translate }}
</button>
<button
mat-raised-button
color="primary"
type="button"
(click)="dialogRef.close(attribute ? attribute : field)"
>
{{ "button.accept" | translate }}
</button>
</ng-container>
</nm-dialog>
Legend
Html element with directive