LP1904036 Patron sesarch form improvements

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html b/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html
index a6c3f1b..952cb42 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html
@@ -1,32 +1,34 @@
 
 <div class="patron-search-form">
-  <div class="row mb-2">
-    <div class="col-lg-2">
+  <div class="row m-0 mb-2">
+    <div class="col-lg-2 pl-1 pr-1">
       <input class="form-control" type="text" id='focus-this-input'
         i18n-aria-label aria-label="Last Name" (keyup.enter)="go()"
         i18n-placeholder placeholder="Last Name"
         [(ngModel)]="search.family_name"/>
     </div>
-    <div class="col-lg-2">
+    <div class="col-lg-2 pl-1 pr-1">
       <input class="form-control" type="text" (keyup.enter)="go()"
         i18n-aria-label aria-label="First Name"
         i18n-placeholder placeholder="First Name"
         [(ngModel)]="search.first_given_name"/>
     </div>
-    <div class="col-lg-2">
+    <div class="col-lg-2 pl-1 pr-1">
       <input class="form-control" type="text" (keyup.enter)="go()"
         i18n-aria-label aria-label="Middle Name"
         i18n-placeholder placeholder="Middle Name"
         [(ngModel)]="search.second_given_name"/>
     </div>
-    <div class="col-lg-2">
+    <div class="col-lg-2 pl-1 pr-1">
       <input class="form-control" type="text" (keyup.enter)="go()"
         i18n-aria-label aria-label="Name Keywords"
         i18n-placeholder placeholder="Name Keywords"
         [(ngModel)]="search.name"/>
     </div>
-    <div class="col-lg-2">
-      <button class="btn btn-success" (click)="go()" i18n>Search</button>
+    <div class="col-lg-2 pl-1 pr-1">
+      <button class="btn btn-success w-100" (click)="go()" i18n>Search</button>
+    </div>
+    <div class="col-lg-2 pl-1 pr-1">
       <button (click)="toggleExpandForm()"
         class="btn btn-outline-dark ml-2 label-with-material-icon"
         i18n-title title="Toggle Expanded Form Display">
@@ -34,94 +36,92 @@
         <span *ngIf="expandForm"  class="material-icons">arrow_drop_up</span>
       </button>
     </div>
-    <div class="col-lg-2">
-    </div>
   </div>
 
   <ng-container *ngIf="expandForm">
-    <div class="row mb-2">
-      <div class="col-lg-2">
+    <div class="row m-0 mb-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Barcode"
           i18n-placeholder placeholder="Barcode"
           [(ngModel)]="search.card"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Alias"
           i18n-placeholder placeholder="Alias"
           [(ngModel)]="search.alias"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Username"
           i18n-placeholder placeholder="Username"
           [(ngModel)]="search.usrname"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Email"
           i18n-placeholder placeholder="Email"
           [(ngModel)]="search.email"/>
       </div>
-      <div class="col-lg-2">
-        <button class="btn btn-warning" (click)="clear()" i18n>Clear Form</button>
+      <div class="col-lg-2 pl-1 pr-1">
+        <button class="btn btn-warning w-100" (click)="clear()" i18n>Clear Form</button>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
       </div>
     </div>
-    <div class="row mb-2">
-      <div class="col-lg-2">
+    <div class="row m-0 mb-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Identification"
           i18n-placeholder placeholder="Identification"
           [(ngModel)]="search.ident"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Phone"
           i18n-placeholder placeholder="Phone"
           [(ngModel)]="search.phone"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Street 1"
           i18n-placeholder placeholder="Street 1"
           [(ngModel)]="search.street1"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Street 2"
           i18n-placeholder placeholder="Street 2"
           [(ngModel)]="search.street2"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="City"
           i18n-placeholder placeholder="City"
           [(ngModel)]="search.city"/>
       </div>
-      <div class="col-lg-2"></div>
+      <div class="col-lg-2 pl-1 pr-1"></div>
     </div>
-    <div class="row mb-2">
-      <div class="col-lg-2">
+    <div class="row m-0 mb-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="State"
           i18n-placeholder placeholder="State"
           [(ngModel)]="search.state"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Post Code"
           i18n-placeholder placeholder="Post Code"
           [(ngModel)]="search.post_code"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <eg-profile-select [useDisplayEntries]="true" 
           [(ngModel)]="search.profile">
         </eg-profile-select>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <eg-org-select (onChange)="searchOrg = $event"
           persistKey="patron.search"
           [fallbackOrg]="org.root()"
@@ -129,58 +129,59 @@
         </eg-org-select>
         <!-- home org -->
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Guardian"
           i18n-placeholder placeholder="Guardian"
           [(ngModel)]="search.guardian"/>
       </div>
-      <div class="col-lg-2"></div>
+      <div class="col-lg-2 pl-1 pr-1"></div>
     </div>
-    <div class="row mb-2">
-      <div class="col-lg-2">
+    <div class="row m-0 mb-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="DOB Year"
           i18n-placeholder placeholder="DOB Year"
           [(ngModel)]="search.dob_year"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="DOB Month"
           i18n-placeholder placeholder="DOB Month"
           [(ngModel)]="search.dob_month"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="DOB Day"
           i18n-placeholder placeholder="DOB Day"
           [(ngModel)]="search.dob_day"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-2 pl-1 pr-1">
         <input class="form-control" type="text" (keyup.enter)="go()"
           i18n-aria-label aria-label="Database ID"
           i18n-placeholder placeholder="Database ID"
           [(ngModel)]="search.id"/>
       </div>
-      <div class="col-lg-2">
+      <div class="col-lg-3">
         <div class="form-check form-check-inline">
           <input class="form-check-input" type="checkbox" 
             (change)="toggleIncludeInactive()"
             id="include-inactive" [(ngModel)]="search.inactive">
           <label class="form-check-label" for="include-inactive" i18n>
             Include Inactive
-          ?</label>
+          </label>
         </div>
       </div>
-      <div class="col-lg-2"></div>
+      <div class="col-lg-1"></div>
     </div>
   </ng-container><!-- expand form -->
 </div>
 
-<div class="patron-search-grid">
+<div class="patron-search-grid mt-4">
   <eg-grid #searchGrid idlClass="au" 
     persistKey="circ.patron.search"
     (onRowActivate)="rowsSelected($event)"
+    (onRowClick)="rowsClicked($event)"
     [dataSource]="dataSource" 
     [showDeclaredFieldsOnly]="true"> 
 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.ts b/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.ts
index 004f684..e5a7775 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/patron/search.component.ts
@@ -38,6 +38,7 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
 
     // Fired on dbl-click of a search result row.
     @Output() patronsSelected: EventEmitter<any>;
+    @Output() patronsClicked: EventEmitter<any>;
 
     search: any = {};
     searchOrg: IdlObject;
@@ -53,6 +54,7 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
         private store: ServerStoreService
     ) {
         this.patronsSelected = new EventEmitter<any>();
+        this.patronsClicked = new EventEmitter<any>();
         this.dataSource = new GridDataSource();
         this.dataSource.getRows = (pager: Pager, sort: any[]) => {
             return this.getRows(pager, sort);
@@ -93,6 +95,10 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
         this.patronsSelected.emit([].concat(rows));
     }
 
+    rowsClicked(rows: IdlObject | IdlObject[]) {
+        this.patronsClicked.emit([].concat(rows));
+    }
+
     getSelected(): IdlObject[] {
         return this.searchGrid ?
             this.searchGrid.context.getSelectedRows() : [];