dca200dacef71eae445c76a12873dad736eaa777
[Evergreen.git] / 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