nucleus/webclient/src/main/webapp/src/app/search/search-condition.component.html

<!--********************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->

<td style="vertical-align: middle">
  <span>{{condition.type | mdmTranslate : defaultSourceName | async}}</span>
  <span *ngIf="condition?.isCurrentlyLinked" class="fa fa-link linked-icon" pTooltip="{{ 'search.search-condition.condition-is-linked' | translate }}"></span>
  <span *ngIf="!condition?.isCurrentlyLinked && condition?.isCreatedViaLink" class="fa fa-unlink unlinked-icon" pTooltip="{{ 'search.search-condition.condition-created-via-link' | translate }}"></span>
</td> <!-- | translate -->
<td style="vertical-align: middle">{{condition.type | mdmTranslate : defaultSourceName : condition.attribute | async }}</td> <!--  | translate: condition.attribute -->
<td style="vertical-align: middle">
  <div class="btn-group" dropdown style="width: 6rem;">
    <button id="operator" type="button" title="{{ 'search.search-condition.tooltip-select-search-operator' | translate }}" class="btn btn-default btn-sm dropdown-toggle" dropdownToggle aria-haspopup="true" aria-expanded="false" [disabled]="disabled">
      {{getOperatorName(condition.operator)}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" *dropdownMenu>
      <li *ngFor="let op of getOperators()">
        <a class="dropdown-item" (click)="setOperator(op)">{{getOperatorName(op)}}</a>
      </li>
    </ul>
  </div>
</td>
<!-- <td style="vertical-align: middle">
  <span *ngIf="condition?.isCurrentlyLinked" class="fa fa-link" pTooltip="{{ 'search.search-condition.condition-is-linked' | translate }}"></span>
</td> -->
<td [ngSwitch]="condition.valueType">
  <ng-container *ngSwitchCase="'string'">
    <div [ngClass]="{'linked-container': condition?.isCurrentlyLinked}">
      <span *ngIf="condition?.isCurrentlyLinked" class="fa fa-link linked-icon" pTooltip="{{ 'search.search-condition.condition-is-linked' | translate }}"></span>
      <p-autoComplete #multi *ngIf="isHandlingMultipleValues"
        [(ngModel)]="condition.value"
        [suggestions]="displayedSuggestions"
        (completeMethod)="updateSuggestions($event)"
        [multiple]="true"
        [delay]="0"
        [size]="500"
        [scrollHeight]="'50vh'"
        placeholder="Wert"
        [disabled]="disabled"
        (keyup.enter)="onEnter($event, multi)"
        (onBlur)="onAutocompleteBlur($event, multi)"
        [style]="{ 'width': '100%'}"
        [inputStyle]="{ 'width': '100%' }"
        pTooltip="{{ 'search.search-condition.multi-value-input' | translate }}" tooltipPosition="top">
      </p-autoComplete>
    </div>
    <p-autoComplete #first *ngIf="!isHandlingMultipleValues"
      [(ngModel)]="stringValueStart"
      [suggestions]="displayedSuggestions"
      (completeMethod)="updateSuggestions($event)"
      [multiple]="false"
      [delay]="0"
      [size]="500"
      [scrollHeight]="'50vh'"
      placeholder="Wert"
      [disabled]="disabled"
      (keyup.enter)="onEnter($event, first)"
      (onBlur)="onAutocompleteBlur($event, first)"
      [style]="{ 'width': isBinaryOperator ? 'calc(50% - 1.5rem)' : '100%'}"
      [inputStyle]="{ 'width': '100%' }"
      pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top">
    </p-autoComplete>
    <ng-container *ngIf="isBinaryOperator">
      <span style="width: 3rem; text-align: center; display: inline-block;">{{'search.search-condition.and' | translate}}</span>
      <p-autoComplete #second
        [(ngModel)]="stringValueEnd"
        [suggestions]="displayedSuggestions"
        (completeMethod)="updateSuggestions($event)"
        [multiple]="false"
        [delay]="0"
        [size]="500"
        [scrollHeight]="'50vh'"
        placeholder="Wert"
        [disabled]="disabled"
        (keyup.enter)="onEnter($event, second)"
        (onBlur)="onAutocompleteBlur($event, second)"
        [style]="{ 'width': 'calc(50% - 1.5rem)'}"
        [inputStyle]="{ 'width': '100%' }"
        pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top">
      </p-autoComplete>
    </ng-container>
  </ng-container>

  <ng-container *ngSwitchCase="'date'" >
    <p-calendar
      (ngModelChange)="setDateValue($event, 0)" 
      [ngModel]="dateValue" 
      dateFormat="dd.mm.yy" 
      showTime="true" 
      hourFormat="24" 
      hideOnDateTimeSelect="true" 
      [showIcon]="true" 
      [disabled]="disabled"
      [style]="{ 'width': isBinaryOperator ? 'calc(50% - 1.5rem)' : '100%' }"
      [inputStyle]="{ 'width': 'calc(100% - 2.2rem)' }"
      pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top">
    </p-calendar>
    <ng-container *ngIf="isBinaryOperator">
      <span style="width: 3rem; text-align: center; display: inline-block;">{{'search.search-condition.and' | translate}}</span>
      <p-calendar *ngSwitchCase="'date'" 
        (ngModelChange)="setDateValue($event, 1)" 
        [ngModel]="dateValueEnd" 
        dateFormat="dd.mm.yy" 
        showTime="true" 
        hourFormat="24" 
        hideOnDateTimeSelect="true" 
        [showIcon]="true" 
        [disabled]="disabled"
        [style]="{ 'width': 'calc(50% - 1.5rem)' }"
        [inputStyle]="{ 'width': 'calc(100% - 2.2rem)' }"
        pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top">
      </p-calendar>
    </ng-container>
  </ng-container>

  <ng-container *ngSwitchDefault>
    <input pInputText type="text" placeholder="Wert"
      [disabled]="disabled"
      [(ngModel)]="stringValueStart"
      (input)="setValue($event)"
      pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top"
      [ngStyle]="{ 'width': isBinaryOperator ? 'calc(50% - 1.5rem)' : '100%' }">
    <ng-container *ngIf="isBinaryOperator">
      <span style="width: 3rem; text-align: center; display: inline-block;">{{'search.search-condition.and' | translate}}</span>
      <input pInputText type="text" placeholder="Wert"
        [disabled]="disabled"
        [(ngModel)]="stringValueEnd"
        (input)="setValue($event)"
        pTooltip="{{ 'search.search-condition.single-value-input' | translate }}" tooltipPosition="top"
        [ngStyle]="{'width':'calc(50% - 1.5rem)'}">
    </ng-container>
  </ng-container>
</td>
<td style="vertical-align: middle"><button id="remove" type="button" class="btn btn-default btn-sm fa fa-times remove" (click)="remove()" [disabled]="disabled"></button></td>