temp commit for spinner

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 { }

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>

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 {
+  }
+
+}

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';
+export * from './lib/confirm-modal/confirm-modal.service';
+export * from './lib/spinner/spinner.module';
+export * from './lib/spinner/spinner/spinner.component';

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 { }

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html

@@ -15,8 +15,12 @@
       </th>
     </tr>
   </thead>
-
+  <tbody *ngIf="loading">
-  <tbody *ngIf="latestResult">
+    <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)">

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

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() { }
+
+}

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';
+export * from './lib/data-grid/directives/data-grid-footer.directive';
+export * from './lib/data-grid/directives/data-grid-loader.directive';

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

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">

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