]> git.evergreen-ils.org Git - Evergreen.git/blob - Open-ILS/src/eg2/src/app/staff/booking/create-reservation-dialog.component.html
LP 1816655: Add a patron search button to create booking screen
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / booking / create-reservation-dialog.component.html
1 <eg-patron-search-dialog #patronSearch>
2 </eg-patron-search-dialog>
3 <ng-template #dialogContent>
4   <div class="modal-header bg-info">
5     <h3 class="modal-title" i18n>Confirm Reservation Details</h3>
6     <button type="button" class="close"
7       i18n-aria-label aria-label="Close"
8       (click)="dismiss('cross_click')">
9       <span aria-hidden="true">&times;</span>
10     </button>
11   </div>
12   <form class="modal-body form-common" [formGroup]="create">
13     <div class="form-group row">
14       <label class="col-lg-4 text-right font-weight-bold"
15         i18n for="create-patron-barcode">Patron barcode</label>
16       <div class="col-lg-7">
17         <input type="text" id="create-patron-barcode"
18         class="form-control " formControlName="patronBarcode" [disabled]="patronId">
19         <button class="btn btn-outline-dark btn-sm" (click)="searchPatrons()">
20           <span class="material-icons mat-icon-in-button align-middle"
21             i18n-title title="Search for Patron">search</span>
22           <span class="align-middle" i18n>Search for Patron</span>
23         </button>
24       </div>
25       <span class="col-lg-7 offset-lg-4" i18n>
26         {{ (patron$ | async)?.first_given_name}}
27         {{ (patron$ | async)?.second_given_name}}
28         {{ (patron$ | async)?.family_name}}
29       </span>
30     </div>
31     <div class="form-group row">
32       <label class="col-lg-4 text-right font-weight-bold"
33         i18n for="create-end-time">Start time</label>
34       <eg-datetime-select
35         formControlName="startTime"
36         [timezone]="timezone">
37       </eg-datetime-select>
38     </div>
39     <div class="form-group row">
40       <label class="col-lg-4 text-right font-weight-bold"
41         i18n for="create-end-time">End time</label>
42       <eg-datetime-select
43         formControlName="endTime"
44         [timezone]="timezone">
45       </eg-datetime-select>
46       <div role="alert" class="alert alert-danger offset-lg-4" *ngIf="create.errors && create.errors.startTimeNotBeforeEndTime">
47         <span class="material-icons" aria-hidden="true">error</span>
48         <span i18n>Start time must be before end time</span>
49       </div>
50     </div>
51     <div class="form-group row">
52       <label class="col-lg-4 text-right font-weight-bold"
53         i18n for="create-pickup-library">Reservation location</label>
54       <eg-org-select domId="create-pickup-library" [applyDefault]="true"
55         [disableOrgs]="disableOrgs()" [hideOrgs]="disableOrgs()"
56         (onChange)="handlePickupLibChange($event)">
57       </eg-org-select>
58       <eg-help-popover helpText="The library where the resource is picked up or used" i18n-helpText></eg-help-popover>
59     </div>
60     <div *ngIf="pickupLibraryUsesDifferentTz"
61       role="alert"
62       class="alert alert-info">
63       <span class="material-icons" aria-hidden="true">access_time</span>
64       <span i18n>Reservation location is in the {{timezone}} timezone</span>
65     </div>
66     <div class="form-group row">
67       <label class="col-lg-4 text-right font-weight-bold"
68         i18n for="create-resource">Resource</label>
69       <input *ngIf="targetResource && targetResourceBarcode" id="create-resource" value="{{targetResourceBarcode}}" disabled>
70       <eg-combobox
71         formControlName="resourceList"
72         *ngIf="!(targetResource && targetResourceBarcode)"
73         startId="any">
74         <eg-combobox-entry entryId="any" entryLabel="Any resource"
75           i18n-entryLabel></eg-combobox-entry>
76         <eg-combobox-entry *ngFor="let r of resources" entryId="{{r.id()}}" entryLabel="{{r.barcode()}}">
77         </eg-combobox-entry>
78       </eg-combobox>
79     </div>
80     <div class="form-group row">
81       <label class="col-lg-4 text-right font-weight-bold"
82         i18n for="create-email-notify">Notify by email?</label>
83       <input type="checkbox" formControlName="emailNotify">
84     </div>
85     <div class="form-group row">
86       <label class="col-lg-4 text-right font-weight-bold"
87         i18n for="create-note">Note</label>
88       <input type="text" id="create-note"
89         class="form-control col-lg-7" formControlName="note">
90     </div>
91   </form>
92   <div class="modal-footer">
93     <button (click)="addBresv$().subscribe()" [disabled]="!create.valid" class="btn btn-info" i18n>Confirm reservation</button>
94     <button (click)="addBresvAndOpenPatronReservations()" [disabled]="!create.valid" class="btn btn-info" i18n>
95       Confirm and show patron reservations
96     </button>
97     <button (click)="close()" class="btn btn-warning ml-2" i18n>Cancel</button>
98   </div>
99 </ng-template>
100 <eg-alert-dialog #fail i18n-dialogBody
101   dialogBody="Could not create this reservation">
102 </eg-alert-dialog>