Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html

   1
   2 <div class="patron-search-form">
   3   <div class="row mb-2">
   4     <div class="col-lg-2">
   5       <input class="form-control" type="text" id='focus-this-input'
   6         i18n-aria-label aria-label="Last Name" (keyup.enter)="go()"
   7         i18n-placeholder placeholder="Last Name"
   8         [(ngModel)]="search.family_name"/>
   9     </div>
  10     <div class="col-lg-2">
  11       <input class="form-control" type="text" (keyup.enter)="go()"
  12         i18n-aria-label aria-label="First Name"
  13         i18n-placeholder placeholder="First Name"
  14         [(ngModel)]="search.first_given_name"/>
  15     </div>
  16     <div class="col-lg-2">
  17       <input class="form-control" type="text" (keyup.enter)="go()"
  18         i18n-aria-label aria-label="Middle Name"
  19         i18n-placeholder placeholder="Middle Name"
  20         [(ngModel)]="search.second_given_name"/>
  21     </div>
  22     <div class="col-lg-2">
  23       <input class="form-control" type="text" (keyup.enter)="go()"
  24         i18n-aria-label aria-label="Name Keywords"
  25         i18n-placeholder placeholder="Name Keywords"
  26         [(ngModel)]="search.name"/>
  27     </div>
  28     <div class="col-lg-2">
  29       <button class="btn btn-success" (click)="go()" i18n>Search</button>
  30       <button (click)="toggleExpandForm()"
  31         class="btn btn-outline-dark ml-2 label-with-material-icon"
  32         i18n-title title="Toggle Expanded Form Display">
  33         <span *ngIf="!expandForm" class="material-icons">arrow_drop_down</span>
  34         <span *ngIf="expandForm"  class="material-icons">arrow_drop_up</span>
  35       </button>
  36     </div>
  37     <div class="col-lg-2">
  38     </div>
  39   </div>
  40
  41   <ng-container *ngIf="expandForm">
  42     <div class="row mb-2">
  43       <div class="col-lg-2">
  44         <input class="form-control" type="text" (keyup.enter)="go()"
  45           i18n-aria-label aria-label="Barcode"
  46           i18n-placeholder placeholder="Barcode"
  47           [(ngModel)]="search.card"/>
  48       </div>
  49       <div class="col-lg-2">
  50         <input class="form-control" type="text" (keyup.enter)="go()"
  51           i18n-aria-label aria-label="Alias"
  52           i18n-placeholder placeholder="Alias"
  53           [(ngModel)]="search.alias"/>
  54       </div>
  55       <div class="col-lg-2">
  56         <input class="form-control" type="text" (keyup.enter)="go()"
  57           i18n-aria-label aria-label="Username"
  58           i18n-placeholder placeholder="Username"
  59           [(ngModel)]="search.usrname"/>
  60       </div>
  61       <div class="col-lg-2">
  62         <input class="form-control" type="text" (keyup.enter)="go()"
  63           i18n-aria-label aria-label="Email"
  64           i18n-placeholder placeholder="Email"
  65           [(ngModel)]="search.email"/>
  66       </div>
  67       <div class="col-lg-2">
  68         <button class="btn btn-warning" (click)="clear()" i18n>Clear Form</button>
  69       </div>
  70       <div class="col-lg-2">
  71       </div>
  72     </div>
  73     <div class="row mb-2">
  74       <div class="col-lg-2">
  75         <input class="form-control" type="text" (keyup.enter)="go()"
  76           i18n-aria-label aria-label="Identification"
  77           i18n-placeholder placeholder="Identification"
  78           [(ngModel)]="search.ident"/>
  79       </div>
  80       <div class="col-lg-2">
  81         <input class="form-control" type="text" (keyup.enter)="go()"
  82           i18n-aria-label aria-label="Phone"
  83           i18n-placeholder placeholder="Phone"
  84           [(ngModel)]="search.phone"/>
  85       </div>
  86       <div class="col-lg-2">
  87         <input class="form-control" type="text" (keyup.enter)="go()"
  88           i18n-aria-label aria-label="Street 1"
  89           i18n-placeholder placeholder="Street 1"
  90           [(ngModel)]="search.street1"/>
  91       </div>
  92       <div class="col-lg-2">
  93         <input class="form-control" type="text" (keyup.enter)="go()"
  94           i18n-aria-label aria-label="Street 2"
  95           i18n-placeholder placeholder="Street 2"
  96           [(ngModel)]="search.street2"/>
  97       </div>
  98       <div class="col-lg-2">
  99         <input class="form-control" type="text" (keyup.enter)="go()"
 100           i18n-aria-label aria-label="City"
 101           i18n-placeholder placeholder="City"
 102           [(ngModel)]="search.city"/>
 103       </div>
 104       <div class="col-lg-2"></div>
 105     </div>
 106     <div class="row mb-2">
 107       <div class="col-lg-2">
 108         <input class="form-control" type="text" (keyup.enter)="go()"
 109           i18n-aria-label aria-label="State"
 110           i18n-placeholder placeholder="State"
 111           [(ngModel)]="search.state"/>
 112       </div>
 113       <div class="col-lg-2">
 114         <input class="form-control" type="text" (keyup.enter)="go()"
 115           i18n-aria-label aria-label="Post Code"
 116           i18n-placeholder placeholder="Post Code"
 117           [(ngModel)]="search.post_code"/>
 118       </div>
 119       <div class="col-lg-2">
 120         <eg-profile-select [useDisplayEntries]="true"
 121           [(ngModel)]="search.profile">
 122         </eg-profile-select>
 123       </div>
 124       <div class="col-lg-2">
 125         <eg-org-select (onChange)="searchOrg = $event"
 126           persistKey="patron.search"
 127           [fallbackOrg]="org.root()"
 128           i18n-placeholder placeholder="Home Library">
 129         </eg-org-select>
 130         <!-- home org -->
 131       </div>
 132       <div class="col-lg-2">
 133         <input class="form-control" type="text" (keyup.enter)="go()"
 134           i18n-aria-label aria-label="Guardian"
 135           i18n-placeholder placeholder="Guardian"
 136           [(ngModel)]="search.guardian"/>
 137       </div>
 138       <div class="col-lg-2"></div>
 139     </div>
 140     <div class="row mb-2">
 141       <div class="col-lg-2">
 142         <input class="form-control" type="text" (keyup.enter)="go()"
 143           i18n-aria-label aria-label="DOB Year"
 144           i18n-placeholder placeholder="DOB Year"
 145           [(ngModel)]="search.dob_year"/>
 146       </div>
 147       <div class="col-lg-2">
 148         <input class="form-control" type="text" (keyup.enter)="go()"
 149           i18n-aria-label aria-label="DOB Month"
 150           i18n-placeholder placeholder="DOB Month"
 151           [(ngModel)]="search.dob_month"/>
 152       </div>
 153       <div class="col-lg-2">
 154         <input class="form-control" type="text" (keyup.enter)="go()"
 155           i18n-aria-label aria-label="DOB Day"
 156           i18n-placeholder placeholder="DOB Day"
 157           [(ngModel)]="search.dob_day"/>
 158       </div>
 159       <div class="col-lg-2">
 160         <input class="form-control" type="text" (keyup.enter)="go()"
 161           i18n-aria-label aria-label="Database ID"
 162           i18n-placeholder placeholder="Database ID"
 163           [(ngModel)]="search.id"/>
 164       </div>
 165       <div class="col-lg-2">
 166         <div class="form-check form-check-inline">
 167           <input class="form-check-input" type="checkbox"
 168             (change)="toggleIncludeInactive()"
 169             id="include-inactive" [(ngModel)]="search.inactive">
 170           <label class="form-check-label" for="include-inactive" i18n>
 171             Include Inactive
 172           ?</label>
 173         </div>
 174       </div>
 175       <div class="col-lg-2"></div>
 176     </div>
 177   </ng-container><!-- expand form -->
 178 </div>
 179
 180 <div class="patron-search-grid">
 181   <eg-grid #searchGrid idlClass="au"
 182     persistKey="circ.patron.search"
 183     (onRowActivate)="rowsSelected($event)"
 184     [dataSource]="dataSource"
 185     [showDeclaredFieldsOnly]="true">
 186
 187     <eg-grid-column path='id'
 188       i18n-label label="ID"></eg-grid-column>
 189     <eg-grid-column path='card.barcode'
 190       i18n-label label="Card"></eg-grid-column>
 191     <eg-grid-column path='profile.name'
 192       i18n-label label="Profile"></eg-grid-column>
 193     <eg-grid-column path='family_name'
 194       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 195     <eg-grid-column path='first_given_name'
 196       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 197     <eg-grid-column path='second_given_name'
 198       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 199     <eg-grid-column path='dob'
 200       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 201     <eg-grid-column path='home_ou.shortname'
 202       i18n-label label="Home Library"></eg-grid-column>
 203     <eg-grid-column path='create_date' i18n-label label="Created On"
 204       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 205
 206     <eg-grid-column i18n-label label="Mailing:Street 1"
 207       path='mailing_address.street1' visible></eg-grid-column>
 208     <eg-grid-column i18n-label label="Mailing:Street 2"
 209       path='mailing_address.street2'></eg-grid-column>
 210     <eg-grid-column i18n-label label="Mailing:City"
 211       path='mailing_address.city'></eg-grid-column>
 212     <eg-grid-column i18n-label label="Mailing:County"
 213       path='mailing_address.county'></eg-grid-column>
 214     <eg-grid-column i18n-label label="Mailing:State"
 215       path='mailing_address.state'></eg-grid-column>
 216     <eg-grid-column i18n-label label="Mailing:Zip"
 217       path='mailing_address.post_code'></eg-grid-column>
 218
 219     <eg-grid-column i18n-label label="Billing:Street 1"
 220       path='billing_address.street1'></eg-grid-column>
 221     <eg-grid-column i18n-label label="Billing:Street 2"
 222       path='billing_address.street2'></eg-grid-column>
 223     <eg-grid-column i18n-label label="Billing:City"
 224       path='billing_address.city'></eg-grid-column>
 225     <eg-grid-column i18n-label label="Billing:County"
 226       path='billing_address.county'></eg-grid-column>
 227     <eg-grid-column i18n-label label="Billing:State"
 228       path='billing_address.state'></eg-grid-column>
 229     <eg-grid-column i18n-label label="Billing:Zip"
 230       path='billing_address.post_code'></eg-grid-column>
 231   </eg-grid>
 232
 233 </div>
 234