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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-1">
  34       <button class="btn btn-success w-100" (click)="go()" i18n>Search</button>
  35     </div>
  36     <div class="col-lg-2 ps-1 pe-1">
  37       <button (click)="toggleExpandForm()" type="button"
  38         class="btn btn-outline-dark ms-2 label-with-material-icon"
  39         i18n-aria-label aria-label="Toggle Expanded Form Display"
  40         i18n-title title="Toggle Expanded Form Display">
  41         <span class="material-icons" aria-hidden="true">{{expandForm ? 'arrow_drop_up' : 'arrow_drop_down'}}</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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-1">
  73         <button class="btn btn-warning w-100" (click)="clear()" i18n>Clear Form</button>
  74       </div>
  75       <div class="col-lg-2 ps-1 pe-1">
  76       </div>
  77     </div>
  78     <div class="row m-0 mb-2">
  79       <div class="col-lg-2 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-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 ps-1 pe-1"></div>
 110     </div>
 111     <div class="row m-0 mb-2">
 112       <div class="col-lg-2 ps-1 pe-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 ps-1 pe-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 ps-1 pe-1">
 125         <eg-profile-select [useDisplayEntries]="true"
 126           [(ngModel)]="search.profile">
 127         </eg-profile-select>
 128       </div>
 129       <div class="col-lg-2 ps-1 pe-1">
 130         <eg-org-select (onChange)="searchOrg = $event"
 131           persistKey="patron.search"
 132           [fallbackOrg]="org.root()"
 133           i18n-placeholder placeholder="Home Library"
 134           ariaLabel="Home Library" i18n-ariaLabel>
 135         </eg-org-select>
 136         <!-- home org -->
 137       </div>
 138       <div class="col-lg-2 ps-1 pe-1">
 139         <input class="form-control" type="text" (keyup.enter)="go()"
 140           i18n-aria-label aria-label="Guardian"
 141           i18n-placeholder placeholder="Guardian"
 142           [(ngModel)]="search.guardian"/>
 143       </div>
 144       <div class="col-lg-2 ps-1 pe-1"></div>
 145     </div>
 146     <div class="row m-0 mb-2">
 147       <div class="col-lg-2 ps-1 pe-1">
 148         <input class="form-control" type="text" (keyup.enter)="go()"
 149           i18n-aria-label aria-label="DOB Year"
 150           i18n-placeholder placeholder="DOB Year"
 151           [(ngModel)]="search.dob_year"/>
 152       </div>
 153       <div class="col-lg-2 ps-1 pe-1">
 154         <input class="form-control" type="text" (keyup.enter)="go()"
 155           i18n-aria-label aria-label="DOB Month"
 156           i18n-placeholder placeholder="DOB Month"
 157           [(ngModel)]="search.dob_month"/>
 158       </div>
 159       <div class="col-lg-2 ps-1 pe-1">
 160         <input class="form-control" type="text" (keyup.enter)="go()"
 161           i18n-aria-label aria-label="DOB Day"
 162           i18n-placeholder placeholder="DOB Day"
 163           [(ngModel)]="search.dob_day"/>
 164       </div>
 165       <div class="col-lg-2 ps-1 pe-1">
 166         <input class="form-control" type="text" (keyup.enter)="go()"
 167           i18n-aria-label aria-label="Database ID"
 168           i18n-placeholder placeholder="Database ID"
 169           [(ngModel)]="search.id"/>
 170       </div>
 171       <div class="col-lg-3">
 172         <div class="form-check form-check-inline">
 173           <input class="form-check-input" type="checkbox"
 174             (change)="toggleIncludeInactive()"
 175             id="include-inactive" [(ngModel)]="search.inactive">
 176           <label class="form-label form-check-label" for="include-inactive" i18n>
 177             Include Inactive
 178           </label>
 179         </div>
 180       </div>
 181       <div class="col-lg-1"></div>
 182     </div>
 183   </ng-container><!-- expand form -->
 184 </div>
 185
 186 <ng-template #barcodeTemplate let-r="row">
 187   <a *ngIf="r.card()"
 188     routerLink="/staff/circ/patron/{{r.id()}}/checkout">{{r.card().barcode()}}</a>
 189 </ng-template>
 190 <ng-template #familyNameTemplate let-r="row">
 191   <a routerLink="/staff/circ/patron/{{r.id()}}/checkout">{{r.family_name()}}</a>
 192 </ng-template>
 193
 194 <div class="patron-search-grid mt-4">
 195   <eg-grid #searchGrid idlClass="au"
 196     persistKey="circ.patron.search"
 197     (rowSelectionChange)="gridSelectionChange($event)"
 198     (onRowActivate)="rowsActivated($event)"
 199     [dataSource]="dataSource"
 200     [showDeclaredFieldsOnly]="true">
 201
 202     <eg-grid-toolbar-button label="Add to Bucket" i18n-label
 203       [disabled]="getSelected().length === 0"
 204       (onClick)="addSelectedToBucket($event)"></eg-grid-toolbar-button>
 205     <eg-grid-toolbar-button label="Merge Patrons" i18n-label
 206       [disabled]="getSelected().length !== 2"
 207       (onClick)="mergePatrons($event)"></eg-grid-toolbar-button>
 208
 209     <eg-grid-column path='id' [hidden]="true"
 210       i18n-label label="ID"></eg-grid-column>
 211     <eg-grid-column name='card.barcode' [cellTemplate]="barcodeTemplate"
 212       i18n-label label="Card"></eg-grid-column>
 213     <eg-grid-column path='profile.name'
 214       i18n-label label="Profile"></eg-grid-column>
 215     <eg-grid-column name='family_name' [cellTemplate]="familyNameTemplate"
 216       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 217     <eg-grid-column path='first_given_name'
 218       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 219     <eg-grid-column path='second_given_name' [hidden]="true"
 220       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 221     <eg-grid-column path='dob' [hidden]="true"
 222       [sortable]="true" [multiSortable]="true"></eg-grid-column>
 223     <eg-grid-column path='home_ou.shortname'
 224       i18n-label label="Home Library"></eg-grid-column>
 225     <eg-grid-column path='create_date' i18n-label label="Created On"
 226       [hidden]="true" [sortable]="true" [multiSortable]="true"></eg-grid-column>
 227
 228     <eg-grid-column i18n-label label="Mailing:Street 1" [hidden]="true"
 229       path='mailing_address.street1' visible></eg-grid-column>
 230     <eg-grid-column i18n-label label="Mailing:Street 2" [hidden]="true"
 231       path='mailing_address.street2'></eg-grid-column>
 232     <eg-grid-column i18n-label label="Mailing:City" [hidden]="true"
 233       path='mailing_address.city'></eg-grid-column>
 234     <eg-grid-column i18n-label label="Mailing:County" [hidden]="true"
 235       path='mailing_address.county'></eg-grid-column>
 236     <eg-grid-column i18n-label label="Mailing:State" [hidden]="true"
 237       path='mailing_address.state'></eg-grid-column>
 238     <eg-grid-column i18n-label label="Mailing:Zip" [hidden]="true"
 239       path='mailing_address.post_code'></eg-grid-column>
 240
 241     <eg-grid-column i18n-label label="Billing:Street 1"
 242       path='billing_address.street1'></eg-grid-column>
 243     <eg-grid-column i18n-label label="Billing:Street 2" [hidden]="true"
 244       path='billing_address.street2'></eg-grid-column>
 245     <eg-grid-column i18n-label label="Billing:City"
 246       path='billing_address.city'></eg-grid-column>
 247     <eg-grid-column i18n-label label="Billing:County" [hidden]="true"
 248       path='billing_address.county'></eg-grid-column>
 249     <eg-grid-column i18n-label label="Billing:State" [hidden]="true"
 250       path='billing_address.state'></eg-grid-column>
 251     <eg-grid-column i18n-label label="Billing:Zip" [hidden]="true"
 252       path='billing_address.post_code'></eg-grid-column>
 253   </eg-grid>
 254
 255 </div>
 256