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

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