Backlog/v11 compilance report export

frontend/src/app/compliance/compliance-latest-evaluations-view/components/compliance-latest-evaluation-view-detail/compliance-latest-evaluation-view-detail.component.html

@@ -1,4 +1,10 @@
 <div class="w-100 d-flex flex-column flex-grow-1 h-100">
+
+      <button (click)="exportToPdf()"
+              class="btn utm-button utm-button-primary mb-2">
+        <i class="mr-1 icon-file-pdf"></i>
+        Save to PDF
+      </button>
   <div [ngClass]="{
       'border-left-success': control.lastEvaluationStatus === ComplianceStatusExtendedEnum.COMPLIANT,
       'border-left-danger': control.lastEvaluationStatus === ComplianceStatusExtendedEnum.NON_COMPLIANT,
@@ -38,11 +44,6 @@
       <div class="alert-details w-100 d-flex justify-content-start align-items-center">
         <span class="text-blue-800 font-weight-light mr-2">Compliance report scope:</span>
       </div>
-      <button (click)="exportToPdf()"
-              class="btn utm-button utm-button-primary mb-2">
-        <i class="mr-1 icon-file-pdf"></i>
-        Save to PDF
-      </button>
     </div>
     <div class="alert-details w-100 d-flex justify-content-start align-items-center mb-2">
       <p class="font-size-base">{{ control.section.standard.standardName }}</p>

frontend/src/app/compliance/compliance-report-viewer/compliance-report-viewer.component.html

@@ -11,10 +11,13 @@ <h5 class="card-title mb-0 text-uppercase label-header">
         <button (click)="manageStandards()" class="btn utm-button utm-button-primary">
           <i class="icon-cog3 mr-1"></i> Change framework
         </button>
-        <a (click)="exportToPdf()" class="btn utm-button utm-button-primary ml-2" *ngIf="action === 'compliance'">
+
+
+        <a (click)="exportToPdf()" class="btn utm-button utm-button-primary ml-2" >
           <i [ngClass]="pdfExport ? 'icon-download10' : 'icon-file-pdf'" class="mr-1"></i>
           {{ pdfExport ? 'Generating...' : 'Save to PDF' }}
         </a>
+
       </div>
     </div>
   </div>
@@ -75,7 +78,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">
         <!--<app-compliance-latest-evaluations-view [section]="activeSection" (pageChange)="onPageChange($event)" *ngIf="action === 'compliance' && activeSection"></app-compliance-latest-evaluations-view>
         <app-compliance-evaluation-history-view *ngIf="action === 'reports'"></app-compliance-evaluation-history-view>-->
         <app-compliance-reports-view [section]="activeSection" (pageChange)="onPageChange($event)" *ngIf="action === 'compliance' && activeSection"></app-compliance-reports-view>
-        <app-compliance-result-view *ngIf="action === 'reports'" [showExport]="false" [template]="'compliance'"></app-compliance-result-view>
+        <app-compliance-result-view #compilanceRep [hidden]="action !== 'reports'" [showExport]="true" [template]="'compliance'"></app-compliance-result-view>
       </div>
     </div>
   </div>

frontend/src/app/compliance/compliance-report-viewer/compliance-report-viewer.component.ts

@@ -1,5 +1,5 @@
 import {HttpErrorResponse} from '@angular/common/http';
-import {AfterViewInit, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {ViewChild, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap';
 import {NgxSpinnerService} from 'ngx-spinner';
@@ -17,13 +17,15 @@ import {CpStandardService} from '../shared/services/cp-standard.service';
 import {ComplianceReportType} from '../shared/type/compliance-report.type';
 import {ComplianceStandardSectionType} from '../shared/type/compliance-standard-section.type';
 import {ComplianceStandardType} from '../shared/type/compliance-standard.type';
+import {ComplianceResultViewComponent} from '../compliance-result-view/compliance-result-view.component';
 
 @Component({
   selector: 'app-compliance-report-viewer',
   templateUrl: './compliance-report-viewer.component.html',
   styleUrls: ['./compliance-report-viewer.component.css']
 })
-export class ComplianceReportViewerComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ComplianceReportViewerComponent implements OnInit,  OnDestroy {
+  @ViewChild('compilanceRep') compilanceRep!: ComplianceResultViewComponent
   admin = ADMIN_ROLE;
   sections$: Observable<ComplianceStandardSectionType[]>;
   standard: ComplianceStandardType;
@@ -114,8 +116,6 @@ export class ComplianceReportViewerComponent implements OnInit, AfterViewInit, O
       .subscribe((params) => this.report = params.template);
   }
 
-  ngAfterViewInit(): void {
-  }
 
   manageStandards() {
     const options: NgbModalOptions = {
@@ -151,6 +151,13 @@ export class ComplianceReportViewerComponent implements OnInit, AfterViewInit, O
   }
 
   exportToPdf() {
+
+    if(this.action=='reports'){
+        this.compilanceRep.exportToPdf()
+        return
+    }
+
+
     this.spinner.show('buildPrintPDF');
     const url = this.getUrl();
     const fileName = this.report ? this.report.associatedDashboard.name.replace(/ /g, '_') : 'Reports';
@@ -176,7 +183,7 @@ export class ComplianceReportViewerComponent implements OnInit, AfterViewInit, O
         return '/dashboard/export-compliance/' + this.report.id;
     } else {
       const section = this.getActiveSectionParams();
-      return  encodeURIComponent('/compliance/print-view?section=' + section);
+      return '/compliance/print-view?section=' + section;
       // return  encodeURIComponent('/compliance/evaluations-print-view=' + section);
     }
   }

frontend/src/app/compliance/compliance-reports-view/components/compliance-print-view/compliance-print-view.component.html

@@ -26,7 +26,7 @@ <h6 class="text-muted">{{ report.associatedDashboard.description }}</h6>
     <div *ngIf="report.visualization" class="compliance-evidence mb-3">
       <p class="font-weight-bold">Evidence:</p>
       <app-render-visualization-print *ngIf="report.visualization"
-                                      (visualizationLoaded)="onVisualizationLoaded()"
+                                      (visualizationLoaded)="onVisualizationRun()"
                                       [visualizationRender]="[report.visualization]"></app-render-visualization-print>
     </div>
   </div>

frontend/src/app/compliance/compliance-reports-view/components/compliance-print-view/compliance-print-view.component.ts

@@ -23,6 +23,8 @@ export class CompliancePrintViewComponent implements OnInit, OnDestroy {
   selected: number;
   fields: SortByType[];
   preparingPrint = true;
+  visualizationCount = 0;
+  loadedCount = 0;
 
   constructor(private reportsService: CpReportsService,
               private toastService: UtmToastService,
@@ -51,6 +53,12 @@ export class CompliancePrintViewComponent implements OnInit, OnDestroy {
             };
           });
         }),
+        tap((reports) => {
+          this.visualizationCount = reports.reduce((acc, r) => acc + (r.visualization ? r.visualization.length : 0), 0);
+          if (this.visualizationCount === 0) {
+            this.preparingPrint = false;
+          }
+        }),
         catchError((err: HttpErrorResponse) => {
           this.toastService.showError('Error',
             'Unable to retrieve the list of reports. Please try again or contact support.');
@@ -69,8 +77,11 @@ export class CompliancePrintViewComponent implements OnInit, OnDestroy {
     report.visualization = visualization;
   }
 
-  onVisualizationLoaded(){
-    this.preparingPrint = false;
+  onVisualizationRun(){
+    this.loadedCount += 1;
+    if (this.loadedCount >= this.visualizationCount) {
+      this.preparingPrint = false;
+    }
   }
 
   ngOnDestroy(): void {

frontend/src/app/compliance/compliance-result-view/compliance-result-view.component.html

@@ -79,13 +79,6 @@ <h5 class="card-title mb-0 text-uppercase label-header d-flex align-items-center
       </h5>
 
       <div class="d-flex align-items-center mt-2">
-        <a *ngIf="showExport"
-           (click)="exportToPdf()"
-           [hidden]="pdfExport || !visualizationRender || loadingVisualizations"
-           class="btn utm-button utm-button-primary ml-2">
-          <i [ngClass]="pdfExport ? 'icon-download10' : 'icon-file-pdf'" class="mr-1"></i>
-          {{ pdfExport ? 'Generating...' : 'Save to PDF' }}
-        </a>
 
         <app-elastic-filter-time *ngIf="true"
                                  [invertContent]="true"

frontend/src/app/compliance/compliance-result-view/compliance-result-view.component.ts

@@ -162,7 +162,7 @@ export class ComplianceResultViewComponent implements OnInit, OnDestroy {
       });
     }
   }
-  exportToPdf() {
+  public exportToPdf() {
     filtersToStringParam(this.filtersValues).then(queryParams => {
       this.spinner.show('buildPrintPDF');
       const params = queryParams !== '' ? '?' + queryParams : '';

frontend/src/app/shared/services/util/export-pdf.service.ts

@@ -25,6 +25,31 @@ export class ExportPdfService {
   handlePdfResponse(response: any): void {
     const blob = new Blob([response.body], { type: 'application/pdf' });
     const url = window.URL.createObjectURL(blob);
-    window.open(url, '_blank');
+    this.printBlob(url)
   }
+
+ printBlob(blobUrl) {
+  const iframe = document.createElement('iframe');
+
+  iframe.style.position = 'fixed';
+  iframe.style.right = '0';
+  iframe.style.bottom = '0';
+  iframe.style.width = '0';
+  iframe.style.height = '0';
+  iframe.style.border = 'none';
+
+  iframe.src = blobUrl;
+
+  document.body.appendChild(iframe);
+
+  iframe.onload = function() {
+    iframe.contentWindow.focus();
+    iframe.contentWindow.print();
+
+    setTimeout(() => {
+      document.body.removeChild(iframe);
+    }, 1000);   };
+}
+
+
 }