LP#1626157 fm editor form validation

Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 f24107f..f19f6bc 100644 (file)
--- 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 8ae0713..9f13fb1 100644 (file)
--- 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 f4cc4b6..a3f24de 100644 (file)
--- 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 835d80d..9db4fe8 100644 (file)
--- 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;
+}