From 9101c01c69939d6a5643cc35198a3e11d084da87 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 19 Apr 2018 10:53:20 -0400
Subject: [PATCH] LP#1626157 fm editor form validation

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/app/share/fm-editor/fm-editor.component.html   |  2 +-
 .../eg2/src/app/share/fm-editor/fm-editor.component.ts | 18 +++++++++---------
 .../eg2/src/app/staff/sandbox/sandbox.component.html   |  7 +++++--
 Open-ILS/src/eg2/src/styles.css                        | 13 ++++++++++++-
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index f24107f4f3..f19f6bc61d 100644
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -8,7 +8,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <form role="form">
+    <form role="form" class="form-validated">
       <div class="form-group row" *ngFor="let field of fields">
         <div class="col-lg-3 offset-lg-1">
           <label for="rec-{{field.name}}">{{field.label}}</label>
diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
index 8ae0713afd..9f13fb107b 100644
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
@@ -97,9 +97,17 @@ export class FmRecordEditorComponent
         this.recordLabel = this.idlDef.label;
     }
 
+    // Opening dialog, fetch data.
+    open(options?: NgbModalOptions): Promise<any> {
+        return this.initRecord().then(
+            ok => super.open(options),
+            err => console.warn(`Error fetching FM data: ${err}`)
+        );
+    }
+
     // Translate comma-separated string versions of various inputs
     // to arrays.
-    listifyInputs() {
+    private listifyInputs() {
         if (this.hiddenFields)
             this.hiddenFieldsList = this.hiddenFields.split(/,/);
         if (this.readonlyFields)
@@ -110,14 +118,6 @@ export class FmRecordEditorComponent
             this.orgDefaultAllowedList = this.orgDefaultAllowed.split(/,/);
     }
 
-    // Opening dialog, fetch data.
-    open(options?: NgbModalOptions): Promise<any> {
-        return this.initRecord().then(
-            ok => super.open(options),
-            err => console.warn(`Error fetching FM data: ${err}`)
-        );
-    }
-
     private initRecord(): Promise<any> {
 
         if (this.mode == 'update' || this.mode == 'view') {
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index f4cc4b6ada..a3f24de736 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -10,11 +10,14 @@ idlClass="cbt"
     idlClass="cmrcfld" mode="create" 
     recordId="1" orgDefaultAllowed="owner">
 </fm-record-editor>
-<button (click)="fmRecordEditor.open({size:'lg'})">Fm Record Editor</button>
+<button class="btn btn-dark" (click)="fmRecordEditor.open({size:'lg'})">
+    Fm Record Editor
+</button>
 
+<!-- ----- -->
 <br/><br/>
 
 <eg-progress-dialog #progressDialog>
 </eg-progress-dialog>
-<button (click)="showProgress()">Test Progress Dialog</button>
+<button class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
 
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 835d80d07b..9db4fe8d72 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -76,5 +76,16 @@ h5 {font-size: .95rem}
     }
 }
 
-
+/* --------------------------------------------------------------------------
+/* Form Validation CSS - https://angular.io/guide/form-validation
+ * TODO: these colors don't fit the EG color scheme
+ * Required valid fields are left-border styled in green-ish.
+ * Invalid fields are left-border styled in red-ish.
+ */
+.form-validated .ng-valid[required], .form-validated .ng-valid.required {
+  border-left: 8px solid #78FA89;
+}
+.form-validated .ng-invalid:not(form) {
+  border-left: 8px solid #FA787E;
+}
 
-- 
2.11.0