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

   1
   2 <!-- SUMMARY  -->
   3
   4 <ng-container *ngIf="summary">
   5   <div class="row border-bottom border-secondary pb-2 pt-2 mb-4">
   6     <div class="col-lg-3 pr-0 mr-0 border-right">
   7       <div class="d-flex pt-1 pb-1 striped">
   8         <div class="flex-4" i18n>Total Owed:</div>
   9         <div class="flex-1"
  10           [ngClass]="{'font-weight-bold' : summary.balance_owed() > 0}">
  11           {{summary.balance_owed() | currency}}</div>
  12       </div>
  13       <div class="d-flex pt-1 pb-1">
  14         <div class="flex-4" i18n>Total Billed:</div>
  15         <div class="flex-1">{{summary.total_owed() | currency}}</div>
  16       </div>
  17       <div class="d-flex pt-1 pb-1 striped">
  18         <div class="flex-4" i18n>Total Paid/Credited:</div>
  19         <div class="flex-1">{{summary.total_paid() | currency}}</div>
  20       </div>
  21     </div>
  22
  23     <div class="col-lg-3 pr-0 mr-0 border-right">
  24       <div class="d-flex pt-1 pb-1 striped">
  25         <div class="flex-4" i18n>Owed for Selected:</div>
  26         <div class="flex-1">{{owedSelected() | currency}}</div>
  27       </div>
  28       <div class="d-flex pt-1 pb-1">
  29         <div class="flex-4" i18n>Billed for Selected:</div>
  30         <div class="flex-1">{{billedSelected() | currency}}</div>
  31       </div>
  32       <div class="d-flex pt-1 pb-1 striped">
  33         <div class="flex-4" i18n>Paid/Credited for Selected:</div>
  34         <div class="flex-1">{{paidSelected() | currency}}</div>
  35       </div>
  36     </div>
  37
  38     <div class="col-lg-3 pr-0 mr-0 border-right">
  39       <div class="d-flex pt-1 pb-1 striped">
  40         <div class="flex-4" i18n>Refunds Available:</div>
  41         <div class="flex-1">{{refundsAvailable() | currency}}</div>
  42       </div>
  43       <div class="d-flex pt-1 pb-1">
  44         <div class="flex-4" i18n>Credit Available:</div>
  45         <div class="flex-1">{{patron().credit_forward_balance() | currency}}</div>
  46       </div>
  47       <div class="d-flex pt-1 pb-1 striped">
  48         <div class="flex-4" i18n>Session Voided:</div>
  49         <div class="flex-1">{{sessionVoided | currency}}</div>
  50       </div>
  51     </div>
  52
  53     <div class="col-lg-3 pr-0 mr-0">
  54       <div class="d-flex pt-1 pb-1 striped">
  55         <div class="flex-4">&nbsp;</div>
  56         <div class="flex-1">&nbsp;</div>
  57       </div>
  58       <div class="d-flex pt-1 pb-1">
  59         <div class="flex-4" i18n>Pending Payment:</div>
  60         <div class="flex-1 font-weight-bold">{{pendingPayment() | currency}}</div>
  61       </div>
  62       <div class="d-flex pt-1 pb-1 striped">
  63         <div class="flex-4" i18n>Pending Change:</div>
  64         <div class="flex-1 font-weight-bold">{{pendingChange() | currency}}</div>
  65       </div>
  66     </div>
  67   </div>
  68 </ng-container>
  69
  70 <!-- BILL PAY FORM -->
  71
  72 <h3 i18n>Pay Bill</h3>
  73
  74 <div class="row bg-light border border-dark rounded pt-2 pb-2 mt-2 mb-4 payment-form">
  75   <div class="col-lg-12 d-flex form-inline form-validated">
  76     <div class="flex-1"></div>
  77     <div class="ml-2"><label for="payment-type" i18n>Payment Type:</label></div>
  78     <div class="ml-1">
  79       <select [(ngModel)]="paymentType" class="form-control" id="payment-type">
  80         <option value="cash_payment" i18n>Cash</option>
  81         <option value="check_payment" i18n>Check</option>
  82         <option value="credit_card_payment" i18n>Credit Card</option>
  83         <option value="debit_card_payment" i18n>Debit Card</option>
  84         <option value="credit_payment" i18n>Patron Credit</option>
  85         <option value="work_payment" i18n>Work</option>
  86         <option value="forgive_payment" i18n>Forgive</option>
  87         <option value="goods_payment" i18n>Goods</option>
  88       </select>
  89     </div>
  90     <div class="ml-2"><label for="check-number" i18n>Check Number:</label></div>
  91     <div class="ml-1">
  92       <input type="text" class="form-control" [(ngModel)]="checkNumber"
  93         id="check-number" [disabled]="paymentType !== 'check_payment'"/>
  94     </div>
  95     <div class="ml-2"><label for="pay-amount" i18n>Payment Received:</label></div>
  96     <div class="ml-1">
  97       <input type="number" class="form-control" [(ngModel)]="payAmount"
  98         id="pay-amount" [min]="0"/>
  99     </div>
 100     <div class="ml-2 form-check form-check-inline">
 101       <input class="form-check-input" type="checkbox" id="annotate" [(ngModel)]="annotatePayment"/>
 102       <label class="form-check-label" for="annotate" i18n>Annotate</label>
 103     </div>
 104     <div class="ml-2">
 105       <button class="btn btn-outline-dark" (click)="applyPayment()"
 106         [disabled]="disablePayment()" i18n>Apply Payment</button>
 107     </div>
 108   </div>
 109 </div>
 110
 111 <!-- BILLS GRID -->
 112
 113 <ng-template #titleTemplate let-r="row">
 114   <ng-container *ngIf="r.record">
 115     <a routerLink="/staff/catalog/record/{{r.record.id()}}">{{r.title}}</a>
 116   </ng-container>
 117   <ng-container *ngIf="!r.record">{{r.title}}</ng-container>
 118 </ng-template>
 119
 120 <ng-template #barcodeTemplate let-r="row">
 121   <ng-container *ngIf="r.copy">
 122     <a href="/eg/staff/cat/item/{{r.copy.id()}}">{{r.copy.barcode()}}</a>
 123   </ng-container>
 124 </ng-template>
 125
 126 <ng-template #callNumberTemplate let-r="row">
 127   <ng-container *ngIf="r.volume">
 128     {{r.volume.prefix().label()}} {{r.volume.label()}} {{r.volume.suffix().label()}}
 129   </ng-container>
 130   <ng-container *ngIf="!r.volume" i18n>UNCATALOGED</ng-container>
 131 </ng-template>
 132
 133 <eg-grid #billGrid [dataSource]="gridDataSource"
 134   [sortable]="true" [useLocalSort]="true"
 135   [cellTextGenerator]="cellTextGenerator">
 136
 137   <eg-grid-column path="xact.id" [index]="true" label="Bill #" i18n-label>
 138   </eg-grid-column>
 139
 140   <eg-grid-column path="xact.xact_start" datatype="timestamp" [datePlusTime]="true"
 141     label="Start" i18n-label></eg-grid-column>
 142
 143   <eg-grid-column path="xact.summary.xact_type"
 144     label="Type" i18n-label></eg-grid-column>
 145
 146   <eg-grid-column path="xact.summary.last_billing_type"
 147     label="Last Billing Type" i18n-label></eg-grid-column>
 148
 149   <eg-grid-column path="billingLocation"
 150     label="Billing Location" i18n-label></eg-grid-column>
 151
 152   <eg-grid-column path="call_number" label="Call Number" i18n-label
 153     [cellTemplate]="callNumberTemplate"></eg-grid-column>
 154
 155   <eg-grid-column name="copy_barcode" label="Item Barcode" i18n-label
 156     [cellTemplate]="barcodeTemplate"></eg-grid-column>
 157
 158   <eg-grid-column path="copy.location.name" label="Shelving Location"
 159     i18n-label></eg-grid-column>
 160
 161   <eg-grid-column name="title" label="Title" i18n-label
 162     [cellTemplate]="titleTemplate"></eg-grid-column>
 163
 164   <eg-grid-column path="xact.summary.balance_owed" datatype="money"
 165     label="Balance Owed" i18n-label></eg-grid-column>
 166
 167   <eg-grid-column path="xact.summary.total_owed" datatype="money"
 168     label="Total Billed" i18n-label></eg-grid-column>
 169
 170   <eg-grid-column path="xact.summary.total_paid" datatype="money"
 171     label="Total Paid" i18n-label></eg-grid-column>
 172
 173   <eg-grid-column name="paymentPending" datatype="money"
 174     label="Payment Pending" i18n-label></eg-grid-column>
 175
 176   <eg-grid-column name="author" [hidden]="true"
 177     label="Author" i18n-label></eg-grid-column>
 178   <eg-grid-column path="usr" [hidden]="true"></eg-grid-column>
 179   <eg-grid-column path="unrecovered" [hidden]="true"></eg-grid-column>
 180
 181 </eg-grid>
 182