| <!--******************************************************************************** |
| * 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> |
| .modal-body >>> .ui-tree .ui-tree-container { |
| margin: 0 0 4px 0 !important; |
| width: 100%; |
| overflow: visible; |
| } |
| |
| .modal-body >>> .ui-tree { |
| min-height: 50vh !important; |
| max-height: 72vh !important; |
| overflow: auto; |
| } |
| |
| .modal-body >>> .ui-tree .ui-treenode .ui-treenode-content .ui-treenode-label { |
| padding-right: .75em; |
| } |
| |
| .modal-body { |
| font-size: 14px; |
| } |
| |
| .auto-width-typeahead >>> typeahead-container { |
| width: auto!important; |
| } |
| |
| >>> .ui-growl {z-index: 999999 !important;} |
| </style> |
| |
| <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="SelectSearchComponents" aria-hidden="true"> |
| <div class="modal-dialog modal-lg"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h4 class="modal-title">{{ 'tableview.editview.title-view-editor' | translate }}</h4> |
| <button type="button" class="close" (click)="closeDialog()" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| </div> |
| <div class="modal-body"> |
| <div class="container-fluid"> |
| <div class="row"> |
| <div class="col-md-4 auto-width-typeahead" style="min-height: 50vh; max-height: 72vh;"> |
| <input [(ngModel)]="selectedAttribute" |
| [typeahead]="typeAheadValues" |
| (typeaheadOnSelect)="typeaheadOnSelect($event)" |
| typeaheadOptionField="label" |
| typeaheadGroupField="group" |
| typeaheadOptionsLimit="15" |
| placeholder="{{ 'tableview.editview.enter-search-text' | translate }}" |
| class="form-control" |
| style="margin-bottom: 15px;"> |
| <searchattribute-tree [searchAttributes]="searchAttributes" [environments]="environments"></searchattribute-tree> |
| </div> |
| <div class="col-md-8" style="min-height: 50vh; max-height: 72vh; overflow-y:auto;"> |
| <label for="search-source" class="col-form-label" style="padding: 8px 0 15px 0;">{{ 'tableview.editview.lbl-selected-attributes' | translate }}</label> |
| <div *ngIf="currentView.columns.length === 0" style="text-align: center;"> |
| {{ 'tableview.editview.no-attributes-selected' | translate }} |
| </div> |
| <table class="table table-bordered" style="padding: 0; overflow-y:auto; table-layout: fixed;"> |
| <tr *ngFor="let col of currentView.columns"> |
| <td style="width: 50%;" > |
| {{col.type}} |
| </td> |
| <td style="width: 50%;" > |
| {{col.name}} |
| </td> |
| <td style="width: 30px; text-align: center; vertical-align: middle;"> |
| <span class="fa fa-chevron-up" [ngStyle]="{'visibility': isFirst(col) ? 'hidden': 'visible'}" style="cursor: pointer; margin-bottom: 0;" (click)="moveUp(col)"></span> |
| </td> |
| <td style="width: 30px; text-align: center; vertical-align: middle;"> |
| <span class="fa fa-chevron-down" [ngStyle]="{'visibility': isLast(col)? 'hidden': 'visible'}" style="cursor: pointer;" (click)="moveDown(col)"></span> |
| </td> |
| <td style="width: 30px; text-align: center; vertical-align: middle;"> |
| <span class="fa" [ngClass]="{'glyphicon-sort': isNone(col), 'fa-sort-alpha-desc': isDesc(col), 'fa-sort-alpha-asc': isAsc(col)}" style="cursor: pointer;" (click)="toggleSort(col)"></span> |
| </td> |
| <td style="width: 30px; text-align: center; vertical-align: middle;"> |
| <span class="fa fa-times" [ngClass]="" style="cursor: pointer;" (click)="remove(col)"></span> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| <div class="row" style="margin-top: 15px;"> |
| <div class="col-md-12"> |
| <button type="button" class="btn btn-default pull-right" (click)="applyChanges()"> |
| <span class="fa fa-check"></span> {{ 'tableview.editview.btn-apply-changes' | translate }} |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |