LP#2003090 Angular Daily Cash Report Missing Print Capability

Administration->Local Administration->Cash Reports

Add a print button to the Desk and Staff User Payment grids to
print the org, date range, totals, and full list.

Signed-off-by: Dan Briem <dbriem@wlsmail.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
index 45e6590..bd5ca33 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
@@ -47,7 +47,7 @@
           <div class="col-sm-2" i18n>Total Credit Card Payments</div>
           <div class="col-sm-10">{{deskTotals.credit_card_payment | currency}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <div class="col-sm-2" i18n>Total Debit Card Payments</div>
           <div class="col-sm-10">{{deskTotals.debit_card_payment | currency}}</div>
         </div>
@@ -57,6 +57,10 @@
           [disablePaging]="true"
           [dataSource]="deskPaymentDataSource"
           [sortable]="false">
+          <eg-grid-toolbar-button [disabled]="!deskPaymentDataSource.data.length"
+            i18n-label label="Print"
+            (onClick)="printDeskPayments()">
+          </eg-grid-toolbar-button>
           <eg-grid-column label="Workstation" name="workstation" [index]="true" i18n-label></eg-grid-column>
           <eg-grid-column label="Cash Payment" name="cash_payment" i18n-label datatype="money"></eg-grid-column>
           <eg-grid-column label="Check Payment" name="check_payment" i18n-label datatype="money"></eg-grid-column>
@@ -82,7 +86,7 @@
           <div class="col-sm-2" i18n>Total Work Payments</div>
           <div class="col-sm-10">{{userTotals.work_payment | currency}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <div class="col-sm-2" i18n>Total Goods Payments</div>
           <div class="col-sm-10">{{userTotals.goods_payment | currency}}</div>
         </div>
@@ -97,6 +101,10 @@
           [disablePaging]="true"
           [dataSource]="userPaymentDataSource"
           [sortable]="false">
+          <eg-grid-toolbar-button [disabled]="!userPaymentDataSource.data.length"
+            i18n-label label="Print"
+            (onClick)="printUserPayments()">
+          </eg-grid-toolbar-button>
           <eg-grid-column label="User" name="usr" [index]="true" i18n-label></eg-grid-column>
           <eg-grid-column label="Credit Payment" name="credit_payment" i18n-label datatype="money"></eg-grid-column>
           <eg-grid-column label="Debit Payment" name="debit_payment" i18n-label datatype="money"></eg-grid-column>
@@ -114,3 +122,146 @@
   </li>
 </ul>
 <div [ngbNavOutlet]="cashReportsNav"></div>
+
+<ng-template #deskPrintTmpl>
+  <style>
+    .print-table {
+      border-collapse: collapse;
+    }
+    .print-totals {
+      margin-bottom: 15px;
+    }
+    .print-table th,
+    .print-table td {
+      border: 1px solid #aaa;
+      padding: 2px 4px;
+    }
+  </style>
+
+  <table class="print-table print-totals">
+    <thead>
+      <tr>
+        <th colspan="2">
+          {{loadedRange.org}} <ng-container i18n>Desk Payments</ng-container>:
+          {{loadedRange.start | date:'shortDate'}} - {{loadedRange.end | date:'shortDate'}}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td i18n>Total Cash Payments</td>
+        <td>{{deskTotals.cash_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Check Payments</td>
+        <td>{{deskTotals.check_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Credit Card Payments</td>
+        <td>{{deskTotals.credit_card_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Debit Card Payments</td>
+        <td>{{deskTotals.debit_card_payment | currency}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table class="print-table">
+    <thead>
+      <tr>
+        <th i18n>Workstation</th>
+        <th i18n>Cash Payment</th>
+        <th i18n>Check Payment</th>
+        <th i18n>Credit Card Payment</th>
+        <th i18n>Debit Card Payment</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let mwps of deskPaymentDataSource.data">
+        <td>{{mwps.workstation()}}</td>
+        <td>{{mwps.cash_payment() | currency}}</td>
+        <td>{{mwps.check_payment() | currency}}</td>
+        <td>{{mwps.credit_card_payment() | currency}}</td>
+        <td>{{mwps.debit_card_payment() | currency}}</td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
+<ng-template #userPrintTmpl>
+  <style>
+    .print-table {
+      border-collapse: collapse;
+      margin-bottom: 15px;
+    }
+    .print-totals {
+      margin-bottom: 15px;
+    }
+    .print-table th,
+    .print-table td {
+      border: 1px solid #aaa;
+      padding: 2px 4px;
+    }
+  </style>
+
+  <table class="print-table print-totals">
+    <thead>
+      <tr>
+        <th colspan="2">
+          {{loadedRange.org}} <ng-container i18n>Staff User Payments</ng-container>:
+          {{loadedRange.start | date:'shortDate'}} - {{loadedRange.end | date:'shortDate'}}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td i18n>Total Patron Credit</td>
+        <td>{{userTotals.credit_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Forgive Payments</td>
+        <td>{{userTotals.forgive_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Work Payments</td>
+        <td>{{userTotals.work_payment | currency}}</td>
+      </tr>
+      <tr>
+        <td i18n>Total Goods Payments</td>
+        <td>{{userTotals.goods_payment | currency}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table class="print-table">
+    <thead>
+      <tr>
+        <th i18n>User</th>
+        <th i18n>Credit Payment</th>
+        <th i18n>Forgive Payment</th>
+        <th i18n>Work Payment</th>
+        <th i18n>Goods Payment</th>
+        <th i18n>Staff Card</th>
+        <th i18n>Staff Email</th>
+        <th i18n>Staff First Name</th>
+        <th i18n>Staff Family Name</th>
+        <th i18n>Staff Home OU</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let mups of userPaymentDataSource.data">
+        <td>{{mups.usr()}}</td>
+        <td>{{mups.credit_payment() | currency}}</td>
+        <td>{{mups.forgive_payment() | currency}}</td>
+        <td>{{mups.work_payment() | currency}}</td>
+        <td>{{mups.goods_payment() | currency}}</td>
+        <td>{{mups.user.card()}}</td>
+        <td>{{mups.user.email()}}</td>
+        <td>{{mups.user.first_given_name()}}</td>
+        <td>{{mups.user.family_name()}}</td>
+        <td>{{mups.user.home_ou()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
index cef34be..7396936 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
@@ -1,10 +1,11 @@
-import {Component, OnInit, Input, ViewChild} from '@angular/core';
+import {Component, OnInit, Input, ViewChild, TemplateRef} from '@angular/core';
 import {GridComponent} from '@eg/share/grid/grid.component';
 import {GridDataSource, GridCellTextGenerator} from '@eg/share/grid/grid';
 import {IdlService} from '@eg/core/idl.service';
 import {NetService} from '@eg/core/net.service';
 import {AuthService} from '@eg/core/auth.service';
 import {OrgService} from '@eg/core/org.service';
+import {PrintService} from '@eg/share/print/print.service';
 
 class DeskTotals {
     cash_payment = 0;
@@ -39,19 +40,26 @@ export class CashReportsComponent implements OnInit {
     disabledOrgs = [];
     activeTab = 'deskPayments';
     cellTextGenerator: GridCellTextGenerator;
-
+    loadedRange = {
+        org: this.selectedOrg?.shortname(),
+        start: this.startDate,
+        end: this.endDate
+    };
 
     // Default sort field, used when no grid sorting is applied.
     @Input() sortField: string;
     @ViewChild('deskPaymentGrid') deskPaymentGrid: GridComponent;
     @ViewChild('userPaymentGrid') userPaymentGrid: GridComponent;
     @ViewChild('userGrid') userGrid: GridComponent;
+    @ViewChild('deskPrintTmpl') deskPrintTmpl: TemplateRef<any>;
+    @ViewChild('userPrintTmpl') userPrintTmpl: TemplateRef<any>;
 
     constructor(
         private idl: IdlService,
         private net: NetService,
         private org: OrgService,
-        private auth: AuthService) {}
+        private auth: AuthService,
+        private printer: PrintService) {}
 
     ngOnInit() {
         this.disabledOrgs = this.getFilteredOrgList();
@@ -91,6 +99,11 @@ export class CashReportsComponent implements OnInit {
                 dataForTotal = this.getDeskTotal(result);
             }
             this[dataSource].data = result;
+            this.loadedRange = {
+                org: this.selectedOrg?.shortname(),
+                start: this.startDate,
+                end: this.endDate
+            };
             this.eraseUserGrid();
         });
     }
@@ -154,4 +167,16 @@ export class CashReportsComponent implements OnInit {
         this.selectedOrg = org;
         this.searchForData(this.startDate, this.endDate);
     }
+
+    printPayments(template: TemplateRef<any>): void {
+        this.printer.print({printContext: 'default', template});
+    }
+
+    printDeskPayments(): void {
+        this.printPayments(this.deskPrintTmpl);
+    }
+
+    printUserPayments(): void {
+        this.printPayments(this.userPrintTmpl);
+    }
 }