7 changed files with 375 additions and 242 deletions
			
			
		- 
					4src/app/annual-health-checkup/add-dependants/add-dependants.component.html
 - 
					6src/app/annual-health-checkup/add-dependants/add-dependants.component.scss
 - 
					13src/app/annual-health-checkup/add-dependants/add-dependants.component.ts
 - 
					176src/app/annual-health-checkup/generate-letter/generate-letter.component.ts
 - 
					220src/app/annual-health-checkup/schedule-appointment/schedule-appointment.component.html
 - 
					159src/app/annual-health-checkup/schedule-appointment/schedule-appointment.component.ts
 - 
					33src/constants/constants.ts
 
@ -1,124 +1,138 @@ | 
			
		|||||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; | 
				 | 
			
		||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; | 
				 | 
			
		||||
 | 
				import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; | 
			
		||||
 | 
				import { FormBuilder, FormGroup, Validators } from "@angular/forms"; | 
			
		||||
import { jsPDF } from "jspdf"; | 
				import { jsPDF } from "jspdf"; | 
			
		||||
 | 
				import * as pdfMake from "pdfmake/build/pdfmake"; | 
			
		||||
 | 
				import { GenerateLetterService } from "./generate-letter.service"; | 
			
		||||
 | 
				
 | 
			
		||||
import * as pdfMake from 'pdfmake/build/pdfmake'; | 
				 | 
			
		||||
import { GenerateLetterService } from './generate-letter.service'; | 
				 | 
			
		||||
//import * as pdfFonts from 'pdfmake / build / vfs_fonts';
 | 
				 | 
			
		||||
 | 
				 | 
			
		||||
var pdfFonts = require('pdfmake/build/vfs_fonts.js'); | 
				 | 
			
		||||
 | 
				var pdfFonts = require("pdfmake/build/vfs_fonts.js"); | 
			
		||||
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs; | 
				(pdfMake as any).vfs = pdfFonts.pdfMake.vfs; | 
			
		||||
var htmlToPdfmake = require("html-to-pdfmake"); | 
				var htmlToPdfmake = require("html-to-pdfmake"); | 
			
		||||
 | 
				 | 
			
		||||
@Component({ | 
				@Component({ | 
			
		||||
  selector: 'app-generate-letter', | 
				 | 
			
		||||
  templateUrl: './generate-letter.component.html', | 
				 | 
			
		||||
  styleUrls: ['./generate-letter.component.scss'] | 
				 | 
			
		||||
 | 
				  selector: "app-generate-letter", | 
			
		||||
 | 
				  templateUrl: "./generate-letter.component.html", | 
			
		||||
 | 
				  styleUrls: ["./generate-letter.component.scss"], | 
			
		||||
}) | 
				}) | 
			
		||||
export class GenerateLetterComponent implements OnInit { | 
				export class GenerateLetterComponent implements OnInit { | 
			
		||||
  generateLetterForm!: FormGroup; | 
				  generateLetterForm!: FormGroup; | 
			
		||||
  name = 'Angular Html To Pdf '; | 
				 | 
			
		||||
  title:string = ''; | 
				 | 
			
		||||
  location:string = ''; | 
				 | 
			
		||||
  letterDate:string = ''; | 
				 | 
			
		||||
  printPDF:boolean = false; | 
				 | 
			
		||||
  level:string = ''; | 
				 | 
			
		||||
 | 
				  name = "Angular Html To Pdf "; | 
			
		||||
 | 
				  title: string = ""; | 
			
		||||
 | 
				  location: string = ""; | 
			
		||||
 | 
				  letterDate: string = ""; | 
			
		||||
 | 
				  printPDF: boolean = false; | 
			
		||||
 | 
				  level: string = ""; | 
			
		||||
 | 
				
 | 
			
		||||
  @ViewChild('pdfTable', {static: false}) pdfTable: ElementRef | undefined; | 
				 | 
			
		||||
  @ViewChild('content') | 
				 | 
			
		||||
  content!: ElementRef; | 
				 | 
			
		||||
 | 
				  @ViewChild("pdfTable", { static: false }) pdfTable: ElementRef | undefined; | 
			
		||||
 | 
				
 | 
			
		||||
  @ViewChild('generateLetterL0L1') | 
				 | 
			
		||||
  generateLetterL0L1!:ElementRef; | 
				 | 
			
		||||
 | 
				  @ViewChild("generateLetterL0L1") | 
			
		||||
 | 
				  generateLetterL0L1!: ElementRef; | 
			
		||||
 | 
				
 | 
			
		||||
  @ViewChild('generateLetterL3') | 
				 | 
			
		||||
  generateLetterL3!:ElementRef; | 
				 | 
			
		||||
 | 
				 | 
			
		||||
  downloadPDFlevel3:boolean = false; | 
				 | 
			
		||||
  downloadPDFlevel0:boolean = false; | 
				 | 
			
		||||
  isDisabled:boolean = true; | 
				 | 
			
		||||
 | 
				  @ViewChild("generateLetterL3") | 
			
		||||
 | 
				  generateLetterL3!: ElementRef; | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  downloadPDFlevel3: boolean = false; | 
			
		||||
 | 
				  downloadPDFlevel0: boolean = false; | 
			
		||||
 | 
				  isDisabled: boolean = true; | 
			
		||||
 | 
				
 | 
			
		||||
  constructor( | 
				  constructor( | 
			
		||||
    private formBuilder: FormBuilder, | 
				    private formBuilder: FormBuilder, | 
			
		||||
    private generateLetterService:GenerateLetterService | 
				 | 
			
		||||
 | 
				    private generateLetterService: GenerateLetterService | 
			
		||||
  ) { | 
				  ) { | 
			
		||||
    this.createNewForm(); | 
				    this.createNewForm(); | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  /** | 
			
		||||
 | 
				   * @description to initialize component | 
			
		||||
 | 
				   * @returns Void(); | 
			
		||||
 | 
				   */ | 
			
		||||
  ngOnInit(): void { | 
				  ngOnInit(): void { | 
			
		||||
 | 
				    this.getUserDetails(); | 
			
		||||
 | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  /** | 
			
		||||
 | 
				   * @description to create the user details. | 
			
		||||
 | 
				   * @returns Void(); | 
			
		||||
 | 
				   */ | 
			
		||||
 | 
				  getUserDetails() { | 
			
		||||
    let response; | 
				    let response; | 
			
		||||
      const body = { | 
				 | 
			
		||||
        userId: 'E114989', | 
				 | 
			
		||||
        password: 'init1234' | 
				 | 
			
		||||
      }; | 
				 | 
			
		||||
 | 
				    const body = { | 
			
		||||
 | 
				      userId: "E114989", | 
			
		||||
 | 
				      password: "init1234", | 
			
		||||
 | 
				    }; | 
			
		||||
 | 
				
 | 
			
		||||
    this.generateLetterService | 
				    this.generateLetterService | 
			
		||||
        .saveSelectedBike(body) | 
				 | 
			
		||||
        .subscribe( | 
				 | 
			
		||||
          (res: { | 
				 | 
			
		||||
            StatusCode: number; | 
				 | 
			
		||||
            IsRequestSuccessfull: any; | 
				 | 
			
		||||
            Data: any; | 
				 | 
			
		||||
          }) => { | 
				 | 
			
		||||
            if (res && res?.StatusCode === 200 && res?.IsRequestSuccessfull){ | 
				 | 
			
		||||
              response = res && res?.Data ? res.Data : null; | 
				 | 
			
		||||
            } | 
				 | 
			
		||||
          }); | 
				 | 
			
		||||
 | 
				      .saveSelectedBike(body) | 
			
		||||
 | 
				      .subscribe( | 
			
		||||
 | 
				        (res: { StatusCode: number; IsRequestSuccessfull: any; Data: any }) => { | 
			
		||||
 | 
				          if (res && res?.StatusCode === 200 && res?.IsRequestSuccessfull) { | 
			
		||||
 | 
				            response = res && res?.Data ? res.Data : null; | 
			
		||||
 | 
				          } | 
			
		||||
 | 
				        } | 
			
		||||
 | 
				      ); | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  /** | 
				  /** | 
			
		||||
   * @description to create the new form on the initialization of the component. | 
				   * @description to create the new form on the initialization of the component. | 
			
		||||
   * @returns Void(); | 
				   * @returns Void(); | 
			
		||||
   */ | 
				   */ | 
			
		||||
 | 
				 | 
			
		||||
   createNewForm(): void { | 
				 | 
			
		||||
 | 
				  createNewForm(): void { | 
			
		||||
    this.generateLetterForm = this.formBuilder.group({ | 
				    this.generateLetterForm = this.formBuilder.group({ | 
			
		||||
      employeeId: [{value:"1234", disabled:true}], | 
				 | 
			
		||||
      employeeName: [{value:"Satish Ganga", disabled:true}], | 
				 | 
			
		||||
      designation: [{value:"developer", disabled:true}], | 
				 | 
			
		||||
      department: [{value:"MIS", disabled:true}], | 
				 | 
			
		||||
      level: [{value:"L3", disabled:true}], | 
				 | 
			
		||||
      location: [{value:"Akrudi", disabled:true}], | 
				 | 
			
		||||
      date: [{value:"22/02/2022", disabled:true}], | 
				 | 
			
		||||
      gender: [{value:"Male", disabled:true}] | 
				 | 
			
		||||
 | 
				      employeeId: [{ value: "1234", disabled: true }], | 
			
		||||
 | 
				      employeeName: [{ value: "Satish Ganga", disabled: true }], | 
			
		||||
 | 
				      designation: [{ value: "developer", disabled: true }], | 
			
		||||
 | 
				      department: [{ value: "MIS", disabled: true }], | 
			
		||||
 | 
				      level: [{ value: "L3", disabled: true }], | 
			
		||||
 | 
				      location: [{ value: "Akrudi", disabled: true }], | 
			
		||||
 | 
				      date: [{ value: "22/02/2022", disabled: true }], | 
			
		||||
 | 
				      gender: [{ value: "Male", disabled: true }], | 
			
		||||
    }); | 
				    }); | 
			
		||||
    this.title = this.generateLetterForm?.get('employeeName')?.value; | 
				 | 
			
		||||
    this.location = this.generateLetterForm?.get('location')?.value; | 
				 | 
			
		||||
    this.letterDate = this.generateLetterForm?.get('date')?.value; | 
				 | 
			
		||||
    this.level = this.generateLetterForm?.get('level')?.value; | 
				 | 
			
		||||
 | 
				    this.title = this.generateLetterForm?.get("employeeName")?.value; | 
			
		||||
 | 
				    this.location = this.generateLetterForm?.get("location")?.value; | 
			
		||||
 | 
				    this.letterDate = this.generateLetterForm?.get("date")?.value; | 
			
		||||
 | 
				    this.level = this.generateLetterForm?.get("level")?.value; | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				 | 
			
		||||
    downloadPDF() { | 
				 | 
			
		||||
      this.printPDF = true; | 
				 | 
			
		||||
      const doc = new jsPDF(); | 
				 | 
			
		||||
      const pdfTable:any = this.level === 'L3'? this.generateLetterL3.nativeElement : this.generateLetterL0L1.nativeElement; | 
				 | 
			
		||||
 | 
				 | 
			
		||||
      //get table html
 | 
				 | 
			
		||||
      //const pdfTable = this.content.nativeElement;
 | 
				 | 
			
		||||
      //html to pdf format
 | 
				 | 
			
		||||
      var html = htmlToPdfmake(pdfTable.innerHTML); | 
				 | 
			
		||||
      const documentDefinition = { content: html }; | 
				 | 
			
		||||
      pdfMake.createPdf(documentDefinition).download(); | 
				 | 
			
		||||
      this.printPDF = false; | 
				 | 
			
		||||
      this.downloadPDFlevel3 = false; | 
				 | 
			
		||||
      this.downloadPDFlevel0 = false; | 
				 | 
			
		||||
     // doc.save("output.pdf");
 | 
				 | 
			
		||||
     //generateLetterL0L1
 | 
				 | 
			
		||||
 | 
				  /** | 
			
		||||
 | 
				   * @description to download PDF  | 
			
		||||
 | 
				   * @returns Void(); | 
			
		||||
 | 
				   */ | 
			
		||||
 | 
				  downloadPDF() { | 
			
		||||
 | 
				    this.printPDF = true; | 
			
		||||
 | 
				    const doc = new jsPDF(); | 
			
		||||
 | 
				    const pdfTable: any = | 
			
		||||
 | 
				      this.level === "L3" | 
			
		||||
 | 
				        ? this.generateLetterL3.nativeElement | 
			
		||||
 | 
				        : this.generateLetterL0L1.nativeElement; | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				    //get table html
 | 
			
		||||
 | 
				    //const pdfTable = this.content.nativeElement;
 | 
			
		||||
 | 
				    //html to pdf format
 | 
			
		||||
 | 
				    var html = htmlToPdfmake(pdfTable.innerHTML); | 
			
		||||
 | 
				    const documentDefinition = { content: html }; | 
			
		||||
 | 
				    pdfMake.createPdf(documentDefinition).download(); | 
			
		||||
 | 
				    this.printPDF = false; | 
			
		||||
 | 
				    this.downloadPDFlevel3 = false; | 
			
		||||
 | 
				    this.downloadPDFlevel0 = false; | 
			
		||||
 | 
				    // doc.save("output.pdf");
 | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  createEnquirySubmitHandler(){ | 
				 | 
			
		||||
 | 
				  /** | 
			
		||||
 | 
				   * @description to create PDF based on L3, L0, L1. | 
			
		||||
 | 
				   * @returns Void(); | 
			
		||||
 | 
				   */ | 
			
		||||
 | 
				  createEnquirySubmitHandler() { | 
			
		||||
    this.printPDF = true; | 
				    this.printPDF = true; | 
			
		||||
    if(this.level === 'L3'){ | 
				 | 
			
		||||
 | 
				    if (this.level === "L3") { | 
			
		||||
      this.downloadPDFlevel3 = true; | 
				      this.downloadPDFlevel3 = true; | 
			
		||||
    }else{ | 
				 | 
			
		||||
 | 
				    } else { | 
			
		||||
      this.downloadPDFlevel0 = true; | 
				      this.downloadPDFlevel0 = true; | 
			
		||||
    } | 
				    } | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  sendMail():void{ | 
				 | 
			
		||||
    console.log('sendMail'); | 
				 | 
			
		||||
 | 
				  /** | 
			
		||||
 | 
				   * @description to create the user details. | 
			
		||||
 | 
				   * @returns Void(); | 
			
		||||
 | 
				   */ | 
			
		||||
 | 
				  sendMail(): void { | 
			
		||||
 | 
				    console.log("sendMail"); | 
			
		||||
  } | 
				  } | 
			
		||||
} | 
				} | 
			
		||||
 | 
				 | 
			
		||||
@ -1,92 +1,140 @@ | 
			
		|||||
<div class="page-container" id="scheduleAppointment"> | 
				<div class="page-container" id="scheduleAppointment"> | 
			
		||||
    <form | 
				 | 
			
		||||
      id="create-enquiry-form" | 
				 | 
			
		||||
      class="create-enquiry-form" | 
				 | 
			
		||||
      [formGroup]="generateLetterForm" | 
				 | 
			
		||||
      (submit)="createEnquirySubmitHandler()" | 
				 | 
			
		||||
    > | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				 | 
			
		||||
            <mat-label>Employee ID</mat-label> | 
				 | 
			
		||||
            <input formControlName="employeeId" matInput placeholder="Employee ID"  value="1234"> | 
				 | 
			
		||||
 | 
				  <form | 
			
		||||
 | 
				    id="create-enquiry-form" | 
			
		||||
 | 
				    class="create-enquiry-form" | 
			
		||||
 | 
				    [formGroup]="scheduleAppointmentForm" | 
			
		||||
 | 
				  > | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Employee ID</mat-label> | 
			
		||||
 | 
				          <input formControlName="employeeId" matInput placeholder="Employee ID"  value="1234"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Employee Name</mat-label> | 
			
		||||
 | 
				          <input formControlName="employeeName" matInput placeholder="Employee Name"  value="bajaj"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Level</mat-label> | 
			
		||||
 | 
				          <input formControlName="level" matInput placeholder="Level"  value="developer"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Department</mat-label> | 
			
		||||
 | 
				          <input formControlName="department" matInput placeholder="Department"  value="MIS"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Location</mat-label> | 
			
		||||
 | 
				          <input formControlName="location" matInput placeholder="Location"  value="Akrudi"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="fill"> | 
			
		||||
 | 
				          <mat-label>Select additonal Test</mat-label> | 
			
		||||
 | 
				          <mat-select (selectionChange)="selectedAdditonalTest($event)"> | 
			
		||||
 | 
				            <mat-option *ngFor="let healthTest of additionalTests" [value]="healthTest"> | 
			
		||||
 | 
				              {{healthTest}} | 
			
		||||
 | 
				            </mat-option> | 
			
		||||
 | 
				          </mat-select> | 
			
		||||
        </mat-form-field> | 
				        </mat-form-field> | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				        <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
            <mat-label>Employee Name</mat-label> | 
				 | 
			
		||||
            <input formControlName="employeeName" matInput placeholder="Employee Name"  value="bajaj"> | 
				 | 
			
		||||
 | 
				          <mat-label>Eligible Package</mat-label> | 
			
		||||
 | 
				          <input formControlName="eligiblePackage" matInput placeholder="Eligible Package"  value="developer"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="fill"> | 
			
		||||
 | 
				          <mat-label>Hospital Name</mat-label> | 
			
		||||
 | 
				          <mat-select (selectionChange)="selectHospital($event)"> | 
			
		||||
 | 
				            <mat-option *ngFor="let hospital of hospitalList" [value]="hospital.value"> | 
			
		||||
 | 
				              {{hospital.value}} | 
			
		||||
 | 
				            </mat-option> | 
			
		||||
 | 
				          </mat-select> | 
			
		||||
        </mat-form-field> | 
				        </mat-form-field> | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				 | 
			
		||||
            <mat-label>Level</mat-label> | 
				 | 
			
		||||
            <input formControlName="level" matInput placeholder="Level"  value="developer"> | 
				 | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field"  appearance="fill"> | 
			
		||||
 | 
				          <mat-label>Preferred date</mat-label> | 
			
		||||
 | 
				        <!-- #docregion toggle --> | 
			
		||||
 | 
				          <input matInput [matDatepicker]="picker" [min]="todayDate" formControlName="preferredDate" required> | 
			
		||||
 | 
				          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> | 
			
		||||
 | 
				          <mat-datepicker #picker></mat-datepicker> | 
			
		||||
 | 
				        <!-- #enddocregion toggle --> | 
			
		||||
        </mat-form-field> | 
				        </mat-form-field> | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				 | 
			
		||||
            <mat-label>Department</mat-label> | 
				 | 
			
		||||
            <input formControlName="department" matInput placeholder="Department"  value="MIS"> | 
				 | 
			
		||||
        </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				 | 
			
		||||
            <mat-label>Location</mat-label> | 
				 | 
			
		||||
            <input formControlName="location" matInput placeholder="Location"  value="Akrudi"> | 
				 | 
			
		||||
        </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="fill"> | 
				 | 
			
		||||
            <mat-label>Select additonal Test</mat-label> | 
				 | 
			
		||||
            <mat-select> | 
				 | 
			
		||||
              <mat-option *ngFor="let healthTest of additionalTests" [value]="healthTest"> | 
				 | 
			
		||||
                {{healthTest}} | 
				 | 
			
		||||
              </mat-option> | 
				 | 
			
		||||
            </mat-select> | 
				 | 
			
		||||
          </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="fill"> | 
				 | 
			
		||||
            <mat-label>Eligible Package</mat-label> | 
				 | 
			
		||||
            <mat-select> | 
				 | 
			
		||||
              <mat-option *ngFor="let package of eligiblePackage" [value]="package"> | 
				 | 
			
		||||
                {{package}} | 
				 | 
			
		||||
              </mat-option> | 
				 | 
			
		||||
            </mat-select> | 
				 | 
			
		||||
          </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="fill"> | 
				 | 
			
		||||
            <mat-label>Hospital Name</mat-label> | 
				 | 
			
		||||
            <mat-select> | 
				 | 
			
		||||
              <mat-option *ngFor="let hospital of hospitalList" [value]="hospital.email"> | 
				 | 
			
		||||
                {{hospital.value}} | 
				 | 
			
		||||
              </mat-option> | 
				 | 
			
		||||
            </mat-select> | 
				 | 
			
		||||
          </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field"  appearance="fill"> | 
				 | 
			
		||||
            <mat-label>Preferred date</mat-label> | 
				 | 
			
		||||
          <!-- #docregion toggle --> | 
				 | 
			
		||||
            <input matInput [matDatepicker]="picker" [min]="todayDate"> | 
				 | 
			
		||||
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> | 
				 | 
			
		||||
            <mat-datepicker #picker></mat-datepicker> | 
				 | 
			
		||||
          <!-- #enddocregion toggle --> | 
				 | 
			
		||||
          </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle"> | 
				 | 
			
		||||
        <mat-form-field class="input-field" appearance="outline"> | 
				 | 
			
		||||
            <mat-label>Contact Number</mat-label> | 
				 | 
			
		||||
            <input formControlName="contactNumber" matInput placeholder="Contact Number" value="Male"> | 
				 | 
			
		||||
        </mat-form-field> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle medium-txt" (click)="createEnquirySubmitHandler()"> | 
				 | 
			
		||||
        Click to downlaod price list for each additional test | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    <div class="align-middle flex-row"> | 
				 | 
			
		||||
        <button class="font-body-xsmall-bold" type="button" (click)="addDependants()">Add Dependants</button> | 
				 | 
			
		||||
        <button class="font-body-xsmall-bold" type="button" (click)="createEnquirySubmitHandler()">Submit</button> | 
				 | 
			
		||||
    </div> | 
				 | 
			
		||||
    </form> | 
				 | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle"> | 
			
		||||
 | 
				      <mat-form-field class="input-field" appearance="outline"> | 
			
		||||
 | 
				          <mat-label>Contact Number</mat-label> | 
			
		||||
 | 
				          <input formControlName="contactNumber" matInput placeholder="Contact Number" value="Male"> | 
			
		||||
 | 
				      </mat-form-field> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="medium-txt font-body-xsmall-bold" (click)="downloadAppointment()"> | 
			
		||||
 | 
				      Click to downlaod price list for each additional test | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  <div class="align-middle flex-row"> | 
			
		||||
 | 
				      <button class="font-body-xsmall-bold" type="button" (click)="addDependants()">Add Dependants</button> | 
			
		||||
 | 
				      <button class="font-body-xsmall-bold" type="button" [disabled]="!scheduleAppointmentForm.valid" (click)="createEnquirySubmitHandler()">Submit</button> | 
			
		||||
 | 
				  </div> | 
			
		||||
 | 
				  </form> | 
			
		||||
 | 
				   | 
			
		||||
 | 
				</div> | 
			
		||||
 | 
				<div id="scheduleAppointmentPDF" #scheduleAppointmentPDF *ngIf="downloadPDF"> | 
			
		||||
 | 
				  <p>Annual Health Check-up 2021-22</p> | 
			
		||||
 | 
				  <p>The rates of optional tests across empanelled hospitals in Pune are as follows:</p> | 
			
		||||
 | 
				  <table class="table table-bordered"> | 
			
		||||
 | 
				     <thead> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				           <th>Hospital Name</th> | 
			
		||||
 | 
				           <th>HIV-I & HIV-II by Tridot/ ELISA technique/HIV Rapid</th> | 
			
		||||
 | 
				           <th>Hb1Ac</th> | 
			
		||||
 | 
				           <th>Eye Check Package & Ophthalmologist consultation</th> | 
			
		||||
 | 
				           <th>Treadmill Test</th> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				     </thead> | 
			
		||||
 | 
				     <tbody> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				           <td>Apollo Hospital</td> | 
			
		||||
 | 
				           <td>Rs.500</td> | 
			
		||||
 | 
				           <td>Rs.500</td> | 
			
		||||
 | 
				           <td>Rs.300</td> | 
			
		||||
 | 
				           <td>Rs.1000</td> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				         <td>PCMC Hospital</td> | 
			
		||||
 | 
				         <td>Rs.700</td> | 
			
		||||
 | 
				         <td>Rs.350</td> | 
			
		||||
 | 
				         <td>Rs.400</td> | 
			
		||||
 | 
				         <td>Rs.1000</td> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				         <td>Deenanath Mangesh Hospital</td> | 
			
		||||
 | 
				         <td>Rs.405</td> | 
			
		||||
 | 
				         <td>Rs.405</td> | 
			
		||||
 | 
				         <td>Rs.360</td> | 
			
		||||
 | 
				         <td>Rs.1080</td> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				         <td>Express Clinics</td> | 
			
		||||
 | 
				         <td>Rs.350</td> | 
			
		||||
 | 
				         <td>Rs.350</td> | 
			
		||||
 | 
				         <td>Rs.450</td> | 
			
		||||
 | 
				         <td>Rs.1000</td> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				        <tr> | 
			
		||||
 | 
				         <td>Ruby Hall Clinic</td> | 
			
		||||
 | 
				         <td>Rs.595</td> | 
			
		||||
 | 
				         <td>Rs.808</td> | 
			
		||||
 | 
				         <td>Rs.600</td> | 
			
		||||
 | 
				         <td>Rs.1530</td> | 
			
		||||
 | 
				        </tr> | 
			
		||||
 | 
				     </tbody> | 
			
		||||
 | 
				  </table> | 
			
		||||
</div> | 
				</div> | 
			
		||||
@ -1,66 +1,137 @@ | 
			
		|||||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; | 
				 | 
			
		||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; | 
				 | 
			
		||||
import { Router } from '@angular/router'; | 
				 | 
			
		||||
import { ADDITIONAL_TEST, ELIGIBLE_PACKAGE, SELECT_HOSPITAL } from 'src/constants/constants'; | 
				 | 
			
		||||
import { RouterService } from '../../shared/services/routerService'; | 
				 | 
			
		||||
 | 
				 | 
			
		||||
 | 
				import { THIS_EXPR } from "@angular/compiler/src/output/output_ast"; | 
			
		||||
 | 
				import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; | 
			
		||||
 | 
				import { FormBuilder, FormGroup, Validators } from "@angular/forms"; | 
			
		||||
 | 
				import { Router } from "@angular/router"; | 
			
		||||
 | 
				import { | 
			
		||||
 | 
				  SELECT_HOSPITAL, | 
			
		||||
 | 
				  SENIOR_LEVEL_PACKAGE, | 
			
		||||
 | 
				  MIDDLE_LEVEL_PACKAGE, | 
			
		||||
 | 
				  SENIOR_LEVEL_ADDITONAL_TEST, | 
			
		||||
 | 
				  MIDDLE_LEVEL_ADDITONAL_TEST, | 
			
		||||
 | 
				  SCHEDULE_APPOINTMENT, | 
			
		||||
 | 
				  ADD_DEPENDENTS, | 
			
		||||
 | 
				} from "src/constants/constants"; | 
			
		||||
 | 
				import { jsPDF } from "jspdf"; | 
			
		||||
 | 
				import * as pdfMake from "pdfmake/build/pdfmake"; | 
			
		||||
 | 
				import { MatSelectChange } from "@angular/material/select"; | 
			
		||||
 | 
				var pdfFonts = require("pdfmake/build/vfs_fonts.js"); | 
			
		||||
 | 
				(pdfMake as any).vfs = pdfFonts.pdfMake.vfs; | 
			
		||||
 | 
				var htmlToPdfmake = require("html-to-pdfmake"); | 
			
		||||
@Component({ | 
				@Component({ | 
			
		||||
  selector: 'app-schedule-appointment', | 
				 | 
			
		||||
  templateUrl: './schedule-appointment.component.html', | 
				 | 
			
		||||
  styleUrls: ['./schedule-appointment.component.scss'] | 
				 | 
			
		||||
 | 
				  selector: "app-schedule-appointment", | 
			
		||||
 | 
				  templateUrl: "./schedule-appointment.component.html", | 
			
		||||
 | 
				  styleUrls: ["./schedule-appointment.component.scss"], | 
			
		||||
}) | 
				}) | 
			
		||||
export class ScheduleAppointmentComponent implements OnInit { | 
				export class ScheduleAppointmentComponent implements OnInit { | 
			
		||||
 | 
				  scheduleAppointmentForm!: FormGroup; | 
			
		||||
 | 
				  name = "Angular Html To Pdf "; | 
			
		||||
 | 
				  additionalTests: string[] = SENIOR_LEVEL_ADDITONAL_TEST; | 
			
		||||
 | 
				  hospitalList: any[] = SELECT_HOSPITAL; | 
			
		||||
 | 
				  todayDate: any = new Date(); | 
			
		||||
 | 
				  downloadPDF: boolean = false; | 
			
		||||
 | 
				  level: string = ""; | 
			
		||||
 | 
				  hospitalObject: any; | 
			
		||||
 | 
				  additionaltest: any; | 
			
		||||
 | 
				  interval: any; | 
			
		||||
 | 
				
 | 
			
		||||
  generateLetterForm!: FormGroup; | 
				 | 
			
		||||
  name = 'Angular Html To Pdf '; | 
				 | 
			
		||||
  additionalTests:string[] = ADDITIONAL_TEST; | 
				 | 
			
		||||
  hospitalList:any[] = SELECT_HOSPITAL; | 
				 | 
			
		||||
  eligiblePackage:string[] = ELIGIBLE_PACKAGE; | 
				 | 
			
		||||
  todayDate:Date = new Date(); | 
				 | 
			
		||||
 | 
				  @ViewChild("pdfTable", { static: false }) pdfTable: ElementRef | undefined; | 
			
		||||
 | 
				  @ViewChild("scheduleAppointmentPDF") | 
			
		||||
 | 
				  scheduleAppointmentPDF!: ElementRef; | 
			
		||||
 | 
				
 | 
			
		||||
  @ViewChild('pdfTable', {static: false}) pdfTable: ElementRef | undefined; | 
				 | 
			
		||||
  @ViewChild('content') | 
				 | 
			
		||||
  content!: ElementRef; | 
				 | 
			
		||||
 | 
				 | 
			
		||||
  constructor( | 
				 | 
			
		||||
    private formBuilder: FormBuilder, | 
				 | 
			
		||||
    private router: Router | 
				 | 
			
		||||
  ) {  | 
				 | 
			
		||||
    this.createNewForm(); | 
				 | 
			
		||||
  } | 
				 | 
			
		||||
 | 
				  constructor(private formBuilder: FormBuilder, private router: Router) {} | 
			
		||||
 | 
				
 | 
			
		||||
  ngOnInit(): void { | 
				  ngOnInit(): void { | 
			
		||||
 | 
				    this.downloadPDF = false; | 
			
		||||
 | 
				    this.createNewForm(); | 
			
		||||
 | 
				    let packageName = ""; | 
			
		||||
 | 
				    this.level = this.scheduleAppointmentForm?.get("level")?.value; | 
			
		||||
 | 
				    packageName = | 
			
		||||
 | 
				      this.level === "L3" ? SENIOR_LEVEL_PACKAGE : MIDDLE_LEVEL_PACKAGE; | 
			
		||||
 | 
				    this.additionalTests = | 
			
		||||
 | 
				      this.level === "L3" | 
			
		||||
 | 
				        ? SENIOR_LEVEL_ADDITONAL_TEST | 
			
		||||
 | 
				        : MIDDLE_LEVEL_ADDITONAL_TEST; | 
			
		||||
 | 
				    this.scheduleAppointmentForm?.controls["eligiblePackage"].setValue( | 
			
		||||
 | 
				      packageName | 
			
		||||
 | 
				    ); | 
			
		||||
 | 
				    this.todayDate.setDate(this.todayDate.getDate() + 1); | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  /** | 
				  /** | 
			
		||||
   * @description to create the new form on the initialization of the component. | 
				   * @description to create the new form on the initialization of the component. | 
			
		||||
   * @returns Void(); | 
				   * @returns Void(); | 
			
		||||
   */ | 
				   */ | 
			
		||||
 | 
				 | 
			
		||||
   createNewForm(): void { | 
				 | 
			
		||||
    this.generateLetterForm = this.formBuilder.group({ | 
				 | 
			
		||||
      employeeId: [{value:"1234", disabled:true}], | 
				 | 
			
		||||
      employeeName: [{value:"bajaj", disabled:true}], | 
				 | 
			
		||||
      level: [{value:"L3", disabled:true}], | 
				 | 
			
		||||
      designation: [{value:"developer", disabled:true}], | 
				 | 
			
		||||
      department: [{value:"MIS", disabled:true}], | 
				 | 
			
		||||
      location: [{value:"Akrudi", disabled:true}], | 
				 | 
			
		||||
      additonalTest: [""], | 
				 | 
			
		||||
      eligiblePackage: ["eligiblePackage"], | 
				 | 
			
		||||
      hospitalName: ["hospitalName"], | 
				 | 
			
		||||
      preferredDate: ['preferredDate'], | 
				 | 
			
		||||
      contactNumber: ['9730370631'], | 
				 | 
			
		||||
      date: ["22/02/2022"], | 
				 | 
			
		||||
      gender: ["Male"] | 
				 | 
			
		||||
 | 
				  createNewForm(): void { | 
			
		||||
 | 
				    this.scheduleAppointmentForm = this.formBuilder.group({ | 
			
		||||
 | 
				      employeeId: [{ value: "1234", disabled: true }, Validators.required], | 
			
		||||
 | 
				      employeeName: [{ value: "bajaj", disabled: true }, Validators.required], | 
			
		||||
 | 
				      level: [{ value: "L3", disabled: true }, Validators.required], | 
			
		||||
 | 
				      designation: [ | 
			
		||||
 | 
				        { value: "developer", disabled: true }, | 
			
		||||
 | 
				        Validators.required, | 
			
		||||
 | 
				      ], | 
			
		||||
 | 
				      department: [{ value: "MIS", disabled: true }], | 
			
		||||
 | 
				      location: [{ value: "Akrudi", disabled: true }], | 
			
		||||
 | 
				      eligiblePackage: [{ value: "eligiblePackage", disabled: true }], | 
			
		||||
 | 
				      preferredDate: ["", Validators.required], | 
			
		||||
 | 
				      contactNumber: ["9730370631", Validators.required], | 
			
		||||
 | 
				      gender: ["Male"], | 
			
		||||
    }); | 
				    }); | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  createEnquirySubmitHandler(){ | 
				 | 
			
		||||
 | 
				  createEnquirySubmitHandler() { | 
			
		||||
 | 
				    let responseObject = { | 
			
		||||
 | 
				      employeeId: this.scheduleAppointmentForm?.get("employeeId")?.value, | 
			
		||||
 | 
				      employeeName: this.scheduleAppointmentForm?.get("employeeName")?.value, | 
			
		||||
 | 
				      level: this.level, | 
			
		||||
 | 
				      department: this.scheduleAppointmentForm?.get("department")?.value, | 
			
		||||
 | 
				      location: this.scheduleAppointmentForm?.get("location")?.value, | 
			
		||||
 | 
				      additonalTest: this.additionaltest, | 
			
		||||
 | 
				      eligiblePackage: | 
			
		||||
 | 
				        this.scheduleAppointmentForm?.get("eligiblePackage")?.value, | 
			
		||||
 | 
				      hospitalName: this.hospitalObject, | 
			
		||||
 | 
				      preferredDate: this.scheduleAppointmentForm?.get("preferredDate")?.value, | 
			
		||||
 | 
				      contactNumber: this.scheduleAppointmentForm?.get("contactNumber")?.value, | 
			
		||||
 | 
				    }; | 
			
		||||
 | 
				    console.log(responseObject); | 
			
		||||
 | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  addDependants() { | 
			
		||||
 | 
				    console.log('click'); | 
			
		||||
 | 
				    this.router.navigate([ADD_DEPENDENTS]); | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
  addDependants(){ | 
				 | 
			
		||||
    this.router.navigate(['addDependants']); | 
				 | 
			
		||||
 | 
				  selectHospital(event: MatSelectChange) { | 
			
		||||
 | 
				    let selectedData; | 
			
		||||
 | 
				    selectedData = { | 
			
		||||
 | 
				      value: event.value, | 
			
		||||
 | 
				      text: event.source.triggerValue, | 
			
		||||
 | 
				    }; | 
			
		||||
 | 
				    console.log(selectedData); | 
			
		||||
 | 
				    this.hospitalObject = selectedData.value; | 
			
		||||
  } | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  selectedAdditonalTest(event: MatSelectChange) { | 
			
		||||
 | 
				    let selectedData; | 
			
		||||
 | 
				    selectedData = { | 
			
		||||
 | 
				      value: event.value, | 
			
		||||
 | 
				      text: event.source.triggerValue, | 
			
		||||
 | 
				    }; | 
			
		||||
 | 
				    this.additionaltest = selectedData.value; | 
			
		||||
 | 
				  } | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				  downloadAppointment() { | 
			
		||||
 | 
				    this.downloadPDF = true; | 
			
		||||
 | 
				    this.interval = setInterval(() => { | 
			
		||||
 | 
				      const doc = new jsPDF(); | 
			
		||||
 | 
				      //get table html
 | 
			
		||||
 | 
				      const pdfTable = this.scheduleAppointmentPDF?.nativeElement; | 
			
		||||
 | 
				      //html to pdf format
 | 
			
		||||
 | 
				      var html = htmlToPdfmake(pdfTable?.innerHTML); | 
			
		||||
 | 
				      const documentDefinition = { content: html }; | 
			
		||||
 | 
				      pdfMake.createPdf(documentDefinition).download(); | 
			
		||||
 | 
				      this.downloadPDF = false; | 
			
		||||
 | 
				      clearInterval(this.interval); | 
			
		||||
 | 
				    }, 1000); | 
			
		||||
 | 
				  } | 
			
		||||
} | 
				} | 
			
		||||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue