diff options
Diffstat (limited to 'cds-ui/designer-client')
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 }); } |