temp commit

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
 import { DefaultOptions } from 'apollo-client';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export function app_Init(apollo: Apollo, httpLink: HttpLink) {
   return async () => {
@@ -56,7 +57,8 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) {
     AppRoutingModule,
     HttpClientModule,
     ApolloModule,
-    HttpLinkModule
+    HttpLinkModule,
+    BrowserAnimationsModule
   ],
   providers: [
     {

src/app/grid-filter-demo/grid-filter-demo.module.ts

@@ -3,14 +3,22 @@ import { CommonModule } from '@angular/common';
 
 import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
 import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
-import { GridFilterModule } from '@poweredsoft/ngx-bootstrap';
+import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule } from '@poweredsoft/ngx-bootstrap';
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [GridFilterDemoComponent],
   imports: [
     CommonModule,
     GridFilterDemoRoutingModule,
-    GridFilterModule,
+    GridFilterModule,    
+    psbxPaginationModule,
+    DataGridModule,
+    CommandModalModule,
+    ConfirmModalModule,
+    FormsModule,
+    SpinnerModule
   ]
 })
 export class GridFilterDemoModule { }

src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.html

@@ -1,2 +1,74 @@
-<p>grid-filter-demo works!</p>
-<psbx-ds-text-filter></psbx-ds-text-filter>
+<h2>grid-filter-demo works!</h2>
+<psbx-datetime-filter></psbx-datetime-filter>
+<button class="btn btn-danger" (click)="test()">Test</button>
+
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+    tableClasses="table table-sm table-dark table-striped table-bordered">
+    <psbx-spinner *psDataGridLoader></psbx-spinner>
+    <ng-container *psDataGridHeader>
+        <button class="btn-info btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
+    </ng-container>
+
+    <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" (filteredResults)="filteredResults = $event"></psbx-ds-text-filter>
+    
+    <ng-container psDataGridCol="id">
+        <div *psDataGridColHeader>ID</div>
+        <div *psDataGridCell="let model">{{model.id}}</div>
+        <!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
+
+        </psfa-ds-sort-icon>  -->
+
+        <!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
+        <psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
+        <psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
+        <psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
+        <psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
+            <ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
+        </psbx-ds-multi-select-filter> -->
+    </ng-container>
+
+    <ng-container psDataGridCol="name">
+        <div *psDataGridColHeader>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-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="theModal">Change</button>
+            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
+        </ng-container>
+    </ng-container>
+    <ng-container *psDataGridFooter>
+        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
+    </ng-container>
+</ps-data-grid>
+
+
+
+<ng-template #confirm>
+    <div class="modal-body text-center">
+      <p>Do you want to confirm?</p>
+      <button type="button" class="btn btn-default"  >Yes</button>
+      <button type="button" class="btn btn-primary"  >No</button>
+    </div>
+  </ng-template>
+
+
+
+ <ng-template #theModal let-command let-loading="loading">
+        <label for="name">Name</label>
+        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" 
+               class="form-control"  >
+        <label for="address">Address</label>
+        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" 
+              class="form-control" >
+        
+</ng-template> 

src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
 
 @Component({
   selector: 'ps-grid-filter-demo',
@@ -7,9 +11,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GridFilterDemoComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
+  columns = ['id','name', 'address','commands']
+  merchantDataSource: IDataSource<IMerchant>;  
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
+    console.log(this.merchantDataSource);    
   }
 
+  pages:any;
+  filteredResults:any;
+  
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
+   
+  }
+
+  ngOnInit() {
+    this.merchantDataSource.refresh();
+  }
+
+  test(){
+    console.log(this.filteredResults);
+  }
 }

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html

@@ -63,7 +63,6 @@
   </ng-template>
 
 
-
  <ng-template #theModal let-command let-loading="loading">
         <label for="name">Name</label>
         <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" 

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts

@@ -19,31 +19,6 @@ export class PaginationDemoComponent implements OnInit {
   }
 
   pages:any;
-
-  // removeMerchant(id:string) {
-  //   this.confirmModalService.confirm({
-  //     message: 'Do you want to delete this merchant?',
-  //     yesText: 'yes delete this merchant',
-  //     yesClass: 'danger',
-  //     noText: 'no please dont',
-  //     noClass: 'light'
-  //   }).subscribe(result => {
-  //     if(result){
-  //       this.merchantDataSource.executeCommandByName('removeMerchant', {
-  //         id: id
-  //       }).subscribe(      
-  //         res => {
-  //           this.merchantDataSource.refresh();
-  //         },
-  //         err => {
-  //           console.log(err);
-  //           alert('failed');
-  //         }
-  //       );
-  //     }
-  //   })
-  // }
-
   
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();