Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html

   1
   2 <eg-patron-search-dialog #patronSearch>
   3 </eg-patron-search-dialog>
   4
   5 <div class="row">
   6   <div class="col-lg-4">
   7     <h3 i18n>Place Hold
   8       <small *ngIf="user">
   9        ({{user.family_name()}}, {{user.first_given_name()}})
  10       </small>
  11     </h3>
  12   </div>
  13   <div class="col-lg-2 text-right">
  14     <button class="btn btn-outline-dark btn-sm" (click)="searchPatrons()">
  15       <span class="material-icons mat-icon-in-button align-middle"
  16         i18n-title title="Search for Patron">search</span>
  17       <span class="align-middle" i18n>Search for Patron</span>
  18     </button>
  19   </div>
  20 </div>
  21
  22 <form class="form form-validated common-form"
  23   autocomplete="off" (keydown.enter)="$event.preventDefault()">
  24   <div class="row">
  25     <div class="col-lg-6 common-form striped-odd">
  26       <div class="row mt-2">
  27         <div class="col-lg-6">
  28           <div class="form-check">
  29             <input class="form-check-input" type="radio"
  30               (change)="holdForChanged()"
  31               name="holdFor" value="patron" [(ngModel)]="holdFor"/>
  32             <label class="form-check-label" i18n>
  33               Place hold for patron by barcode:
  34             </label>
  35           </div>
  36         </div>
  37         <div class="col-lg-6">
  38           <div class="input-group">
  39             <input type='text' class="form-control" name="userBarcode"
  40               [disabled]="holdFor!='patron'" id='patron-barcode'
  41               (keyup.enter)="userBarcodeChanged()"
  42               [(ngModel)]="userBarcode" (change)="userBarcodeChanged()"/>
  43             <div class="input-group-append">
  44               <button class="btn btn-outline-dark" (click)="userBarcodeChanged()">Submit</button>
  45             </div>
  46           </div>
  47         </div>
  48       </div>
  49       <div class="row mt-2">
  50         <div class="col-lg-6">
  51           <div class="form-check">
  52             <input class="form-check-input" type="radio"
  53               (change)="holdForChanged()"
  54               name="holdFor" value="staff" [(ngModel)]="holdFor"/>
  55             <label class="form-check-label" i18n>
  56               Place hold for this staff account:
  57             </label>
  58           </div>
  59         </div>
  60         <div class="col-lg-6 font-weight-bold">{{requestor.usrname()}}</div>
  61       </div>
  62       <div class="row mt-2">
  63         <div class="col-lg-6">
  64           <label i18n>Pickup Location: </label>
  65         </div>
  66         <div class="col-lg-6">
  67           <eg-org-select [applyOrgId]="pickupLib"></eg-org-select>
  68         </div>
  69       </div>
  70       <div class="row mt-2">
  71         <div class="col-lg-6">
  72           <div class="form-check">
  73             <input class="form-check-input" type="checkbox"
  74               name="suspend" [(ngModel)]="suspend"/>
  75             <label class="form-check-label" i18n>Suspend Hold</label>
  76           </div>
  77         </div>
  78         <div class="col-lg-6">
  79           <eg-date-select (onChangeAsISO)="activeDateSelected($event)"
  80             [disabled]="!suspend">
  81           </eg-date-select>
  82         </div>
  83       </div>
  84     </div><!-- left column -->
  85     <div class="col-lg-6">
  86       <div class="card">
  87         <div class="card-header">
  88           <h4 i18n>Notifications</h4>
  89         </div>
  90         <ul class="list-group list-group-flush">
  91           <li class="list-group-item d-flex">
  92             <div class="flex-1">
  93               <div class="form-check">
  94                 <input class="form-check-input" type="checkbox" name="notifyEmail"
  95                   [disabled]="!user || !user.email()" [(ngModel)]="notifyEmail"/>
  96                 <label class="form-check-label" i18n>Notify by Email</label>
  97               </div>
  98             </div>
  99             <div class="flex-1">
 100               <div class="input-group">
 101                 <div class="input-group-prepend">
 102                   <span class="input-group-text" i18n>Email Address</span>
 103                 </div>
 104                 <input type="text" class="form-control" name="userEmail"
 105                   [disabled]="true" value="{{user ? user.email() : ''}}"/>
 106               </div>
 107             </div>
 108           </li>
 109           <li class="list-group-item d-flex">
 110             <div class="flex-1">
 111               <div class="form-check">
 112                 <input class="form-check-input" type="checkbox"
 113                   name="notifyPhone" [(ngModel)]="notifyPhone"/>
 114                 <label class="form-check-label" i18n>Notify by Phone</label>
 115               </div>
 116             </div>
 117             <div class="flex-1">
 118               <div class="input-group">
 119                 <div class="input-group-prepend">
 120                   <span class="input-group-text" i18n>Phone Number</span>
 121                 </div>
 122                 <input type="text" class="form-control" [disabled]="!notifyPhone"
 123                   name="phoneValue" [(ngModel)]="phoneValue"/>
 124               </div>
 125             </div>
 126           </li>
 127           <li *ngIf="smsEnabled" class="list-group-item d-flex">
 128             <div class="flex-1">
 129               <div class="form-check">
 130                 <input class="form-check-input" type="checkbox"
 131                   name="notifySms" [(ngModel)]="notifySms"/>
 132                 <label class="form-check-label" i18n>Notify by SMS</label>
 133               </div>
 134             </div>
 135             <div class="flex-1">
 136               <div class="input-group">
 137                 <div class="input-group-prepend">
 138                   <span class="input-group-text" i18n>SMS Number</span>
 139                 </div>
 140                 <input type="text" class="form-control" [disabled]="!notifySms"
 141                   name="smsValue" [(ngModel)]="smsValue"/>
 142               </div>
 143             </div>
 144           </li>
 145           <li *ngIf="smsEnabled" class="list-group-item d-flex">
 146             <div class="flex-1">
 147               <label i18n>SMS Carrier</label>
 148             </div>
 149             <div class="flex-1">
 150               <eg-combobox [disabled]="!notifySms"
 151                 placeholder="SMS Carriers" i18n-placeholder
 152                 [entries]="smsCarriers">
 153               </eg-combobox>
 154             </div>
 155           </li>
 156         </ul><!-- col -->
 157       </div><!-- row -->
 158     </div><!--card -->
 159   </div><!-- col -->
 160   <div class="row mt-2">
 161     <div class="col-lg-3">
 162       <button class="btn btn-success" (click)="placeHolds()"
 163         [disabled]="!user || placeHoldsClicked" i18n>Place Hold(s)</button>
 164     </div>
 165   </div>
 166 </form>
 167
 168 <div class="row"><div class="col-lg-12"><hr/></div></div>
 169
 170 <div class="row font-weight-bold pt-3 ml-1 mr-1">
 171   <div class="col-lg-12" i18n>Placing
 172     <ng-container *ngIf="holdType == 'M'">METARECORD</ng-container>
 173     <ng-container *ngIf="holdType == 'T'">TITLE</ng-container>
 174     <ng-container *ngIf="holdType == 'V'">CALL NUMBER</ng-container>
 175     <ng-container *ngIf="holdType == 'F'">FORCE COPY</ng-container>
 176     <ng-container *ngIf="holdType == 'C'">COPY</ng-container>
 177     <ng-container *ngIf="holdType == 'R'">RECALL</ng-container>
 178     <ng-container *ngIf="holdType == 'I'">ISSUANCE</ng-container>
 179     <ng-container *ngIf="holdType == 'P'">PARTS</ng-container>
 180     hold on record(s)</div>
 181 </div>
 182
 183 <ng-template #anyValue>
 184   <span class="font-italic" i18n>ANY</span>
 185 </ng-template>
 186
 187 <!--
 188     TODO: add a section per hold context for metarecord holds
 189     listing the possible formats and languages.
 190
 191     TODO: add a secion per hold context for T holds providing a
 192     link to the metarecord hold equivalent (AKA "Advanced Hold
 193     Options") for each record that has selectable filters (and
 194     only when metarecord holds are enabled).
 195 -->
 196
 197 <div class="hold-records-list common-form striped-even">
 198
 199   <div class="row mt-2 ml-1 mr-1 font-weight-bold">
 200     <div class="col-lg-1" i18n>Format</div>
 201     <div class="col-lg-3" i18n>Title</div>
 202     <div class="col-lg-2" i18n>Author</div>
 203     <div class="col-lg-2" i18n>Call Number</div>
 204     <div class="col-lg-1" i18n>Barcode</div>
 205     <div class="col-lg-2" i18n>Holds Status</div>
 206     <div class="col-lg-1" i18n>Override</div>
 207   </div>
 208   <div class="row mt-1 ml-1 mr-1" *ngFor="let ctx of holdContexts">
 209     <div class="col-lg-12" *ngIf="ctx.holdMeta">
 210       <div class="row">
 211         <div class="col-lg-1">
 212           <ng-container
 213             *ngFor="let code of ctx.holdMeta.bibSummary.attributes.icon_format">
 214             <img class="pr-1"
 215               alt="{{iconFormatLabel(code)}}"
 216               title="{{iconFormatLabel(code)}}"
 217               src="/images/format_icons/icon_format/{{code}}.png"/>
 218           </ng-container>
 219         </div>
 220         <!-- TODO: link for a metarecord should
 221             jump to constituent bib list search page? -->
 222         <div class="col-lg-3">
 223           <a routerLink="/staff/catalog/record/{{ctx.holdMeta.bibId}}">
 224             {{ctx.holdMeta.bibSummary.display.title}}
 225           </a>
 226         </div>
 227         <div class="col-lg-2">{{ctx.holdMeta.bibSummary.display.author}}</div>
 228         <div class="col-lg-2">
 229           <ng-container *ngIf="ctx.holdMeta.callNum; else anyValue">
 230             {{ctx.holdMeta.callNum.label()}}
 231           </ng-container>
 232         </div>
 233         <div class="col-lg-1">
 234           <ng-container *ngIf="ctx.holdMeta.copy; else anyValue">
 235             {{ctx.holdMeta.copy.barcode()}}
 236           </ng-container>
 237         </div>
 238         <div class="col-lg-2">
 239           <ng-container *ngIf="!ctx.lastRequest && !ctx.processing">
 240             <div class="alert alert-info" i18n>Hold Pending</div>
 241           </ng-container>
 242           <ng-container *ngIf="ctx.processing">
 243             <div class="alert alert-primary" i18n>Hold Processing...</div>
 244           </ng-container>
 245           <ng-container *ngIf="ctx.lastRequest">
 246             <ng-container *ngIf="ctx.lastRequest.result.success">
 247               <div class="alert alert-success" i18n>Hold Succeeded</div>
 248             </ng-container>
 249             <ng-container *ngIf="!ctx.lastRequest.result.success">
 250               <div class="alert alert-danger">
 251                 {{ctx.lastRequest.result.evt.textcode}}
 252               </div>
 253             </ng-container>
 254           </ng-container>
 255         </div>
 256         <div class="col-lg-1">
 257           <ng-container *ngIf="canOverride(ctx)">
 258             <button class="btn btn-info" (click)="override(ctx)">Override</button>
 259           </ng-container>
 260         </div>
 261       </div>
 262       <!-- note: using inline style since class-level styling for rows
 263           is superseded by the striped-even styling of the container -->
 264       <div class="row" *ngIf="hasMetaFilters(ctx)"
 265         style="background-color:inherit; border:none">
 266         <div class="col-lg-1"><label i18n>Formats: </label></div>
 267         <div class="col-lg-11 d-flex">
 268           <ng-container
 269             *ngFor="let ccvm of ctx.holdMeta.metarecord_filters.formats">
 270             <div class="form-check ml-3">
 271               <input class="form-check-input" type="checkbox"
 272                 [disabled]="ctx.holdMeta.metarecord_filters.formats.length == 1"
 273                 [(ngModel)]="ctx.selectedFormats.formats[ccvm.code()]"/>
 274               <img class="ml-1"
 275                 alt="{{iconFormatLabel(ccvm.code())}}"
 276                 title="{{iconFormatLabel(ccvm.code())}}"
 277                 src="/images/format_icons/icon_format/{{ccvm.code()}}.png"/>
 278               <label class="form-check-label ml-1">
 279                 {{ccvm.search_label() || ccvm.value()}}
 280               </label>
 281             </div>
 282           </ng-container>
 283         </div>
 284       </div>
 285       <div class="row" *ngIf="hasMetaFilters(ctx)"
 286         style="background-color:inherit; border:none">
 287         <div class="col-lg-1"><label i18n>Languages: </label></div>
 288         <div class="col-lg-11 d-flex">
 289           <ng-container
 290             *ngFor="let ccvm of ctx.holdMeta.metarecord_filters.langs">
 291             <div class="form-check ml-3">
 292               <input class="form-check-input" type="checkbox"
 293                 [disabled]="ctx.holdMeta.metarecord_filters.langs.length == 1"
 294                 [(ngModel)]="ctx.selectedFormats.langs[ccvm.code()]"/>
 295               <label class="form-check-label ml-1">
 296                 {{ccvm.search_label() || ccvm.value()}}
 297               </label>
 298             </div>
 299           </ng-container>
 300         </div>
 301       </div>
 302     </div>
 303   </div>
 304 </div>
 305
 306