From 91580070dc8414f2ff6ef58027fc395c10405f66 Mon Sep 17 00:00:00 2001
From: David Lebee <david@poweredsoft.com>
Date: Tue, 20 Jul 2021 16:41:19 -0400
Subject: [PATCH] validation error component in cdk.

---
 .../command-modal.component.html              |  4 +--
 .../command-modal/command-modal.component.ts  |  1 +
 .../directives/command-modal.directive.ts     |  2 ++
 .../ds-validation-error.component.html        |  4 +++
 .../ds-validation-error.component.scss        |  0
 .../ds-validation-error.component.ts          | 34 +++++++++++++++++++
 .../ds-validation-error.module.ts             | 14 ++++++++
 .../poweredsoft/ngx-cdk-ui/src/public-api.ts  |  6 +++-
 .../command-modal-demo.module.ts              |  3 +-
 .../command-modal-demo.component.html         | 10 ++++--
 10 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.scss
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts

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 b8ecc7e..0bb1b81 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
@@ -6,8 +6,8 @@
 </div>
 <div class="modal-body">
     <ng-container [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading }"></ng-container>
-    <div *ngIf="hasError" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
+        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
+    <div *ngIf="hasError && !disableValidationSummary" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
 </div>
 <div class="modal-footer">
     <button type="button" class="btn btn-light" (click)="modalRef.hide()"
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 1efc378..45040d7 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,6 +23,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   cancelText: string;
   form:NgForm;
   validationMessage:string ;
+  disableValidationSummary: boolean;
   btnClass:string;
   successEmitter: EventEmitter<any>; 
   hasError: boolean;
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 c8ebf6d..09c9069 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
@@ -22,6 +22,7 @@ export class CommandModalDirective {
   @Input() animated: boolean;
   @Input() btnClass:string;
   @Input() modalSize: string;
+  @Input() disableValidationSummary: boolean;
 
   @Output() success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -37,6 +38,7 @@ export class CommandModalDirective {
         commandModel: commandModel,
         template: this.template,
         title: this.commandTitle,
+        disableValidationSummary: this.disableValidationSummary === undefined ? false : this.disableValidationSummary,
         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel',
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html
new file mode 100644
index 0000000..508ef65
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html
@@ -0,0 +1,4 @@
+<ng-container *ngFor="let err of latestErrors; let isLast=last">
+    {{ err }}
+    <br *ngIf="!isLast">
+</ng-container>
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts
new file mode 100644
index 0000000..12bfa0f
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'ps-ds-validation-error',
+  templateUrl: './ds-validation-error.component.html',
+  styleUrls: ['./ds-validation-error.component.scss']
+})
+export class DsValidationErrorComponent implements OnInit, OnDestroy {
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() field: string;
+  validationErrorsSub: Subscription;
+  latestErrors: string[] = [];
+
+  constructor() { }
+
+  ngOnDestroy(): void {
+    this.validationErrorsSub?.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this.validationErrorsSub = this.dataSource.validationError$.subscribe(validationErrors => {
+      this.latestErrors = Object.keys(validationErrors.errors)
+        .filter(t => t.toLowerCase() == this.field?.toLowerCase())
+        .reduce<string[]>((prev, current) => {
+          return prev.concat(validationErrors.errors[current]);
+        }, []);
+    });
+
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts
new file mode 100644
index 0000000..5776c83
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsValidationErrorComponent } from './ds-validation-error.component';
+
+
+
+@NgModule({
+  declarations: [DsValidationErrorComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [DsValidationErrorComponent]
+})
+export class DsValidationErrorModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index bb89b15..cfd6a68 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -22,4 +22,8 @@ export * from './lib/list-view/directives/list-view-footer.directive';
 export * from './lib/list-view/directives/list-view-seperator.directive';
 
 export * from './lib/ds-search/ds-search.module';
-export * from './lib/ds-search/ds-search.component';
\ No newline at end of file
+export * from './lib/ds-search/ds-search.component';
+
+// ds validation
+export * from './lib/ds-validation-error/ds-validation-error.module';
+export * from './lib/ds-validation-error/ds-validation-error.component';
\ No newline at end of file
diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts
index 887a085..0f3c91c 100644
--- a/src/app/command-modal-demo/command-modal-demo.module.ts
+++ b/src/app/command-modal-demo/command-modal-demo.module.ts
@@ -2,7 +2,7 @@ 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 { DataGridModule, DsValidationErrorModule } from '@poweredsoft/ngx-cdk-ui';
 
 import {FormsModule} from '@angular/forms';
 import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap';
@@ -11,6 +11,7 @@ import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule
   imports: [
     CommonModule,
     CommandModalDemoRoutingModule,
+    DsValidationErrorModule,
     DataGridModule,
     CommandModalModule,
     FormsModule,
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
index 300292c..caccc85 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
@@ -6,6 +6,7 @@
     <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>
 
@@ -57,17 +58,22 @@
 
 <ng-template #changeName let-command let-loading="loading">
     New Name
-    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" 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" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
+ 
 </ng-template>
 
-<ng-template #theModal let-command let-loading="loading">
+<ng-template #theModal let-command let-loading="loading" let-ds="dataSource">
     <form   >
         Name
         <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="name">
+        </ps-ds-validation-error>
         Address
         <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
+        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="address">
+        </ps-ds-validation-error>
         Date
         <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
     </form>