#39 add service to allow PDF downloads

senzing-garage · Jun 19, 2019 · 0a7ae73 · 0a7ae73
1 parent bc58c3d
commit 0a7ae73
Show file tree

Hide file tree

Showing 16 changed files with 582 additions and 129 deletions.
diff --git a/examples/search-with-results-and-details/src/app/app.component.html b/examples/search-with-results-and-details/src/app/app.component.html
@@ -9,6 +9,7 @@
 <!-- start search box -->
 <div class="component-example">
   <sz-search
+    #searchBox
     disableIdentifierOptions="PASSPORT_NUMBER, DRIVERS_LICENSE_NUMBER, SSN_LAST4"
     enableIdentifierOptions="SOCIAL_NETWORK"
     (resultsChange)="onSearchResults($event)"
@@ -18,16 +19,23 @@
 </div>
 <!-- end search box -->
 
+<button class="download-pdf" *ngIf="showPdfDownloadButton && !showSearchResultDetail" type="button" (click)="onPDFDownloadClick( $event )">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path d="M0 0h24v24H0z" fill="none"/></svg> Print
+</button>
+
 <!-- start search results -->
 <div class="component-example">
   <sz-search-results *ngIf="showSearchResults" [results]="currentSearchResults" [parameters]="currentSearchParameters" (resultClick)="onSearchResultClick($event)"></sz-search-results>
 </div>
 <!-- end search results -->
 <!-- start entity detail -->
 <div *ngIf="showSearchResultDetail">
+  <button class="download-pdf" type="button" (click)="onEntityPDFDownloadClick( $event )">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path d="M0 0h24v24H0z" fill="none"/></svg> Print
+  </button>
   <div class="detail-wrapper">
       <button (click)="onBackToSearchResultsClick($event)">&lt;&lt; Go Back to Search Results</button>
   </div>
-  <sz-entity-detail [entityId]="currentlySelectedEntityId"></sz-entity-detail>
+  <sz-entity-detail #entityDetailComponent [entityId]="currentlySelectedEntityId"></sz-entity-detail>
 </div>
 <!-- end entity detail -->
diff --git a/examples/search-with-results-and-details/src/app/app.component.scss b/examples/search-with-results-and-details/src/app/app.component.scss
@@ -0,0 +1,12 @@
+
+:host {
+  .download-pdf {
+    padding: 5px 10px;
+    display: inline-flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+
+    svg { margin-right: 5px; }
+  }
+}
diff --git a/examples/search-with-results-and-details/src/app/app.component.ts b/examples/search-with-results-and-details/src/app/app.component.ts
@@ -1,32 +1,55 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import {
   SzEntitySearchParams,
   SzAttributeSearchResult,
-  SzSearchComponent
+  SzSearchComponent,
+  SzPdfUtilService,
+  SzSearchService,
+  SzEntityDetailComponent,
+  SzEntityData
 } from '@senzing/sdk-components-ng';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styles: []
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   public currentSearchResults: SzAttributeSearchResult[];
   public currentlySelectedEntityId: number = undefined;
   public currentSearchParameters: SzEntitySearchParams;
   public showSearchResults = false;
   public get showSearchResultDetail(): boolean {
-    if(this.currentlySelectedEntityId && this.currentlySelectedEntityId > 0) {
+    if (this.currentlySelectedEntityId && this.currentlySelectedEntityId > 0) {
       return true;
     }
     return false;
   }
+  @ViewChild('searchBox') searchBox: SzSearchComponent;
+  @ViewChild('entityDetailComponent') entityDetailComponent: SzEntityDetailComponent;
+
+  public get showPdfDownloadButton(): boolean {
+    return (this.currentSearchResults !== undefined && this.currentSearchResults && this.currentSearchResults.length > 0);
+  }
+
+  constructor(public pdfUtil: SzPdfUtilService, public searchService: SzSearchService){}
+
+  ngAfterViewInit() {
+    const searchParams = this.searchBox.getSearchParams();
+    if (searchParams){
+      if ( Object.keys(searchParams).length > 0) {
+        // do auto search
+        this.searchBox.submitSearch();
+      }
+    }
+  }
+
   onSearchException(err: Error) {
     throw (err.message);
   }
 
   onSearchResults(evt: SzAttributeSearchResult[]){
-    console.log('searchResults: ',evt);
     // store on current scope
     this.currentSearchResults = evt;
     // results module is bound to this property
@@ -40,11 +63,18 @@ export class AppComponent {
     this.currentlySelectedEntityId = undefined;
   }
 
-  public onSearchResultClick(entityData: SzAttributeSearchResult){
-    console.log('onSearchResultClick: ', entityData);
-    //alert('clicked on search result!'+ entityData.entityId);
+  public onPDFDownloadClick(): void {
+    this.pdfUtil.createPdfFromAttributeSearch( this.currentSearchResults, this.currentSearchParameters );
+  }
 
-    if(entityData && entityData.entityId > 0) {
+  public onEntityPDFDownloadClick(): void {
+    const filename = this.entityDetailComponent.entity.resolvedEntity.entityName.toLowerCase().replace(' ', '-entity') + '.pdf';
+    this.pdfUtil.createPdfFromHtmlElement(this.entityDetailComponent.nativeElement, filename);
+  }
+
+  public onSearchResultClick(entityData: SzAttributeSearchResult){
+    // console.log('onSearchResultClick: ', entityData);
+    if (entityData && entityData.entityId > 0) {
       this.currentlySelectedEntityId = entityData.entityId;
       this.showSearchResults = false;
     } else {