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

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