org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/tableview/view.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
 *
 ********************************************************************************-->

<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);
  }
</style>

<div class="btn-group" dropdown>
  <button id="view" title="{{ 'tableview.view.tooltip-select-view' | translate }}" dropdownToggle type="button" class="btn btn-mdm dropdown-toggle" aria-haspopup="true" aria-expanded="false">
    {{selectedView?.name}} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" style="height: auto; max-height: 200px; overflow-x: hidden;" *dropdownMenu>
    <div *ngFor="let groupedView of groupedViews" class="container-fluid">
      <li class="dropdown-header" style="padding-left: 0pt;"> {{groupedView.label}} </li>
      <li *ngFor="let view of groupedView.view">
        <a class="dropdown-item" style="color:black; cursor: pointer;" (click)="selectView(view)">{{view.name}}</a>
      </li>
    </div>
  </ul>
</div>
<button type="button" class="btn btn-mdm" (click)="newView($event)" title="{{ 'tableview.view.tooltip-create-new-view' | translate }}"><span class="fa fa-plus"></span></button>
<button type="button" class="btn btn-mdm" (click)="editSelectedView($event)" title="{{ 'tableview.view.tooltip-edit-view' | translate }}"><span class="fa fa-pencil-square-o"></span></button>
<button type="button" class="btn btn-mdm" (click)="showSaveModal($event)" title="{{ 'tableview.view.tooltip-save-view' | translate }}"><span class="fa fa-floppy-o"></span></button>
<button type="button" class="btn btn-mdm" (click)="deleteView($event)" title="{{ 'tableview.view.tooltip-delete-view' | translate }}"><span class="fa fa-times"></span></button>

<edit-view></edit-view>
<overwrite-dialog></overwrite-dialog>

<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">{{ 'tableview.view.title-save-view-as' | translate }}:</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" *ngIf="userViewNames?.length > 0">
            <p-dataTable
              [value]="userViewNames"
              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="{{ 'tableview.view.existing-view-names' | translate }}">
                <ng-template pTemplate="body" let-col let-row="rowData" >
                  {{row}}
                </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="Ansicht-Name" [value]="viewName" (input)="viewName = $event.target.value" (keyup.enter)="saveView($event)" required>
            </div>
            <div class="col-md-2" style="padding: 0;">
                <button type="button" class="btn btn-default pull-right" (click)="saveView($event)" [disabled]="!viewName" title="{{ getSaveBtnTitle() | translate }}">
                  <span class="fa fa-floppy-o"></span> {{ 'tableview.view.btn-save' | translate }}
                </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>