From fcc39e9fac8edac1ffea33a8bacab2d858e63ed7 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Thu, 9 Jul 2020 14:28:55 -0500
Subject: [PATCH] add btnClass to command-modal

---
 .../command-modal.component.html              |  2 +-
 .../command-modal/command-modal.component.ts  |  2 +-
 .../directives/command-modal.directive.ts     |  4 +++-
 .../ng-select-demo/ng-select-demo.module.ts   |  5 ++++-
 .../ng-select-demo.component.html             | 22 +++++++++++++++----
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
index 2c11963..875fd6d 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html
@@ -12,7 +12,7 @@
 <div class="modal-footer">
     <button type="button" class="btn btn-light" (click)="modalRef.hide()"
         [disabled]="loading">{{ cancelText }}</button>
-    <button type="button" class="btn btn-primary" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
+    <button type="button" class="btn btn-{{btnClass}}" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
     <br>
 
     <div class="progress" style="width: 100%" *ngIf="loading">
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
index 3e37018..1119e17 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
@@ -23,7 +23,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   cancelText: string;
   form:NgForm;
   validationMessage:string ;
-
+  btnClass:string;
   successEmitter: EventEmitter<any>; 
 
   private _notifyMessage: Subscription;
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
index 02b45a3..291f44f 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
@@ -20,6 +20,7 @@ export class CommandModalDirective {
   @Input() commandText: string;
   @Input() cancelText: string;
   @Input() animated: boolean;
+  @Input() btnClass:string;
 
   @Output() success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -38,7 +39,8 @@ export class CommandModalDirective {
         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel',
-        successEmitter: this.success
+        successEmitter: this.success,
+        btnClass: this.btnClass || 'primary'
       };
       this.modalService.show(CommandModalComponent, {
         animated: this.animated === undefined ? true : this.animated,
diff --git a/src/app/ng-select-demo/ng-select-demo.module.ts b/src/app/ng-select-demo/ng-select-demo.module.ts
index 2088487..97d13e3 100644
--- a/src/app/ng-select-demo/ng-select-demo.module.ts
+++ b/src/app/ng-select-demo/ng-select-demo.module.ts
@@ -5,6 +5,7 @@ import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PsNgSelectModule } from '@poweredsoft/ng-select';
+import { CommandModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
 
 
 
@@ -17,7 +18,9 @@ import { PsNgSelectModule } from '@poweredsoft/ng-select';
     FormsModule,
     ReactiveFormsModule,
     NgSelectDemoRoutingModule,
-    PsNgSelectModule
+    PsNgSelectModule,
+    CommandModule,
+    CommandModalModule
   ]
 })
 export class NgSelectDemoModule { }
diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
index 0943788..c2335b3 100644
--- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
+++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
@@ -33,10 +33,16 @@ selected: {{ myValue3 | json }}
 <ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="false">
     <div  *psNgNotFoundTemplate="let searchTerm">
         <div class="ng-option disabled">
-            No data found for "{{searchTerm}}" <button class="btn btn-success" 
-                psbxCommand
-                (success)="myValue2 = $event">
-                Create New {{searchTerm}}</button>
+            No data found for "{{searchTerm}}"
+                <button class="btn-primary btn" 
+                psbxCommandModal 
+                commandTitle="Adding a new {{searchTerm}}" 
+                commandText="Add"
+                [dataSource]="merchantDataSource" 
+                command="addMerchant" 
+                cancelText="Abort"
+                [template]="theModal"
+                (success)="myValue2 = $event"> Create New {{searchTerm}}</button>
         </div>
     </div>
 </ps-ng-select>
@@ -53,3 +59,11 @@ selected: {{ myValue2 | json }}
 </ps-ng-multi-select>
 selected: {{ myValue4 | json }} 
 
+<ng-template #theModal let-command let-loading="loading">
+    <form   >
+        Name
+        <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+        Address
+        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >                
+    </form>
+</ng-template>
\ No newline at end of file