lp1806087 Place Holds Improvements
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / hold / hold.component.html
1 <div class="row">
2   <div class="col-lg-3">
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-3 text-right">
10     <button class="btn btn-outline-dark btn-sm"
11       [disabled]="true" i18n>
12       <span class="material-icons mat-icon-in-button align-middle" title="Search for Patron">search</span>
13       <span class="align-middle">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'">VOLUME</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