Add contributor print report

Client/src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ import { CampPageComponent } from './components/camp-page/camp-page.component';
 import { MembersPageComponent } from './components/members-page/members-page.component';
 import { AddTransactionPageComponent } from './components/add-transaction-page/add-transaction-page.component';
 import { MissionaryFormPageComponent } from './components/missionary-form-page/missionary-form-page.component';
+import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
 
 const routes =
   [
@@ -76,6 +77,10 @@ const routes =
       {
         path: 'transactions/add',
         component: AddTransactionPageComponent
+      },
+      {
+        path: 'contributor/report',
+        component: ContributorYearlyReportComponent
       }
     ]
 

Client/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { GoogleAnalyticsService } from './services/google-analytics.service';
 import { WindowRefService } from './services/window-ref.service';
 import { EmailService } from './services/email.service';
 import { SermonService } from './services/sermon.service';
+import { PrintService } from './services/print-service';
 import { LoginService } from './services/login.service';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -73,6 +74,7 @@ import { AddTransactionPageComponent } from './components/add-transaction-page/a
 import { AddTransactionPopupComponent } from './components/add-transaction-page/add-transaction-popup/add-transaction-popup.component';
 import { MissionaryFormPageComponent } from './components/missionary-form-page/missionary-form-page.component';
 import { MissionarySupportService } from './services/missionary-support-service';
+import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
 
 
 
@@ -118,7 +120,8 @@ import { MissionarySupportService } from './services/missionary-support-service'
     AddUserPopupComponent,
     AddTransactionPageComponent,
     AddTransactionPopupComponent,
-    MissionaryFormPageComponent
+    MissionaryFormPageComponent,
+    ContributorYearlyReportComponent
   ],
   imports: [
     BrowserModule,
@@ -139,7 +142,7 @@ import { MissionarySupportService } from './services/missionary-support-service'
     MatRadioModule,
     MatCheckboxModule
   ],
-  providers: [LoginService,UserService,GoogleAnalyticsService,SermonService,TransactionService,EventService,EmailService,MissionarySupportService,WindowRefService],
+  providers: [LoginService,PrintService,UserService,GoogleAnalyticsService,SermonService,TransactionService,EventService,EmailService,MissionarySupportService,WindowRefService],
   entryComponents: [AddSermonPopupComponent,
                     LoginPopupComponent,
                     OkPopupComponent,

Client/src/app/components/app/app.component.css

@@ -1,6 +1,6 @@
 
 
-header{
+div.header{
     position:fixed;
     top:0;
     left:0;
@@ -51,7 +51,7 @@ header{
     padding-bottom: 140px;
 }
 
-footer{
+div.footer{
     background-color: rgb(50,50,50);
     padding-top: 20px;
     padding-bottom: 20px;
@@ -81,7 +81,7 @@ footer{
 }
 
 @media(max-width: 800px){
-    footer{
+    div.footer{
         height: 380px;
     }
     .footer-panel{

Client/src/app/components/app/app.component.html

@@ -1,6 +1,6 @@
 
 
-<header>      
+<div class="header" [class.print-hide]="printService.isPrinting">      
       <div id="header-background" [ngStyle]="{'opacity':headerOpacity}"></div>
       <button mat-button class="header-button-home" routerLink="/home"><img id="logo" src="assets/images/tiny/logo.png" height="30" alt="logo"> Old Fashion Baptist</button>
       <span class="hideOnMobile"></span>
@@ -12,13 +12,13 @@
             (click)="mainMenuClick()">
             <i ofbicon class="example-icon" style="line-height:20px;">menu</i>
       </button>
-</header>
+</div>
 
-<div class="content">
+<div class="content" [class.print-hide-children]="printService.isPrinting">
   <router-outlet></router-outlet>
 </div>
 
-<footer>
+<div class="footer" [class.print-hide]="printService.isPrinting">
       <div id="footer-content">
             <div id="footer-contact-content" class="footer-panel">
                   <a target="_blank" href="https://www.google.com/maps/place/Old+Fashion+Baptist+Church/@45.9814004,-112.5320574,11.87z/data=!4m12!1m6!3m5!1s0x535b078c3c74ea33:0xac299097142c5894!2sOld+Fashion+Baptist+Church!8m2!3d45.951287!4d-112.511978!3m4!1s0x535b078c3c74ea33:0xac299097142c5894!8m2!3d45.951287!4d-112.511978">
@@ -45,9 +45,9 @@
             </div>
       </div>
       <div class="audio-player-filler" [hidden]="!showAudioPlayer" ></div>
-</footer>
+</div>
 
-<div class="audio-player" [class.audio-player-slide-up]="showAudioPlayer">
+<div class="audio-player" [class.audio-player-slide-up]="showAudioPlayer" [class.print-hide]="printService.isPrinting">
       <audio-player-component (closed)="audioPlayerClosed()" (started)="audioPlayerStarted()"></audio-player-component>
 </div>
 

Client/src/app/components/app/app.component.ts

@@ -4,6 +4,7 @@ import { Router, NavigationEnd, Event } from '@angular/router';
 import { EventService } from '../../services/event.service';
 import { AudioPlayerService } from '../../services/audio-player.service';
 import { BibleVerseService } from '../../services/bible-verse.service';
+import { PrintService } from '../../services/print-service';
 
 
 @Injectable()
@@ -26,7 +27,8 @@ export class AppComponent {
 
   constructor(private router: Router, 
               private audioPlayerService: AudioPlayerService,
-              private googleAnalyticsService: GoogleAnalyticsService){
+              private googleAnalyticsService: GoogleAnalyticsService,
+              public printService: PrintService){
     this.router.events.subscribe((event:Event) => {
       if(event instanceof NavigationEnd) {
         this.lastRoute = this.currRoute;

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

@@ -0,0 +1,88 @@
+@media screen {
+    :host {
+      display: none;
+    }
+  }
+
+  @media print {
+    :host {
+        display: block;
+    }
+  }
+
+  .h-100 {
+      height: 300px;
+  }
+
+  .d-block {
+      display: block;
+  }
+
+  .flex {
+      display: flex;
+  }
+
+  .flex-align-center {
+      align-items: center;
+  }
+
+  .flex-align-top {
+      align-items: baseline;
+  }
+
+  .flex-justify-center {
+      justify-content: center;
+  }
+
+  .flex-justify-space-between {
+      justify-content: space-between;
+  }
+
+  hr {
+    border-top: 1px solid green;
+  }
+
+  .text-center {
+      text-align: center;
+  }
+
+  .text-right {
+      text-align: right;
+  }
+
+  .mt-20 {
+      margin-top: 20px;
+  }
+
+  .mb-20 {
+      margin-bottom: 20px;
+  }
+
+  .flex-direction-column {
+      flex-direction: column;
+  }
+
+  .page-break-before {
+      page-break-before: always;
+  }
+
+  .fw-bold {
+      font-weight: bold;
+  }
+
+  .hilight-yellow {
+      background-color: yellow;
+      -webkit-print-color-adjust: exact;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+  
+  table, th, td {
+    border: 1px solid black;
+  }
+
+  table.cell-padding-5 td, table.cell-padding-5 th {
+      padding: 5px;
+  }

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

@@ -0,0 +1,76 @@
+<div class="h-100 flex flex-align-center flex-justify-center flex-direction-column">
+  <img src="../../../assets/images/original/logo_dark.png">
+  <p>
+    Old Fashion Baptist Church Contribution Report {{taxYear}}
+  </p>
+  <p>
+    {{contributorName}}
+  </p>
+</div>
+
+<div class="page-break-before">
+  <div class="header flex flex-justify-space-between">
+    <div>
+      <img src="../../../assets/images/original/logo_dark.png">
+    </div>
+    <div class="text-right">
+      <p>Old Fashion Baptist Church</p>
+      <p>5003 Wynne Ave</p>
+      <p>Butte, MT 59701</p>
+      <p>(406) 494-5028</p>
+      <p>ofbbutte.com</p>
+    </div>
+  </div>
+  <hr class="hr mt-20">
+  <h2 class="text-center mt-20">Old Fashion Baptist Church Giving Statement {{taxYear}}</h2>
+  <hr class="mt-20">
+  <div class="flex flex-align-top flex-justify-space-between">
+    <div class="mt-20">
+      <p><b>Name: </b>{{contributorName}}</p>
+      <p><b>Tax Year: </b>{{taxYear}}</p>
+      <p><b>Registration Code: </b>{{registrationCode}}</p>
+    </div>
+    <div class="mt-20">
+      <table class="cell-padding-5">
+        <thead>
+          <tr>
+            <th colspan="2">{{taxYear}} Giving Summary</th>
+          </tr>
+        </thead>
+        <tbody class="cell-padding-5">
+          <tr>
+            <td class="fw-bold">General Fund</td>
+            <td class="text-right">{{totalGeneral() | currency}}</td>
+          </tr>
+          <tr>
+            <td class="fw-bold">Missions Fund</td>
+            <td class="text-right">{{totalMissions() | currency}}</td>
+          </tr>
+          <tr>
+            <td class="fw-bold">Total Giving</td>
+            <td class="text-right hilight-yellow">{{(totalGeneral() + totalMissions()) | currency}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="mt-20">
+    Thank you for your contribution. The information provided in this statement reflects
+    your contributions on record for tax year {{taxYear}}. The chart below provides current and
+    historical data (if available) for informational purposes only. The data on the following
+    pages includes a detail listing of contributions for {{taxYear}}.
+  </div>
+</div>
+
+<table class="page-break-before cell-padding-5">
+  <thead>
+    <tr>
+      <th>Date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let t of transactions">
+      <td>{{t.date}}</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContributorYearlyReportComponent } from './contributor-yearly-report.component';
+
+describe('ContributorYearlyReportComponent', () => {
+  let component: ContributorYearlyReportComponent;
+  let fixture: ComponentFixture<ContributorYearlyReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContributorYearlyReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContributorYearlyReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { PrintService } from '../../services/print-service';
+import { Transaction } from '../add-transaction-page/transaction';
+
+@Component({
+  selector: 'app-contributor-yearly-report',
+  templateUrl: './contributor-yearly-report.component.html',
+  styleUrls: ['./contributor-yearly-report.component.css']
+})
+export class ContributorYearlyReportComponent implements OnInit {
+
+  public transactions: Transaction[] = [];
+  public contributorName: string = 'Bob and Jill Handerson';
+  public taxYear: number = 2019;
+  public registrationCode: string = 'HDIJDHDFD*#*@';
+
+  constructor(public printService: PrintService) { }
+
+  ngOnInit() {
+    const t = new Transaction();
+    t.amount = 400;
+    t.checkNumber = '3434';
+    t.contributorId = 45;
+    t.date = '2019-10-20';
+    t.description = 'Some description';
+    t.fundId = 1;
+    t.goodsOrServices = false;
+    t.taxYear = 2019;
+    t.typeId = 1;
+    for(let i = 0; i < 100; i++) {
+      const t2 = new Transaction();
+      t2.amount = 300;
+      t2.checkNumber = 'ghff';
+      t2.contributorId = 45;
+      t2.date = '2019-10-23';
+      t2.description = 'Missionary Family';
+      t2.fundId = 2;
+      t2.goodsOrServices = false;
+      t2.taxYear = 2019;
+      t2.typeId = 2;
+      this.transactions.push(t);
+    }
+    this.transactions.push(t);
+    this.printService.setPrinting(true);
+    window.print();
+  }
+
+  public totalGeneral() {
+    let sum = 0;
+    this.transactions.filter(t => t.fundId === 1).forEach(t => sum += t.amount);
+    return sum;
+  }
+
+  public totalMissions() {
+    let sum = 0;
+    this.transactions.filter(t => t.fundId === 2).forEach(t => sum += t.amount);
+    return sum;
+  }
+
+}

Client/src/app/services/print-service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PrintService {
+
+    public isPrinting: boolean = false;
+
+    constructor(){}
+
+    public setPrinting(printing: boolean) {
+        this.isPrinting = printing;
+    }
+}
+
+

Client/src/styles.css

@@ -23,6 +23,21 @@ body {
     background-color: red;
 }
 
+
+
+@media print {
+    header,footer { 
+        display: none; 
+    }
+    .print-hide {
+        display: none;
+    }    
+    .print-hide-children > * {
+        display: none;
+    }
+}
+
+
 /*MATERIAL FONT FOR ICONS*/
 @font-face {
   font-family: 'Material Icons';