From 7ffcc93769cea3618dd810d40d0e385d8faf92f7 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Mon, 15 Jun 2020 15:02:27 -0500
Subject: [PATCH] temp commit for spinner

---
 .../src/lib/spinner/spinner.module.ts         | 14 ++++++++
 .../spinner/spinner/spinner.component.html    |  3 ++
 .../spinner/spinner/spinner.component.scss    |  0
 .../lib/spinner/spinner/spinner.component.ts  | 15 ++++++++
 .../ngx-bootstrap/src/public-api.ts           |  4 ++-
 .../src/lib/data-grid/data-grid.module.ts     |  5 +--
 .../data-grid/data-grid.component.html        |  8 +++--
 .../data-grid/data-grid.component.ts          |  4 ++-
 .../directives/data-grid-loader.directive.ts  | 10 ++++++
 .../poweredsoft/ngx-cdk-ui/src/public-api.ts  |  3 +-
 .../pagination-demo/pagination-demo.module.ts |  7 ++--
 .../pagination/pagination-demo.component.html | 19 +++++++++--
 .../pagination/pagination-demo.component.ts   | 34 +++++++++----------
 13 files changed, 96 insertions(+), 30 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner.module.ts
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.scss
 create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-loader.directive.ts

diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner.module.ts
new file mode 100644
index 0000000..b7352f3
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpinnerComponent } from './spinner/spinner.component';
+
+
+
+@NgModule({
+  declarations: [SpinnerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports:[SpinnerComponent]
+})
+export class SpinnerModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html
new file mode 100644
index 0000000..54b581b
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html
@@ -0,0 +1,3 @@
+<div class="spinner-border" role="status">
+    <span class="sr-only">Loading...</span>
+</div>
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.ts
new file mode 100644
index 0000000..d394d09
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'psbx-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index e8c4798..50ecadb 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -9,4 +9,6 @@ export * from './lib/form-group-command-modal/directives/form-group-command-moda
 export * from './lib/pagination/psbxPagination.module';
 export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
 export * from './lib/confirm-modal/confirm-modal.module';
-export * from './lib/confirm-modal/confirm-modal.service';
\ No newline at end of file
+export * from './lib/confirm-modal/confirm-modal.service';
+export * from './lib/spinner/spinner.module';
+export * from './lib/spinner/spinner/spinner.component';
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
index badcb1f..432c070 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
@@ -6,18 +6,19 @@ import { DataGridColHeaderDirective } from './directives/data-grid-col-header.di
 import { DataGridCellDirective } from './directives/data-grid-cell.directive';
 import { DataGridFooterDirective } from './directives/data-grid-footer.directive';
 import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
+import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
 
 
 
 
 
 @NgModule({
-  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
+  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, DataGridLoaderDirective,
     
   ],
   imports: [
     CommonModule
   ],
-  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective]
+  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,DataGridLoaderDirective]
 })
 export class DataGridModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
index afababd..c7881bd 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
@@ -15,8 +15,12 @@
       </th>
     </tr>
   </thead>
-
-  <tbody *ngIf="latestResult">
+  <tbody *ngIf="loading">
+    <tr>
+      <td [attr.colspan]="columns.length"><ng-content select="psDataGridLoader"></ng-content></td>
+    </tr>
+  </tbody>
+  <tbody *ngIf="latestResult&&!loading">
     <tr *ngFor="let rowModel of latestResult.data; let i = index">
       <td *ngFor="let column of columns">
         <ng-container *ngIf="hasCellTemplate(column)">
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
index f82830b..c96225c 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
@@ -21,7 +21,7 @@ export class DataGridComponent implements OnInit {
   @Input() dataSource: IDataSource<any>;
   @Input() tableClasses: any;
   private _columns: string[];
-  
+  loading:boolean;
   @Input() set columns(value: string[]) {
     this._columns = value;
     this.columnsChange.emit(value);
@@ -35,8 +35,10 @@ export class DataGridComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    this.loading = true;
     console.log(this.columnDefinitions);
     this.dataSource.data$.subscribe(newData => {
+      this.loading=false;
       this.latestResult = newData;
     });
   }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-loader.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-loader.directive.ts
new file mode 100644
index 0000000..13badb0
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-loader.directive.ts
@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridLoader]'
+})
+export class DataGridLoaderDirective {
+
+  constructor() { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index 8218be5..6b98962 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -8,4 +8,5 @@ export * from './lib/data-grid/directives/data-grid-cell.directive';
 export * from './lib/data-grid/directives/data-grid-col.directive';
 export * from './lib/data-grid/directives/data-grid-col-header.directive';
 export * from './lib/data-grid/directives/data-grid-header.directive';
-export * from './lib/data-grid/directives/data-grid-footer.directive';
\ No newline at end of file
+export * from './lib/data-grid/directives/data-grid-footer.directive';
+export * from './lib/data-grid/directives/data-grid-loader.directive';
\ No newline at end of file
diff --git a/src/app/pagination-demo/pagination-demo.module.ts b/src/app/pagination-demo/pagination-demo.module.ts
index 4666c97..fa4b050 100644
--- a/src/app/pagination-demo/pagination-demo.module.ts
+++ b/src/app/pagination-demo/pagination-demo.module.ts
@@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
 import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
 import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { psbxPaginationModule, CommandModalModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
+import { psbxPaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 
+
+
 @NgModule({
   declarations: [PaginationDemoComponent],
   imports: [
@@ -18,7 +20,8 @@ import { ModalModule } from 'ngx-bootstrap/modal';
     DataGridModule,
     CommandModalModule,
     ConfirmModalModule,
-    FormsModule
+    FormsModule,
+    SpinnerModule
        
   ]
 })
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
index 1087315..258f613 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
@@ -1,29 +1,42 @@
+
+   <psbx-spinner psDataGridLoader></psbx-spinner>
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
     tableClasses="table table-sm table-dark table-striped table-bordered">
     <ng-container *psDataGridHeader>
         <button class="btn-warning btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
             [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
     </ng-container>
+ 
     <ng-container psDataGridCol="id">
         <div *psDataGridColHeader>ID</div>
         <div *psDataGridCell="let model">{{model.id}}</div>
     </ng-container>
+
     <ng-container psDataGridCol="name">
         <div *psDataGridColHeader>Name</div>
-        <div *psDataGridCell="let model">{{model.name}}</div>
+        <div *psDataGridCell="let model">{{model.name}}</div>         
     </ng-container>
+   
     <ng-container psDataGridCol="address">
         <div *psDataGridColHeader>Address</div>
         <div *psDataGridCell="let model">{{model.address}}</div>
     </ng-container>
-
+    <ng-container psDataGridCol="commands">
+        <ng-container *psDataGridColHeader>Actions</ng-container>
+        <ng-container *psDataGridCell="let model">
+            <!-- <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button> -->
+            <button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button>
+           
+        </ng-container>
+    </ng-container>
 
     <ng-container *psDataGridFooter>
         <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
     </ng-container>
 </ps-data-grid>
+<!-- <button (click)="testService()">Test confirm</button> -->
 
-<button (click)="testService()">Test confirm</button>
 
 <ng-template #confirm>
     <div class="modal-body text-center">
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
index 1646e23..11cacd6 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
@@ -11,7 +11,7 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
   styleUrls: ['./pagination-demo.component.scss']
 })
 export class PaginationDemoComponent implements OnInit {
-  columns = ['id','name', 'address']
+  columns = ['id','name', 'address','commands']
   merchantDataSource: IDataSource<IMerchant>;  
   constructor(private  merchantService: MerchantService, private confirmModalService: ConfirmModalService){
     this.merchantDataSource = this.createDataSource();
@@ -20,7 +20,7 @@ export class PaginationDemoComponent implements OnInit {
 
   pages:any;
 
-  testService() {
+  removeMerchant(id:string) {
     this.confirmModalService.confirm({
       message: 'Do you want to delete this merchant?',
       yesText: 'yes delete this merchant',
@@ -28,25 +28,23 @@ export class PaginationDemoComponent implements OnInit {
       noText: 'no please dont',
       noClass: 'light'
     }).subscribe(result => {
-      console.log(result);
+      if(result){
+        this.merchantDataSource.executeCommandByName('removeMerchant', {
+          id: id
+        }).subscribe(      
+          res => {
+            this.merchantDataSource.refresh();
+          },
+          err => {
+            console.log(err);
+            alert('failed');
+          }
+        );
+      }
     })
   }
 
-  removeMerchant(id: string) {    
-    this.merchantDataSource.executeCommandByName('removeMerchant', {
-      id: id
-    }).subscribe(      
-      res => {
-        alert('removed!');
-        this.merchantDataSource.refresh();
-      },
-      err => {
-        console.log(err);
-        alert('failed');
-      }
-    );
-  }
-
+  
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
   }