astute/AstuteClient2/src/app/invoice-gen/invoice-gen.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AstuteClientService} from '../services/astute-client-service';

declare var html2pdf: any;
declare var html2canvas: any;
declare var jsPDF: any;
declare var $: any

@Component({
    selector: 'app-invoice-gen',
    templateUrl: './invoice-gen.component.html',
    styleUrls: ['./invoice-gen.component.css']
})
export class InvoiceGenComponent implements OnInit {
    @ViewChild('doc') invoiceHTML: ElementRef;

    gridX = []; // these are the layout grid STARTING
    gridY = []; // from the 1 inch border (x: 25; y:23)

    name;
    email;
    address;

    poNum;
    coNum;
    inNum;
    inDate;

    inDetails; // :[{lineNum:number, desc:string, rate:string, hrs:number, amount:number}];

    ogCoAmt;
    netChanges = 0;
    totCoAmt = 0;
    prevBill;
    inAmt;
    balToBeBill;
    subTotal; // =inAmt
    milage = 0;
    otherExp = 0;
    outOf = 0;
    finTot; // = inAmt;

    notes;
    cert;

    constructor(protected astuteClientService: AstuteClientService) {
        // console.log('********** ' + this.astuteClientService.getInvoiceGen('123').then());
    }

    ngOnInit() {
        let x = 25;
        let y = 23;
        for (let i = 0; i < 17; i++) {
            this.gridX[i] = x;
            x += 10;
        }
        for (let j = 0; j < 26; j++) {
            this.gridY[j] = y;
            y += 10;
        }
        console.log('Layout Grid X: ' + this.gridX);
        console.log('Layout Grid Y: ' + this.gridY);
        this.astuteClientService.getInvoiceGen('VDO-02_0108_3').then((data) => {
            this.name = data.customer.customerName;
            this.email = data.customer.email;
            this.address = data.customer.add1 + ' ' + data.customer.add2 + ' ' +
                data.customer.city + ', ' + data.customer.state.toUpperCase() + ', ' +
                data.customer.zip + '-' + data.customer.ziplast4;

            this.poNum = data.po.ponum;
            this.coNum = data.po.contractNum;
            this.inNum = data.invoice.invoiceNumber;
            this.inDate = data.invoice.invoiceDate;

            this.inDetails = data.invoiceDetail;

            this.ogCoAmt = data.po.contractAmt;
            this.netChanges = 0;
            this.totCoAmt = 0;
            this.prevBill = data.previouslyPaidAmt;
            this.inAmt = data.invoice.billAmt;
            this.balToBeBill = data.balanceToBeBilled;
            this.subTotal = this.inAmt;
            this.milage = 0;
            this.otherExp = 0;
            this.outOf = 0;
            this.finTot = this.inAmt;

            this.notes = data.invoice.specialNotes;
            this.cert = data.invoice.certification;
        });
    }

    downloadPDF() {
        // new html2pdf(document.getElementById('doc'));

        const A4_width = 210;//425; // pixels
        const A4_height = 297;//550; // pixels
        const ratio = 2;
        // //
        const oldCanvas = document.createElement('canvas');
        oldCanvas.width = A4_width;
        oldCanvas.height = A4_height;
        const oldContext = oldCanvas.getContext('2d');
        const oldImg = new Image();
        oldImg.src = oldCanvas.toDataURL();
        oldContext.drawImage(oldImg, 0, 0, A4_width, A4_height);

        const newImg = new Image();
        newImg.onload = () => {
            html2canvas(this.invoiceHTML.nativeElement).then((newCanvas) => {
                    console.log(this.invoiceHTML.nativeElement);
                    // newCanvas.width = A4_width / 50;
                    // newCanvas.height = A4_height / 50;
                    const newContext = newCanvas.getContext('2d');
                    // Scale and draw the source image to the canvas
                    newContext.drawImage(newImg, 0, 0, A4_width * ratio, A4_height * ratio);
                    newImg.src = newCanvas.toDataURL();
                    const pdfDoc = new jsPDF({
                        unit: 'mm'
                    });
                    pdfDoc.addImage(newImg, 'png', 0, 0, 210, 297); // imageData, format, x, y, w, h
                    //pdfDoc.addHTML(this.invoiceHTML.nativeElement);
                    pdfDoc.save(this.inNum + '.pdf'); // save file
                    newImg.onload = undefined; // kill the func
                }
            );
        };
        newImg.src = oldImg.src;


        // let pdf = new jsPDF();
        // pdf.addHTML(this.invoiceHTML.nativeElement, (data) => {
        //   pdf.save('testFile.pdf');
        //   console.log(data);
        // });

        // setTimeout(window.close, 5000);
    }

    testjsPDF() {
        const doc = jsPDF();
        doc.text('INVOICE', this.gridX[13], this.gridY[0]);
        doc.text('ASTUTE', this.gridX[0], this.gridY[0]);

        // No. Column (header and rows)
        doc.rect(this.gridX[0], this.gridY[5], 10, 10);
        for (let i = 6; i < 15; i += 2) {
            doc.rect(this.gridX[0], this.gridY[i], 10, 20);
        }

        // Description Column (header and rows)
        doc.rect(this.gridX[1], this.gridY[5], 70, 10);
        for (let i = 6; i < 15; i += 2) {
            doc.rect(this.gridX[1], this.gridY[i], 70, 20);
        }

        // Hourly Rate Column (header and rows)
        doc.rect(this.gridX[8], this.gridY[5], 30, 10);
        for (let i = 6; i < 15; i += 2) {
            doc.rect(this.gridX[8], this.gridY[i], 30, 20);
        }

        // Hours Column (header and rows)
        doc.rect(this.gridX[11], this.gridY[5], 20, 10);
        for (let i = 6; i < 15; i += 2) {
            doc.rect(this.gridX[11], this.gridY[i], 20, 20);
        }

        // Amount Column (header and rows)
        doc.rect(this.gridX[13], this.gridY[5], 30, 10);
        for (let i = 6; i < 15; i += 2) {
            doc.rect(this.gridX[13], this.gridY[i], 30, 20);
        }
        doc.addPage()
        doc.addPage()
        doc.text('I am on page 3', 10, 10)
        doc.setPage(1)
        doc.save('a4.pdf');
    }

    moreTestJsPDF() {
        const doc = new jsPDF();
        // const specialElementHandlers = {
        //     '#editor': function (element, renderer) {
        //         return true;
        //     }
        // };
        // doc.fromHTML(this.invoiceHTML.nativeElement, 15, 15, {
        //     'width': 170,
        //     'elementHandlers': specialElementHandlers
        // });
        console.log (this.invoiceHTML);
        doc.addHTML(this.invoiceHTML.nativeElement);
        doc.save('sample-file.pdf');
    }

    // html2pdf((<HTMLInputElement>document.getElementById('doc')));
    //  var data='hello';
    //  $.get('http://localhost/ws/service.asmx/HelloWord', function(response) {
    //    data = response;
    //  }).error(function(){
    //    alert('Sorry could not proceed');
    //  });


}