add page numbers

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.css

@@ -11,6 +11,7 @@
         -webkit-print-color-adjust: exact;
         color-adjust: exact;
     }
+    tr.page-break-after:after { content:""; display: block; page-break-before: always; }
   }
 
   .h-100 {
@@ -109,7 +110,7 @@
     border-collapse: collapse;
   }
   
-  table.borders, table.borders th, table.borders td {
+  table.borders th, table.borders tr.row td {
     border: 1px solid black;
   }
 
@@ -117,6 +118,11 @@
       padding: 5px;
   }
 
-  table.highlight-even tr:nth-child(even) {
+  table.highlight-even tr.row:nth-child(even) {
     background-color: #e6ffe6;    
+  }
+
+  table tbody tr.footer td {
+      font-size: small;
+      vertical-align: bottom;
   }

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.html

@@ -41,15 +41,15 @@
           </tr>
         </thead>
         <tbody class="cell-padding-5">
-          <tr>
+          <tr class="row">
             <td class="fw-bold">General Fund</td>
             <td class="text-right">{{totalGeneral() | currency}}</td>
           </tr>
-          <tr>
+          <tr class="row">
             <td class="fw-bold">Missions Fund</td>
             <td class="text-right">{{totalMissions() | currency}}</td>
           </tr>
-          <tr>
+          <tr class="row">
             <td class="fw-bold">Total Giving</td>
             <td class="text-right hilight-yellow">{{(totalGeneral() + totalMissions()) | currency}}</td>
           </tr>
@@ -79,14 +79,43 @@
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let t of transactions">
+    <ng-container *ngFor="let t of transactions; let i = index">      
+      <tr class="row">
         <td nowrap>{{t.date | date:'MM-dd-yyyy'}}</td>
         <td nowrap>{{t.type === 0 ? 'Cash' : 'Check'}}</td>
         <td nowrap>{{t.checkNumber}}</td>
         <td nowrap>{{t.fund === 0 ? 'General' : 'Missions'}}</td>
         <td width="99%">{{t.description}}</td>
         <td nowrap>{{t.amount | currency}}</td>
-      </tr>   
+      </tr> 
+      <tr *ngIf="isFooter(i+1)" class="footer page-break-after">
+        <td colspan="6">
+          <div class="flex flex-justify-space-between">
+            <p>Old Fashion Baptist Church Giving Statement {{taxYear  }}</p>
+            <p>Page {{calcPage(i+1)}} of {{pages}}</p>
+          </div>
+        </td>
+        <div></div><!--DIV IS HERE TO MAKE PAGE BREAKS WORK CORRECTLY-->
+      </tr>
+    </ng-container> 
+    <ng-container *ngFor="let r of fillerRows; let i = index">
+      <tr>
+        <td nowrap>&nbsp;</td>
+        <td nowrap></td>
+        <td nowrap></td>
+        <td nowrap></td>
+        <td width="99%"></td>
+        <td nowrap></td>
+      </tr> 
+      <tr *ngIf="i === fillerRows.length-1" class="footer">
+        <td colspan="6">
+          <div class="flex flex-justify-space-between">
+            <p>Old Fashion Baptist Church Giving Statement 2019</p>
+            <p>Page {{pages}} of {{pages}}</p>
+          </div>
+        </td>
+      </tr>
+    </ng-container>   
   </tbody>
 </table>
 <div *ngIf="pagesOdd" class="page-break-before">&nbsp;</div>

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.ts

@@ -3,6 +3,7 @@ import { PrintService } from '../../services/print-service';
 import { Transaction } from '../add-transaction-page/transaction';
 import * as Chart from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { CurrencyPipe } from '@angular/common';
 
 @Component({
   selector: 'app-contributor-yearly-report',
@@ -35,14 +36,20 @@ export class ContributorYearlyReportComponent implements OnInit {
   public contributorZip: string = '59701';
   public taxYear: number = 2019;
 
-  public rowsFirstPage: number = 13;
-  public rowsPerPage: number = 32;
+  public rowsFirstPage: number = 12;
+  public rowsPerPage: number = 31;
+  public get fillerRows(): number[] {
+    const rowsToFillPage = this.rowsFirstPage + ((this.pages - 2) * this.rowsPerPage);
+    const rowsNeeded = rowsToFillPage - this.transactions.length;
+    return Array(rowsNeeded).fill(1).map((x,i)=>i)
+  }
   public get pages(): number {
     return Math.ceil((this.transactions.length - this.rowsFirstPage) / this.rowsPerPage) + 2;
   }
   public get pagesOdd(): boolean {
     return !(this.pages % 2 == 0)
   }
+  private currencyPipe: CurrencyPipe = new CurrencyPipe('en-US');
 
   constructor(public printService: PrintService) { }
 
@@ -80,7 +87,23 @@ export class ContributorYearlyReportComponent implements OnInit {
     return sum;
   }
 
+  public calcPage(index: number): number {
+    const val = Math.max(index, this.rowsFirstPage);
+    return Math.ceil((val - this.rowsFirstPage) / this.rowsPerPage) + 2;
+  }
+
+  public isFooter(index: number): boolean {
+    if (index === this.rowsFirstPage) {
+      return true;
+    }
+    if (index === (this.rowsFirstPage + ((this.calcPage(index) - 2) * this.rowsPerPage))) {
+      return true;
+    }
+    return false;
+  }
+
   private renderChart() {
+    const me = this;
     var myChart = new Chart(this.chartElement.nativeElement, {
       plugins: [ChartDataLabels],
       type: 'bar',      
@@ -106,7 +129,12 @@ export class ContributorYearlyReportComponent implements OnInit {
               stacked: true
           }],
           yAxes: [{
-              stacked: true
+              stacked: true,
+              ticks: {
+                callback: function(value, index, values) {
+                  return me.currencyPipe.transform(value, 'USD', 'symbol', '1.0-0');
+                }
+              }
           }]
         },
         plugins:{
@@ -118,7 +146,7 @@ export class ContributorYearlyReportComponent implements OnInit {
               if (value === 0) {
                 return '';
               }
-              return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
+              return me.currencyPipe.transform(value, 'USD', 'symbol', '1.0-2');
             }
           }
         }