change & delete for command modal

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts

@@ -42,7 +42,6 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   }
 
   attemptSave() {
-    debugger;
     this.loading = true;
     this.dataSource.executeCommandByName(this.command, this.commandModel)
       .pipe(

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts

@@ -20,13 +20,14 @@ export class CommandModalDirective {
   @Input() commandText: string;
   @Input() cancelText: string;
   @Input() animated: boolean;
+  @Input() isConfirmModal: boolean;
 
   @HostListener('click')
   wasClicked() {            
     this.dataSource.resolveCommandModelByName({
       command: this.command,
       model: this.model
-    }).subscribe(commandModel => {                    
+    }).subscribe(commandModel => {         
       const initialState = {
         dataSource: this.dataSource,
         command: this.command,
@@ -37,6 +38,12 @@ export class CommandModalDirective {
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel'
       };
+      if(this.isConfirmModal){
+        this.modalService.show(CommandModalComponent, {
+          animated: this.animated === undefined ? true : this.animated,
+          initialState
+        });
+      }
       this.modalService.show(CommandModalComponent, {
         animated: this.animated === undefined ? true : this.animated,
         initialState

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html

@@ -21,7 +21,7 @@
     <div class="modal-footer">
         <button type="button" class="btn btn-light" (click)="modalRef.hide()"
             [attr.disabled]="loading">{{ cancelText }}</button>
-        <button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">Creat</button>
+        <button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">Create</button>
         <br>
     
         <div class="progress" style="width: 100%" *ngIf="loading">

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -48,7 +48,6 @@ export class FormGroupCommandModalComponent implements OnInit {
   }
 
   attemptSave() {
-
     this.errorMessage = null;
     if (!this.modelForm.valid)
     {

src/app/command-modal-demo/command-modal-demo.module.ts

@@ -5,7 +5,7 @@ import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.modu
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
 
 import {FormsModule} from '@angular/forms';
-import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
@@ -13,7 +13,8 @@ import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
     CommandModalDemoRoutingModule,
     DataGridModule,
     CommandModalModule,
-    FormsModule
+    FormsModule,
+    psbxPaginationModule
   ]
 })
 export class CommandModalDemoModule { }

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -25,18 +25,24 @@
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
             <button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
-            [dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
+            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button>
+
+            <button class="btn-danger btn" psbxCommandModal [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>
+        <ng-container *psDataGridFooter>
-        <button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
-            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+        </ng-container>
-    </ng-container>
 </ps-data-grid>
 
+
+
 <ng-template #changeName let-command let-loading="loading">
     New Name
-    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.newName" placeholder="Entermerchant new name" class="form-control">
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">
+    New Address
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
 </ng-template>
 
 <ng-template #theModal let-command let-loading="loading">

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts

@@ -2,6 +2,7 @@ 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 { BsModalRef } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'ps-command-modal-demo',
@@ -10,7 +11,8 @@ import { MerchantService } from 'src/app/data/services/merchant.service';
 })
 export class CommandModalDemoComponent implements OnInit {
 
-  columns = ['id','name', 'address', 'commands']
+  columns = ['id','name', 'address', 'commands'];
+  pages:any;
   merchantDataSource: IDataSource<IMerchant>;  
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
@@ -37,14 +39,23 @@ export class CommandModalDemoComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.merchantDataSource.loading$.subscribe(isLoading => {
-      console.log('merchant data source event loading', isLoading);
-    });
-
-    this.merchantDataSource.data$.subscribe(receivedData => {
-      console.log('new data is coming from the server', receivedData);
-    });
     this.merchantDataSource.refresh();
+    this.merchantDataSource.data$.subscribe(newData => {     
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
+  }
+
+  message: string;
+  modalRef: BsModalRef;
+  confirm(): void {
+    this.message = 'Confirmed!';
+    this.modalRef.hide();
+  }
+ 
+  decline(): void {
+    this.message = 'Declined!';
+    this.modalRef.hide();
   }
 
 }

src/app/data/services/IChangeMerchantNameCommand.ts

@@ -1,6 +1,7 @@
 export interface IChangeMerchantNameCommand {
-  merchantId: string;
+  id: string;
-  newName: string;
+  name: string;
+  address: string;
 }
 export interface IAddMerchantCommand {
   name: string;
@@ -8,5 +9,5 @@ export interface IAddMerchantCommand {
 }
 
 export interface IRemoveMerchantCommand {
-  merchantId: string;
+  id: string;
 }

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

@@ -33,15 +33,15 @@ export class MerchantService {
     );
 
     builder.addMutation<IChangeMerchantNameCommand, string>(
-      'changeMerchantName', //<-- command name
+      'changeMerchant', //<-- command name
-      'changeMerchantName', //<-- graph ql mutation name
+      'changeMerchant', //<-- graph ql mutation name
       
       // implementation of the command.
       command => {
         return this.apollo.use('command').mutate<string>({
           mutation: gql`
-            mutation executeChangeName($command: changeMerchantNameInput) {
+            mutation executeChangeName($command: ChangeMerchantCommandInput) {
-              changeMerchantName(params: $command)
+              changeMerchant(params: $command)
             }
           `,
           variables: {
@@ -52,8 +52,9 @@ export class MerchantService {
       
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IChangeMerchantNameCommand>{
-        merchantId: e.model.id,
+        id: e.model.id,
-        newName: e.model.name,
+        name: e.model.name,
+        address: e.model.address
       })
     );
 
@@ -104,7 +105,7 @@ export class MerchantService {
       
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IRemoveMerchantCommand>{
-        merchantId: e.model.id,
+        id: e.model.id, //should be id?
       })
     );
 

src/app/form-group-modal-demo/form-group-modal-demo.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
 import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module'
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-import { FormGroupCommandModalModule,CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
 import { ReactiveFormsModule } from '@angular/forms';
 
 
@@ -15,7 +15,8 @@ import { ReactiveFormsModule } from '@angular/forms';
     FormGroupModalDemoRoutingModule,
     DataGridModule,
     FormGroupCommandModalModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    psbxPaginationModule
     
   ]
 })

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html

@@ -1,8 +1,10 @@
 <h3>This is the demo for form-group modal!</h3>
-<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-dark table-striped table-sm table-bordered">
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
+              tableClasses="table table-dark table-striped table-sm table-bordered">
     <ng-container *psDataGridHeader>
-            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant"
-            [dataSource]="merchantDataSource" command="addMerchant" (formCreate)="onFormCreate($event)" [template]="theModal">Create a new</button>   
+             commandText="Add" [dataSource]="merchantDataSource" command="addMerchant" 
+             (formCreate)="onFormCreate($event)" [template]="theModal">Create a new</button>   
     </ng-container>
     <ng-container psDataGridCol="id">
         <div *psDataGridColHeader>ID</div>
@@ -19,10 +21,15 @@
     <ng-container psDataGridCol="actions">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <button class="btn-primary btn" psbxFormGroupCommandModal [commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
+            <button class="btn-success btn" psbxFormGroupCommandModal 
-            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
+            [commandTitle]="'remove ' + model.name + ' name'" commandText="delete"
+            [dataSource]="merchantDataSource" command="removeMerchant" 
+            [model]="model" (formCreate)="onFormCreate($event)">Remove Merchant</button>
         </ng-container>
     </ng-container>
+    <ng-container *psDataGridFooter>
+        <psbx-ds-pagination [dataSource]="merchantDataSource" [pages]="pages"></psbx-ds-pagination> 
+    </ng-container>
 </ps-data-grid>
 
 
@@ -35,6 +42,11 @@
             <div class="col-sm-8">
                 <input id="name" type="text" class="form-control" formControlName="name">
             </div>
+
+            <label for="address" class="col-sm-2 control-label">Address</label>
+            <div class="col-sm-8">
+                <input id="address" type="text" class="form-control" formControlName="address">
+            </div>
         </div>
     </form>
 </ng-template>

src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts

@@ -16,7 +16,7 @@ export class FormGroupModalDemoComponent implements OnInit {
     return this.merchantService.createDataSource();
   }
 
-  
+  pages:any;
   merchantDataSource: IDataSource<IMerchant>;
   columns = ['id','name', 'address', 'actions'];
   constructor(private merchantService: MerchantService, private fb: FormBuilder) {
@@ -25,12 +25,18 @@ export class FormGroupModalDemoComponent implements OnInit {
 
   ngOnInit(): void {
     this.merchantDataSource.refresh();
+    this.merchantDataSource.data$.subscribe(newData => {     
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
   }
 
   onFormCreate(event: IModelFormCreateEvent) {
+    debugger;
     event.shouldSetCommandModel = false;
     event.formGroup = this.fb.group({
-      'name': [event.commandModel.name, Validators.required]
+      'name': [event.commandModel.name, Validators.required],
+      'address': [event.commandModel.address, Validators.required]
     });
   }
 

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

@@ -4,8 +4,8 @@ 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 { FormGroupCommandModalModule,psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({