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

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