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