"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",
~ 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>
</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>
@import '../../../../../assets/styles/mixins';
+.ngx-datatable.scroll-vertical {
+ height: 80vh;
+}
+
.ngx-datatable.material {
.datatable-body {
.datatable-body-row {
.break-all-words {
word-break: break-all;
white-space: normal;
-}
\ No newline at end of file
+}
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();
}
// update the rows
this.rows = temp_rows
+ this.updateTotalRowsCount();
+ this.page.pageNumber = 0;
+ this.setRowsForCurrentPage();
}
private updateSingleColumnFilter(value, column, rows) {
this.rows = result.rows;
this.originRows = result.rows;
this.columns = result.columns;
+ this.updateTotalRowsCount();
if (!this.originColumns){
this.originColumns = [...result.columns];
}
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 {
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: [
imports: [
BrowserModule,
FormsModule,
- NgxDatatableModule
+ NgxDatatableModule,
+ UiElementsModule
],
entryComponents: [ //need to add anything that will be dynamically created
GenericArtifactBrowserComponent,
@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';