LP2000485 Bootstrap 5: Acq search form

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

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 c0f5d64..9f55959 100644 (file)
--- 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
@@ -3,16 +3,16 @@
 
 <div id="acq-search-form" class="ps-3 pe-3 pt-3 pb-3 mb-3">
 <form>
-  <div class="row mb-1">
+  <div class="row row-cols-auto mb-1">
     <div class="col form-group form-inline">
       <label class="form-label" i18n>Search for records matching
-      <select class="form-inline ms-1 me-1" id="acq-search-conjunction" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchConjunction">
+      <select class="form-select form-inline ms-1 me-1" id="acq-search-conjunction" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchConjunction">
         <option value="all">all</option>
         <option value="any">any</option>
       </select>
       of the following terms:</label>
     </div>
-    <div class="col-auto">
+    <div class="col">
       <a class="with-material-icon no-href text-primary"
         title="Show Form" i18n-title
         tabindex="0"
@@ -27,8 +27,8 @@
       </a>
     </div>
   </div>
-  <div class="row mb-1" *ngFor="let t of searchTerms; let idx=index" [hidden]="!showForm">
-    <div class="col-md-5 col-lg-3">
+  <div class="row row-cols-auto mb-1" *ngFor="let t of searchTerms; let idx=index" [hidden]="!showForm">
+    <div class="col">
       <select class="form-select" id="selected-search-term" [ngModelOptions]="{standalone: true}" [ngModel]="t.field"
         (ngModelChange)="old = t.field; t.field = $event"
         (change)="clearSearchTerm(t, old)">
@@ -40,7 +40,7 @@
         </optgroup>
       </select>
     </div>
-    <div class="col-xs-2 ps-3">
+    <div class="col ps-3">
       <select class="form-select" id="selected-search-op" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.op"
         (ngModelChange)="oldOp = t.op; t.op = $event"
         (change)="clearSearchTermValueAfterOpChange(t, oldOp)">
@@ -59,7 +59,7 @@
         <option i18n value="__in">matches a term from a file</option>
       </select>
     </div>
-    <div class="col-sm-3">
+    <div class="col">
       <ng-container *ngIf="t.op === '__in' || t.op === '__isnull' || t.op === '__isnotnull'">
         <ng-container *ngIf="t.op === '__in'">
           <eg-file-reader [(ngModel)]="t.value1" [ngModelOptions]="{standalone: true}"></eg-file-reader>
@@ -79,7 +79,7 @@
         <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" />
-        <select [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" *ngIf="searchTermDatatypes[t.field] === 'bool'" class="form-control">
+        <select [ngModelOptions]="{standalone: true}" [(ngModel)]="t.value1" *ngIf="searchTermDatatypes[t.field] === 'bool'" class="form-select">
           <option i18n value="t">Yes</option>
           <option i18n value="f">No</option>
         </select>
@@ -130,7 +130,7 @@
        </ng-template>
       </ng-container>
     </div>
-    <div class="col-xs-2 ps-3 pe-1">
+    <div class="col ps-3 pe-1">
       <button class="btn btn-sm material-icon-button" type="button"
         (click)="addSearchTerm()"
         i18n-title title="Add Search Row"><span class="visually-hidden">Add Search Row</span>
@@ -143,18 +143,18 @@
       </button>
     </div>
   </div>
-  <div class="row" [hidden]="!showForm">
-    <div class="col-sm-2">
+  <div class="row row-cols-auto" [hidden]="!showForm">
+    <div class="col">
       <button class="btn btn-success" (click)="submitSearch()" type="submit" i18n>Search</button>
     </div>
-    <div class="col-xs-3"></div>
-    <div class="col-xs-5 ps-3">
+    <div class="col"></div>
+    <div class="col ps-3">
       <button class="btn btn-primary me-1" (click)="saveSearchAsDefault()" type="button" i18n>Set As Default {{searchTypeLabel}} Search</button>
       <button class="btn btn-secondary" (click)="clearDefaultSearch()" type="button" [disabled]="!hasDefaultSearch" i18n>
         Reset Default Search
       </button>
     </div>
-    <div class="col-xs-3 ps-5">
+    <div class="col ps-5">
       <input class="form-check-input" type="checkbox" id="retrieve-immediately"
              (change)="saveRunImmediately()"
              [ngModelOptions]="{standalone: true}" [(ngModel)]="runImmediately"/>