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.barcode"/>
  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           [applyOrgId]="searchOrg ? searchOrg.id() : null"
 127           i18n-placeholder placeholder="Home Library">
 128         </eg-org-select>
 129         <!-- home org -->
 130       </div>
 131       <div class="col-lg-2">
 132         <input class="form-control" type="text" (keyup.enter)="go()"
 133           i18n-aria-label aria-label="Guardian"
 134           i18n-placeholder placeholder="Guardian"
 135           [(ngModel)]="search.guardian"/>
 136       </div>
 137       <div class="col-lg-2"></div>
 138     </div>
 139     <div class="row mb-2">
 140       <div class="col-lg-2">
 141         <input class="form-control" type="text" (keyup.enter)="go()"
 142           i18n-aria-label aria-label="DOB Year"
 143           i18n-placeholder placeholder="DOB Year"
 144           [(ngModel)]="search.dob_year"/>
 145       </div>
 146       <div class="col-lg-2">
 147         <input class="form-control" type="text" (keyup.enter)="go()"
 148           i18n-aria-label aria-label="DOB Month"
 149           i18n-placeholder placeholder="DOB Month"
 150           [(ngModel)]="search.dob_month"/>
 151       </div>
 152       <div class="col-lg-2">
 153         <input class="form-control" type="text" (keyup.enter)="go()"
 154           i18n-aria-label aria-label="DOB Day"
 155           i18n-placeholder placeholder="DOB Day"
 156           [(ngModel)]="search.dob_day"/>
 157       </div>
 158       <div class="col-lg-2">
 159         <input class="form-control" type="text" (keyup.enter)="go()"
 160           i18n-aria-label aria-label="Database ID"
 161           i18n-placeholder placeholder="Database ID"
 162           [(ngModel)]="search.id"/>
 163       </div>
 164       <div class="col-lg-2">
 165         <div class="form-check form-check-inline">
 166           <input class="form-check-input" type="checkbox"
 167             (change)="toggleIncludeInactive()"
 168             id="include-inactive" [(ngModel)]="search.inactive">
 169           <label class="form-check-label" for="include-inactive" i18n>
 170             Include Inactive
 171           ?</label>
 172         </div>
 173       </div>
 174       <div class="col-lg-2"></div>
 175     </div>
 176   </ng-container><!-- expand form -->
 177 </div>
 178
 179 <div class="patron-search-grid">
 180   <eg-grid #searchGrid idlClass="au"
 181     persistKey="circ.patron.search"
 182     (onRowActivate)="rowsSelected($event)"
 183     [dataSource]="dataSource"
 184     [showDeclaredFieldsOnly]="true">
 185
 186     <eg-grid-column path='id'
 187       i18n-label label="ID"></eg-grid-column>
 188     <eg-grid-column path='card.barcode'
 189       i18n-label label="Card"></eg-grid-column>
 190     <eg-grid-column path='profile.name'
 191       i18n-label label="Profile"></eg-grid-column>
 192     <eg-grid-column path='family_name'
 193       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 194     <eg-grid-column path='first_given_name'
 195       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 196     <eg-grid-column path='second_given_name'
 197       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 198     <eg-grid-column path='dob'
 199       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 200     <eg-grid-column path='home_ou.shortname'
 201       i18n-label label="Home Library"></eg-grid-column>
 202     <eg-grid-column path='create_date' i18n-label label="Created On"
 203       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 204
 205     <eg-grid-column i18n-label label="Mailing:Street 1"
 206       path='mailing_address.street1' visible></eg-grid-column>
 207     <eg-grid-column i18n-label label="Mailing:Street 2"
 208       path='mailing_address.street2'></eg-grid-column>
 209     <eg-grid-column i18n-label label="Mailing:City"
 210       path='mailing_address.city'></eg-grid-column>
 211     <eg-grid-column i18n-label label="Mailing:County"
 212       path='mailing_address.county'></eg-grid-column>
 213     <eg-grid-column i18n-label label="Mailing:State"
 214       path='mailing_address.state'></eg-grid-column>
 215     <eg-grid-column i18n-label label="Mailing:Zip"
 216       path='mailing_address.post_code'></eg-grid-column>
 217
 218     <eg-grid-column i18n-label label="Billing:Street 1"
 219       path='billing_address.street1'></eg-grid-column>
 220     <eg-grid-column i18n-label label="Billing:Street 2"
 221       path='billing_address.street2'></eg-grid-column>
 222     <eg-grid-column i18n-label label="Billing:City"
 223       path='billing_address.city'></eg-grid-column>
 224     <eg-grid-column i18n-label label="Billing:County"
 225       path='billing_address.county'></eg-grid-column>
 226     <eg-grid-column i18n-label label="Billing:State"
 227       path='billing_address.state'></eg-grid-column>
 228     <eg-grid-column i18n-label label="Billing:Zip"
 229       path='billing_address.post_code'></eg-grid-column>
 230   </eg-grid>
 231
 232 </div>
 233