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