Open-ILS/src/eg2/src/app/staff/circ/patron/checkout.component.html

   1
   2 <eg-progress-dialog #progressDialog></eg-progress-dialog>
   3 <eg-barcode-select #barcodeSelect></eg-barcode-select>
   4 <eg-copy-alerts-dialog #copyAlertsDialog></eg-copy-alerts-dialog>
   5 <eg-string #receiptEmailed i18n-text text="Receipt Successfully Emailed">
   6 </eg-string>
   7
   8 <eg-prompt-dialog #nonCatCount
   9   promptType="number"
  10   i18n-dialogTitle dialogTitle="Non-Cat Checkout"
  11   promptMin="1" promptValue="1" [promptMax]="maxNoncats"
  12   i18n-dialogBody
  13   dialogBody="Enter the number of {{checkoutNoncat ? checkoutNoncat.name() : ''}} circulating">
  14 </eg-prompt-dialog>
  15
  16 <div class="row mb-3 pb-3 border-bottom">
  17   <div class="col-lg-12 d-flex">
  18     <div class="form-inline">
  19       <div class="input-group">
  20         <div class="input-group-prepend">
  21           <div ngbDropdown>
  22             <button ngbDropdownToggle class="btn btn-outline-dark" id="checkout-button">
  23               <ng-container *ngIf="!checkoutNoncat" i18n>Barcode</ng-container>
  24               <ng-container *ngIf="checkoutNoncat">{{checkoutNoncat.name()}}</ng-container>
  25             </button>
  26             <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
  27               <button ngbDropdownItem (click)="checkoutNoncat=null" i18n>Barcode</button>
  28               <div role="separator" class="dropdown-divider"></div>
  29               <ng-container *ngIf="circ.nonCatTypes">
  30                 <button *ngFor="let nct of circ.nonCatTypes"
  31                   (click)="checkoutNoncat=nct" ngbDropdownItem>{{nct.name()}}</button>
  32               </ng-container>
  33             </div>
  34           </div>
  35         </div>
  36         <input type="text" class="form-control" id="barcode-input"
  37           [placeholder]="checkoutNoncat ? '' : 'Barcode...'" i18n-placeholder
  38           [(ngModel)]="checkoutBarcode" [disabled]="checkoutNoncat !== null"
  39           i18n-aria-label aria-label="Barcode Input" (keydown.enter)="checkout()" />
  40         <div class="input-group-append">
  41           <button class="btn btn-outline-dark" (keydown.enter)="checkout()"
  42             (click)="checkout()" i18n>Submit</button>
  43         </div>
  44       </div>
  45     </div>
  46     <div class="flex-1"></div>
  47     <div ngbDropdown>
  48       <button ngbDropdownToggle class="btn mr-2" [ngClass]="{
  49           'btn-outline-dark': dueDateOptions === 0,
  50           'btn-outline-success': dueDateOptions > 0
  51         }"
  52         i18n>Date Options</button>
  53       <div ngbDropdownMenu>
  54         <button ngbDropdownItem (click)="toggleDateOptions(1)">
  55           <span *ngIf="dueDateOptions > 0"
  56             class="badge badge-success">&#x2713;</span>
  57           <span *ngIf="dueDateOptions === 0"
  58             class="badge badge-warning">&#x2717;</span>
  59           <span class="pl-2" i18n>Specific Due Date</span>
  60         </button>
  61         <button ngbDropdownItem (click)="toggleDateOptions(2)">
  62           <span *ngIf="dueDateOptions === 2"
  63             class="badge badge-success">&#x2713;</span>
  64           <span *ngIf="dueDateOptions < 2"
  65             class="badge badge-warning">&#x2717;</span>
  66           <span class="pl-2" i18n>Specific Due Date Until Logout</span>
  67         </button>
  68       </div>
  69     </div>
  70     <eg-datetime-select [initialIso]="dueDate" [noPast]="true"
  71       [readOnly]="dueDateOptions === 0" (onChangeAsIso)="setDueDate($event)">
  72     </eg-datetime-select>
  73     <ng-container *ngIf="dueDateInvalid">
  74       <span class="text-danger font-weight-bold ml-2" i18n>Due Date is Invalid</span>
  75     </ng-container>
  76   </div>
  77 </div>
  78
  79 <ng-template #copyBarcodeTemplate let-r="row">
  80   <ng-container *ngIf="r.copy">
  81     <a href="/eg/staff/cat/item/{{r.copy.id()}}">{{r.copy.barcode()}}</a>
  82   </ng-container>
  83 </ng-template>
  84
  85 <ng-template #titleTemplate let-r="row">
  86   <ng-container *ngIf="r.record">
  87     <a routerLink="/staff/catalog/record/{{r.record.doc_id()}}">{{r.title}}</a>
  88   </ng-container>
  89   <ng-container *ngIf="!r.record">{{r.title}}</ng-container>
  90 </ng-template>
  91
  92 <ng-template #copyAlertsTemplate let-r="row">
  93   <button class="btn btn-outline-dark btn-sm p-1"
  94     (click)="openItemAlerts([r], 'manage')" i18n>
  95     Manage ({{r.copyAlertCount}})
  96   </button>
  97 </ng-template>
  98
  99 <div class="row">
 100   <div class="col-lg-12">
 101     <eg-grid #checkoutsGrid [dataSource]="gridDataSource" [sortable]="true"
 102       persistKey="circ.patron.checkout"
 103       [useLocalSort]="true" [cellTextGenerator]="cellTextGenerator"
 104       [disablePaging]="true" persistKey="circ.patron.checkout">
 105
 106                         <eg-grid-toolbar-action
 107                                 i18n-group group="Add" i18n-label label="Add Item Alerts"
 108                                 (onClick)="openItemAlerts($event, 'create')">
 109                         </eg-grid-toolbar-action>
 110
 111                         <eg-grid-toolbar-action
 112                                 i18n-group group="Add" i18n-label label="Manage Item Alerts"
 113         [disabled]="checkoutsGrid.context.rowSelector.selected().length !== 1"
 114                                 (onClick)="openItemAlerts($event, 'manage')">
 115                         </eg-grid-toolbar-action>
 116
 117       <eg-grid-column path="index" [index]="true"
 118         label="Row Index" i18n-label [hidden]="true"></eg-grid-column>
 119       <eg-grid-column path="circ.id" label="Circ ID" i18n-label></eg-grid-column>
 120
 121       <eg-grid-column path="dueDate" label="Due Date" i18n-label
 122         timezoneContextOrg="circ.circ_lib" dateOnlyIntervalField="circ.duration"
 123         datatype="timestamp"></eg-grid-column>
 124
 125       <eg-grid-column name="copy_barcode" label="Barcode" i18n-label
 126         [cellTemplate]="copyBarcodeTemplate"></eg-grid-column>
 127
 128       <eg-grid-column path="title" label="Title" i18n-label
 129         [cellTemplate]="titleTemplate"></eg-grid-column>
 130
 131       <eg-grid-column path="nonCatCount" label="Non-Cataloged Count"
 132         i18n-label></eg-grid-column>
 133
 134       <eg-grid-column name="copyAlerts" label="Alerts" i18n-label
 135         [cellTemplate]="copyAlertsTemplate"></eg-grid-column>
 136
 137       <eg-grid-column path="copy.*" idlClass="acp" [hidden]="true"></eg-grid-column>
 138       <eg-grid-column path="circ.*" idlClass="circ" [hidden]="true"></eg-grid-column>
 139       <eg-grid-column path="mbts.*" idlClass="mbts" [hidden]="true"></eg-grid-column>
 140       <eg-grid-column path="patron.*" idlClass="au" [hidden]="true"></eg-grid-column>
 141       <eg-grid-column path="record.*" idlClass="mvr" [hidden]="true"></eg-grid-column>
 142       <eg-grid-column path="hold.*" idlClass="ahr" [hidden]="true"></eg-grid-column>
 143       <eg-grid-column path="transit.*" idlClass="atc" [hidden]="true"></eg-grid-column>
 144
 145     </eg-grid>
 146   </div>
 147 </div>
 148
 149 <div class="row mt-3 pt-3">
 150   <div class="col-lg-12 d-flex">
 151     <div class="flex-1"></div>
 152     <div class="mr-3">
 153       <div class="form-check form-check-inline pt-1">
 154         <input class="form-check-input" type="checkbox"
 155           (ngModelChange)="toggleStrictBarcode($event)"
 156           id="strict-barcode-cbox" [(ngModel)]="strictBarcode"/>
 157         <label class="form-check-label"
 158           for="strict-barcode-cbox" i18n>Strict Barcode</label>
 159       </div>
 160     </div>
 161     <div class="mr-3">
 162       <div class="input-group">
 163         <span class="material-icons pt-2 pr-2">
 164           <ng-container *ngIf="!mayEmailReceipt()">print</ng-container>
 165           <ng-container *ngIf="mayEmailReceipt()">email</ng-container>
 166         </span>
 167         <button class="btn btn-outline-dark" (click)="quickReceipt()" i18n>
 168           Quick Receipt
 169         </button>
 170         <div class="input-group-append">
 171           <div ngbDropdown>
 172             <button ngbDropdownToggle class="btn btn-outline-dark">
 173             </button>
 174             <div ngbDropdownMenu>
 175               <button ngbDropdownItem (click)="emailReceipt()"
 176                 [disabled]="!mayEmailReceipt()" i18n>Email Receipt</button>
 177               <button ngbDropdownItem (click)="printReceipt()" i18n>Print Receipt</button>
 178             </div>
 179           </div>
 180         </div>
 181       </div>
 182     </div>
 183     <div class="mr-3">
 184       <div class="input-group">
 185         <button class="btn btn-outline-dark" (click)="doneAutoReceipt()" i18n>
 186           Done
 187         </button>
 188         <div class="input-group-append">
 189           <div ngbDropdown>
 190             <button ngbDropdownToggle class="btn btn-outline-dark">
 191             </button>
 192             <div ngbDropdownMenu>
 193               <button ngbDropdownItem (click)="doneRedirect()" i18n>No Receipt</button>
 194               <button ngbDropdownItem (click)="emailReceipt(true)"
 195                 [disabled]="!mayEmailReceipt()" i18n>Email Receipt</button>
 196               <button ngbDropdownItem
 197                 (click)="printReceipt(true)" i18n>Print Receipt</button>
 198             </div>
 199           </div>
 200         </div>
 201       </div>
 202     </div>
 203   </div>
 204 </div>
 205
 206