org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/search/mdm-search.component.html

<!--********************************************************************************
 * Copyright (c) 2015-2018 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
 *
 ********************************************************************************-->


<style>
   :host /deep/ .dropdown {
    width: 200px;
  }

   :host /deep/ .dropdown-toggle {
    overflow: hidden;
    padding-right: 24px/* Optional for caret */
    ;
    text-align: left;
    text-overflow: ellipsis;
    width: 100%;
  }
  /* Optional for caret */

   :host /deep/ .dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
  }

  #searchtext .form-control, #searchtext .btn {
      border-color: #000000;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0,.6);
  }
  :host /deep/ #envs .ui-multiselect {
    padding: 0;
    width: 200px;
    height: 34px;
  }
  :host /deep/ #envs .ui-multiselect .ui-multiselect-label {
    font-weight: normal;
    padding: 6px 2em 4px 0.5em;
    margin: 0;
  }

  :host /deep/ #envs .ui-multiselect:not(.ui-state-disabled):hover {
    background-color: #e6e6e6;
    border-color: #adadad;
  }
  :host /deep/ #envs .ui-multiselect:not(.ui-state-disabled):hover .ui-multiselect-trigger {
    background-color: #e6e6e6;
  }

</style>
<form class="form-inline" style="margin-bottom: 10px; width:100% !important;">
  <div class="form-group">
    <label for="search-source" class="control-label">{{LblFilter}}</label>
    <div class="btn-group" dropdown>
      <button id="search-source" title="{{TtlSelectFilter}}" type="button" class="btn btn-default dropdown-toggle" dropdownToggle aria-haspopup="true" aria-expanded="false">
        {{currentFilter.name}} <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" *dropdownMenu>
        <li *ngFor="let filter of filters">
          <a class="dropdown-item" (click)="selectFilter(filter)">{{filter.name}}</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="form-group">
    <label for="search-source" class="control-label">{{LblSource}}</label>
    <p-multiSelect name="envs" id="envs" [options]="dropdownModel" [(ngModel)]="selectedEnvs" (onChange)="selectedEnvironmentsChanged()" title="{{TtlSelectSource}}" class="btn-group dropdown"></p-multiSelect>
  </div>
  <div class="form-group">
    <label for="search-resulttype" class="control-label">{{LblResultType}}</label>
    <div class="btn-group" dropdown>
      <button id="search-resulttype" title="{{TtlSelectResultType}}" type="button" class="btn btn-default dropdown-toggle" dropdownToggle aria-haspopup="true" aria-expanded="false">
        {{getSearchDefinition(currentFilter.resultType)?.label}} <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" *dropdownMenu>
        <li *ngFor="let def of definitions" role="menuitem">
          <a class="dropdown-item" (click)="selectResultType(def)">{{def.label}}</a>
        </li>
      </ul>
    </div>
  </div>
</form>

<div class="row" style="margin-bottom: 10px;">
  <div class="col-lg-2"></div>
  <div class="col-lg-8">
    <div class="input-group" id="searchtext" >
      <input type="text" class="form-control" name="searchText" placeholder="Suchtext eingeben" [(ngModel)]="currentFilter.fulltextQuery" (keyup.enter)="onSearch()" aria-describedby="basic-addon1" style="width:100%"
      title="M&ouml;gliche Operatoren:
        + steht f&uuml;r einen UND Operator
        | steht f&uuml;r einen ODER Operator
        - negiert einen einzelnen Term
        &quot; fasst einen Menge von Termen zu einer Phrase zusammen
        * am Ende eines Suchterms beschreibt eine Pr&auml;fixsuche
        ( und ) beschreibt die Operatorpr&auml;ferenz
        ~N nach einem Wort beschreibt den Editierabstand (Unsch&auml;rfe)
        ~N nach einer Phrase beschreibt den Wortabstand
Wenn nach einem der Spezialsymbole gesucht werden soll, m&uuml;ssen diese mit \ escaped werden.">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" (click)="onSearch()">{{LblSearch}}</button>
      </span>
    </div>
  </div>
  <div class="col-lg-2"></div>
</div>

<accordion>
  <accordion-group id="advancedSearch" [isOpen]="isAdvancedSearchOpen" #advancedSearch [ngClass]="{'greyed': !isAdvancedSearchActive}">
    <div accordion-heading class="thinheader">
      <div class="row">
        <div class="col-xs-9">
          <div class="pull-left">
            <input type="checkbox" [(ngModel)]="isAdvancedSearchActive" (click)="onCheckBoxClick($event)" title="{{getAdvancedSearchCbxTitle()}}"/> &nbsp;{{LblAdvancedSearch}} &nbsp;&nbsp;
            <button type="button" title="{{TtlNewSearchFields}}" class="btn btn-default" (click)="showSearchFieldsEditor($event)" [disabled]=!isAdvancedSearchActive><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" title="{{TtlEditSearchFields}}" class="btn btn-default" (click)="showSearchFieldsEditor($event,currentFilter.conditions)" [disabled]=!isAdvancedSearchActive><span class="glyphicon glyphicon-edit"></span></button>
            <button type="button" class="btn btn-default" (click)="showSaveModal($event)" title="{{TtlSaveSearchFilter}}" [disabled]=!isAdvancedSearchActive><span class="fa fa-floppy-o"></span></button>
            <button type="button" class="btn btn-default" (click)="deleteFilter($event)" title="{{TtlDeleteFilter}}"><span class="glyphicon glyphicon-remove"></span></button>
          </div>
        </div>
        <div class="col-xs-3 pull-right">
          <div class="pull-right">
            <button type="button" class="btn btn-default" (click)="resetConditions($event)" title="{{TtlResetSearchConditions}}" [disabled]=!isAdvancedSearchActive><span class="glyphicon glyphicon-erase"></span></button>
            <span class="glyphicon" style="color: #333 !important; padding-left: 15px;" [ngClass]="{'glyphicon-chevron-down': advancedSearch?.isOpen, 'glyphicon-chevron-right': !advancedSearch?.isOpen}"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div *ngIf="layout.getSourceNames().length === 0" style="text-align: center; margin-bottom: 5px;">
            Keine Suchattribute ausgewählt.
          </div>
          <div *ngFor="let env of layout.getSourceNames()">
            <div *ngIf="layout.getConditions(env).length > 0">
              <div style="font-weight: bold;" *ngIf="mapSourceNameToName(env) === 'Global'" title="Globale Suchattribute sind Attribute, die in allen ausgewählten Datenquellen vorhanden sind. Global Suchattribute werden nur einmal dargestellt und die definierte Bedingung wird in allen Datenquellen angewendet.">
                Globale Suchattribute
              </div>
              <div style="font-weight: bold;" *ngIf="mapSourceNameToName(env) !== 'Global'"  title="Suchattribute, die nicht in allen Datenquellen verfügbar sind, sondern nur in der aktuellen Datenquelle.">
                Suchattribute aus {{mapSourceNameToName(env)}}
              </div>
              <table class="table table-bordered searchdefinition">
                <colgroup>
                  <col style="width: 17%;">
                  <col style="width: 17%;">
                  <col style="width: 5%;">
                  <col style="width: 58%;">
                  <col style="width: 3%;">
                </colgroup>
                <tr search-condition class="condition" *ngFor="let condition of layout.getConditions(env)"
                    [env]="env"
                    [condition]="condition"
                    [disabled]="!isAdvancedSearchActive"
                    [selectedEnvs]="selectedEnvironments"
                    (onRemove)="removeCondition($event)">
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </accordion-group>
  <accordion-group  id="searchResults" [isOpen]="isSearchResultsOpen" #searchResults>
    <div accordion-heading class="thinheader">
      <div class="row">
        <div class="col-xs-9">
          <div class="pull-left">
            {{LblResults}} &nbsp;&nbsp;
            <mdm-view (click)="onViewClick($event)"></mdm-view>
          </div>
        </div>
        <div class="col-xs-3 pull-right">
          <div class="pull-right">
            <span class="badge">{{results?.rows.length}}</span>&nbsp;
            <button type="button" class="btn btn-default" (click)="clearResultlist($event)" title="{{TtlClearSearchResults}}"><span class="glyphicon glyphicon-erase"></span></button>
            <button type="button" class="btn btn-default" title="{{TtlSelectionToBasket}}" (click)="selected2Basket($event)">
              <span class="glyphicon glyphicon-shopping-cart" style="color:#DADADA; margin-right: -12px;"></span>
              <span class="glyphicon glyphicon-shopping-cart" style="color:#A8A4A4; margin-right: -12px;"></span>
              <span class="glyphicon glyphicon-shopping-cart"></span>
            </button>
            <span class="glyphicon" [ngClass]="{'glyphicon-chevron-down': searchResults?.isOpen, 'glyphicon-chevron-right': !searchResults?.isOpen}" style="padding-left: 15px;"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
          <mdm-tableview
            [results]="results"
            [view]="viewComponent.selectedView"
            isShopable="true"
            [menuItems]="contextMenuItems"
            [selectedEnvs]="selectedEnvironments"
            [searchAttributes]="allSearchAttributesForCurrentResultType"
            [environments]="environments"
            [loading]="loading">
          </mdm-tableview>
      </div>
    </div>
  </accordion-group>
</accordion>

<div bsModal #lgSaveModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="SelectSearchComponents" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="childSaveModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{LblSaveFilterAs}}:</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" *ngIf="filters?.length > 0">
            <p-dataTable
              [value]="filters"
              resizableColumns="false"
              [reorderableColumns]="false"
              [rows]="10"
              [paginator]="true"
              [pageLinks]="3"
              [rowsPerPageOptions]="[10,20,50]"
              [(selection)]="selectedRow"
              (onRowClick)="onRowSelect($event)"
              (onRowSelect)="onRowSelect($event)">
              <p-column [style]="{'width':'30px'}" selectionMode="single"></p-column>
              <p-column header="{{LblExistingFilterNames}}">
                <template pTemplate="body" let-col let-row="rowData" >
                  {{row.name}}
                </template>
              </p-column>
            </p-dataTable>
          </div>
          <div class="row" style="margin-top: 15px;">
            <div class="col-md-10" style="padding-left: 0;">
            <input type="text" class="form-control" placeholder="Filtername" [(value)]="filterName" (input)="filterName = $event.target.value" (keyup.enter)="saveFilter($event)">
            </div>
            <div class="col-md-2" style="padding: 0;">
              <form class="form-inline">
                <button type="button" class="btn btn-default pull-right" (click)="saveFilter($event)" [disabled]="!filterName" title="{{getSaveFilterBtnTitle()}}">
                  <span class="fa fa-floppy-o"></span> {{LblSave}}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<edit-searchFields [searchAttributes]="allSearchAttributesForCurrentResultType" [environments]="selectedEnvironments"></edit-searchFields>
<overwrite-dialog></overwrite-dialog>