Dynamic columns in GAB table

Possibility to add and remove new columns in GAB table.
Currently additional columns are not stored anywhere.

Change-Id: Idc204ef3da5be8f9509289461165e22d4c0068bf
Issue-ID: SDC-2229
Signed-off-by: Tomasz Golabek <tomasz.golabek@nokia.com>

1 files changed, 44 insertions, 29 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
index 1abd68db50..ad1ebcb094 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -15,36 +15,51 @@
   -->
 
 <div>
-    <ngx-datatable
-        class="material"
-        *ngIf="ready"
-        [rows]="rows"
-        [columns]="columns"
-        [columnMode]="'force'"
-        [headerHeight]="50"
-        [scrollbarV]="true"
-        [scrollbarH]="true"
-        [footerHeight]="0"
-        [loadingIndicator]="isLoading"
-        [rowHeight]="200"
-        [reorderable]="false"
-        [selected]="selectedRows"
-        [selectionType]="'cell'"
-        >
-        <ngx-datatable-column [prop]="col.prop" *ngFor="let col of columns">
-            <template let-column="column" ngx-datatable-header-template>
-            <span style="height:10px">
+  <ngx-datatable
+      class="material"
+      *ngIf="ready"
+      [rows]="rows"
+      [columns]="columns"
+      [columnMode]="'force'"
+      [headerHeight]="125"
+      [scrollbarV]="true"
+      [scrollbarH]="true"
+      [footerHeight]="0"
+      [loadingIndicator]="isLoading"
+      [rowHeight]="200"
+      [reorderable]="false"
+  >
+    <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns">
+      <template let-column="column" height="100" ngx-datatable-header-template>
+            <span class="datatable-column-span">
               <b>{{col.name}}</b>
+              <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
+                   class="delete-icon" (click)="deleteColumn(col)">⛌</div>
             </span>
-                <br/>
-                <input
-                    type='text'
-                    class="datatable-input-filter"
-                    placeholder='Filter column...'
-                    (keyup)='updateColumnFilter($event, col.prop)'
-                />
-            </template>
-        </ngx-datatable-column>
+        <br/>
+        <input
+            type='text'
+            class="datattable-input-filter"
+            placeholder='Filter column...'
+            (keyup)='updateColumnFilter($event, col.prop)'
+        />
+      </template>
+    </ngx-datatable-column>
 
-    </ngx-datatable>
+    <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
+      <template ngx-datatable-header-template>
+        <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
+      </template>
+      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </template>
+    </ngx-datatable-column>
+
+    <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
+      <template ngx-datatable-header-template>
+        <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
+      </template>
+      <template class="datatable-white-body-cell" ngx-datatable-cell-template>
+      </template>
+    </ngx-datatable-column>
+  </ngx-datatable>
 </div>
\ No newline at end of file