catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html

   1 <!--
   2   ~ Copyright (C) 2019 Nokia. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <div>
  18   <ngx-datatable
  19       class="material"
  20       *ngIf="ready"
  21       [rows]="rows"
  22       [columns]="columns"
  23       [columnMode]="'force'"
  24       [headerHeight]="125"
  25       [scrollbarV]="true"
  26       [scrollbarH]="true"
  27       [footerHeight]="0"
  28       [loadingIndicator]="isLoading"
  29       [rowHeight]="200"
  30       [reorderable]="false"
  31   >
  32     <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns">
  33       <template let-column="column" height="100" ngx-datatable-header-template>
  34             <span class="datatable-column-span">
  35               <b>{{col.name}}</b>
  36               <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
  37                    class="delete-icon" (click)="deleteColumn(col)">⛌</div>
  38             </span>
  39         <br/>
  40         <input
  41             type='text'
  42             class="datattable-input-filter"
  43             placeholder='Filter column...'
  44             (keyup)='updateColumnFilter($event, col.prop)'
  45         />
  46       </template>
  47     </ngx-datatable-column>
  48
  49     <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
  50       <template ngx-datatable-header-template>
  51         <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
  52       </template>
  53       <template class="datatable-white-body-cell" ngx-datatable-cell-template>
  54       </template>
  55     </ngx-datatable-column>
  56
  57     <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
  58       <template ngx-datatable-header-template>
  59         <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
  60       </template>
  61       <template class="datatable-white-body-cell" ngx-datatable-cell-template>
  62       </template>
  63     </ngx-datatable-column>
  64   </ngx-datatable>
  65 </div>