Adding Pagination Loader

Issue-ID: CCSDK-2433
Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I335ee8fb72c51f303183108aa36887fa0b65cf62

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
             });
     }