From 2d3275af25ff103398d8bfb4dcdb4cdd7bc1fa44 Mon Sep 17 00:00:00 2001 From: Pawel Date: Wed, 4 Nov 2020 08:24:02 +0100 Subject: 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 Change-Id: I14b0c41ecbd76af522bff0d7b66dd868afe0dfaa --- catalog-ui/package.json | 1 + .../generic-artifact-browser.component.html | 15 ++++++--- .../generic-artifact-browser.component.less | 6 +++- .../generic-artifact-browser.component.ts | 39 ++++++++++++++++++++-- .../generic-artifact-browser.module.ts | 4 ++- catalog-ui/src/styles.less | 3 ++ 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. --> -
+
+ @@ -55,7 +62,7 @@ - +
Add
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; 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'; -- cgit 1.2.3-korg