| <!--******************************************************************************** |
| * 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 |
| * |
| ********************************************************************************--> |
| |
| <style> |
| #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); |
| } |
| p-togglebutton >>> .ui-button { |
| font-size: 14px; |
| margin: 0 3px; |
| color: #6c757d; |
| background-color: transparent; |
| background-image: none; |
| border-color: #6c757d; |
| height: 100%; |
| width: 2.4rem; |
| margin-top: -2px; |
| } |
| p-togglebutton ::ng-deep .ui-button-icon-only .ui-button-icon-left { |
| margin-top: -.45em; |
| } |
| p-togglebutton >>> .ui-button.ui-state-active { |
| /* color: #333333!important; */ |
| color: #fff!important; |
| background-color: #a0a0a0; |
| } |
| |
| p-togglebutton >>> .ui-button.ui-state-active >>> .ui-button-icon-left { |
| /* color: #333333!important; */ |
| color: #fff!important; |
| background-color: #a0a0a0; |
| } |
| |
| p-togglebutton >>> .ui-button:not(.ui-state-active).ui-state-focus { |
| border-color: #6c757d; |
| background-color: transparent!important; |
| } |
| |
| p-togglebutton >>> .ui-button:not(.ui-state-active).ui-state-focus >>> .ui-button-icon-left { |
| color: #6c757d!important; |
| } |
| |
| /* :host /deep/ .ui-multiselect .ui-multiselect-label { |
| padding: .25em 2em .25em .25em; |
| } */ |
| </style> |
| |
| <div class="container" style="padding: 0;"> |
| <div class="row"> |
| <div class="col-sm"> |
| <label for="search-source" class="col-form-label">{{ 'search.mdm-search.lbl-search-filter' | translate }}</label> |
| <p-dropdown [options]="filters" optionLabel="name" (onChange)="onFilterChange($event)" [style]="{'width': '100%'}"></p-dropdown> |
| </div> |
| <div class="col-sm"> |
| <label for="search-source" class="col-form-label">{{ 'search.mdm-search.lbl-source' | translate }}</label> |
| <p-multiSelect [options]="dropdownModel" maxSelectedLabels=2 [(ngModel)]="selectedEnvs" (onChange)="selectedEnvironmentsChanged()" title="{{ 'search.mdm-search.tooltip-select-sources' | translate }}" [style]="{'width': '100%'}"></p-multiSelect> |
| </div> |
| <div class="col-sm"> |
| <label for="search-resulttype" class="col-form-label">{{ 'search.mdm-search.lbl-result-type' | translate }}</label> |
| <p-dropdown [options]="definitions" (onChange)="onResultTypeChanged($event)" [style]="{'width': '100%'}"> |
| <ng-template let-option pTemplate="selectedItem"> |
| <div style="display: flex; align-items: center;"> |
| <img [src]="option?.type | typeIcon" style="padding-right: .5rem;"/> |
| <span>{{option?.type | mdmTranslate : (environments?.length > 0 ? environments[0].sourceName : undefined) | async}}</span> |
| </div> |
| </ng-template> |
| <ng-template let-option pTemplate="item"> |
| <div style="display: flex; align-items: center;"> |
| <img [src]="option?.type | typeIcon" style="padding-right: .5rem;"/> |
| <span>{{option?.type | mdmTranslate: (environments?.length > 0 ? environments[0].sourceName : undefined) | async}}</span> |
| </div> |
| </ng-template> |
| </p-dropdown> |
| </div> |
| </div> |
| <div class="row" style="margin-top: 5px; margin-bottom: 10px;"> |
| <div class="col-sm input-group" id="searchtext" style="width:100%"> |
| <input type="text" class="form-control" name="searchText" placeholder="{{ 'search.mdm-search.enter-search-text' | translate }}" [(ngModel)]="currentFilter.fulltextQuery" (keyup.enter)="onSearch()" aria-describedby="basic-addon1" |
| title="{{ 'search.mdm-search.tooltip-search-text' | translate }}"> |
| <div class="input-group-append"> |
| <button type="button" class="btn btn-mdm-no-margin" (click)="onSearch()">{{ 'search.mdm-search.btn-search' | translate }}</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <accordion> |
| <accordion-group id="advancedSearch" [isOpen]="isAdvancedSearchOpen" #advancedSearch [ngClass]="{'greyed': !isAdvancedSearchActive}"> |
| <div accordion-heading class="thinheader container-fluid"> |
| <div class="row"> |
| <div class="col text-left"> |
| <input type="checkbox" [(ngModel)]="isAdvancedSearchActive" (click)="onCheckBoxClick($event)" title="{{ getAdvancedSearchCbxTitle() | translate }}"/> {{ 'search.mdm-search.lbl-advanced-search' | translate }} |
| <button type="button" title="{{ 'search.mdm-search.tooltip-create-new-search-filter' | translate }}" class="btn btn-mdm" (click)="showSearchFieldsEditor($event)" [disabled]=!isAdvancedSearchActive><span class="fa fa-plus"></span></button> |
| <button type="button" title="{{ 'search.mdm-search.tooltip-edit-search-filter' | translate }}" class="btn btn-mdm" (click)="showSearchFieldsEditor($event,currentFilter.conditions)" [disabled]=!isAdvancedSearchActive><span class="fa fa-pencil-square-o"></span></button> |
| <button type="button" class="btn btn-mdm" (click)="showSaveModal($event)" title="{{ 'search.mdm-search.tooltip-save-search-filter' | translate }}" [disabled]=!isAdvancedSearchActive><span class="fa fa-floppy-o"></span></button> |
| <button type="button" class="btn btn-mdm" (click)="deleteFilter($event)" title="{{ 'search.mdm-search.tooltip-delete-search-filter' | translate }}"><span class="fa fa-times"></span></button> |
| </div> |
| <div class="col text-right"> |
| <p-toggleButton [(ngModel)]="isSearchLinkedToNavigator" [onIcon]="'fa fa-link'" offIcon="fa fa-unlink" onLabel="" offLabel="" (onChange)="onToggleSearchLinkedToNavigator($event)" |
| [title]="(isSearchLinkedToNavigator ? 'search.mdm-search.tooltip-unlink-search-attributes-from-navigator' : 'search.mdm-search.tooltip-link-search-attributes-to-navigator')| translate"> |
| </p-toggleButton> |
| <button type="button" class="btn btn-mdm" (click)="resetConditions($event)" title="{{ 'search.mdm-search.tooltip-reset-search-conditions' | translate }}" [disabled]=!isAdvancedSearchActive><span class="fa fa-eraser"></span></button> |
| <span class="fa" style="color: #333 !important; padding-left: 15px;" [ngClass]="{'fa-chevron-down': advancedSearch?.isOpen, 'fa-chevron-right': !advancedSearch?.isOpen}"></span> |
| </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;"> |
| {{ 'search.mdm-search.no-search-attributes-selected' | translate }} |
| </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="{{ 'search.mdm-search.tooltip-global-search-attributes' | translate }}"> |
| {{ 'search.mdm-search.global-search-attributes' | translate }} |
| </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."> |
| {{ 'search.mdm-search.search-attributes-from' | translate }} {{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" |
| [defaultSourceName]="env === 'Global' ? environments[0].sourceName : env" |
| (onRemove)="removeCondition($event)"> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </accordion-group> |
| <accordion-group id="searchResults" [isOpen]="isSearchResultsOpen" #searchResults> |
| <div accordion-heading class="thinheader container-fluid"> |
| <div class="row"> |
| <div class="col text-left"> |
| {{ 'search.mdm-search.results' | translate }} |
| <mdm-view (click)="onViewClick($event)"></mdm-view> |
| </div> |
| <div class="col text-right"> |
| <span class="badge">{{results?.rows.length}}</span> |
| <button type="button" class="btn btn-mdm" (click)="clearResultlist($event)" title="{{ 'search.mdm-search.tooltip-clear-search-results' | translate }}"><span class="fa fa-eraser"></span></button> |
| <button type="button" class="btn btn-mdm" title="{{ 'search.mdm-search.tooltip-add-selection-to-shopping-basket' | translate }}" (click)="selected2Basket($event)"> |
| <span class="fa fa-shopping-cart" style="color:#DADADA; margin-right: -12px;"></span> |
| <span class="fa fa-shopping-cart" style="color:#A8A4A4; margin-right: -12px;"></span> |
| <span class="fa fa-shopping-cart"></span> |
| </button> |
| <span class="fa" [ngClass]="{'fa-chevron-down': searchResults?.isOpen, 'fa-chevron-right': !searchResults?.isOpen}" style="padding-left: 15px;"></span> |
| </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"> |
| <h4 class="modal-title">{{ 'search.mdm-search.title-save-search-filter-as' | translate }}:</h4> |
| <button type="button" class="close" (click)="childSaveModal.hide()" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| </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}}"> |
| <ng-template pTemplate="body" let-col let-row="rowData" > |
| {{row.name}} |
| </ng-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="{{ 'search.mdm-search.search-filter-name' | translate }}" [(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-mdm pull-right" (click)="saveFilter($event)" [disabled]="!filterName" title="{{ getSaveFilterBtnTitle() | translate }}"> |
| <span class="fa fa-floppy-o"></span> {{ 'search.mdm-search.btn-save' | translate }} |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <edit-searchFields [searchAttributes]="allSearchAttributesForCurrentResultType" [environments]="selectedEnvironments"></edit-searchFields> |
| <overwrite-dialog></overwrite-dialog> |