Add pagination in Generic Artifact Browser

Fix header(sticky) in Generic Artifact Browser
Add loader in Generic Artifact Browser

Issue-ID: SDC-3362
Signed-off-by: Pawel <pawel.kasperkiewicz@nokia.com>
Change-Id: I14b0c41ecbd76af522bff0d7b66dd868afe0dfaa

6 files changed, 60 insertions, 8 deletions

diff --git a/catalog-ui/package.json b/catalog-ui/package.json
index 1e727472fe..c303494703 100644
--- a/catalog-ui/package.json
+++ b/catalog-ui/package.json
@@ -150,6 +150,7 @@
     "lodash": "^4.17.2",
     "ng-infinite-scroll": "^1.3.0",
     "ngx-drag-drop": "v2.0.0-rc.4",
+    "ngx-pagination": "^5.0.0",
     "onap-ui-angular": "5.2.5",
     "perfect-scrollbar": "^0.6.16",
     "qtip2": "^3.0.3",
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 9d1a2fa734..3c8d525269 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
@@ -14,20 +14,27 @@
   ~ limitations under the License.
   -->
 
-<div>
+<div style="height: 80vh ">
+  <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
   <ngx-datatable
       class="material"
       *ngIf="ready"
-      [rows]="rows"
+      [rows]="currentPageRows"
       [columns]="columns"
       [columnMode]="'force'"
       [headerHeight]="125"
       [scrollbarV]="true"
       [scrollbarH]="true"
-      [footerHeight]="0"
+      [footerHeight]="50"
       [loadingIndicator]="isLoading"
       [rowHeight]="200"
       [reorderable]="false"
+      [virtualization]="false"
+      [externalPaging]="true"
+      [count]="page.totalElements"
+      [offset]="page.pageNumber"
+      [limit]="page.size"
+      (page)="setPage($event)"
   >
     <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
       <ng-template let-column="column" height="100" ngx-datatable-header-template>
@@ -55,7 +62,7 @@
       </ng-template>
     </ngx-datatable-column>
 
-    <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
+    <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="100"  >
       <ng-template ngx-datatable-header-template>
         <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
       </ng-template>
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
index b237a123b3..0a5508cd8a 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
@@ -1,5 +1,9 @@
 @import '../../../../../assets/styles/mixins';
 
+.ngx-datatable.scroll-vertical {
+  height: 80vh;
+}
+
 .ngx-datatable.material {
   .datatable-body {
     .datatable-body-row {
@@ -105,4 +109,4 @@
 .break-all-words {
   word-break: break-all;
   white-space: normal;
-}
\ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
index ea8039e1b4..879dc93efe 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -42,18 +42,20 @@ export class GenericArtifactBrowserComponent {
   originColumns: ColumnDefinition[];
   rows: any[];
   originRows: any[];
+  currentPageRows: any[];
   isLoading: boolean;
   ready: boolean;
   columnsFilters: Map<string, string>;
   addNewColumn: boolean;
+  page: Page;
 
-  constructor(private gabService: GabService) {
-  }
+  constructor(private gabService: GabService) {  }
 
   ngOnInit() {
     this.ready = false;
     this.isLoading = true;
     this.columns = [];
+    this.page = new Page();
     this.loadArtifacts();
   }
 
@@ -123,6 +125,9 @@ export class GenericArtifactBrowserComponent {
 
     // update the rows
     this.rows = temp_rows
+    this.updateTotalRowsCount();
+    this.page.pageNumber = 0;
+    this.setRowsForCurrentPage();
   }
 
   private updateSingleColumnFilter(value, column, rows) {
@@ -137,6 +142,7 @@ export class GenericArtifactBrowserComponent {
     this.rows = result.rows;
     this.originRows = result.rows;
     this.columns = result.columns;
+    this.updateTotalRowsCount();
     if (!this.originColumns){
       this.originColumns = [...result.columns];
     }
@@ -184,6 +190,35 @@ export class GenericArtifactBrowserComponent {
 
     return arrayOfRows;
   }
+
+  private updateTotalRowsCount() {
+    this.page.totalElements =  this.rows.length;
+    this.page.totalPages = Math.ceil(this.page.totalElements / this.page.size);
+  }
+
+  setPage(pageInfo) {
+    if (typeof this.rows !== 'undefined' ) {
+      this.page.pageNumber = pageInfo.offset;
+      this.setRowsForCurrentPage();
+    }
+  }
+
+  private setRowsForCurrentPage() {
+    const start = this.page.pageNumber * this.page.size;
+    const end = start + this.page.size;
+    this.currentPageRows = this.rows.slice(start, end);
+  }
+}
+
+export class Page {
+  // The number of elements in the page
+  size = 25;
+  // The total number of elements
+  totalElements = 0;
+  // The total number of pages
+  totalPages = 0;
+  // The current page number
+  pageNumber = 0;
 }
 
 class NormalizationResult {
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts
index e3ccf3027b..60330df151 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts
@@ -24,6 +24,7 @@ import {GabService} from "../../../services/gab.service";
 import {BrowserModule} from "@angular/platform-browser";
 import {GenericArtifactBrowserColumnProviderComponent} from "./generic-artifact-browser-column-provider.component";
 import {FormsModule} from "@angular/forms";
+import {UiElementsModule} from "../../ui/ui-elements.module";
 
 @NgModule({
     declarations: [
@@ -33,7 +34,8 @@ import {FormsModule} from "@angular/forms";
     imports: [
         BrowserModule,
         FormsModule,
-        NgxDatatableModule
+        NgxDatatableModule,
+        UiElementsModule
     ],
     entryComponents: [ //need to add anything that will be dynamically created
         GenericArtifactBrowserComponent,
diff --git a/catalog-ui/src/styles.less b/catalog-ui/src/styles.less
index 2dbaca5ad1..46d1eb6245 100644
--- a/catalog-ui/src/styles.less
+++ b/catalog-ui/src/styles.less
@@ -9,4 +9,7 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import '../node_modules/onap-ui-common/lib/style.css';
 @import './assets/styles/app.less';
+@import '~@swimlane/ngx-datatable/release/index.css';
+@import '~@swimlane/ngx-datatable/release/themes/material.css';
+@import '~@swimlane/ngx-datatable/release/assets/icons.css';