added some files

AstuteClient2/src/app/invoice-gen/invoice-gen.component.html

@@ -111,12 +111,12 @@
     </div>
   </div>
 </div>
-
+<div id="editor"></div>
 <div class="container-fluid">
   <div class="row">
     <div class="col">
       <div class="text-center">
-        <button class="btn btn-lg btn-outline-primary"(click)="downloadPDF()">Download PDF</button>
+        <button class="btn btn-lg btn-outline-primary"(click)="moreTestJsPDF()">Download PDF</button>
       </div>
     </div>
   </div>

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

@@ -4,6 +4,7 @@ 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',
@@ -13,6 +14,9 @@ declare var jsPDF: any;
 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;
@@ -40,14 +44,28 @@ export class InvoiceGenComponent implements OnInit {
     cert;
 
     constructor(protected astuteClientService: AstuteClientService) {
-        // console.log("********** " + this.astuteClientService.getInvoiceGen("123").then());
+        // console.log('********** ' + this.astuteClientService.getInvoiceGen('123').then());
-        console.log("in invoice gen comp")
+    }
-        this.astuteClientService.getInvoiceGen("NVCC-01_1712_21").then((data) => {
+
+    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('3-01_DRAFT_258').then((data) => {
             this.name = data.customer.customerName;
             this.email = data.customer.email;
-            this.address = data.customer.add1 + " " + data.customer.add2 + " " +
+            this.address = data.customer.add1 + ' ' + data.customer.add2 + ' ' +
-                data.customer.city + ", " + data.customer.state.toUpperCase() + ", " +
+                data.customer.city + ', ' + data.customer.state.toUpperCase() + ', ' +
-                data.customer.zip + "-" + data.customer.ziplast4;
+                data.customer.zip + '-' + data.customer.ziplast4;
 
             this.poNum = data.po.ponum;
             this.coNum = data.po.contractNum;
@@ -73,17 +91,13 @@ export class InvoiceGenComponent implements OnInit {
         });
     }
 
-
-    ngOnInit() {
-    }
-
     downloadPDF() {
-        // new html2pdf(document.getElementById("doc"));
+        // new html2pdf(document.getElementById('doc'));
 
-        const A4_width = 425; // pixels
+        const A4_width = 210;//425; // pixels
-        const A4_height = 550; // pixels
+        const A4_height = 297;//550; // pixels
-        const ratio = 1;
+        const ratio = 2;
-        //
+        // //
         const oldCanvas = document.createElement('canvas');
         oldCanvas.width = A4_width;
         oldCanvas.height = A4_height;
@@ -92,10 +106,10 @@ export class InvoiceGenComponent implements OnInit {
         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');
@@ -106,12 +120,12 @@ export class InvoiceGenComponent implements OnInit {
                         unit: 'mm'
                     });
                     pdfDoc.addImage(newImg, 'png', 0, 0, 210, 297); // imageData, format, x, y, w, h
-                    pdfDoc.addHTML(this.invoiceHTML.nativeElement);
+                    //pdfDoc.addHTML(this.invoiceHTML.nativeElement);
                     pdfDoc.save(this.inNum + '.pdf'); // save file
                     newImg.onload = undefined; // kill the func
                 }
             );
-        }
+        };
         newImg.src = oldImg.src;
 
 
@@ -121,16 +135,72 @@ export class InvoiceGenComponent implements OnInit {
         //   console.log(data);
         // });
 
-        setTimeout(window.close, 5000);
+        // 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";
+    //  var data='hello';
-    //  $.get("http://localhost/ws/service.asmx/HelloWord", function(response) {
+    //  $.get('http://localhost/ws/service.asmx/HelloWord', function(response) {
     //    data = response;
     //  }).error(function(){
-    //    alert("Sorry could not proceed");
+    //    alert('Sorry could not proceed');
     //  });
 
 

AstuteClient2/src/app/invoice/invoice.component.html

@@ -1,6 +1,7 @@
 <app-nav-bar [invoiceActive]="true"></app-nav-bar>
 <h1 align="center">Invoices</h1>
 <div class="container-fluid">
+    <!--Table-->
     <div class="row">
         <div class="col-12">
             <ag-grid-angular
@@ -17,6 +18,8 @@
             ></ag-grid-angular>
         </div>
     </div>
+
+    <!--Buttons-->
     <div class="row justify-content-center mt-2">
         <div class="col-2">
             <button class="btn btn-light" style="width: 100%" (click)="assignActity()" [disabled]="!chosenInv">
@@ -24,18 +27,17 @@
             </button>
         </div>
         <div class="col-2">
-            <button class="btn btn-primary" style="width: 100%" (click)="submitInvoice(chosenInv.invoiceNumber)" [disabled]="!chosenInv">
+            <button class="btn btn-primary" style="width: 100%" (click)="submitInvoice(chosenInv.invoiceNumber)" [disabled]="!(chosenInv && chosenInv.invoiceStatus === 1)">
                 Submit
             </button>
         </div>
         <div class="col-2">
-            <button class="btn btn-secondary" style="width: 100%" (click)="open(new)" [disabled]="!chosenInv">
+            <button class="btn btn-danger" style="width: 100%" (click)="deleteInvoice(chosenInv.invoiceNumber)" [disabled]="!(chosenInv && chosenInv.invoiceStatus === 1)">
-                Payment
+                Delete
-                Received
             </button>
         </div>
         <div class="col-2">
-            <button class="btn btn-warning" style="width: 100%" (click)="voidInvoice(chosenInv.invoiceNumber)" [disabled]="!chosenInv">
+            <button class="btn btn-warning" style="width: 100%" (click)="voidInvoice(chosenInv.invoiceNumber)" [disabled]="!(chosenInv && chosenInv.invoiceStatus === 2)">
                 Void
             </button>
         </div>
@@ -45,7 +47,9 @@
             </button>
         </div>
         <div class="col-2">
-            <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
+            <button class="btn btn-success" style="width: 100%" (click)="open(new)">
+                Add
+            </button>
         </div>
     </div>
 </div>
@@ -167,8 +171,8 @@
             <tr>
                 <th scope="col" style="width: 50px">#</th>
                 <th scope="col">Description</th>
-                <th scope="col" style="width: 150px">Fee Type</th>
+                <th scope="col" style="width: 150px">Rate Type</th>
-                <th scope="col" style="width: 100px">Fee</th>
+                <th scope="col" style="width: 100px">Rate</th>
                 <th scope="col" style="width: 100px">Quantity</th>
             </tr>
             </thead>
@@ -178,12 +182,15 @@
                 <!--INV Detail Items: invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee-->
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled>
                 </td>
-                <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc"
+                <td class="p-0 m-0"><textarea style="height: 36px" class="form-control text cell" [value]="inDet.desc"
-                                           (change)="onSelectedCellChange(i, 'desc', desc.value)" #desc></td>
+                                              (change)="onSelectedCellChange(i, 'desc', desc.value)" #desc></textarea>
+                    <!--<input type="text" class="form-control cell" [value]="inDet.desc"-->
+                                           <!--(change)="onSelectedCellChange(i, 'desc', desc.value)" #desc>-->
+                </td>
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"
                                            disabled></td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.fee"
-                                           (change)="onSelectedCellChange(i, 'fee', fee.value); updateSelectedBillAmt()" #fee>
+                                           (change)="onSelectedCellChange(i, 'fee', fee.value); updateSelectedBillAmt()" #fee disabled>
                 </td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
                                            [step]="inDet.remainingQty / 100"
@@ -257,17 +264,72 @@
             </tr>
             </tbody>
         </table>
-
+        <table class="table table-borderless table-sm">
-        <div class="input-group mb-3">
+            <tbody>
-            <div class="input-group-prepend">
+            <tr>
-                <span class="input-group-text">Bill Amount*</span>
+                <td style="width: 40%" class="text-right"><b>Original Contract Amount</b></td>
-                <span class="input-group-text">$</span>
+                <td style="width: 10%">
-            </div>
+                    <div *ngIf="selectedPO">{{selectedPO.contractAmt}}</div>
-            <input type="number" class="form-control" [value]="selectedBillAmt" #billAmtIn>
+                </td>
-            <div class="input-group-append">
+                <td style="width: 30%" class="text-right">&nbsp;</td>
-                <span class="input-group-text">.00</span>
+                <td style="width: 20%" >&nbsp;</td>
-            </div>
+            </tr>
-        </div>
+            <tr>
+                <td class="text-right"><b>Net Changes by Change Orders</b></td>
+                <td>
+                    <div *ngIf="selectedPO">0</div>
+                </td>
+                <td class="text-right">&nbsp;</td>
+                <td>&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Total Contract Amount</b></td>
+                <td><div *ngIf="selectedPO">{{selectedPO.contractAmt}}</div></td>
+                <td class="text-right">&nbsp;</td>
+                <td>&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Previously Billed</b></td>
+                <td><div *ngIf="selectedPO">{{selectedPO.previouslyBilledAmount}}</div></td>
+                <td class="text-right">&nbsp;</td>
+                <td>&nbsp;</td>
+            </tr>
+            <!--<tr>-->
+            <!--<td class="text-right"><b>Amount This Invoice</b></td>-->
+            <!--<td>{{newBillAmt}}</td>-->
+            <!--<td class="text-right">&nbsp;</td>-->
+            <!--<td>&nbsp;</td>-->
+            <!--</tr>-->
+            <tr>
+                <td class="text-right"><b>Balance to be Billed</b></td>
+                <td><div *ngIf="selectedPO">{{selectedPO.contractAmt - selectedPO.previouslyBilledAmount - selectedBillAmt}}</div></td>
+                <!--<td>-->
+                <!--<div class="input-group mb-3">-->
+                <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text"><b>Total</b></span>-->
+                <!--<span class="input-group-text">$</span>-->
+                <!--</div>-->
+                <!--<input type="number" class="form-control" [value]="newBillAmt" #billAmtIn disabled>-->
+                <!--<div class="input-group-append">-->
+                <!--<span class="input-group-text">.00</span>-->
+                <!--</div>-->
+                <!--</div>-->
+                <!--</td>-->
+                <td class="text-right"><b>Total due this invoice</b></td>
+                <td>{{selectedBillAmt}}</td>
+            </tr>
+            </tbody>
+        </table>
+        <!--<div class="input-group mb-3">-->
+            <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text">Bill Amount*</span>-->
+                <!--<span class="input-group-text">$</span>-->
+            <!--</div>-->
+            <!--<input type="number" class="form-control" [value]="selectedBillAmt" #billAmtIn>-->
+            <!--<div class="input-group-append">-->
+                <!--<span class="input-group-text">.00</span>-->
+            <!--</div>-->
+        <!--</div>-->
     </div>
 
     <!--Invoice Footer-->
@@ -392,10 +454,11 @@
         <table class="table">
             <thead>
             <tr>
+                <th scope="col" style="width: 30px"></th>
                 <th scope="col" style="width: 50px">#</th>
                 <th scope="col">Description</th>
-                <th scope="col" style="width: 150px">Fee Type</th>
+                <th scope="col" style="width: 150px">Rate Type</th>
-                <th scope="col" style="width: 100px">Fee</th>
+                <th scope="col" style="width: 100px">Rate</th>
                 <th scope="col" style="width: 100px">Quantity</th>
             </tr>
             </thead>
@@ -403,14 +466,22 @@
             <tbody *ngFor="let inDet of newInDetails; let i = index">
             <tr class="p-0 m-0">
                 <!--INV Detail Items: invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee-->
+                <td>
+                    <button class="btn btn-outline-danger m-0 p-0" (click)="newInDetails.splice(0, 1)">
+                        -
+                    </button>
+                </td>
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled>
                 </td>
-                <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc"
+                <td class="p-0 m-0"><textarea style="height: 36px" class="form-control cell" [value]="inDet.desc"
-                                           (change)="onNewCellChange(i, 'desc', desc.value)" #desc></td>
+                                              (change)="onNewCellChange(i, 'desc', desc.value)" #desc></textarea>
+                    <!--<input type="text" class="form-control cell" [value]="inDet.desc"-->
+                                           <!--(change)="onNewCellChange(i, 'desc', desc.value)" #desc>-->
+                </td>
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"
                                            disabled></td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.fee"
-                                           (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee>
+                                           (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee disabled>
                 </td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
                                            [step]="inDet.remainingQty / 100"
@@ -421,7 +492,7 @@
                 <th class="align-content-center">
                     <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
                 </th>
-                <td colspan="4">
+                <td colspan="5">
                     <div class="progress" style="height: 25px;">
                         <div class="progress-bar bg-success" role="progressbar"
                              [ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">

AstuteClient2/src/app/invoice/invoice.component.ts

@@ -31,6 +31,7 @@ export class InvoiceComponent implements OnInit {
     newInDetails = [];
     newBillAmt = 0;
     selectedInDetails = [];
+    selectedPO;
     selectedBillAmt = 0;
     poDetails = [];
     selectedPODetails = [];
@@ -73,13 +74,13 @@ export class InvoiceComponent implements OnInit {
 
             // apply amber 2004
             'text-danger': function (params) {
-                return params.data.invoiceStatus === 1
+                return params.data.invoiceStatus === 1;
             },
             'text-primary': function (params) {
-                return params.data.invoiceStatus === 2
+                return params.data.invoiceStatus === 2;
             },
             'text-warning': function (params) {
-                return params.data.invoiceStatus === 3
+                return params.data.invoiceStatus === 3;
             },
 
             // apply red to 2000
@@ -250,6 +251,11 @@ export class InvoiceComponent implements OnInit {
                     alert("get PO detail failed!")
                 }
             });
+            this.pos.forEach((po) => {
+                if (po.ponum === this.chosenInv.poNum) {
+                    this.selectedPO = po;
+                }
+            });
         } else {
             this.chosenInv = null;
             this.selectedPODetails = [];
@@ -257,7 +263,7 @@ export class InvoiceComponent implements OnInit {
     }
 
     open(content, indexPO, indexINV) {
-        content.open()
+        content.open();
         // this.detailDescription = ViewChild('detailDescription');
         // this.detailAmount = ViewChild('detailAmount');
         // this.detailRate = ViewChild('detailRate');
@@ -307,6 +313,19 @@ export class InvoiceComponent implements OnInit {
         return [year, month, day].join('-');
     }
 
+    deleteInvoice (invoiceNum) {
+        if (confirm('Are you sure you want to delete invoice, ' + invoiceNum)) {
+            this.astuteClientService.deleteInvoice(invoiceNum).then((data) => {
+                if (data) {
+                    console.log('Invoice, ' + invoiceNum + ' successfully deleted');
+                    this.refreshData();
+                } else {
+                    alert ('Error in deleting; Invoice, ' + invoiceNum + ' has not been deleted');
+                }
+            });
+        }
+    }
+
     addInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification, status, ref) {
         // String  invoiceNumber;
         // Date invoiceDate;
@@ -436,7 +455,7 @@ export class InvoiceComponent implements OnInit {
             if (data) {
                 this.refreshData();
             } else {
-                alert('void invoice failed.')
+                alert('void invoice failed.');
             }
         });
     }

AstuteClient2/src/app/modal-form/modal-form.component.html

@@ -2,7 +2,7 @@
   <div class="modal-header">
     <h4 class="modal-title">{{title}}</h4>
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-      <span aria-hidden="true">&times;</span>
+      <span aria-hidden="true">&oline;</span>
     </button>
   </div>
   <ng-content></ng-content>

AstuteClient2/src/app/sales-order/sales-order.component.html

@@ -59,7 +59,7 @@
           <td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
           <td style="width: 30%"><input type="text" class="form-control" placeholder="External Contract Number" #contractnum></td>
           <td style="width: 20%"><span class="input-group-text">Contract Amount</span></td>
-          <td style="width: 30%"><input type="number" class="form-control" placeholder="External Contract Amount" #contractamt></td>
+          <td style="width: 30%"><input type="number" class="form-control" placeholder="Derived From Details" [value]="newContractAmount" #contractamt disabled></td>
         </tr>
       </tbody>
     </table>
@@ -84,10 +84,10 @@
         <th scope="col"></th>
         <th scope="col" style="width: 50px">#</th>
         <th scope="col">Description</th>
-        <th scope="col">Fee Type</th>
+        <th scope="col">Rate Type</th>
         <th scope="col">Service Type</th>
         <th scope="col" style="width: 75px">Qty</th>
-        <th scope="col" style="width: 100px">Fee</th>
+        <th scope="col" style="width: 100px">Rate</th>
       </tr>
       </thead>
 
@@ -99,7 +99,10 @@
           </button>
         </td>
         <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onNewCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>
-        <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></td>
+        <td class="p-0 m-0">
+          <textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>
+          <!--<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>-->
+        </td>
         <td class="p-0 m-0">
           <select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onNewCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>
             <option value="1">Fixed Fee</option>
@@ -115,8 +118,8 @@
             <option value="5">Forensic Investigation</option>
           </select>
         </td>
-        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.qty" (change)="onNewCellChange(i, 'qty', qty.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value);" #qty></td>
+        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onNewCellChange(i, 'qty', qty.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #qty></td>
-        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.fee" (change)="onNewCellChange(i, 'fee', fee.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value);" #fee></td>
+        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.fee" (change)="onNewCellChange(i, 'fee', fee.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #fee></td>
         <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>-->
       </tr>
       </tbody>
@@ -202,7 +205,7 @@
           <td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
           <td style="width: 30%"><input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum" #contractnum></td>
           <td style="width: 20%"><span class="input-group-text">Contract Amount</span></td>
-          <td style="width: 30%"><input type="number" class="form-control" placeholder="Contract Amount" [value]="selected.contractAmt" #contractamt></td>
+          <td style="width: 30%"><input type="number" class="form-control" placeholder="Contract Amount" [value]="editContractAmount" #contractamt></td>
         </tr>
         </tbody>
       </table>
@@ -277,10 +280,10 @@
           <th scope="col" style="width: 50px">#</th>
           <!--<th scope="col">Purchase Order Number</th>-->
           <th scope="col">Description</th>
-          <th scope="col">Fee Type</th>
+          <th scope="col">Rate Type</th>
           <th scope="col">Service Type</th>
           <th scope="col" style="width: 75px">Qty</th>
-          <th scope="col" style="width: 100px">Fee</th>
+          <th scope="col" style="width: 100px">Rate</th>
           <!--<th scope="col">Remaining Quantity</th>-->
         </tr>
         </thead>
@@ -294,7 +297,10 @@
           <!--</td>-->
           <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>
           <!--<td class="p-0"><input type="text" class="form-control cell" [value]="poDetail.ponum"></td>-->
-          <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></td>
+          <td class="p-0 m-0">
+            <textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>
+            <!--<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>-->
+          </td>
           <td class="p-0 m-0">
             <select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onSelectedCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>
               <option value="1">Fixed Fee</option>
@@ -304,16 +310,17 @@
           </td>
           <td class="p-0 m-0">
             <select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>
-              <option value="1">Study</option>
+              <option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceTypes">{{serviceType.desc}}</option>
-              <option value="2">Design</option>
+              <!--<option value="">Study</option>-->
-              <option value="3">Peer Review</option>
+              <!--<option value="2">Design</option>-->
-              <option value="4">Cost Estimation</option>
+              <!--<option value="3">Peer Review</option>-->
-              <option value="5">Forensic Investigation</option>
+              <!--<option value="4">Cost Estimation</option>-->
+              <!--<option value="5">Forensic Investigation</option>-->
             </select>
             <!--<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>-->
           </td>
-          <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.qty" (change)="onSelectedCellChange(i, 'qty', qty.value)" #qty></td>
+          <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onSelectedCellChange(i, 'qty', qty.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #qty></td>
-          <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.fee" (change)="onSelectedCellChange(i, 'fee', fee.value)" #fee></td>
+          <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.fee" (change)="onSelectedCellChange(i, 'fee', fee.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #fee></td>
           <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>-->
         </tr>
         </tbody>

AstuteClient2/src/app/sales-order/sales-order.component.ts

@@ -2,232 +2,260 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
 
 @Component({
-  selector: 'app-sales-order',
+    selector: 'app-sales-order',
-  templateUrl: './sales-order.component.html',
+    templateUrl: './sales-order.component.html',
-  styleUrls: ['./sales-order.component.css']
+    styleUrls: ['./sales-order.component.css']
 })
 export class SalesOrderComponent implements OnInit {
-  @ViewChild('agGrid') agGrid;
+    @ViewChild('agGrid') agGrid;
-  selected = null;
+    selected = null;
-  selectedPODetail = [];
+    selectedPODetail = [];
-  newPODetail = [];
+    newPODetail = [];
-  customers;
+    newContractAmount = 0;
-  pos;
+    editContractAmount = 0;
-  columnDefs = [
+    customers;
-    {headerName: 'Project Number', field: 'astuteProjectNumber'},
+    pos;
-    {headerName: 'SO Number', field: 'ponum'},
+    serviceTypes;
-    // {headerName: 'Customer ID', field: 'customerId'},
+    columnDefs = [
-    {headerName: 'Customer Name', field: 'customerName'},
+        {headerName: 'Project Number', field: 'astuteProjectNumber'},
-    {headerName: 'Contract Number', field: 'contractNum'},
+        {headerName: 'SO Number', field: 'ponum'},
-    {headerName: 'SO Title', field: 'title'},
+        // {headerName: 'Customer ID', field: 'customerId'},
-    {headerName: 'Contract Amount', field: 'contractAmt'},
+        {headerName: 'Customer Name', field: 'customerName'},
-    {headerName: 'SO Date', field: 'podate'}
+        {headerName: 'Contract Number', field: 'contractNum'},
-  ];
+        {headerName: 'SO Title', field: 'title'},
-  rowData: any;
+        {headerName: 'Contract Amount', field: 'contractAmt'},
+        {headerName: 'SO Date', field: 'podate'},
+        {headerName: '# of Invoice', field: 'invoiceSequence'}
+    ];
+    rowData: any;
 
-  constructor(private astuteClientService: AstuteClientService) {
+    constructor(private astuteClientService: AstuteClientService) {
-  }
-
-  ngOnInit() {
-    this.refreshData();
-  }
-
-  printValue(val) {
-      console.log(val);
-  }
-
-  addPo(projNum, ponum, podate, customerid, contractnum, contractamt, title, ref ) {
-    const poData = {
-      "astuteProjectNumber": projNum,
-      "poNum": ponum,
-      "podate": podate,
-      "customerId": customerid,
-      "contractNum": contractnum,
-      "contractAmt": contractamt,
-      "title": title,
     }
-    console.log (poData);
+
-    this.astuteClientService.createPO(poData).then((data) => {
+    ngOnInit() {
-      if (data) {
         this.refreshData();
-        this.addPODetail(this.newPODetail);
+        this.astuteClientService.getServiceTypes().then((d) => {
-        ref.close();
+            if (d) {
-      } else {
+                this.serviceTypes = d;
-        alert("PO Creation failed, check input fields");
+            } else {
-      }
+                alert ('get service types failed');
-    }, (reason) => {
+            }
-      alert("add po failed for " + reason);
+        })
-    });
+    }
-  }
 
-  addPODetail(details) {
+    printValue(val) {
-    if (details.length) {
+        console.log(val);
-      console.log(details[0]);
+    }
-      this.astuteClientService.createPODetail(details[0]).then((data) => {
+
-        if (data) {
+    addPo(projNum, ponum, podate, customerid, contractnum, contractamt, title, ref) {
-          details.splice(0, 1);
+        const poData = {
-          this.addPODetail(details);
+            "astuteProjectNumber": projNum,
-        } else {
+            "poNum": ponum,
-          alert("add detail failed");
+            "podate": podate,
+            "customerId": customerid,
+            "contractNum": contractnum,
+            "contractAmt": contractamt,
+            "title": title,
         }
-      });
+        console.log(poData);
-    } else {
+        this.astuteClientService.createPO(poData).then((data) => {
-      this.newPODetail = [];
+            if (data) {
-    }
+                this.refreshData();
-  }
+                this.addPODetail(this.newPODetail);
-
+                ref.close();
-  editPo(projNum, ponum, podate, contractnum, contractamt, title, ref) {
+            } else {
-    const poData = {
+                alert("PO Creation failed, check input fields");
-      "astuteProjectNumber": projNum,
+            }
-      "poNum": ponum,
+        }, (reason) => {
-      "podate": podate,
+            alert("add po failed for " + reason);
-      "contractNum": contractnum,
-      "contractAmt": contractamt,
-      "title": title,
-    }
-    console.log(poData);
-    this.astuteClientService.updatePO(ponum, poData).then((data) => {
-      if (data) {
-        this.refreshData();
-        this.editPODetail(this.selectedPODetail);
-        ref.close();
-      } else {
-        alert("PO updating failed, check input fields");
-      }
-    }, (reason) => {
-      alert("update po failed for " + reason);
-    });
-  }
-
-  editPODetail (details) {
-    if (details.length) {
-      console.log(details[0]);
-      this.astuteClientService.updatePODetail(details[0].ponum, details[0].lineItemNo, details[0]).then((data) => {
-        if (data) {
-          details.splice(0, 1);
-          this.editPODetail(details);
-        } else {
-          alert("add detail failed")
-        }
-      });
-    } else {
-      this.newPODetail = [];
-    }
-  }
-
-  pushOntoSelectedDetail(lineItemNo: number, ponum, serviceDesc, feeTypeId, serviceTypeId, qty, fee, remainingQty) {
-    this.selectedPODetail.push({
-      'lineItemNo': lineItemNo,
-      'ponum': ponum,
-      'serviceDesc': serviceDesc,
-      'feeTypeId': feeTypeId,
-      'serviceTypeId': serviceTypeId,
-      'qty': qty,
-      'fee': fee,
-      'remainingQty': remainingQty
-    });
-  }
-
-  pushOntoNewDetail(lineItemNo: number, ponum, serviceDesc, feeTypeId, serviceTypeId, qty, fee, remainingQty) {
-    this.newPODetail.push({
-      'lineItemNo': lineItemNo,
-      'poNum': ponum,
-      'serviceDesc': serviceDesc,
-      'feeTypeId': feeTypeId,
-      'serviceTypeId': serviceTypeId,
-      'qty': qty,
-      'fee': fee,
-      'remainingQty': remainingQty
-    });
-  }
-
-  open(ref) {
-    this.getSelectedRows();
-    ref.open();
-  }
-
-  close(ref) {
-    this.newPODetail = [];
-    this.selectedPODetail = [];
-
-    ref.close();
-  }
-
-  onSelectedCellChange(row: number, col: string, value) {
-    this.selectedPODetail[row][col] = value;
-    console.log(this.selectedPODetail);
-  }
-
-  onNewCellChange(row: number, col: string, value) {
-    this.newPODetail[row][col] = value;
-    console.log(this.newPODetail);
-  }
-
-  getCurrDate() {
-    const d = new Date();
-    return this.formatDate(d);
-  }
-
-  formatDate(d: Date) {
-    let month = '' + (d.getMonth() + 1),
-      day = '' + d.getDate(),
-      year = d.getFullYear();
-
-    if (month.length < 2) {
-      month = '0' + month;
-    }
-    if (day.length < 2) {
-      day = '0' + day;
-    }
-    return [year, month, day].join('-');
-  }
-
-  getSelectedRows() {
-    const selectedNodes = this.agGrid.api.getSelectedNodes();
-    if (selectedNodes.length) {
-      this.selected = selectedNodes.map(node => node.data)[0];
-      this.astuteClientService.getPODetail(this.selected.ponum).then((data) => {
-        if (data) {
-          this.selectedPODetail = data;
-          console.log(this.selectedPODetail);
-        } else {
-          alert("get PO detail failed!")
-        }
-      });
-    } else {
-      this.selected = null;
-      this.selectedPODetail = [];
-    }
-  }
-
-  refreshData() {
-    this.astuteClientService.getCustomers().then((customers) => {
-      if (customers) {
-        this.customers = customers;
-        this.astuteClientService.getPOs().then((data) => {
-          if (data) {
-            this.pos = data;
-            this.rowData = data;
-            this.rowData.forEach((row) => {
-              row.customerName = this.getCustomerName(row.customerId);
-            });
-          }
         });
-      } else {
+    }
-        alert("get Customers Failed!");
-      }
-    });
-    // this.rowData = this.astuteClientService.getPOs();
 
-  }
+    addPODetail(details) {
+        if (details.length) {
+            console.log(details[0]);
+            this.astuteClientService.createPODetail(details[0]).then((data) => {
+                if (data) {
+                    details.splice(0, 1);
+                    this.addPODetail(details);
+                } else {
+                    alert("add detail failed");
+                }
+            });
+        } else {
+            this.newPODetail = [];
+        }
+    }
 
-  getCustomerName(customerId) {
+    editPo(projNum, ponum, podate, contractnum, contractamt, title, ref) {
-    let name = "";
+        const poData = {
-    this.customers.forEach((customer) => {
+            "astuteProjectNumber": projNum,
-      if (customer.customerId === customerId) {
+            "poNum": ponum,
-        name = customer.customerName;
+            "podate": podate,
-      }
+            "contractNum": contractnum,
-    });
+            "contractAmt": contractamt,
-    return name;
+            "title": title,
-  }
+        }
+        console.log(poData);
+        this.astuteClientService.updatePO(ponum, poData).then((data) => {
+            if (data) {
+                this.refreshData();
+                this.editPODetail(this.selectedPODetail);
+                ref.close();
+            } else {
+                alert("PO updating failed, check input fields");
+            }
+        }, (reason) => {
+            alert("update po failed for " + reason);
+        });
+    }
+
+    editPODetail(details) {
+        if (details.length) {
+            console.log(details[0]);
+            this.astuteClientService.updatePODetail(details[0].ponum, details[0].lineItemNo, details[0]).then((data) => {
+                if (data) {
+                    details.splice(0, 1);
+                    this.editPODetail(details);
+                } else {
+                    alert("add detail failed")
+                }
+            });
+        } else {
+            this.newPODetail = [];
+        }
+    }
+
+    pushOntoSelectedDetail(lineItemNo: number, ponum, serviceDesc, feeTypeId, serviceTypeId, qty, fee, remainingQty) {
+        this.selectedPODetail.push({
+            'lineItemNo': lineItemNo,
+            'ponum': ponum,
+            'serviceDesc': serviceDesc,
+            'feeTypeId': feeTypeId,
+            'serviceTypeId': serviceTypeId,
+            'qty': qty,
+            'fee': fee,
+            'remainingQty': remainingQty
+        });
+    }
+
+    pushOntoNewDetail(lineItemNo: number, ponum, serviceDesc, feeTypeId, serviceTypeId, qty, fee, remainingQty) {
+        this.newPODetail.push({
+            'lineItemNo': lineItemNo,
+            'poNum': ponum,
+            'serviceDesc': serviceDesc,
+            'feeTypeId': feeTypeId,
+            'serviceTypeId': serviceTypeId,
+            'qty': qty,
+            'fee': fee,
+            'remainingQty': remainingQty
+        });
+    }
+
+    updateNewContractAmt() {
+        let tot = 0;
+        this.newPODetail.forEach((d) => {
+            tot += +d.qty * +d.fee;
+        });
+        this.newContractAmount = tot;
+    }
+
+    updateEditContractAmt() {
+        let tot = 0;
+        this.selectedPODetail.forEach((d) => {
+            tot += +d.qty * +d.fee;
+        });
+        this.editContractAmount = tot;
+    }
+
+    open(ref) {
+        this.getSelectedRows();
+        ref.open();
+    }
+
+    close(ref) {
+        this.newPODetail = [];
+        this.selectedPODetail = [];
+
+        ref.close();
+    }
+
+    onSelectedCellChange(row: number, col: string, value) {
+        this.selectedPODetail[row][col] = value;
+        console.log(this.selectedPODetail);
+    }
+
+    onNewCellChange(row: number, col: string, value) {
+        this.newPODetail[row][col] = value;
+        console.log(this.newPODetail);
+    }
+
+    getCurrDate() {
+        const d = new Date();
+        return this.formatDate(d);
+    }
+
+    formatDate(d: Date) {
+        let month = '' + (d.getMonth() + 1),
+            day = '' + d.getDate(),
+            year = d.getFullYear();
+
+        if (month.length < 2) {
+            month = '0' + month;
+        }
+        if (day.length < 2) {
+            day = '0' + day;
+        }
+        return [year, month, day].join('-');
+    }
+
+    getSelectedRows() {
+        const selectedNodes = this.agGrid.api.getSelectedNodes();
+        if (selectedNodes.length) {
+            this.selected = selectedNodes.map(node => node.data)[0];
+            this.editContractAmount = +this.selected.contractAmt;
+            this.astuteClientService.getPODetail(this.selected.ponum).then((data) => {
+                if (data) {
+                    this.selectedPODetail = data;
+                    console.log(this.selectedPODetail);
+                } else {
+                    alert("get PO detail failed!")
+                }
+            });
+        } else {
+            this.selected = null;
+            this.selectedPODetail = [];
+        }
+    }
+
+    refreshData() {
+        this.astuteClientService.getCustomers().then((customers) => {
+            if (customers) {
+                this.customers = customers;
+                this.astuteClientService.getPOs().then((data) => {
+                    if (data) {
+                        this.pos = data;
+                        this.rowData = data;
+                        this.rowData.forEach((row) => {
+                            row.customerName = this.getCustomerName(row.customerId);
+                        });
+                    }
+                });
+            } else {
+                alert("get Customers Failed!");
+            }
+        });
+        // this.rowData = this.astuteClientService.getPOs();
+
+    }
+
+    getCustomerName(customerId) {
+        let name = "";
+        this.customers.forEach((customer) => {
+            if (customer.customerId === customerId) {
+                name = customer.customerName;
+            }
+        });
+        return name;
+    }
 }

AstuteClient2/src/app/services/astute-client-service.ts

@@ -9,6 +9,7 @@ export class AstuteClientService {
   private authUrl = 'http://localhost:8080/astutesystem/auth';
   private customerUrl = 'http://localhost:8080/astutesystem/customer';
   private POUrl = 'http://localhost:8080/astutesystem/po';
+  private POServiceTypesUrl = 'http://localhost:8080/astutesystem/po/serviceTypes';
   private PODetailUrl = 'http://localhost:8080/astutesystem/po/detail';
   private invoiceUrl = 'http://localhost:8080/astutesystem/invoice';
   private invoiceDetailUrl = 'http://localhost:8080/astutesystem/invoice/detail';
@@ -88,6 +89,17 @@ export class AstuteClientService {
       });
   }
 
+  public getServiceTypes(): Promise<any> {
+      console.log("*** In getPOServiceTypes()");
+      const url = `${this.POServiceTypesUrl}`;
+      return this.http.get(url)
+          .toPromise()
+          .then(response => {
+              console.log(response['entity']);
+              return response['entity'];
+          });
+  }
+
   public getPODetail(ponum): Promise<any> {
     console.log("*** In getPODetails()");
     const url = `${this.PODetailUrl}?PONum=${ponum}`;
@@ -163,6 +175,17 @@ export class AstuteClientService {
       });
   }
 
+  public deleteInvoice (invoiceNumber) {
+      console.log("*** In deleteInvoice(), invoiceNumber" + invoiceNumber);
+      const url = `${this.invoiceUrl}/${invoiceNumber}/delete`;
+      return this.http.put(url, {})
+          .toPromise()
+          .then(response => {
+              console.log (response['entity']);
+              return response['entity'];
+          });
+  }
+
   public generateInvoiceNumber (ponum) {
     console.log("*** In generateInvoiceNumber()");
     const url = `${this.invoiceUrl}/generateInvoiceNumber/${ponum}`;