@WidgetComponent

nm-search-attribute-configuration

File

src/app/shared/widgets/search/attribute-configuration/search-attribute-configuration.component.ts

Implements

OnInit

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)
Parameters :
Name Type Optional
dialogRef MatDialogRef<SearchAttributeConfigurationDialog> no
translateService TranslateService no

Methods

cancel
cancel()
Returns : void
Private getFilterFieldForModifier
getFilterFieldForModifier(modifier: )
Parameters :
Name Optional
modifier no
Returns : any
ngOnInit
ngOnInit()
Returns : void
Public onInputEvent
onInputEvent(event: )
Parameters :
Name Optional
event no
Returns : void
Public rangeChange
rangeChange(event: )
Parameters :
Name Optional
event no
Returns : void

Properties

Public attribute
attribute: Attribute
Type : Attribute
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 dialogRef
dialogRef: MatDialogRef<SearchAttributeConfigurationDialog>
Type : MatDialogRef<SearchAttributeConfigurationDialog>
Public editAttributeService
editAttributeService:
Public field
field: FormWidgetField
Type : FormWidgetField
Public fieldIsRange
fieldIsRange:
Public form
form:
Public formcontrolNameFor
formcontrolNameFor:
Public infoText
infoText:
Public infoTitle
infoTitle:
Public inputAttribute
inputAttribute: Attribute
Type : Attribute
Public inputEvent
inputEvent:
Default value : new EventEmitter<object>()
Public lookups
lookups:
Public onAttributeRangeChange
onAttributeRangeChange:
Default value : new EventEmitter<object>()
Public onfieldRangeChange
onfieldRangeChange:
Default value : new EventEmitter<object>()
Public orgAttribute
orgAttribute: Attribute
Type : Attribute
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
Component
Html element with directive

results matching ""

    No results matching ""