command-modal works good!

angular.json

@@ -168,7 +168,7 @@
       "projectType": "library",
       "root": "projects/poweredsoft/ngx-bootstrap",
       "sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
-      "prefix": "ps",
+      "prefix": "psbx",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "ngx-cdk-ui",
+  "name": "ngx-ui",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

projects/poweredsoft/ngx-bootstrap/package.json

@@ -4,7 +4,7 @@
   "peerDependencies": {
     "@angular/common": "^9.1.9",
     "@angular/core": "^9.1.9",
-    "@poweredsoft/ngx-cdk-ui": "0.0.1"    
+    "ngx-bootstrap": "^5.6.1"
   },
   "dependencies": {
     "tslib": "^1.10.0"

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

@@ -1,12 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { CommandModalDirective } from './directives/command-modal.directive';
 import { CommandModalComponent } from './command-modal/command-modal.component';
 
-
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    ModalModule.forRoot()
   ],
-  declarations: [CommandModalComponent]
+  declarations: [CommandModalDirective, CommandModalComponent],
+  exports: [CommandModalDirective]
 })
 export class CommandModalModule { }

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

@@ -1 +1,24 @@
-<p>command-modal works!</p>
+<div class="modal-header">
+    <h4 class="modal-title pull-left">{{ title }}</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    <ng-container [ngTemplateOutlet]="template"
+        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading }"></ng-container>
+</div>
+<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">{{ commandText }}</button>
+
+    <br>
+
+    <div class="progress" style="width: 100%" *ngIf="loading">
+        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
+            aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+    </div>
+
+</div>

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

@@ -1,15 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { finalize} from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 
 @Component({
-  selector: 'ps-command-modal',
+  selector: 'psbx-command-modal',
   templateUrl: './command-modal.component.html',
   styleUrls: ['./command-modal.component.scss']
 })
-export class CommandModalComponent implements OnInit {
+export class CommandModalComponent implements OnInit, OnDestroy {
 
-  constructor() { }
+  title: string;
+  template: TemplateRef<any>;
+  command: string;
+  commandModel: any;
+  dataSource: IDataSource<any>;
+  refreshOnSuccess: boolean;
+  loading: boolean;
+  commandText: string;
+  cancelText: string;
+
+  private _notifyMessage: Subscription;
+  private _validationError: Subscription;
+
+  constructor(public modalRef: BsModalRef) { }
+
+  ngOnDestroy(): void {
+    this._notifyMessage.unsubscribe();
+    this._validationError.unsubscribe();
+  }
 
   ngOnInit(): void {
+    this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
+      
+    });
+
+    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
+      console.log(validatorErrors);
+    });
+  }
+
+  attemptSave() {
+    this.loading = true;
+    this.dataSource.executeCommandByName(this.command, this.commandModel)
+      .pipe(
+        finalize(() => {
+          this.loading = false;
+        })
+      )
+      .subscribe(success => {
+        if (this.refreshOnSuccess)
+          this.dataSource.refresh();
+
+        this.modalRef.hide();
+      }, fail => {
+        // you do not want to close on failure.. so just ignore..
+      });
   }
 
 }

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

@@ -0,0 +1,51 @@
+import { Directive, HostListener, Input, TemplateRef } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { CommandModalComponent } from '../command-modal/command-modal.component';
+
+@Directive({
+  selector: '[psbxCommandModal]'
+})
+export class CommandModalDirective {
+
+  constructor(private modalService: BsModalService) { }
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() template: TemplateRef<any>;
+  @Input() commandTitle: string;
+  @Input() refreshOnSuccess: boolean;
+  @Input() commandText: string;
+  @Input() cancelText: string;
+  @Input() animated: boolean;
+
+  @HostListener('click')
+  wasClicked() {    
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => {      
+      const initialState = {
+        dataSource: this.dataSource,
+        command: this.command,
+        commandModel: commandModel,
+        template: this.template,
+        title: this.commandTitle,
+        refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+        commandText: this.commandText || 'OK',
+        cancelText: this.cancelText || 'Cancel'
+      };
+      this.modalService.show(CommandModalComponent, {
+        animated: this.animated === undefined ? true : this.animated,
+        initialState
+      });
+
+    }, error => {
+
+    });
+  }
+
+
+}

projects/poweredsoft/ngx-bootstrap/src/public-api.ts

@@ -3,4 +3,4 @@
  */
 
 export * from './lib/command-modal/command-modal.module';
-export * from './lib/command-modal/command-modal/command-modal.component';
+export * from './lib/command-modal/directives/command-modal.directive';

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

@@ -2,14 +2,17 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
 import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.module';
-
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
-
+import { CommandModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
-
+import {FormsModule} from '@angular/forms';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [
     CommonModule,
-    CommandModalDemoRoutingModule
+    CommandModalDemoRoutingModule,
+    DataGridModule,
+    CommandModalModule,
+    FormsModule
   ]
 })
 export class CommandModalDemoModule { }

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

@@ -1 +1,47 @@
-<p>command-modal-demo works!</p>
+<h1>
+    This is a demo for a command modal.
+</h1>
+<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
+    tableClasses="table table-sm table-dark table-striped table-bordered">
+    <ng-container *psDataGridHeader>
+        <button class="btn-primary 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>
+    </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-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchantName" [model]="model" [template]="changeName">Change name</button>
+        </ng-container>
+    </ng-container>
+    <ng-container *psDataGridFooter>
+        <button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+    </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">
+</ng-template>
+
+<ng-template #theModal let-command let-loading="loading">
+    Name
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control">
+    Address
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control">
+</ng-template>

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

@@ -1,4 +1,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';
 
 @Component({
   selector: 'ps-command-modal-demo',
@@ -7,9 +10,41 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CommandModalDemoComponent implements OnInit {
 
-  constructor() { }
+  columns = ['id','name', 'address', 'commands']
+  merchantDataSource: IDataSource<IMerchant>;  
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
 
-  ngOnInit(): void {
+  }
+
+  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();
+  }
+
+  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();
   }
 
 }

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

@@ -4,7 +4,6 @@ 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({
@@ -12,8 +11,7 @@ import { PaginationModule } from 'ngx-bootstrap/pagination';
   imports: [
     CommonModule,
     DataGridDemoRoutingModule,
-    DataGridModule,
+    DataGridModule    
-    PaginationModule
   ]
 })
 export class DataGridDemoModule { }

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

@@ -78,7 +78,7 @@ export class MerchantService {
       
       // viewModel -> transform to the form model for that command -> IChangeMerchantName
       e => of(<IAddMerchantCommand>{
-        name: '',
+        name: 'A New merchant',
         address: ''
       })
     );