From db7c260bc3dd57a8ddfa1d683b7a7e1d9378fd09 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Wed, 22 Jan 2020 17:57:28 -0500
Subject: [PATCH] wrap the search form in a <form> element

Also adjust button types and ngModelOptions with the goal
of enabling press-enter-to-submit-form.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../acq/search/acq-search-form.component.html      | 200 +++++++++++----------
 1 file changed, 101 insertions(+), 99 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
index 4450117e7c..fddafbf491 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
@@ -1,106 +1,108 @@
 <div id="acq-search-form" class="pl-3 pr-3 pt-3 pb-3">
-<div class="row mb-1">
-  <div class="col-lg-5 form-group form-inline">
-    <label i18n>Search for records matching
-    <select class="form-inline ml-1 mr-1" id="acq-search-conjunction" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchConjunction">
-      <option i18n select value="all">all</option>
-      <option i18n select value="any">any</option>
-    </select>
-    of the following terms:</label>
+<form>
+  <div class="row mb-1">
+    <div class="col-lg-5 form-group form-inline">
+      <label i18n>Search for records matching
+      <select class="form-inline ml-1 mr-1" id="acq-search-conjunction" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchConjunction">
+        <option i18n select value="all">all</option>
+        <option i18n select value="any">any</option>
+      </select>
+      of the following terms:</label>
+    </div>
+    <div class="col-lg-6"></div>
+    <div class="col-lg-1">
+      <a class="with-material-icon no-href text-primary"
+        title="Show Form" i18n-title
+        *ngIf="!showForm" (click)="showForm=true">
+        <span class="material-icons">expand_more</span>
+      </a>
+      <a class="with-material-icon no-href text-primary"
+        title="Hide Form" i18n-title
+        *ngIf="showForm" (click)="showForm=false">
+        <span class="material-icons">expand_less</span>
+      </a>
+    </div>
   </div>
-  <div class="col-lg-6"></div>
-  <div class="col-lg-1">
-    <a class="with-material-icon no-href text-primary"
-      title="Show Form" i18n-title
-      *ngIf="!showForm" (click)="showForm=true">
-      <span class="material-icons">expand_more</span>
-    </a>
-    <a class="with-material-icon no-href text-primary"
-      title="Hide Form" i18n-title
-      *ngIf="showForm" (click)="showForm=false">
-      <span class="material-icons">expand_less</span>
-    </a>
-  </div>
-</div>
-<div class="row mb-1" *ngFor="let t of searchTerms; let idx=index" [hidden]="!showForm">
-  <div class="col-lg-3">
-    <select class="form-control" id="selected-search-term" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.field"
-      (change)="clearSearchTerm(t)">
-      <option disabled="disabled" i18n>Select Search Field</option>
-      <optgroup *ngFor="let g of hints" label="{{availableSearchFields[g]['__label']}}">
-        <option *ngFor="let o of availableSearchFields[g]['__fields']" value="{{g}}:{{o}}">
-          {{availableSearchFields[g][o].label}}
-        </option>
-      </optgroup>
-    </select>
-  </div>
-  <div class="col-lg-2">
-    <select class="form-control" id="selected-search-op" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.op"
-      (change)="clearSearchTermValueAfterOpChange(t)">
-      <option i18n value="">is</option>
-      <option i18n value="__not">is NOT</option>
-      <option i18n value="__fuzzy" [disabled]="searchTermDatatypes[t.field] != 'text'">contains</option>
-      <option i18n value="__not,__fuzzy" [disabled]="searchTermDatatypes[t.field] != 'text'">does NOT contain</option>
-      <option i18n value="__starts" [disabled]="searchTermDatatypes[t.field] != 'text'">STARTS with</option>
-      <option i18n value="__ends" [disabled]="searchTermDatatypes[t.field] != 'text'">ENDS with</option>
-      <option i18n value="__lte" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is on or BEFORE</option>
-      <option i18n value="__gte" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is on or AFTER</option>
-      <option i18n value="__between" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is BETWEEN</option>
-      <option i18n value="__age" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">age (relative date)</option>
-      <option i18n value="__in">matches a term from a file</option>
-    </select>
-  </div>
-  <div class="col-lg-3">
-    <ng-container *ngIf="t.op == '__in'">
-      <eg-file-reader [(ngModel)]="t.value1"></eg-file-reader>
-    </ng-container>
-    <ng-container *ngIf="t.op !== '__in'">
-      <input [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'id'" class="form-control" />
-      <input [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'text'" class="form-control" />
-      <input [(ngModel)]="t.value1" type="number" *ngIf="searchTermDatatypes[t.field] == 'int'" class="form-control" />
-      <input [(ngModel)]="t.value1" type="number" *ngIf="searchTermDatatypes[t.field] == 'money'" class="form-control" />
-      <eg-org-select *ngIf="searchTermDatatypes[t.field] == 'org_unit'"
-        [initialOrgId]="t.value1"
-        (onChange)="setOrgUnitSearchValue($event, t)">
-      </eg-org-select>
-      <eg-combobox *ngIf="searchTermDatatypes[t.field] == 'link'"
-        [idlClass]="searchFieldLinkedClasses[t.field]"
-        [selectedId]="t.value1"
-        (onChange)="t.value1 = $event ? $event.id : ''">
-      </eg-combobox>
-      <eg-date-select *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op != '__age'"
-        (onChangeAsIso)="t.value1 = $event ? $event : ''; t.is_date = true">
-      </eg-date-select>
-      <ng-container *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__between'">
-        <span i18n>and</span>
-        <eg-date-select
-          (onChangeAsIso)="t.value2 = $event ? $event : ''; t.is_date = true">
+  <div class="row mb-1" *ngFor="let t of searchTerms; let idx=index" [hidden]="!showForm">
+    <div class="col-lg-3">
+      <select class="form-control" id="selected-search-term" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.field"
+        (change)="clearSearchTerm(t)">
+        <option disabled="disabled" i18n>Select Search Field</option>
+        <optgroup *ngFor="let g of hints" label="{{availableSearchFields[g]['__label']}}">
+          <option *ngFor="let o of availableSearchFields[g]['__fields']" value="{{g}}:{{o}}">
+            {{availableSearchFields[g][o].label}}
+          </option>
+        </optgroup>
+      </select>
+    </div>
+    <div class="col-lg-2">
+      <select class="form-control" id="selected-search-op" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.op"
+        (change)="clearSearchTermValueAfterOpChange(t)">
+        <option i18n value="">is</option>
+        <option i18n value="__not">is NOT</option>
+        <option i18n value="__fuzzy" [disabled]="searchTermDatatypes[t.field] != 'text'">contains</option>
+        <option i18n value="__not,__fuzzy" [disabled]="searchTermDatatypes[t.field] != 'text'">does NOT contain</option>
+        <option i18n value="__starts" [disabled]="searchTermDatatypes[t.field] != 'text'">STARTS with</option>
+        <option i18n value="__ends" [disabled]="searchTermDatatypes[t.field] != 'text'">ENDS with</option>
+        <option i18n value="__lte" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is on or BEFORE</option>
+        <option i18n value="__gte" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is on or AFTER</option>
+        <option i18n value="__between" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">is BETWEEN</option>
+        <option i18n value="__age" [disabled]="searchTermDatatypes[t.field] != 'timestamp'">age (relative date)</option>
+        <option i18n value="__in">matches a term from a file</option>
+      </select>
+    </div>
+    <div class="col-lg-3">
+      <ng-container *ngIf="t.op == '__in'">
+        <eg-file-reader [(ngModel)]="t.value1" [ngModelOptions]="{standalone: true}"></eg-file-reader>
+      </ng-container>
+      <ng-container *ngIf="t.op !== '__in'">
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'id'" class="form-control" />
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'text'" class="form-control" />
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="number" *ngIf="searchTermDatatypes[t.field] == 'int'" class="form-control" />
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="number" *ngIf="searchTermDatatypes[t.field] == 'money'" class="form-control" />
+        <eg-org-select *ngIf="searchTermDatatypes[t.field] == 'org_unit'"
+          [initialOrgId]="t.value1"
+          (onChange)="setOrgUnitSearchValue($event, t)">
+        </eg-org-select>
+        <eg-combobox *ngIf="searchTermDatatypes[t.field] == 'link'"
+          [idlClass]="searchFieldLinkedClasses[t.field]"
+          [selectedId]="t.value1"
+          (onChange)="t.value1 = $event ? $event.id : ''">
+        </eg-combobox>
+        <eg-date-select *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op != '__age'"
+          (onChangeAsIso)="t.value1 = $event ? $event : ''; t.is_date = true">
         </eg-date-select>
+        <ng-container *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__between'">
+          <span i18n>and</span>
+          <eg-date-select
+            (onChangeAsIso)="t.value2 = $event ? $event : ''; t.is_date = true">
+          </eg-date-select>
+        </ng-container>
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__age'" class="form-control" />
+        <input [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__age'" class="form-control" />
       </ng-container>
-      <input [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__age'" class="form-control" />
-      <input [(ngModel)]="t.value1" type="text" *ngIf="searchTermDatatypes[t.field] == 'timestamp' && t.op == '__age'" class="form-control" />
-    </ng-container>
+    </div>
+    <div class="col-lg-2 pl-0 pr-1">
+      <button class="btn btn-sm material-icon-button" type="button"
+        (click)="addSearchTerm()"
+        i18n-title title="Add Search Row">
+        <span class="material-icons">add_circle_outline</span>
+      </button>
+      <button class="btn btn-sm material-icon-button" type="button"
+        (click)="delSearchTerm(idx)"
+        i18n-title title="Remove Search Row">
+        <span class="material-icons">remove_circle_outline</span>
+      </button>
+    </div>
   </div>
-  <div class="col-lg-2 pl-0 pr-1">
-    <button class="btn btn-sm material-icon-button"
-      (click)="addSearchTerm()"
-      i18n-title title="Add Search Row">
-      <span class="material-icons">add_circle_outline</span>
-    </button>
-    <button class="btn btn-sm material-icon-button"
-      (click)="delSearchTerm(idx)"
-      i18n-title title="Remove Search Row">
-      <span class="material-icons">remove_circle_outline</span>
-    </button>
+  <div class="row" [hidden]="!showForm">
+    <div class="col-lg-2">
+      <button class="form-control btn btn-success" (click)="submitSearch()" type="submit" i18n>Search</button>
+    </div>
+    <div class="col-lg-8"></div>
+    <div class="col-lg-2">
+      <button class="form-control btn btn-primary" (click)="saveSearchAsDefault()" type="button" i18n>Set As Default Search</button>
+    </div>
   </div>
-</div>
-<div class="row" [hidden]="!showForm">
-  <div class="col-lg-2">
-    <button class="form-control btn btn-success" (click)="submitSearch()" i18n>Search</button>
-  </div>
-  <div class="col-lg-8"></div>
-  <div class="col-lg-2">
-    <button class="form-control btn btn-primary" (click)="saveSearchAsDefault()" i18n>Set As Default Search</button>
-  </div>
-</div>
+</form>
 </div>
-- 
2.11.0