metron-interface/metron-alerts/src/app/alerts/configure-table/configure-table.component.html

<!--
  Licensed to the Apache Software
	Foundation (ASF) under one or more contributor license agreements. See the
	NOTICE file distributed with this work for additional information regarding
	copyright ownership. The ASF licenses this file to You under the Apache License,
	Version 2.0 (the "License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software distributed
	under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
	OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  the specific language governing permissions and limitations under the License.
  -->
<div class="metron-slider-pane-editable pb-0 d-flex flex-column load-right-to-left custom-dialog2x">

  <div class="container-fluid mb-3">
    <div class="d-flex pb-3">
      <div class="form-title font-weight-bold">Configure Table Columns</div>
      <i class="fa fa-times ml-auto close-button" aria-hidden="true" (click)="goBack()"></i>
    </div>
    <div class="input-group">
      <input class="input flex-fill" data-qe-id="filter-input" type="text" placeholder="Filter list of available fields" #columnFilterInput >
      <div class="input-group-append">
        <button class="btn btn-secondary btn-search-clear" data-qe-id="filter-reset" (click)="clearFilter()"></button>
      </div>
    </div>
  </div>

  <div class="container-fluid pt-0 table-config d-flex flex-wrap overflow-auto">

    <div class="d-flex w-100 justify-content-center align-items-center" *ngIf="!visibleColumns.length">
        <div class="spinner-border text-info" role="status"></div>
        <div class="pt-2"><small>Loading...</small></div>
    </div>

    <table data-qe-id="table-visible" class="configure-table table" *ngIf="visibleColumns.length">
      <thead>
        <tr>
          <th class="main-column" colspan=2> Visible </th>
          <th> Short Name </th>
          <th> Type  </th>
          <th> </th>
          <th> </th>
        </tr>
      </thead>
      <tbody [dragula]="'configure-table'">
        <tr class="background-tiber out-of-dragula">
          <td>
            <button class="btn btn-secondary btn-sm" disabled>remove</button>
          </td>
          <td>
            <span> Score </span>
          </td>
          <td> </td>
          <td> <span> STRING </span></td>
          <td> - </td>
          <td> - </td>
        </tr>
        <tr attr.data-index="{{ i }}" attr.data-qe-id="row-{{ i }}" *ngFor="let column of visibleColumns; let i = index" [ngClass]="{'background-tiber': column.selected}">
          <td>
            <button attr.data-qe-id="remove-btn-{{ i }}" (click)="onColumnRemoved(column)" class="btn btn-secondary btn-sm">remove</button>
          </td>
          <td #element>
            <span attr.data-qe-id="field-label-{{ i }}" [attr.title]="column.columnMetadata.name"> {{ column.columnMetadata.name | centerEllipses }} </span>
          </td>
          <td>
            <input class="input" placeholder="rename" [(ngModel)]="column.displayName">
          </td>
          <td>
            <span class="text-uppercase"> {{ column.columnMetadata.type }} </span>
          </td>
          <td>
            <button id="up-{{ column.columnMetadata.name }}"
                    class="up border-0 p-0"
                    name="Move up"
                    type="button"
                    #moveColUpBtn
                    aria-label="Move column up in display order"
                    (mouseup)="swapUp(i, $event)"
                    (keyup.enter)="swapUp(i, $event)"
                    (keyup.space)="swapUp(i, $event)"
                    [attr.disabled]="i === 0 ? true : null"
                    [ngClass]="{'disabled': i === 0}"></button>
          </td>
          <td>
            <button id="down-{{ column.columnMetadata.name }}"
                    class="down border-0 p-0"
                    name="Move down"
                    type="button"
                    aria-label="Move column down in display order"
                    (click)="swapDown(i)"
                    [attr.disabled]="i + 1 === visibleColumns.length ? true : null"
                    [ngClass]="{'disabled': i + 1 === visibleColumns.length}"></button>
          </td>
        </tr>
      </tbody>
    </table>

    <table data-qe-id="table-available" class="table" *ngIf="availableColumns.length">
      <thead>
        <tr>
          <th class="main-column" colspan=2> Available </th>
          <th> Type  </th>
        </tr>
      </thead>
      <tbody>
        <tr attr.data-qe-id="row-{{ i }}" *ngFor="let column of filteredColumns; let i = index" [ngClass]="{'background-tiber': column.selected}">
          <td>
            <button attr.data-qe-id="add-btn-{{ i }}" (click)="onColumnAdded(column)" class="btn btn-primary btn-sm">add</button>
          </td>
          <td #element>
            <span attr.data-qe-id="field-label-{{ i }}" [attr.title]="column.columnMetadata.name"> {{ column.columnMetadata.name | centerEllipses }} </span>
          </td>
          <td>
            <span class="text-uppercase"> {{ column.columnMetadata.type }} </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="container-fluid custom-metron-button-bar-2x">
    <button type="submit" data-qe-id="save-table-config" class="btn btn-all_ports" (click)="save()">SAVE</button>
    <button class="btn btn-mine_shaft_2" (click)="goBack()">CANCEL</button>
  </div>
</div>