<!--******************************************************************************** | |
* 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> | |
.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; | |
} | |
>>> .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"> | |
<button type="button" class="close" (click)="closeDialog()" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
<h4 class="modal-title">{{LblViewEditor}}</h4> | |
</div> | |
<div class="modal-body"> | |
<div class="container-fluid"> | |
<div class="row"> | |
<div class="col-md-4" style="min-height: 50vh; max-height: 72vh;"> | |
<input [(ngModel)]="selectedAttribute" | |
[typeahead]="typeAheadValues" | |
(typeaheadOnSelect)="typeaheadOnSelect($event)" | |
typeaheadOptionField="label" | |
typeaheadGroupField="group" | |
typeaheadOptionsLimit="15" | |
placeholder="Suchtext eingeben" | |
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="control-label" style="padding: 8px 0 15px 0;">{{LblSelectedAttributes}}</label> | |
<div *ngIf="currentView.columns.length === 0" style="text-align: center;"> | |
Keine Attribute ausgewählt. | |
</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="glyphicon glyphicon-menu-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="glyphicon glyphicon-menu-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="glyphicon" [ngClass]="{'glyphicon-sort': isNone(col), 'glyphicon-sort-by-alphabet-alt': isDesc(col), 'glyphicon-sort-by-alphabet': isAsc(col)}" style="cursor: pointer;" (click)="toggleSort(col)"></span> | |
</td> | |
<td style="width: 30px; text-align: center; vertical-align: middle;"> | |
<span class="glyphicon glyphicon-remove" [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="glyphicon glyphicon-ok"></span> {{LblApplyChanges}} | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |