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 *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
  33       <ng-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             *ngIf="isSearchable(col.name)"
  42             type='text'
  43             class="datattable-input-filter"
  44             placeholder='Filter column...'
  45             (keyup)='updateColumnFilter($event, col.prop)'
  46         />
  47       </ng-template>
  48     </ngx-datatable-column>
  49
  50     <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
  51       <ng-template ngx-datatable-header-template>
  52         <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
  53       </ng-template>
  54       <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
  55       </ng-template>
  56     </ngx-datatable-column>
  57
  58     <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
  59       <ng-template ngx-datatable-header-template>
  60         <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
  61       </ng-template>
  62       <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
  63       </ng-template>
  64     </ngx-datatable-column>
  65   </ngx-datatable>
  66 </div>