aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-08-24 12:19:59 +0200
committerKAPIL SINGAL <ks220y@att.com>2020-08-24 18:07:17 +0000
commit95ada73a261b82f31aecf4e23f4a87f464d806c5 (patch)
treedeb72a8fadcf893d7641f14a96085928e09784aa
parentd8717dfc2217fd641279d835c53bb5557b4384a7 (diff)
Adding Pagination Loader
Issue-ID: CCSDK-2433 Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> Change-Id: I335ee8fb72c51f303183108aa36887fa0b65cf62
-rw-r--r--cds-ui/designer-client/package-lock.json8
-rw-r--r--cds-ui/designer-client/package.json1
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html1
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts11
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts5
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts28
6 files changed, 42 insertions, 12 deletions
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index c46ca55c7..7cf4be069 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -8496,6 +8496,14 @@
"tslib": "^1.9.0"
}
},
+ "ngx-ui-loader": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/ngx-ui-loader/-/ngx-ui-loader-8.0.0.tgz",
+ "integrity": "sha512-yD4Vc3NjMs9N3vCFTdGMoAfcDML5ns0cXYVvR9/0WAQt6/AhN86wZcrNA0/2kj23ozy8o8SVftWEaMS9tEP8Kw==",
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 5b08d6fce..1902d367d 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -44,6 +44,7 @@
"ngx-bootstrap": "^5.6.1",
"ngx-file-drop": "^8.0.8",
"ngx-toastr": "^11.3.3",
+ "ngx-ui-loader": "^8.0.0",
"rxjs": "~6.4.0",
"stream": "0.0.2",
"tslib": "^1.10.0",
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index f5588bc43..35ca1e2c9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -15,6 +15,7 @@
<a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
class="icon-import-blue" aria-hidden="true"></i>Import Package
</a>
+ <ngx-ui-loader></ngx-ui-loader>
</div>
</div>
</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
index c242b7e72..4360062ad 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -1,5 +1,6 @@
-import {Component, OnInit} from '@angular/core';
-import {PackagesStore} from '../../packages.store';
+import { Component, OnInit } from '@angular/core';
+import { PackagesStore } from '../../packages.store';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
@Component({
selector: 'app-package-pagination',
@@ -12,7 +13,10 @@ export class PackagePaginationComponent implements OnInit {
pageSize: number;
previousPage: number;
- constructor(private packagesStore: PackagesStore) {
+ constructor(
+ private packagesStore: PackagesStore,
+ private ngxLoader: NgxUiLoaderService
+ ) {
this.pageSize = packagesStore.pageSize;
this.packagesStore.state$
@@ -32,6 +36,7 @@ export class PackagePaginationComponent implements OnInit {
console.log('page change to first...', page);
}
if (this.previousPage !== page) {
+ this.ngxLoader.start(); // start master loader
this.packagesStore.getPage(page - 1, this.packagesStore.pageSize);
this.previousPage = page;
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 66c7b498a..47927cef6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -29,6 +29,7 @@ import { TemplMappCreationComponent } from './package-creation/template-mapping/
import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component';
import { DataTablesModule } from 'angular-datatables';
import { DesignerSourceViewComponent } from './designer/source-view/source-view.component';
+import { NgxUiLoaderModule } from 'ngx-ui-loader';
@NgModule({
declarations: [PackagesDashboardComponent,
@@ -61,7 +62,9 @@ import { DesignerSourceViewComponent } from './designer/source-view/source-view.
FormsModule,
NgxFileDropModule,
AceEditorModule,
- DataTablesModule
+ DataTablesModule,
+ // Import NgxUiLoaderModule
+ NgxUiLoaderModule
],
providers: [ApiService, JsonPipe],
bootstrap: []
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index 863adfbd7..b6d008b67 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -19,22 +19,26 @@ limitations under the License.
============LICENSE_END============================================
*/
-import {Injectable} from '@angular/core';
-import {BluePrintPage} from './model/BluePrint.model';
-import {Store} from '../../../common/core/stores/Store';
-import {PackagesApiService} from './packages-api.service';
-import {PackagesDashboardState} from './model/packages-dashboard.state';
-import {Observable, of} from 'rxjs';
+import { Injectable } from '@angular/core';
+import { BluePrintPage } from './model/BluePrint.model';
+import { Store } from '../../../common/core/stores/Store';
+import { PackagesApiService } from './packages-api.service';
+import { PackagesDashboardState } from './model/packages-dashboard.state';
+import { Observable, of } from 'rxjs';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
@Injectable({
providedIn: 'root'
})
export class PackagesStore extends Store<PackagesDashboardState> {
// TDOD fixed for now as there is no requirement to change it from UI
- public pageSize = 15;
+ public pageSize = 5;
private bluePrintContent: BluePrintPage = new BluePrintPage();
- constructor(private packagesServiceList: PackagesApiService) {
+ constructor(
+ private packagesServiceList: PackagesApiService,
+ private ngxLoader: NgxUiLoaderService
+ ) {
super(new PackagesDashboardState());
}
@@ -92,6 +96,10 @@ export class PackagesStore extends Store<PackagesDashboardState> {
tags: [],
sortBy
});
+ }, err => {
+ console.log(err);
+ }, () => {
+ this.ngxLoader.stop();
});
}
@@ -108,6 +116,10 @@ export class PackagesStore extends Store<PackagesDashboardState> {
tags: [],
sortBy
});
+ }, err => {
+ console.log(err);
+ }, () => {
+ this.ngxLoader.stop(); // start master loader
});
}