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

   1 <eg-prompt-dialog #noteDialog
   2   i18n-dialogBody dialogBody="Edit note for #{{noteTargets}}">
   3 </eg-prompt-dialog>
   4
   5 <eg-confirm-dialog #voidBillsDialog i18n-dialogBody
   6   dialogBody="Are you sure you would like to void {{voidAmount | currency}}
   7     for these line-item billings? {{voidTargets}}">
   8 </eg-confirm-dialog>
   9
  10 <h3 i18n>Transaction: #{{xactId}}</h3>
  11
  12 <div *ngIf="statement" class="striped-rows-odd">
  13   <div class="row p-1">
  14     <div class="col-lg-2" i18n>Billing Location</div>
  15     <div class="col-lg-2">
  16       <a target="_blank"
  17         href="/eg/opac/library/{{context.orgSn(statement.billing_location)}}">
  18         {{context.orgSn(statement.billing_location)}}
  19       </a>
  20     </div>
  21     <div class="col-lg-2" i18n>Total Billed</div>
  22     <div class="col-lg-1">{{totalBilled() | currency}}</div>
  23     <div class="col-lg-2" i18n>Title</div>
  24     <div class="col-lg-3">
  25       <ng-container *ngIf="statement.title_id">
  26         <a target="_blank" routerLink="/staff/catalog/record/{{statement.title_id}}">
  27           {{statement.title}}
  28         </a>
  29       </ng-container>
  30       <ng-container *ngIf="!statement.title_id">{{statement.title}}</ng-container>
  31     </div>
  32   </div>
  33   <div class="row mt-1 p-1">
  34     <div class="col-lg-2" i18n>Type</div>
  35     <div class="col-lg-2">
  36       <span *ngIf="statement.xact.circulation()" i18n>Circulation</span>
  37       <span *ngIf="!statement.xact.circulation()" i18n>Grocery</span>
  38     </div>
  39     <div class="col-lg-2" i18n>Total Paid / Credited</div>
  40     <div class="col-lg-1">{{statement.summary.payment_total | currency}}</div>
  41     <div class="col-lg-2" i18n>Checked Out</div>
  42     <div class="col-lg-3">
  43       <ng-container *ngIf="statement.xact.circulation()">
  44         {{statement.xact.xact_start() | date:'short'}}
  45       </ng-container>
  46     </div>
  47   </div>
  48   <div class="row mt-1 p-1">
  49     <div class="col-lg-2" i18n>Started</div>
  50     <div class="col-lg-2">{{statement.xact.xact_start() | date:'short'}}</div>
  51     <div class="col-lg-2" i18n>Balance Due</div>
  52     <div class="col-lg-1">{{statement.summary.balance_due | currency}}</div>
  53     <div class="col-lg-2" i18n>Due Date</div>
  54     <div class="col-lg-3">
  55       <ng-container *ngIf="statement.xact.circulation()">
  56         {{statement.xact.circulation().due_date() | date:'short'}}
  57       </ng-container>
  58     </div>
  59   </div>
  60   <div class="row mt-1 p-1">
  61     <div class="col-lg-2" i18n>Finished</div>
  62     <div class="col-lg-2">{{statement.xact.xact_finish() | date:'short'}}</div>
  63     <div class="col-lg-2" i18n>Renewal?</div>
  64     <div class="col-lg-1">
  65       <ng-container *ngIf="statement.xact.circulation()">
  66         <eg-bool [value]="statement.xact.circulation().parent_circ() !== null">
  67         </eg-bool>
  68       </ng-container>
  69     </div>
  70     <div class="col-lg-2" i18n>Checked In</div>
  71     <div class="col-lg-3">
  72       <ng-container *ngIf="statement.xact.circulation()">
  73         {{statement.xact.circulation().checkin_time() | date:'short'}}
  74       </ng-container>
  75     </div>
  76   </div>
  77 </div>
  78
  79 <h3 class="mt-4 mb-4" i18n>Item Summary</h3>
  80
  81 <div *ngIf="copy()" class="striped-rows-odd">
  82   <div class="row p-1">
  83     <div class="col-lg-2" i18n>Barcode</div>
  84     <div class="col-lg-2">
  85       <a target="_blank" href="/eg/staff/cat/item/{{copy().id()}}">
  86         {{copy().barcode()}}
  87       </a>
  88     </div>
  89     <div class="col-lg-2" i18n>Location</div>
  90     <div class="col-lg-2">{{copy().location().name()}}</div>
  91     <div class="col-lg-2" i18n>Call Number</div>
  92     <div class="col-lg-2">
  93       {{copy().call_number().prefix().label()}}
  94       {{copy().call_number().label()}}
  95       {{copy().call_number().suffix().label()}}
  96     </div>
  97   </div>
  98   <div class="row p-1">
  99     <div class="col-lg-2" i18n>Status</div>
 100     <div class="col-lg-2">{{copy().status().name()}}</div>
 101     <div class="col-lg-2" i18n>Circulate</div>
 102     <div class="col-lg-2"><eg-bool [value]="copy().circulate()"></eg-bool></div>
 103     <div class="col-lg-2" i18n>Reference</div>
 104     <div class="col-lg-2"><eg-bool [value]="copy().ref()"></eg-bool></div>
 105   </div>
 106   <div class="row p-1">
 107     <div class="col-lg-2" i18n>Holdable</div>
 108     <div class="col-lg-2"><eg-bool [value]="copy().holdable()"></eg-bool></div>
 109     <div class="col-lg-2" i18n>OPAC Visible</div>
 110     <div class="col-lg-2"><eg-bool [value]="copy().opac_visible()"></eg-bool></div>
 111     <div class="col-lg-2" i18n>Created</div>
 112     <div class="col-lg-2">{{copy().create_date() | date:'short'}}</div>
 113   </div>
 114   <div class="row p-1">
 115     <div class="col-lg-2" i18n>Edited</div>
 116     <div class="col-lg-2">{{copy().edit_date() | date:'short'}}</div>
 117     <div class="col-lg-2" i18n>Age Protect</div>
 118     <div class="col-lg-2">
 119       <ng-container *ngIf="copy().age_protect()">
 120         {{copy().age_protect().name()}}
 121       </ng-container>
 122     </div>
 123     <div class="col-lg-2" i18n>Total Circulations</div>
 124     <div class="col-lg-2">{{copy().total_circ_count().circ_count()}}</div>
 125   </div>
 126   <div class="row p-1">
 127     <div class="col-lg-2" i18n>Owning Library</div>
 128     <div class="col-lg-2">{{context.orgSn(copy().call_number().owning_lib())}}</div>
 129   </div>
 130 </div>
 131
 132 <hr class="p-2 m-2"/>
 133
 134 <ul ngbNav #statementNav="ngbNav" class="nav-tabs" [activeId]="statementTab" [keyboard]="true" [roles]="false" role="tablist">
 135   <li role="presentation" ngbNavItem="statement">
 136     <a role="tab" ngbNavLink i18n>Statement</a>
 137     <ng-template ngbNavContent>
 138       <h4 i18n>Billing Statement</h4>
 139       <div class="card tight-card">
 140         <div class="card-header rounded">
 141           <div class="row">
 142             <div class="col-lg-2" i18n>Type</div>
 143             <div class="col-lg-4" i18n>Description</div>
 144             <div class="col-lg-2" i18n>Amount</div>
 145             <div class="col-lg-2" i18n>Balance</div>
 146           </div>
 147         </div>
 148         <div class="card-body">
 149           <div class="striped-rows-even">
 150             <div class="row mb-1" *ngFor="let line of statement.lines">
 151               <div class="col-lg-2" [ngSwitch]="line.type">
 152                 <span *ngSwitchCase="'billing'" i18n>Billing</span>
 153                 <span *ngSwitchCase="'payment'" i18n>Payment</span>
 154                 <span *ngSwitchCase="'account_adjustment'" i18n>Adjustment</span>
 155                 <span *ngSwitchCase="'void'" i18n>Void</span>
 156               </div>
 157               <div class="col-lg-4">
 158                 <div *ngIf="line.billing_type" class="fw-bold">
 159                   {{line.billing_type}}
 160                 </div>
 161                 <div [ngClass]="{'fw-bold' : !line.billing_type}"
 162                   *ngIf="line.note.length">{{line.note.join(', ')}}</div>
 163                 <div>
 164                   <span>{{line.start_date  | date:'short'}}</span>
 165                   <span *ngIf="line.end_date"> - {{line.end_date  | date:'short'}}</span>
 166                 </div>
 167               </div>
 168               <div class="col-lg-2" [ngClass]="{'text-danger': line.type !== 'billing'}">
 169                 <span *ngIf="line.type !== 'billing'">-</span>{{line.amount | currency}}
 170               </div>
 171               <div class="col-lg-2">{{line.running_balance | currency}}</div>
 172             </div>
 173           </div>
 174
 175           <hr class="m-2 p-2"/>
 176
 177           <div class="row">
 178             <div class="col-lg-2 offset-lg-8" i18n>Total Charges</div>
 179             <div class="col-lg-2">{{statement.summary.billing_total | currency}}</div>
 180           </div>
 181           <div class="row">
 182             <div class="col-lg-2 offset-lg-8" i18n>Total Payments</div>
 183             <div class="col-lg-2">{{statement.summary.payment_total | currency}}</div>
 184           </div>
 185           <div class="row" *ngIf="statement.summary.account_adjustment_total > 0">
 186             <div class="col-lg-2 offset-lg-8" i18n>Total Adjustements</div>
 187             <div class="col-lg-2">{{statement.summary.account_adjustment_total | currency}}</div>
 188           </div>
 189           <div class="row" *ngIf="statement.summary.void_total > 0">
 190             <div class="col-lg-2 offset-lg-8" i18n>Total Voids</div>
 191             <div class="col-lg-2">{{statement.summary.void_total | currency}}</div>
 192           </div>
 193
 194           <hr class="m-2 p-2"/>
 195
 196           <div class="row fw-bold">
 197             <div class="col-lg-2 offset-lg-8" i18n>Balance Due</div>
 198             <div class="col-lg-2">{{statement.summary.balance_due | currency}}</div>
 199           </div>
 200
 201         </div>
 202       </div>
 203     </ng-template>
 204   </li>
 205   <li role="presentation" ngbNavItem="details">
 206     <a role="tab" ngbNavLink i18n>Details</a>
 207     <ng-template ngbNavContent>
 208       <div class="mt-3">
 209         <eg-grid idlClass="mb" #billingGrid toolbarLabel="Bills"
 210           persistKey="circ.patron.xact_details_details_bills"
 211           i18n-toolbarLabel [dataSource]="billingDataSource" [sortable]="true">
 212           <eg-grid-toolbar-action label="Edit Note" i18n-label
 213             (onClick)="openNoteDialog($event)">
 214           </eg-grid-toolbar-action>
 215           <eg-grid-toolbar-action label="Void Billings" i18n-label
 216             (onClick)="openVoidDialog($event)">
 217           </eg-grid-toolbar-action>
 218         </eg-grid>
 219       </div>
 220       <div class="mt-3">
 221         <eg-grid idlClass="mbp" [dataSource]="paymentDataSource"
 222           persistKey="circ.patron.xact_details_details_payments"
 223           i18n-toolbarLabel toolbarLabel="Payments" [sortable]="true">
 224           <eg-grid-toolbar-action label="Edit Note" i18n-label
 225             (onClick)="openNoteDialog($event)">
 226           </eg-grid-toolbar-action>
 227         </eg-grid>
 228       </div>
 229     </ng-template>
 230   </li>
 231 </ul>
 232
 233 <ng-container *ngIf="statement">
 234   <div [ngbNavOutlet]="statementNav"></div>
 235 </ng-container>
 236