Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html

   1 <eg-staff-banner bannerText="Create Reservation" i18n-bannerText>
   2 </eg-staff-banner>
   3 <eg-title i18n-prefix i18n-suffix prefix="Booking" suffix="Create Reservation"></eg-title>
   4 <form [formGroup]="criteria" class="row">
   5   <div class="col-sm-6">
   6     <div class="row">
   7       <div class="col">
   8         <div class="input-group">
   9           <label class="form-label input-group-text" for="ideal-reservation-type" i18n>Reservation type</label>
  10           <select class="form-select" id="ideal-reservation-type" formControlName="reservationType">
  11             <option *ngFor="let type of reservationTypes" [ngValue]="type" i18n>{{type.name}}</option>
  12           </select>
  13         </div>
  14       </div>
  15       <div class="col">
  16         <div class="input-group">
  17           <label class="form-label input-group-text" for="ideal-reservation-date" i18n>Reservation date</label>
  18           <eg-date-select *ngIf="!multiday" #dateLimiter domId="ideal-reservation-date" formControlName="idealDate"></eg-date-select>
  19           <eg-daterange-select *ngIf="multiday" formControlName="idealDateRange"></eg-daterange-select>
  20         </div>
  21       </div>
  22     </div>
  23   </div>
  24   <div class="card col-sm-6">
  25     <h2 class="card-header" i18n>Reservation details</h2>
  26     <ul ngbNav #details="ngbNav" [(activeId)]="detailsTab" [keyboard]="true" [roles]="false" role="tablist" class="nav-tabs">
  27       <li role="presentation" [ngbNavItem]="'select-resource-type'">
  28         <a ngbNavLink role="tab">
  29           <span class="material-icons" aria-hidden="true">dns</span>
  30           <ng-container i18n>Choose resource by type</ng-container>
  31         </a>
  32         <ng-template ngbNavContent>
  33           <div ngbPanelContent class="row">
  34             <div class="col">
  35               <div class="input-group">
  36                 <label class="form-label input-group-text" for="ideal-resource-type" i18n>Search by resource type</label>
  37                 <eg-combobox
  38                   formControlName="resourceType"
  39                   domId="ideal-resource-type"
  40                   idlClass="brt"
  41                   [asyncSupportsEmptyTermClick]="true">
  42                 </eg-combobox>
  43               </div>
  44               <div class="col">
  45                 <div class="input-group">
  46                   <label class="form-label input-group-text" for="owningLibrary" i18n>Owning library</label>
  47                   <eg-org-family-select
  48                     [hideAncestorSelector]="true"
  49                     domId="owningLibrary"
  50                     ariaLabel="Owning library" i18n-ariaLabel
  51                     formControlName="owningLibrary">
  52                   </eg-org-family-select>
  53                 </div>
  54               </div>
  55             </div>
  56           </div>
  57         </ng-template>
  58       </li>
  59
  60       <li role="presentation" [ngbNavItem]="'select-resource'">
  61         <a ngbNavLink role="tab">
  62           <span class="material-icons" aria-hidden="true">assignment</span>
  63           <ng-container i18n>Choose resource by barcode</ng-container>
  64         </a>
  65         <ng-template ngbNavContent>
  66           <div ngbPanelContent class="row">
  67             <div class="col">
  68               <div class="input-group">
  69                 <label class="form-label input-group-text" for="ideal-resource-barcode" i18n>Search by resource barcode</label>
  70                 <input type="text" id="ideal-resource-barcode" class="form-control" formControlName="resourceBarcode">
  71               </div>
  72             </div>
  73           </div>
  74         </ng-template>
  75       </li>
  76
  77       <li role="presentation" [ngbNavItem]="'attributes'" [disabled]="0 === attributes.length">
  78         <a ngbNavLink role="tab">
  79           <span class="material-icons" aria-hidden="true">filter_list</span>
  80           <ng-container i18n>Limit by attributes</ng-container>
  81         </a>
  82         <ng-template ngbNavContent>
  83           <ul class="list-group list-group-flush" formArrayName="selectedAttributes">
  84             <li *ngFor="let attribute of attributes; let i = index" class="list-group-item">
  85               <span class="input-group">
  86                 <label class="form-label input-group-text" for="attribute-{{attribute.id()}}" i18n>{{attribute.name()}}</label>
  87                 <eg-combobox [formControlName]="i">
  88                   <eg-combobox-entry *ngFor="let value of attribute.valid_values()"
  89                     [entryId]="value.id()" [entryLabel]="value.valid_value()">
  90                   </eg-combobox-entry>
  91                 </eg-combobox>
  92               </span>
  93             </li>
  94           </ul>
  95         </ng-template>
  96       </li>
  97
  98       <li role="presentation" [ngbNavItem]="'display-settings'">
  99         <a ngbNavLink role="tab">
 100           <span class="material-icons" aria-hidden="true">settings</span>
 101           <ng-container i18n>Schedule settings</ng-container>
 102         </a>
 103         <ng-template ngbNavContent>
 104           <ul class="list-group list-group-flush">
 105             <li class="list-group-item">
 106               <span class="input-group">
 107                   <label class="form-label input-group-text" for="start-time" i18n>Start time</label>
 108                 <ngb-timepicker formControlName="startOfDay" [minuteStep]="minuteStep()" [meridian]="true"></ngb-timepicker>
 109               </span>
 110             </li>
 111             <li class="list-group-item">
 112               <span class="input-group">
 113                   <label class="form-label input-group-text" for="end-time" i18n>End time</label>
 114                 <ngb-timepicker formControlName="endOfDay" [minuteStep]="minuteStep()" [meridian]="true"></ngb-timepicker>
 115               </span>
 116             </li>
 117             <li *ngIf="criteria.errors && criteria.errors.startOfDayNotBeforeEndOfDay" class="list-group-item">
 118               <div role="alert" class="alert alert-danger">
 119                 <span class="material-icons" aria-hidden="true">error</span>
 120                 <span i18n>Start time must be before end time</span>
 121               </div>
 122             </li>
 123             <li class="list-group-item">
 124               <span class="input-group">
 125                   <label class="form-label input-group-text" for="granularity" i18n>Granularity</label>
 126                 <eg-combobox (onChange)="changeGranularity($event)" [startId]="granularity ? granularity : 30">
 127                   <eg-combobox-entry [entryId]="15" entryLabel="15 minutes"
 128                     i18n-entryLabel></eg-combobox-entry>
 129                   <eg-combobox-entry [entryId]="30" entryLabel="30 minutes"
 130                     i18n-entryLabel></eg-combobox-entry>
 131                   <eg-combobox-entry [entryId]="60" entryLabel="60 minutes"
 132                     i18n-entryLabel></eg-combobox-entry>
 133                 </eg-combobox>
 134               </span>
 135             </li>
 136           </ul>
 137         </ng-template>
 138       </li>
 139     </ul>
 140
 141     <div [ngbNavOutlet]="details" class="mt-2"></div>
 142   </div>
 143 </form>
 144
 145 <ng-container *ngIf="resources.length">
 146   <hr>
 147   <div class="row" *ngIf="idealDate && !multiday">
 148     <button type="button" class="btn btn-info col-sm-2 offset-sm-3" (click)="addDays(-1)">
 149         <span class="material-icons mat-icon-in-button" aria-hidden="true">keyboard_arrow_left</span>
 150         <span i18n>Previous day</span>
 151     </button>
 152     <h2 class="col-sm-2 text-center" i18n>{{idealDate | formatValue:'timestamp'}}</h2>
 153     <button type="button" class="btn btn-info col-sm-2" (click)="addDays(1)">
 154       <span i18n>Next day</span>
 155       <span class="material-icons mat-icon-in-button" aria-hidden="true">keyboard_arrow_right</span>
 156     </button>
 157   </div>
 158   <eg-grid #scheduleGrid
 159     [cellTextGenerator]="cellTextGenerator"
 160     [sortable]="false"
 161     (onRowActivate)="openTheDialog([$event])"
 162     [dataSource]="scheduleSource"
 163     [rowFlairIsEnabled]="true"
 164     [rowFlairCallback]="resourceAvailabilityIcon"
 165     [disablePaging]="true"
 166     persistKey="disabled">
 167     <eg-grid-toolbar-button label="Create Reservation" i18n-label (onClick)="openTheDialog($event)"></eg-grid-toolbar-button>
 168     <eg-grid-toolbar-action label="Create Reservation" i18n-label (onClick)="openTheDialog($event)"></eg-grid-toolbar-action>
 169     <eg-grid-column path="time" [index]="true" name="Time" i18n-name [cellTemplate]="timeTemplate" ></eg-grid-column>
 170     <eg-grid-column *ngFor="let resource of resources" path="{{resource.barcode()}}" [cellTemplate]="reservationsTemplate" [name]="resource.barcode()" [disableTooltip]="true"></eg-grid-column>
 171   </eg-grid>
 172 </ng-container>
 173 <div class="text-sm-center" *ngIf="this.resourceType.value && !resources.length" i18n>
 174   There are no bookable resources that match your criteria.
 175   Would you like to create <a [routerLink]="['/staff', 'admin', 'booking', 'splash']">some new resources</a>?
 176 </div>
 177
 178 <eg-create-reservation-dialog #createDialog
 179   (reservationRequestCompleted)="fetchData()"
 180   [patronId]="patronId"
 181   [targetResourceBarcode]="resourceBarcode"
 182   [targetResource]="resourceId"
 183   [targetResourceType]="resourceType.value"
 184   [attributes]="flattenedSelectedAttributes"
 185   [resources]="resources">
 186 </eg-create-reservation-dialog>
 187
 188 <ng-template #reservationsTemplate let-row="row" let-col="col">
 189   <ng-container *ngIf="row.patrons && row.patrons[col.name]">
 190     <ul class="list-unstyled">
 191       <li *ngFor="let reservation of row.patrons[col.name]">
 192         <button type="button" class="btn btn-info" (click)="openReservationViewer(reservation['reservationId'])">
 193           {{reservation['patronLabel']}}
 194         </button>
 195       </li>
 196     </ul>
 197   </ng-container>
 198 </ng-template>
 199 <ng-template #timeTemplate let-row="row" let-col="col">
 200   <ng-container *ngIf="!multiday">
 201     {{row['time'].format('LT')}}
 202   </ng-container>
 203   <ng-container *ngIf="multiday">
 204     {{row['time'] | formatValue:'timestamp'}}
 205   </ng-container>
 206 </ng-template>
 207 <eg-fm-record-editor #viewReservation
 208   idlClass="bresv"
 209   datetimeFields="start_time,end_time"
 210   hiddenFields="xact_start,xact_finish,cancel_time,booking_interval">
 211 </eg-fm-record-editor>
 212 <eg-no-timezone-set-dialog #noTimezoneSetDialog>
 213 </eg-no-timezone-set-dialog>