form group modal

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

@@ -42,6 +42,7 @@ 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

@@ -22,11 +22,13 @@ export class CommandModalDirective {
   @Input() animated: boolean;
 
   @HostListener('click')
-  wasClicked() {    
+  wasClicked() { 
+    debugger;       
     this.dataSource.resolveCommandModelByName({
       command: this.command,
       model: this.model
-    }).subscribe(commandModel => {      
+    }).subscribe(commandModel => {
+      debugger;              
       const initialState = {
         dataSource: this.dataSource,
         command: this.command,

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

@@ -0,0 +1,108 @@
+import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { FormGroupCommandModalComponent } from '../form-group-command-modal/form-group-command-modal.component';
+import { FormGroup } from '@angular/forms';
+
+export interface IModelFormCreateEvent
+{
+  shouldSetCommandModel: boolean;
+  viewModel: any;
+  commandName: string;
+  commandModel: any;
+  formGroup?: FormGroup;
+}
+
+@Directive({
+  selector: '[psbxFormGroupCommandModal]'
+})
+export class FormGroupCommandModalDirective {
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() template: TemplateRef<any>;
+  @Input() commandTitle: string;
+  @Input() animated: boolean;
+  @Input() refreshOnSuccess: boolean;
+  @Input() commandText: string;
+  @Input() cancelText: string;
+
+  @Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
+
+  constructor(private modalService: BsModalService) { }
+
+  @HostListener('click')
+  wasClicked() {
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => {
+
+      
+
+      const event = <IModelFormCreateEvent>{
+        commandName: this.command,
+        viewModel: this.model,
+        commandModel: commandModel,
+        shouldSetCommandModel: true
+      }
+
+      this.formCreate.emit(event);
+
+      if (event.formGroup == null)
+        throw new Error('form group should be set, after form createEvent');
+
+      if (event.shouldSetCommandModel)
+        event.formGroup.patchValue(commandModel);
+
+      const initialState = {
+        dataSource: this.dataSource,
+        command: this.command,
+        template: this.template,
+        title: this.commandTitle,
+        refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
+        commandText: this.commandText || 'OK',
+        cancelText: this.cancelText || 'Cancel',
+        modelForm: event.formGroup
+      };
+      
+      this.modalService.show(FormGroupCommandModalComponent, {
+        animated: this.animated === undefined ? true : this.animated,
+        initialState
+      });
+
+    }, error => {
+
+    });
+  }
+
+  // @Input()
+  // set psbxFormGroupCommandModal(element:HTMLBaseElement){
+  //   element.addEventListener('click',()=>{
+  //     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(FormGroupCommandModalComponent, {
+  //         animated: this.animated === undefined ? true : this.animated,
+  //         initialState
+  //       })
+  //     },error => {
+
+  //     });
+  //   })
+  // }
+
+}

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

@@ -1,13 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroupCommandModalComponent } from './form-group-command-modal/form-group-command-modal.component';
+import { FormGroupCommandModalDirective } from './directives/form-group-command-modal.directive';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { ReactiveFormsModule } from '@angular/forms';
+
 
 
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    ModalModule.forRoot(),
+    ReactiveFormsModule
   ],
-  declarations: [FormGroupCommandModalComponent]
+  declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
+  exports: [FormGroupCommandModalDirective]
 })
 export class FormGroupCommandModalModule { }

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

@@ -1 +1,31 @@
-<p>form-group-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="model-body">
+        <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
+        </ng-container>
+
+        <div *ngIf="errorMessage" class="alert alert-danger mt-2">
+            {{ errorMessage }}
+        </div>
+    </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">Creat</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/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { IDataSource } from '@poweredsoft/data';
+import { finalize } from 'rxjs/operators';
+import { Subscription } from 'rxjs'
+import { FormGroup, FormControl } from '@angular/forms';
 
 @Component({
   selector: 'ps-form-group-command-modal',
@@ -7,9 +12,66 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FormGroupCommandModalComponent implements OnInit {
 
-  constructor() { }
 
-  ngOnInit(): void {
+  modelForm: FormGroup;
+  title: string;
+  template: TemplateRef<any>;
+  command: string;
+  dataSource: IDataSource<any>;
+  refreshOnSuccess: boolean;
+  loading: boolean;
+  commandText: string;
+  cancelText: string;
+  errorMessage: string;
+
+  private _notifyMessage: Subscription;
+  private _validationError: Subscription;
+
+  constructor(public modalRef: BsModalRef) { }
+
+  ngOnDestroy(): void {
+    /*
+    this._notifyMessage.unsubscribe();
+    this._validationError.unsubscribe();
+    */
   }
 
+  ngOnInit(): void {
+    this.errorMessage = null;
+    // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
+      
+    // });
+
+    // this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
+    //   console.log(validatorErrors);
+    // });
+  }
+
+  attemptSave() {
+
+    this.errorMessage = null;
+    if (!this.modelForm.valid)
+    {
+      this.errorMessage = 'Form is not valid, please enter all required fields';
+      return;
+    }
+
+    const finalModel = this.modelForm.value;  
+    //this.modelForm.setValue(this.commandModel)
+    this.loading = true;
+    this.dataSource.executeCommandByName(this.command, finalModel)
+      .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/public-api.ts

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

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

@@ -3,8 +3,9 @@ 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';
+import { CommandModalModule } from '@poweredsoft/ngx-bootstrap';
 @NgModule({
   declarations: [CommandModalDemoComponent],
   imports: [

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

@@ -27,7 +27,7 @@ export class MerchantService {
       (model) => model.id,
       {
         page: 1,
-        pageSize: 50,
+        pageSize: 150,
       },
       true
     );

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

@@ -2,13 +2,21 @@ import { NgModule } from '@angular/core';
 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 { ReactiveFormsModule } from '@angular/forms';
+
 
 
 @NgModule({
   declarations: [FormGroupModalDemoComponent],
   imports: [
     CommonModule,
-    FormGroupModalDemoRoutingModule
+    FormGroupModalDemoRoutingModule,
+    DataGridModule,
+    FormGroupCommandModalModule,
+    ReactiveFormsModule
+    
   ]
 })
 export class FormGroupModalDemoModule { }

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

@@ -1 +1,36 @@
-<p>form-group-modal-demo works!</p>
+<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">
+    <ng-container *psDataGridHeader>
+            <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" 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>
+        <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="actions">
+        <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>
+</ps-data-grid>
+
+<ng-template #theModal let-form let-loading="loading">
+    <form [formGroup]="form">
+        <div class="form-group">
+            <label for="name" class="col-sm-2 control-label">Name</label>
+            <div class="col-sm-8">
+                <input id="name" type="text" class="form-control" formControlName="name">
+            </div>
+        </div>
+    </form>
+</ng-template>

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

@@ -1,4 +1,9 @@
 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 { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
+import { IModelFormCreateEvent } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
 
 @Component({
   selector: 'ps-form-group-modal-demo',
@@ -6,10 +11,42 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./form-group-modal-demo.component.scss']
 })
 export class FormGroupModalDemoComponent implements OnInit {
-
+ 
-  constructor() { }
+  createDataSource(): IDataSource<IMerchant> {
-
+    return this.merchantService.createDataSource();
-  ngOnInit(): void {
   }
 
+  
+  merchantDataSource: IDataSource<IMerchant>;
+  columns = ['id','name', 'address', 'actions'];
+  constructor(private merchantService: MerchantService, private fb: FormBuilder) {
+    this.merchantDataSource = this.createDataSource();
+   }
+
+  ngOnInit(): void {
+    this.merchantDataSource.refresh();
+  }
+
+  onFormCreate(event: IModelFormCreateEvent) {
+    event.shouldSetCommandModel = false;
+    event.formGroup = this.fb.group({
+      'name': [event.commandModel.name, Validators.required]
+    });
+  }
+
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
 }