two-way binding columns & header footer in grid

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html

@@ -2,24 +2,36 @@
     This is a demo for a grid.
 </h1>
 
-<ps-data-grid [dataSource]="merchantDataSource" [columns]="columns">
-    <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>
-    </ng-container>
-    <ng-container psDataGridCol="address">
-        <div *psDataGridColHeader>Address</div>
-        <div *psDataGridCell="let model">{{model.address}}</div>
-    </ng-container>
-
-    <ng-container psDataGridCol="commands">
-        <p *psDataGridColHeader>Actions</p>
-        <ng-container *psDataGridCell="let model">
-            <button class="btn btn-primary mr-2">{{model.name}}</button>
+    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
+        
+        <ng-container *psDataGridHeader>
+            <h1>Hey! </h1>
+            <p>Welcome to my Grid!</p>
+            <label>New merchant name</label>
+            <input class="form-control" #newMerchantName/>
+            <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
         </ng-container>
-    </ng-container>
-</ps-data-grid>
+        <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>
+        </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 btn-primary mr-2">{{model.name}}</button>
+            </ng-container>
+        </ng-container>
+        <ng-container *psDataGridFooter>
+            
+            <strong>Footer works!</strong>
+        </ng-container>
+    </ps-data-grid>

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { DataSource } from '@poweredsoft/data';
+import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
-import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
-import { of } from 'rxjs';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 
 @Component({
@@ -14,13 +12,31 @@ export class DataGridDemoHomeComponent implements OnInit {
 
   title = 'cdkDemo';
   columns = ['id','name', 'address', 'commands']
-  merchantDataSource: DataSource<IMerchant>;
+  merchantDataSource: IDataSource<IMerchant>;  
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
 
   }
 
-  createDataSource(): DataSource<IMerchant> {
+  
+
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
+
+  createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
   }
 
@@ -32,7 +48,6 @@ export class DataGridDemoHomeComponent implements OnInit {
     this.merchantDataSource.data$.subscribe(receivedData => {
       console.log('new data is coming from the server', receivedData);
     });
-
     this.merchantDataSource.refresh();
   }
  

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

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
 import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 
 
 @NgModule({
@@ -11,7 +12,8 @@ import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
   imports: [
     CommonModule,
     DataGridDemoRoutingModule,
-    DataGridModule
+    DataGridModule,
+    PaginationModule
   ]
 })
 export class DataGridDemoModule { }

src/app/data/services/IChangeMerchantNameCommand.ts

@@ -2,3 +2,7 @@ export interface IChangeMerchantNameCommand {
   merchantId: string;
   newName: string;
 }
+export interface IAddMerchantCommand {
+  name: string;
+  address: string;
+}

src/app/data/services/merchant.service.ts

@@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data';
 import { Apollo } from 'apollo-angular';
 import  gql  from 'graphql-tag';
 import { of } from 'rxjs';
-import { IChangeMerchantNameCommand } from './IChangeMerchantNameCommand';
+import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand';
 import { IMerchant } from './IMerchant';
 
 @Injectable({
@@ -16,51 +16,78 @@ export class MerchantService {
     private apollo: Apollo
   ) {}
 
-//   createMerchantDataSource(): IDataSource<IMerchant> {
-//     const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
-//       IMerchant,
-//       string
-//     >(
-//       'merchants',
-//       'GraphQLAdvanceQueryOfMerchantInput',
-//       'id, name, address',
-//       (model) => model.id,
-//       {
-//         page: 3,
-//         pageSize: 10,
-//       },
-//       true
-//     );
+  createDataSource(): IDataSource<IMerchant> {
+    const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
+      IMerchant,
+      string
+    >(
+      'merchants',
+      'GraphQLAdvanceQueryOfMerchantInput',
+      'id, name, address',
+      (model) => model.id,
+      {
+        page: 1,
+        pageSize: 50,
+      },
+      true
+    );
 
-//     builder.addMutation<IChangeMerchantNameCommand, string>(
-//       'changeMerchantName', //<-- command name
-//       'changeMerchantName', //<-- graph ql mutation name
+    builder.addMutation<IChangeMerchantNameCommand, string>(
+      'changeMerchantName', //<-- command name
+      'changeMerchantName', //<-- graph ql mutation name
       
-//       // implementation of the command.
-//       command => {
-//         return this.apollo.use('command').mutate<string>({
-//           mutation: gql`
-//             mutation executeChangeName($command: changeMerchantNameInput) {
-//               changeMerchantName(params: $command)
-//             }
-//           `,
-//           variables: {
-//             command: command,
-//           },
-//         });
-//       },
+      // implementation of the command.
+      command => {
+        return this.apollo.use('command').mutate<string>({
+          mutation: gql`
+            mutation executeChangeName($command: changeMerchantNameInput) {
+              changeMerchantName(params: $command)
+            }
+          `,
+          variables: {
+            command: command,
+          },
+        });
+      },
       
-//       // viewModel -> transform to the form model for that command -> IChangeMerchantName
-//       e => of(<IChangeMerchantNameCommand>{
-//         merchantId: e.model.id,
-//         newName: e.model.name,
-//       })
-//     );
+      // viewModel -> transform to the form model for that command -> IChangeMerchantName
+      e => of(<IChangeMerchantNameCommand>{
+        merchantId: e.model.id,
+        newName: e.model.name,
+      })
+    );
 
-//     const options = builder.create();
-//     return new DataSource<IMerchant>(options);
-//   }
+    builder.addMutation<IAddMerchantCommand, string>(
+      'addMerchant', //<-- command name
+      'addMerchant', //<-- graph ql mutation name
+      
+      // implementation of the command.
+      command => {
+        
+        return this.apollo.use('command').mutate<string>({
+          mutation: gql`
+            mutation executeAddMerchant($command: AddMerchantCommandInput) {
+              addMerchant(params: $command)
+            }
+          `,
+          variables: {
+            command: command,
+          },
+        });
+      },
+      
+      // viewModel -> transform to the form model for that command -> IChangeMerchantName
+      e => of(<IAddMerchantCommand>{
+        name: '',
+        address: ''
+      })
+    );
 
+    const options = builder.create();
+    return new DataSource<IMerchant>(options);
+  }
+
+  /*
   createDataSource(): DataSource<IMerchant> {
     const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
       'merchants',
@@ -81,5 +108,5 @@ export class MerchantService {
     );
 
     return new DataSource<IMerchant>(builder.create());
-  }
+  }*/
 }