Merge pull request #358 from NREL/issue-129

Issue 129: Print to PDF for Reports

angular.json

@@ -40,7 +40,8 @@
               "src/assets/styles/sidebar.css",
               "src/assets/styles/report.css",
               "src/assets/styles/helpText.css",
-              "src/assets/styles/dashboards.css"
+              "src/assets/styles/dashboards.css",
+              "src/assets/styles/printing.css"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.js",

src/app/app.component.css

@@ -1,10 +1,20 @@
-.neb-container{
+.neb-container {
     /* width: 100%; */
     height: 100vh;
     background-color: #efefef;
 }
 
-.main-content{
+.main-content {
     height: calc(100vh - 4rem);
     overflow-y: auto;
 }
+
+@media print {
+    .main-content {
+        height: auto !important;
+    }
+
+    .neb-container{
+        height: auto !important;
+    }
+}

src/app/app.component.html

@@ -1,21 +1,23 @@
-<div class="neb-container d-flex flex-column">
-    <app-navbar></app-navbar>
+<div class="d-flex flex-column" [ngClass]="{'neb-container': !print}">
+    <app-navbar class="hide-print"></app-navbar>
     <ng-template [ngIf]="dataInitialized" [ngIfElse]="initializingDataBlock">
         <div class="d-flex w-100">
             <div class="d-flex">
                 <app-sidebar></app-sidebar>
             </div>
             <div class="w-100 main-content" (click)="collapseSidebar()">
                 <router-outlet></router-outlet>
-                <app-toast-notifications></app-toast-notifications>
+                <app-toast-notifications *ngIf="!print"></app-toast-notifications>
             </div>
         </div>
         <!-- <router-outlet></router-outlet> -->
     </ng-template>
     <ng-template #initializingDataBlock>
         Initializing data...
     </ng-template>
-    <app-loading></app-loading>
-    <app-setup-wizard-modal></app-setup-wizard-modal>
-    <app-alpha-disclaimer></app-alpha-disclaimer>
+    <ng-container *ngIf="!print">
+        <app-loading></app-loading>
+        <app-setup-wizard-modal></app-setup-wizard-modal>
+        <app-alpha-disclaimer></app-alpha-disclaimer>
+    </ng-container>
 </div>

src/app/app.component.ts

@@ -16,6 +16,7 @@ import { ProcessEquipmentIdbService } from './indexed-db/process-equipment-idb.s
 import { KeyPerformanceMetricImpactsIdbService } from './indexed-db/key-performance-metric-impacts-idb.service';
 import { ToastNotificationsService } from './core-components/toast-notifications/toast-notifications.service';
 import { UpdateDbEntriesService } from './indexed-db/update-db-entries.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -25,6 +26,8 @@ import { UpdateDbEntriesService } from './indexed-db/update-db-entries.service';
 export class AppComponent {
 
   dataInitialized: boolean = false;
+  print: boolean;
+  printSub: Subscription;
   constructor(private userIdbService: UserIdbService, private companyIdbService: CompanyIdbService,
     private facilityIdbService: FacilityIdbService, private energyOpportunityIdbService: EnergyOpportunityIdbService,
     private router: Router,
@@ -42,6 +45,9 @@ export class AppComponent {
   }
 
   async ngOnInit() {
+    this.printSub = this.sharedDataService.print.subscribe(print => {
+      this.print = print;
+    });
     await this.initializeData();
     this.checkRouter();
     this.toastNotificationService.showWebDisclaimer();

src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment-results/on-site-assessment-results.component.html

@@ -1,4 +1,7 @@
 <div class="ps-2 pe-2 pb-2">
     <app-assessment-savings-chart [assessmentReport]="assessmentReport"></app-assessment-savings-chart>
     <app-assessment-savings-table [assessmentReport]="assessmentReport"></app-assessment-savings-table>
+    <div class="alert alert-info w-100 p-1 text-center small">
+        A printable version of this report can be found in the "Data Evaluation" section of the wizard.
+    </div>
 </div>

src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html

@@ -1,30 +1,26 @@
-<div class="setup-wizard-content" *ngIf="assessment">
-    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
-        <div class="col-10 pt-4 pb-4">
-            <div class="form-paper shadow">
-                <nav class="navbar top-nav">
-                    <h5>
-                        <fa-icon [icon]="faChartPie"></fa-icon> {{assessment.name}} Report
-                    </h5>
-                </nav>
+<div [ngClass]="{'setup-wizard-content': !print}" *ngIf="assessment">
+    <div [ngClass]="{'row g-0 justify-content-center h-100 w-100 overflow-scroll': !print}">
+        <div [ngClass]="{'col-10 pt-4 pb-4': !print}">
+            <div [ngClass]="{'form-paper shadow': !print}">
+                <h5>
+                    <fa-icon [icon]="faChartPie"></fa-icon> {{assessment.name}} Report
+                </h5>
                 <app-assessment-report [assessment]="assessment"></app-assessment-report>
             </div>
         </div>
     </div>
 </div>
-<nav class="setup-wizard-footer navbar shadow">
+<nav class="setup-wizard-footer navbar shadow" *ngIf="!print">
     <div class="container-fluid justify-content-between">
-        <div class="col-3">
-            <button class="btn nav-btn btn-sm" (click)="goBack()">
-                <fa-icon [icon]="faChevronLeft"></fa-icon>
-            </button>
-        </div>
-        <div class="col-3">
-            <div class="d-flex  justify-content-end">
-                <button class="btn nav-btn btn-sm" (click)="goToNext()">
-                    <fa-icon [icon]="faChevronRight"></fa-icon>
-                </button>
-            </div>
-        </div>
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+        </button>
+        <button class="btn btn-success btn-sm" (click)="togglePrint()">
+            <fa-icon [icon]="faFilePdf"></fa-icon>
+            Generate PDF
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
     </div>
 </nav>

src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight, faChartPie } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChevronLeft, faChevronRight, faChartPie, faFilePdf } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbAssessment } from 'src/app/models/assessment';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { SharedDataService } from 'src/app/shared/shared-services/shared-data.service';
 
 @Component({
   selector: 'app-assessment-evaluation',
@@ -15,16 +16,20 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 export class AssessmentEvaluationComponent {
   faChevronRight: IconDefinition = faChevronRight;
   faChevronLeft: IconDefinition = faChevronLeft;
+  faFilePdf: IconDefinition = faFilePdf;
   faChartPie: IconDefinition = faChartPie;
 
   assessmentIndex: number;
   onSiteVisit: IdbOnSiteVisit;
   onSiteVisitSub: Subscription;
   assessment: IdbAssessment;
   assessmentSub: Subscription;
+  print: boolean;
+  printSub: Subscription;
   constructor(private activatedRoute: ActivatedRoute, private assessmentIdbService: AssessmentIdbService,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private router: Router
+    private router: Router,
+    private sharedDataService: SharedDataService
   ) {
 
   }
@@ -49,11 +54,19 @@ export class AssessmentEvaluationComponent {
         this.router.navigateByUrl('/setup-wizard/data-collection/' + this.onSiteVisit.guid + '/manage-assessments');
       }
     });
+
+    this.printSub = this.sharedDataService.print.subscribe(print => {
+      this.print = print;
+      if (this.print) {
+        this.printReport();
+      }
+    });
   }
 
   ngOnDestroy() {
     this.assessmentSub.unsubscribe();
     this.onSiteVisitSub.unsubscribe();
+    this.printSub.unsubscribe();
   }
 
   goToNextAssessment() {
@@ -79,4 +92,18 @@ export class AssessmentEvaluationComponent {
       this.router.navigateByUrl('/setup-wizard/data-evaluation/' + this.onSiteVisit.guid + '/visit-report');
     }
   }
+
+  togglePrint() {
+    this.sharedDataService.print.next(true);
+  }
+
+  printReport() {
+    setTimeout(() => {
+      window.dispatchEvent(new Event("resize"));
+      setTimeout(() => {
+        window.print();
+        this.sharedDataService.print.next(false)
+      }, 1000)
+    }, 100)
+  }
 }

src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.html

@@ -1,48 +1,42 @@
-<div class="setup-wizard-content">
-    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
-        <div class="col-10 pt-4 pb-4">
-            <div class="form-paper shadow">
-                <nav class="navbar top-nav">
-                    <h5>
-                        <fa-icon [icon]="faChartColumn"></fa-icon>
-                        On Site Visit Report
-                    </h5>
-                </nav>
+<div [ngClass]="{'setup-wizard-content': !print}">
+    <div [ngClass]="{'row g-0 justify-content-center h-100 w-100 overflow-scroll': !print}">
+        <div [ngClass]="{'col-10 pt-4 pb-4': !print}">
+            <div [ngClass]="{'form-paper shadow': !print}">
+                <h5>
+                    <fa-icon [icon]="faChartColumn"></fa-icon>
+                    On Site Visit Report
+                </h5>
                 <app-on-site-visit-report [onSiteVisit]="onSiteVisit"></app-on-site-visit-report>
             </div>
         </div>
-        <div class="col-10">
+        <div class="col-10 hide-print">
             <hr>
         </div>
-        <div class="col-10 pt-4 pb-4" *ngFor="let assessment of assessments">
-            <div class="form-paper shadow">
-                <nav class="navbar top-nav">
-                    <h5>
-                        <fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} Report
-                    </h5>
-                </nav>
+        <div class="print-break-avoid" *ngFor="let assessment of assessments" [ngClass]="{'col-10 pt-4 pb-4': !print}">
+            <div [ngClass]="{'form-paper shadow': !print}">
+                <h5>
+                    <fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} Report
+                </h5>
                 <app-assessment-report [assessment]="assessment" [inRollup]="true"></app-assessment-report>
             </div>
         </div>
     </div>
 </div>
-<nav class="setup-wizard-footer navbar shadow">
+<nav class="setup-wizard-footer navbar shadow" *ngIf="!print">
     <div class="container-fluid justify-content-between">
-        <div class="col-3">
-            <button class="btn nav-btn btn-sm" (click)="goBack()">
-                <fa-icon [icon]="faChevronLeft"></fa-icon>
-                <span class="d-md-none">
-                    Back
-                </span>
-            </button>
-        </div>
-        <div class="col-3">
-            <div class="d-flex  justify-content-end">
-                <button class="btn nav-btn btn-sm" (click)="goNext()">
-                    <fa-icon [icon]="faFolderOpen"></fa-icon>
-                    Go To Portfolio
-                </button>
-            </div>
-        </div>
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            <span class="d-md-none">
+                Back
+            </span>
+        </button>
+        <button class="btn btn-success btn-sm" (click)="togglePrint()">
+            <fa-icon [icon]="faFilePdf"></fa-icon>
+            Generate PDF
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goNext()">
+            <fa-icon [icon]="faFolderOpen"></fa-icon>
+            Go To Portfolio
+        </button>
     </div>
 </nav>

src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IconDefinition, faChartColumn, faChevronLeft, faFolderOpen, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChartColumn, faChevronLeft, faFilePdf, faFolderOpen, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
+import { Subscription } from 'rxjs';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbAssessment } from 'src/app/models/assessment';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { SharedDataService } from 'src/app/shared/shared-services/shared-data.service';
 
 @Component({
   selector: 'app-visit-report',
@@ -16,13 +18,18 @@ export class VisitReportComponent {
   faChevronLeft: IconDefinition = faChevronLeft;
   faFolderOpen: IconDefinition = faFolderOpen;
   faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
+  faFilePdf: IconDefinition = faFilePdf;
+
   faChartColumn: IconDefinition = faChartColumn;
 
   onSiteVisit: IdbOnSiteVisit;
   assessments: Array<IdbAssessment>;
+    print: boolean;
+    printSub: Subscription;
   constructor(private router: Router,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private assessmentIdbService: AssessmentIdbService
+    private assessmentIdbService: AssessmentIdbService,
+        private sharedDataService: SharedDataService
   ) {
 
   }
@@ -33,7 +40,17 @@ export class VisitReportComponent {
     this.onSiteVisit.assessmentIds.forEach(assessmentId => {
       let assessment: IdbAssessment = this.assessmentIdbService.getByGuid(assessmentId);
       this.assessments.push(assessment);
-    })
+    });
+    this.printSub = this.sharedDataService.print.subscribe(print => {
+      this.print = print;
+      if (this.print) {
+        this.printReport();
+      }
+    });
+  }
+
+  ngOnDestroy(){
+    this.printSub.unsubscribe();
   }
 
   goNext() {
@@ -43,4 +60,18 @@ export class VisitReportComponent {
   goBack() {
     this.router.navigateByUrl('/setup-wizard/data-evaluation/' + this.onSiteVisit.guid + '/assessment-report/' + this.onSiteVisit.assessmentIds[this.onSiteVisit.assessmentIds.length - 1]);
   }
+
+  togglePrint() {
+    this.sharedDataService.print.next(true);
+  }
+
+  printReport() {
+    setTimeout(() => {
+      window.dispatchEvent(new Event("resize"));
+      setTimeout(() => {
+        window.print();
+        this.sharedDataService.print.next(false)
+      }, 1000)
+    }, 100)
+  }
 }