diff options
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'; |