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"
  71       [readOnly]="dueDateOptions === 0" (onChangeAsIso)="setDueDate($event)">
  72     </eg-datetime-select>
  73   </div>
  74 </div>
  75
  76 <ng-template #copyBarcodeTemplate let-r="row">
  77   <ng-container *ngIf="r.copy">
  78     <a href="/eg/staff/cat/item/{{r.copy.id()}}">{{r.copy.barcode()}}</a>
  79   </ng-container>
  80 </ng-template>
  81
  82 <ng-template #titleTemplate let-r="row">
  83   <ng-container *ngIf="r.record">
  84     <a routerLink="/staff/catalog/record/{{r.record.doc_id()}}">{{r.title}}</a>
  85   </ng-container>
  86   <ng-container *ngIf="!r.record">{{r.title}}</ng-container>
  87 </ng-template>
  88
  89 <ng-template #copyAlertsTemplate let-r="row">
  90   <button class="btn btn-outline-dark btn-sm p-1"
  91     (click)="openItemAlerts([r], 'manage')" i18n>
  92     Manage ({{r.copyAlertCount}})
  93   </button>
  94 </ng-template>
  95
  96 <div class="row">
  97   <div class="col-lg-12">
  98     <eg-grid #checkoutsGrid [dataSource]="gridDataSource" [sortable]="true"
  99       persistKey="circ.patron.checkout"
 100       [useLocalSort]="true" [cellTextGenerator]="cellTextGenerator"
 101       [disablePaging]="true" persistKey="circ.patron.checkout">
 102
 103                         <eg-grid-toolbar-action
 104                                 i18n-group group="Add" i18n-label label="Add Item Alerts"
 105                                 (onClick)="openItemAlerts($event, 'create')">
 106                         </eg-grid-toolbar-action>
 107
 108                         <eg-grid-toolbar-action
 109                                 i18n-group group="Add" i18n-label label="Manage Item Alerts"
 110         [disabled]="checkoutsGrid.context.rowSelector.selected().length !== 1"
 111                                 (onClick)="openItemAlerts($event, 'manage')">
 112                         </eg-grid-toolbar-action>
 113
 114       <eg-grid-column path="index" [index]="true"
 115         label="Row Index" i18n-label [hidden]="true"></eg-grid-column>
 116       <eg-grid-column path="circ.id" label="Circ ID" i18n-label></eg-grid-column>
 117
 118       <eg-grid-column path="dueDate" label="Due Date" i18n-label
 119         timezoneContextOrg="circ.circ_lib" dateOnlyIntervalField="circ.duration"
 120         datatype="timestamp"></eg-grid-column>
 121
 122       <eg-grid-column name="copy_barcode" label="Barcode" i18n-label
 123         [cellTemplate]="copyBarcodeTemplate"></eg-grid-column>
 124
 125       <eg-grid-column path="title" label="Title" i18n-label
 126         [cellTemplate]="titleTemplate"></eg-grid-column>
 127
 128       <eg-grid-column path="nonCatCount" label="Non-Cataloged Count"
 129         i18n-label></eg-grid-column>
 130
 131       <eg-grid-column name="copyAlerts" label="Alerts" i18n-label
 132         [cellTemplate]="copyAlertsTemplate"></eg-grid-column>
 133
 134       <eg-grid-column path="copy.*" idlClass="acp" [hidden]="true"></eg-grid-column>
 135       <eg-grid-column path="circ.*" idlClass="circ" [hidden]="true"></eg-grid-column>
 136       <eg-grid-column path="mbts.*" idlClass="mbts" [hidden]="true"></eg-grid-column>
 137       <eg-grid-column path="patron.*" idlClass="au" [hidden]="true"></eg-grid-column>
 138       <eg-grid-column path="record.*" idlClass="mvr" [hidden]="true"></eg-grid-column>
 139       <eg-grid-column path="hold.*" idlClass="ahr" [hidden]="true"></eg-grid-column>
 140       <eg-grid-column path="transit.*" idlClass="atc" [hidden]="true"></eg-grid-column>
 141
 142     </eg-grid>
 143   </div>
 144 </div>
 145
 146 <div class="row mt-3 pt-3">
 147   <div class="col-lg-12 d-flex">
 148     <div class="flex-1"></div>
 149     <div class="mr-3">
 150       <div class="form-check form-check-inline pt-1">
 151         <input class="form-check-input" type="checkbox"
 152           (ngModelChange)="toggleStrictBarcode($event)"
 153           id="strict-barcode-cbox" [(ngModel)]="strictBarcode"/>
 154         <label class="form-check-label"
 155           for="strict-barcode-cbox" i18n>Strict Barcode</label>
 156       </div>
 157     </div>
 158     <div class="mr-3">
 159       <div class="input-group">
 160         <span class="material-icons pt-2 pr-2">
 161           <ng-container *ngIf="!mayEmailReceipt()">print</ng-container>
 162           <ng-container *ngIf="mayEmailReceipt()">email</ng-container>
 163         </span>
 164         <button class="btn btn-outline-dark" (click)="quickReceipt()" i18n>
 165           Quick Receipt
 166         </button>
 167         <div class="input-group-append">
 168           <div ngbDropdown>
 169             <button ngbDropdownToggle class="btn btn-outline-dark">
 170             </button>
 171             <div ngbDropdownMenu>
 172               <button ngbDropdownItem (click)="emailReceipt()"
 173                 [disabled]="!mayEmailReceipt()" i18n>Email Receipt</button>
 174               <button ngbDropdownItem (click)="printReceipt()" i18n>Print Receipt</button>
 175             </div>
 176           </div>
 177         </div>
 178       </div>
 179     </div>
 180     <div class="mr-3">
 181       <div class="input-group">
 182         <button class="btn btn-outline-dark" (click)="doneAutoReceipt()" i18n>
 183           Done
 184         </button>
 185         <div class="input-group-append">
 186           <div ngbDropdown>
 187             <button ngbDropdownToggle class="btn btn-outline-dark">
 188             </button>
 189             <div ngbDropdownMenu>
 190               <button ngbDropdownItem (click)="doneRedirect()" i18n>No Receipt</button>
 191               <button ngbDropdownItem (click)="emailReceipt(true)"
 192                 [disabled]="!mayEmailReceipt()" i18n>Email Receipt</button>
 193               <button ngbDropdownItem
 194                 (click)="printReceipt(true)" i18n>Print Receipt</button>
 195             </div>
 196           </div>
 197         </div>
 198       </div>
 199     </div>
 200   </div>
 201 </div>
 202
 203