catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. 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 <div class="workspace-attributes">
  17
  18     <div class="action-bar-wrapper">
  19         <svg-icon-label
  20                 *ngIf="!(this.isViewOnly$ | async)"
  21                 class="add-attr-icon"
  22                 [name]="'plus'"
  23                 [mode]="'primary'"
  24                 [size]="'medium'"
  25                 [label]="'Add'"
  26                 [labelPlacement]="'right'"
  27                 [labelClassName]="'externalActionLabel'"
  28                 (click)="onAddAttribute()">
  29         </svg-icon-label>
  30     </div>
  31
  32     <ngx-datatable
  33             columnMode="flex"
  34             [footerHeight]="0"
  35             [limit]="50"
  36             [headerHeight]="40"
  37             [rowHeight]="35"
  38             [rows]="attributes"
  39             #componentAttributesTable
  40             (activate)="onExpandRow($event)">
  41
  42         <ngx-datatable-row-detail [rowHeight]="80">
  43             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
  44                 <div>{{row.description}}</div>
  45             </ng-template>
  46         </ngx-datatable-row-detail>
  47
  48         <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="2">
  49
  50             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
  51                 <div class="expand-collapse-cell">
  52                     <svg-icon [clickable]="true" class="expand-collapse-icon"
  53                               [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  54                               [size]="'medium'"></svg-icon>
  55                     <span>{{ row.name }}</span>
  56                 </div>
  57             </ng-template>
  58
  59         </ngx-datatable-column>
  60
  61         <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="1">
  62             <ng-template ngx-datatable-cell-template let-row="row">
  63                 {{row.type}}
  64             </ng-template>
  65         </ngx-datatable-column>
  66
  67         <ngx-datatable-column [resizeable]="false" name="Default Value" [flexGrow]="3">
  68             <ng-template ngx-datatable-cell-template let-row="row">
  69                 {{row.defaultValue}}
  70             </ng-template>
  71         </ngx-datatable-column>
  72
  73         <ngx-datatable-column *ngIf="!(this.isViewOnly$ | async)" [resizeable]="false" name="Action" [flexGrow]="1">
  74             <ng-template ngx-datatable-cell-template let-row="row" let-rowIndex="rowIndex">
  75                 <div class="actionColumn">
  76                     <svg-icon [clickable]="true"
  77                               [mode]="'primary2'"
  78                               [name]="'edit-o'"
  79                               [size]="'medium'"
  80                               (click)="onEditAttribute($event, row)">
  81                     </svg-icon>
  82                     <svg-icon [clickable]="true"
  83                               [mode]="'primary2'"
  84                               [name]="'trash-o'"
  85                               (click)="onDeleteAttribute($event, row)"
  86                               [size]="'medium'">
  87                     </svg-icon>
  88                 </div>
  89             </ng-template>
  90         </ngx-datatable-column>
  91
  92     </ngx-datatable>
  93 </div>