aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui
diff options
context:
space:
mode:
authorPawel <pawel.kasperkiewicz@nokia.com>2020-11-04 08:24:02 +0100
committerPawel <pawel.kasperkiewicz@nokia.com>2020-11-04 08:24:02 +0100
commit2d3275af25ff103398d8bfb4dcdb4cdd7bc1fa44 (patch)
treef923a713e054748d9c068341bd9102b787591b4a /catalog-ui
parenta9fffd2555cc45630ec9be9ce44b3f7ab2ed0241 (diff)
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
Diffstat (limited to 'catalog-ui')
-rw-r--r--catalog-ui/package.json1
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html15
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less6
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts39
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts4
-rw-r--r--catalog-ui/src/styles.less3
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';