added some files

AstuteClient2/angular.json

@@ -25,7 +25,11 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "src/assets/html2canvas/dist/html2canvas.min.js",
+              "src/assets/html2pdf.js/dist/html2pdf.js",
+              "src/assets/jspdf/dist/jspdf.min.js"
+            ]
           },
           "configurations": {
             "production": {

AstuteClient2/package.json

@@ -23,6 +23,7 @@
     "@ng-bootstrap/ng-bootstrap": "^2.2.1",
     "ag-grid": "^18.1.2",
     "ag-grid-angular": "^18.1.0",
+    "angular2-text-mask": "^9.0.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "jquery": "^3.3.1",

AstuteClient2/src/app/app-routing.module.ts

@@ -5,13 +5,15 @@ import {CustomerComponent} from './customer/customer.component';
 import {SalesOrderComponent} from './sales-order/sales-order.component';
 import {InvoiceComponent} from './invoice/invoice.component';
 import {HomepageComponent} from './homepage/homepage.component';
+import {InvoiceGenComponent} from './invoice-gen/invoice-gen.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'homepage', pathMatch: 'full'},
   { path: 'homepage', component: HomepageComponent },
   { path: 'customer', component: CustomerComponent },
   { path: 'sales-order', component: SalesOrderComponent },
-  { path: 'invoice', component: InvoiceComponent }
+  { path: 'invoice', component: InvoiceComponent },
+  { path: 'invoice-gen', component: InvoiceGenComponent }
 ];
 
 @NgModule({

AstuteClient2/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { SalesOrderComponent } from './sales-order/sales-order.component';
 import { InvoiceComponent } from './invoice/invoice.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { AppBoxComponent } from './app-box/app-box.component';
+import { InvoiceGenComponent } from './invoice-gen/invoice-gen.component';
+import { TextMaskModule } from 'angular2-text-mask';
 
 @NgModule({
   declarations: [
@@ -24,14 +26,16 @@ import { AppBoxComponent } from './app-box/app-box.component';
     SalesOrderComponent,
     InvoiceComponent,
     HomepageComponent,
-    AppBoxComponent
+    AppBoxComponent,
+    InvoiceGenComponent
   ],
   imports: [
     BrowserModule,
     AgGridModule.withComponents([]),
     NgbModule.forRoot(),
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    TextMaskModule
   ],
   providers: [AstuteClientService],
   bootstrap: [AppComponent]

AstuteClient2/src/app/customer/customer.component.html

@@ -35,7 +35,7 @@
           <span class="input-group-text">ID*</span>
         </td>
         <td colspan="7">
-          <input type="text" class="form-control" #inId>
+          <input type="text" class="form-control" placeholder="johndoe" #inId>
         </td>
       </tr>
 
@@ -44,7 +44,7 @@
           <span class="input-group-text">Name*</span>
         </td>
         <td colspan="7">
-          <input type="text" class="form-control" #inName>
+          <input type="text" class="form-control" placeholder="John Doe" #inName>
         </td>
       </tr>
 
@@ -53,7 +53,7 @@
           <span class="input-group-text">Bill To Dept*</span>
         </td>
         <td colspan="7">
-          <input type="text" class="form-control" #inBillToDept>
+          <input type="text" class="form-control" placeholder="Billing" #inBillToDept>
         </td>
       </tr>
 
@@ -62,7 +62,7 @@
           <span class="input-group-text">Address 1*</span>
         </td>
         <td colspan="7">
-          <input type="text" class="form-control" #inAdd1>
+          <input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1>
         </td>
       </tr>
 
@@ -71,7 +71,7 @@
           <span class="input-group-text">Address 2</span>
         </td>
         <td colspan="7">
-          <input type="text" class="form-control" #inAdd2>
+          <input type="text" class="form-control" placeholder="Apt #, Unit, etc..." [value]="''" #inAdd2>
         </td>
       </tr>
 
@@ -80,7 +80,7 @@
           <span class="input-group-text">City*</span>
         </td>
         <td>
-          <input type="text" class="form-control" #inCity>
+          <input type="text" class="form-control" placeholder="New York City" #inCity>
         </td>
 
         <td style="width: 1%">
@@ -99,8 +99,8 @@
         </td>
         <td style="width: 25%">
           <div class="input-group">
-            <input type="number" class="form-control" #inZIP>
-            <input type="number" class="form-control" #inZIP4>
+            <input type="number" class="form-control" placeholder="12345" #inZIP>
+            <input type="number" class="form-control" placeholder="6789" #inZIP4>
           </div>
         </td>
       </tr>
@@ -110,7 +110,7 @@
           <span class="input-group-text">Email*</span>
         </td>
         <td colspan="7">
-          <input type="email" class="form-control" #inEmail>
+          <input type="email" class="form-control" placeholder="john@doe.com" #inEmail>
         </td>
       </tr>
 
@@ -119,7 +119,7 @@
           <span class="input-group-text">Phone*</span>
         </td>
         <td colspan="7">
-          <input type="tel" class="form-control" #inPhone>
+          <input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone>
         </td>
       </tr>
 
@@ -128,7 +128,7 @@
           <span class="input-group-text">Fax</span>
         </td>
         <td colspan="7">
-          <input type="tel" class="form-control" #inFax>
+          <input type="tel" class="form-control" placeholder="(123) 456-7890" [value]="''" [textMask]="{mask: usPhoneMask, guide: false}" #inFax>
         </td>
       </tr>
       </tbody>
@@ -137,7 +137,7 @@
 
   <div class="modal-footer">
     <button class="btn btn-success" type="button"
-            [disabled]="!(inId.value && inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value && inFax.value)"
+            [disabled]="!(inId.value && inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)"
             (click)="addCustomer(inId.value, inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inFax.value, new)">
       +
     </button>
@@ -156,7 +156,7 @@
             <span class="input-group-text">Name*</span>
           </td>
           <td colspan="7">
-            <input type="text" class="form-control" #inName [value]="selected.customerName">
+            <input type="text" class="form-control" #inName placeholder="John Doe" [value]="selected.customerName">
           </td>
         </tr>
 
@@ -165,7 +165,7 @@
             <span class="input-group-text">Bill To Dept*</span>
           </td>
           <td colspan="7">
-            <input type="text" class="form-control" #inBillToDept [value]="selected.billToDept">
+            <input type="text" class="form-control" placeholder="Billing" #inBillToDept [value]="selected.billToDept">
           </td>
         </tr>
 
@@ -174,7 +174,7 @@
             <span class="input-group-text">Address 1*</span>
           </td>
           <td colspan="7">
-            <input type="text" class="form-control" #inAdd1 [value]="selected.add1">
+            <input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1 [value]="selected.add1">
           </td>
         </tr>
 
@@ -183,7 +183,7 @@
             <span class="input-group-text">Address 2</span>
           </td>
           <td colspan="7">
-            <input type="text" class="form-control" #inAdd2 [value]="selected.add2">
+            <input type="text" class="form-control" placeholder="Apt#, Unit, etc." #inAdd2 [value]="selected.add2">
           </td>
         </tr>
 
@@ -192,7 +192,7 @@
             <span class="input-group-text">City*</span>
           </td>
           <td>
-            <input type="text" class="form-control" #inCity [value]="selected.city">
+            <input type="text" class="form-control" placeholder="New York City" #inCity [value]="selected.city">
           </td>
 
           <td style="width: 1%">
@@ -211,8 +211,8 @@
           </td>
           <td style="width: 25%">
             <div class="input-group">
-              <input type="number" class="form-control" #inZIP [value]="selected.zip">
-              <input type="number" class="form-control" #inZIP4 [value]="selected.ziplast4">
+              <input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip">
+              <input type="number" class="form-control" placeholder="6789" #inZIP4 [value]="selected.ziplast4">
             </div>
           </td>
         </tr>
@@ -222,7 +222,7 @@
             <span class="input-group-text">Email*</span>
           </td>
           <td colspan="7">
-            <input type="email" class="form-control" #inEmail [value]="selected.email">
+            <input type="email" class="form-control" placeholder="john@doe.com" #inEmail [value]="selected.email">
           </td>
         </tr>
 
@@ -231,7 +231,7 @@
             <span class="input-group-text">Phone*</span>
           </td>
           <td colspan="7">
-            <input type="tel" class="form-control" #inPhone [value]="selected.phone">
+            <input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone [value]="selected.phone">
           </td>
         </tr>
 
@@ -240,7 +240,7 @@
             <span class="input-group-text">Fax</span>
           </td>
           <td colspan="7">
-            <input type="tel" class="form-control" #inFax [value]="selected.fax">
+            <input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inFax [value]="selected.fax">
           </td>
         </tr>
         </tbody>

AstuteClient2/src/app/customer/customer.component.ts

@@ -2,169 +2,169 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
 
 @Component({
-  selector: 'app-customer',
-  templateUrl: './customer.component.html',
-  styleUrls: ['./customer.component.css']
+    selector: 'app-customer',
+    templateUrl: './customer.component.html',
+    styleUrls: ['./customer.component.css']
 })
 export class CustomerComponent implements OnInit {
-  @ViewChild('agGrid') agGrid;
-  selected = null;
-  customers;
-  columnDefs = [
-    {headerName: 'Customer ID', field: 'customerId', checkboxSelection: true},
-    {headerName: 'Customer Name', field: 'customerName'},
-    {headerName: 'Bill To Department', field: 'billToDept'},
-    {headerName: 'Address 1', field: 'add1'},
-    {headerName: 'Address 2', field: 'add2'},
-    {headerName: 'City', field: 'city'},
-    {headerName: 'Email', field: 'email'},
-    {headerName: 'Fax', field: 'fax'},
-    {headerName: 'Phone', field: 'phone'},
-    {headerName: 'State', field: 'state'},
-    {headerName: 'ZIP', field: 'zip'},
-    {headerName: 'ZIP-4', field: 'ziplast4'}
-  ];
-  rowData: any;
-  states = [
-    'AL',
-    'AK',
-    'AR',
-    'AZ',
-    'CA',
-    'CO',
-    'CT',
-    'DC',
-    'DE',
-    'FL',
-    'GA',
-    'HI',
-    'IA',
-    'ID',
-    'IL',
-    'IN',
-    'KS',
-    'KY',
-    'LA',
-    'MA',
-    'MD',
-    'ME',
-    'MI',
-    'MN',
-    'MO',
-    'MS',
-    'MT',
-    'NC',
-    'NE',
-    'NH',
-    'NJ',
-    'NM',
-    'NV',
-    'NY',
-    'ND',
-    'OH',
-    'OK',
-    'OR',
-    'PA',
-    'RI',
-    'SC',
-    'SD',
-    'TN',
-    'TX',
-    'UT',
-    'VT',
-    'VA',
-    'WA',
-    'WI',
-    'WV',
-    'WY'
-  ];
+    @ViewChild('agGrid') agGrid;
+    selected = null;
+    customers;
+    columnDefs = [
+        {headerName: 'Customer ID', field: 'customerId', checkboxSelection: true},
+        {headerName: 'Customer Name', field: 'customerName'},
+        {headerName: 'Bill To Department', field: 'billToDept'},
+        {headerName: 'Address 1', field: 'add1'},
+        {headerName: 'Address 2', field: 'add2'},
+        {headerName: 'City', field: 'city'},
+        {headerName: 'Email', field: 'email'},
+        {headerName: 'Fax', field: 'fax'},
+        {headerName: 'Phone', field: 'phone'},
+        {headerName: 'State', field: 'state'},
+        {headerName: 'ZIP', field: 'zip'},
+        {headerName: 'ZIP-4', field: 'ziplast4'}
+    ];
+    rowData: any;
+    states = [
+        'AL',
+        'AK',
+        'AR',
+        'AZ',
+        'CA',
+        'CO',
+        'CT',
+        'DC',
+        'DE',
+        'FL',
+        'GA',
+        'HI',
+        'IA',
+        'ID',
+        'IL',
+        'IN',
+        'KS',
+        'KY',
+        'LA',
+        'MA',
+        'MD',
+        'ME',
+        'MI',
+        'MN',
+        'MO',
+        'MS',
+        'MT',
+        'NC',
+        'NE',
+        'NH',
+        'NJ',
+        'NM',
+        'NV',
+        'NY',
+        'ND',
+        'OH',
+        'OK',
+        'OR',
+        'PA',
+        'RI',
+        'SC',
+        'SD',
+        'TN',
+        'TX',
+        'UT',
+        'VT',
+        'VA',
+        'WA',
+        'WI',
+        'WV',
+        'WY'
+    ];
+    usPhoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
 
-  constructor(protected astuteClientService: AstuteClientService) {
-  }
-
-  ngOnInit() {
-    this.refreshData();
-  }
-
-  getSelectedRows() {
-    const selectedNodes = this.agGrid.api.getSelectedNodes();
-    if (selectedNodes.length) {
-      this.selected = selectedNodes.map( node => node.data )[0];
-    } else {
-      this.selected = null;
+    constructor(protected astuteClientService: AstuteClientService) {
     }
-  }
 
-  // inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inFax.value
-  addCustomer(customerId, name, billTo, add1, add2, city, state, zip, zip4, email, phone, fax, ref) {
-    let customerData = {
-      "customerId":customerId,
-      "customerName":name,
-      "billToDept":billTo,
-      "add1":add1,
-      "add2":add2,
-      "city":city,
-      "state":state,
-      "zip":zip,
-      "ziplast4":zip4,
-      "email":email,
-      "phone":phone,
-      "fax":fax
-    };
-    this.astuteClientService.createCustomer(customerData).then((data) => {
-      if (data) {
+    ngOnInit() {
         this.refreshData();
+    }
+
+    getSelectedRows() {
+        const selectedNodes = this.agGrid.api.getSelectedNodes();
+        if (selectedNodes.length) {
+            this.selected = selectedNodes.map(node => node.data)[0];
+        } else {
+            this.selected = null;
+        }
+    }
+
+    // inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inFax.value
+    addCustomer(customerId, name, billTo, add1, add2, city, state, zip, zip4, email, phone, fax, ref) {
+        let customerData = {
+            "customerId": customerId,
+            "customerName": name,
+            "billToDept": billTo,
+            "add1": add1,
+            "add2": add2,
+            "city": city,
+            "state": state,
+            "zip": zip,
+            "ziplast4": zip4,
+            "email": email,
+            "phone": phone,
+            "fax": fax
+        };
+        this.astuteClientService.createCustomer(customerData).then((data) => {
+            if (data) {
+                this.refreshData();
+                ref.close();
+            } else {
+                alert("Customer Creation Failed, Check Input Fields")
+            }
+        }, (reason) => {
+            alert("add customer failed for " + reason);
+        });
+    }
+
+
+    editCustomer(id, name, billTo, add1, add2, city, state, zip, zip4, email, phone, fax, ref) {
+        const customerData = {
+            "customerId": id,
+            "customerName": name,
+            "billToDept": billTo,
+            "add1": add1,
+            "add2": add2,
+            "city": city,
+            "state": state,
+            "zip": zip,
+            "ziplast4": zip4,
+            "email": email,
+            "phone": phone,
+            "fax": fax
+        };
+        this.astuteClientService.updateCustomer(id, customerData).then((data) => {
+            if (data) {
+                this.refreshData();
+                ref.close();
+            } else {
+                alert("Customer Updating Failed, Check Input Fields")
+            }
+        }, (reason) => {
+            alert("update customer failed for " + reason);
+        });
+    }
+
+    open(ref) {
+        this.getSelectedRows();
+        ref.open();
+    }
+
+    close(ref) {
         ref.close();
-      } else {
-        alert ("Customer Creation Failed, Check Input Fields")
-      }
-    },(reason) => {
-      alert("add customer failed for " + reason);
-    });
-  }
+    }
 
-
-
-  editCustomer(id, name, billTo, add1, add2, city, state, zip, zip4, email, phone, fax, ref) {
-    const customerData = {
-      "customerId": id,
-      "customerName":name,
-      "billToDept":billTo,
-      "add1":add1,
-      "add2":add2,
-      "city":city,
-      "state":state,
-      "zip":zip,
-      "ziplast4":zip4,
-      "email":email,
-      "phone":phone,
-      "fax":fax
-    };
-    this.astuteClientService.updateCustomer(id, customerData).then((data) => {
-      if (data) {
-        this.refreshData();
-        ref.close();
-      } else {
-        alert ("Customer Updating Failed, Check Input Fields")
-      }
-    },(reason) => {
-      alert("update customer failed for " + reason);
-    });
-  }
-
-  open(ref) {
-    this.getSelectedRows();
-    ref.open();
-  }
-
-  close(ref) {
-    ref.close();
-  }
-
-  refreshData () {
-    this.rowData = this.astuteClientService.getCustomers();
-    this.astuteClientService.getCustomers().then((data) => {
-      this.customers = data;
-    });
-  }
+    refreshData() {
+        this.rowData = this.astuteClientService.getCustomers();
+        this.astuteClientService.getCustomers().then((data) => {
+            this.customers = data;
+        });
+    }
 }

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

@@ -0,0 +1,48 @@
+/*body {*/
+/*margin: 0;*/
+/*padding: 0;*/
+/*background-color: #FAFAFA;*/
+/*font: 12pt "Tahoma";*/
+/*}*/
+/** {*/
+/*box-sizing: border-box;*/
+/*-moz-box-sizing: border-box;*/
+/*}*/
+.page {
+    width: 21cm;
+    min-height: 29.7cm;
+    padding: 2cm;
+    margin: 1cm auto;
+    border: 1px #D3D3D3 solid;
+    border-radius: 5px;
+    background: white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    font-size: 11pt;
+}
+/*.subpage {*/
+/*padding: 1cm;*/
+/*border: 5px red solid;*/
+/*height: 256mm;*/
+/*outline: 2cm #FFEAEA solid;*/
+/*}*/
+
+/*@page {*/
+/*size: A4;*/
+/*margin: 0;*/
+/*}*/
+/*@media print {*/
+/*html, body {*/
+/*width: 210mm;*/
+/*height: 297mm;*/
+/*}*/
+/*.page {*/
+/*margin: 0;*/
+/*border: initial;*/
+/*border-radius: initial;*/
+/*width: initial;*/
+/*min-height: initial;*/
+/*box-shadow: initial;*/
+/*background: initial;*/
+/*page-break-after: always;*/
+/*}*/
+/*}*/

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

@@ -0,0 +1,127 @@
+<div class="page" #doc>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-6">
+        <img src="AstuteLogo.gif" align="left" alt="Astute Engineering" height="75">
+      </div>
+      <div class="col-6">
+        <p class="h1 text-right align-bottom">INVOICE</p>
+      </div>
+    </div>
+    <br/>
+    <div class="row">
+      <div class="col-4">
+        <p>To,</p>
+        <p>{{name}}</p>
+        <p>{{email}}</p>
+        <p>{{address}}</p>
+      </div>
+      <div class="col-5 text-right">
+        <p>Purchase Order No.:</p>
+        <p>Contract No.:</p>
+        <p>Invoice No.:</p>
+        <p>Invoice Date:</p>
+      </div>
+      <div class="col text-left">
+        <p>{{poNum}}</p>
+        <p>{{coNum}}</p>
+        <p>{{inNum}}</p>
+        <p>{{inDate}}</p>
+      </div>
+    </div>
+    <br/>
+    <div class="row">
+      <table class="table table-sm table-bordered table-light">
+        <thead class="thead-light">
+        <tr>
+          <th scope="col" style="text-align: center;">No.</th>
+          <th scope="col">Description</th>
+          <th scope="col" style="text-align: center;">Hourly Rate</th>
+          <th scope="col" style="text-align: center;">Hours Expended</th>
+          <th scope="col" style="text-align: center;">Invoice Amount</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let inDet of inDetails">
+          <th scope="row" style="text-align: center;">{{inDet.lineItemNum}}</th>
+          <td>{{inDet.desc}}</td>
+          <td style="text-align: right;">${{inDet.anount}}.00</td>
+          <td style="text-align: center;">-</td>
+          <td style="text-align: right;">${{inDet.anount}}.00</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <br/>
+    <div class="row">
+      <table>
+        <tbody>
+        <tr style="height: 18px;">
+          <td style="width: 251.5px; text-align: right; height: 18px;">Original Contract Amount</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{ogCoAmt}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;">&nbsp;</td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">&nbsp;</td>
+        </tr>
+        <tr style="height: 17px;">
+          <td style="width: 251.5px; text-align: right; height: 17px;">Net Changes by Change Orders</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 17px;">{{netChanges}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;">&nbsp;</td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">&nbsp;</td>
+        </tr>
+        <tr style="height: 18px;">
+          <td style="width: 251.5px; text-align: right; height: 18px;">Total Contract Amount</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{totCoAmt}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;">&nbsp;</td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">&nbsp;</td>
+        </tr>
+        <tr style="height: 18px;">
+          <td style="width: 251.5px; text-align: right; height: 18px;">Previously Billed</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{prevBill}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;">&nbsp;</td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">&nbsp;</td>
+        </tr>
+        <tr style="height: 18px;">
+          <td style="width: 251.5px; text-align: right; height: 18px;">Amount This Invoice</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{inAmt}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;">&nbsp;</td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">&nbsp;</td>
+        </tr>
+        <tr style="height: 18px;">
+          <td style="width: 251.5px; text-align: right; height: 18px;">Balance to be Billed</td>
+          <td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{balToBeBill}}</td>
+          <td style="width: 305px; text-align: right; height: 18px;"><b>Total Due This Invoice</b></td>
+          <td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;">{{finTot}}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <br/>
+    <div class="row">
+      <p>Notes:</p>
+      <ol>
+        {{notes}}
+      </ol>
+    </div>
+    <div class="row">
+      <p>{{cert}}</p>
+    </div>
+    <div class="row">
+      <div class="col-8"> </div>
+      <div class="col-4"><hr></div>
+    </div>
+  </div>
+</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>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InvoiceGenComponent } from './invoice-gen.component';
+
+describe('InvoiceGenComponent', () => {
+  let component: InvoiceGenComponent;
+  let fixture: ComponentFixture<InvoiceGenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InvoiceGenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InvoiceGenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,137 @@
+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;
+
+@Component({
+    selector: 'app-invoice-gen',
+    templateUrl: './invoice-gen.component.html',
+    styleUrls: ['./invoice-gen.component.css']
+})
+export class InvoiceGenComponent implements OnInit {
+    @ViewChild('doc') invoiceHTML: ElementRef;
+
+    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());
+        console.log("in invoice gen comp")
+        this.astuteClientService.getInvoiceGen("NVCC-01_1712_21").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;
+        });
+    }
+
+
+    ngOnInit() {
+    }
+
+    downloadPDF() {
+        // new html2pdf(document.getElementById("doc"));
+
+        const A4_width = 425; // pixels
+        const A4_height = 550; // pixels
+        const ratio = 1;
+        //
+        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) => {
+                    // 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);
+    }
+
+
+    // 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");
+    //  });
+
+
+}

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

@@ -1,383 +1,433 @@
 <app-nav-bar [invoiceActive]="true"></app-nav-bar>
 <h1 align="center">Invoices</h1>
 <div class="container-fluid">
-  <div class="row">
-    <div class="col-12">
-      <ag-grid-angular
-        #agGrid
-        style="height: 500px;"
-        class="ag-theme-balham"
-        [gridOptions]="gridOptions"
-        [enableSorting]="true"
-        [enableFilter]="true"
-        [rowData]="source"
-        [columnDefs]="columnDefs"
-        rowSelection="single"
-        rowDeselection="true"
-      ></ag-grid-angular>
+    <div class="row">
+        <div class="col-12">
+            <ag-grid-angular
+                    #agGrid
+                    style="height: 500px;"
+                    class="ag-theme-balham"
+                    [gridOptions]="gridOptions"
+                    [enableSorting]="true"
+                    [enableFilter]="true"
+                    [rowData]="source"
+                    [columnDefs]="columnDefs"
+                    rowSelection="single"
+                    rowDeselection="true"
+            ></ag-grid-angular>
+        </div>
     </div>
-  </div>
-  <div class="row justify-content-center mt-2">
-    <div class="col-2">
-      <button class="btn btn-light" style="width: 100%" (click)="open(edit)" [disabled]="!chosenInv">Print</button>
+    <div class="row justify-content-center mt-2">
+        <div class="col-2">
+            <button class="btn btn-light" style="width: 100%" (click)="assignActity()" [disabled]="!chosenInv">
+                Print
+            </button>
+        </div>
+        <div class="col-2">
+            <button class="btn btn-primary" style="width: 100%" (click)="submitInvoice(chosenInv.invoiceNumber)" [disabled]="!chosenInv">
+                Submit
+            </button>
+        </div>
+        <div class="col-2">
+            <button class="btn btn-secondary" style="width: 100%" (click)="open(new)" [disabled]="!chosenInv">
+                Payment
+                Received
+            </button>
+        </div>
+        <div class="col-2">
+            <button class="btn btn-warning" style="width: 100%" (click)="voidInvoice(chosenInv.invoiceNumber)" [disabled]="!chosenInv">
+                Void
+            </button>
+        </div>
+        <div class="col-2">
+            <button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!chosenInv">
+                Edit
+            </button>
+        </div>
+        <div class="col-2">
+            <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
+        </div>
     </div>
-    <div class="col-2">
-      <button class="btn btn-primary" style="width: 100%" (click)="submitInvoice(chosenInv.invoiceNumber)"
-              [disabled]="!chosenInv">Submit
-      </button>
-    </div>
-    <div class="col-2">
-      <button class="btn btn-secondary" style="width: 100%" (click)="open(new)" [disabled]="!chosenInv">Payment
-        Received
-      </button>
-    </div>
-    <div class="col-2">
-      <button class="btn btn-warning" style="width: 100%" (click)="voidInvoice(chosenInv.invoiceNumber)"
-              [disabled]="!chosenInv">Void
-      </button>
-    </div>
-    <div class="col-2">
-      <button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!chosenInv">Edit</button>
-    </div>
-    <div class="col-2">
-      <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
-    </div>
-  </div>
 </div>
 
-<!--<div class="container-fluid">-->
-<!--<div class="row">-->
-<!--<table class="table table-striped">-->
-<!--<thead>-->
-<!--<tr>-->
-<!--<th scope="col" *ngFor="let col of columns">{{col}}</th>-->
-<!--</tr>-->
-<!--</thead>-->
-<!--<tbody>-->
-<!--&lt;!&ndash;'Actions',&ndash;&gt;-->
-<!--&lt;!&ndash;'Invoice Number',&ndash;&gt;-->
-<!--&lt;!&ndash;'Invoice Date',&ndash;&gt;-->
-<!--&lt;!&ndash;'Purchase Order Number',&ndash;&gt;-->
-<!--&lt;!&ndash;'Change Order Number',&ndash;&gt;-->
-<!--&lt;!&ndash;'Payment Status',&ndash;&gt;-->
-<!--&lt;!&ndash;'Bill Amount',&ndash;&gt;-->
-<!--<tr *ngFor="let invoice of source; let i = index">-->
-<!--<th scope="row">{{i + 1}}</th>-->
-<!--<td>-->
-<!--<button class="btn btn-sm btn-outline-warning" (click)="open(edit, null, i)">Edit</button>-->
-<!--<button class="btn btn-sm btn-outline-primary" (click)="assignActity()">Print</button>-->
-<!--<button class="btn btn-sm btn-outline-primary" (click)="assignActity()">Submit</button>-->
-<!--</td>-->
-<!--<td>{{invoice.invoiceNumber}}</td>-->
-<!--<td>{{invoice.invoiceDate}}</td>-->
-<!--<td>{{invoice.poNum}}</td>-->
-<!--<td>{{invoice.changeOrderNum}}</td>-->
-<!--<td>{{invoice.pmtStatus ? "Paid" : "Not Paid"}}</td>-->
-<!--<td><span>$</span>{{invoice.billAmt}}</td>-->
-<!--</tr>-->
-<!--</tbody>-->
-<!--</table>-->
-<!--</div>-->
-
-<!--<div class="row">-->
-<!--&lt;!&ndash;<div class="col-xs-6">&ndash;&gt;-->
-<!--<div class="input-group">-->
-<!--<div class="input-group-prepend">-->
-<!--<span class="input-group-text">Customer</span>-->
-<!--</div>-->
-<!--<select class="custom-select" (change)="dropdownChange(customerSelec.value)" #customerSelec>-->
-<!--<option>Choose Customer...</option>-->
-<!--<option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}</option>-->
-<!--</select>-->
-<!--<div class="input-group-prepend">-->
-<!--<span class="input-group-text">Purchase Order Number</span>-->
-<!--</div>-->
-<!--<select class="custom-select" #poSelec>-->
-<!--<option *ngFor="let po of getCorrespondingPos(); let i = index;" [value]="i">{{po.ponum}}</option>-->
-<!--</select>-->
-<!--<div class="input-group-append">-->
-<!--<button class="btn btn-outline-success" type="button" [disabled]="!(customerSelec.value && poSelec.value)"-->
-<!--(click)="open(new, poSelec.options[poSelec.selectedIndex].value)">Add-->
-<!--</button>-->
-<!--</div>-->
-<!--</div>-->
-<!--&lt;!&ndash;</div>&ndash;&gt;-->
-<!--</div>-->
-<!--</div>-->
-
 <!--MODAL: edit Invoice-->
 <app-modal-form [title]="'Edit Invoice'" #edit>
-  <!--General-->
-  <div class="modal-body" *ngIf="chosenInv">
-    <p class="h4 text-right">General</p>
-    <hr>
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Invoice Number*</span>
-      </div>
-      <input type="text" class="form-control" #inNumIn [value]="chosenInv.invoiceNumber">
-      <div class="input-group-prepend">
-        <span class="input-group-text">PO Number*</span>
-      </div>
-      <input type="text" class="form-control" [disabled]="true" #poNumIn [value]="chosenInv.poNum">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Change Order Num</span>
-      </div>
-      <input type="text" class="form-control" #coNumIn [value]="chosenInv.changeOrderNum">
+    <!--General-->
+    <div class="modal-body" *ngIf="chosenInv">
+        <p class="h4 text-right">General</p>
+        <hr>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Invoice Number*</span>
+            </div>
+            <input type="text" class="form-control" #inNumIn [value]="chosenInv.invoiceNumber">
+            <div class="input-group-prepend">
+                <span class="input-group-text">PO Number*</span>
+            </div>
+            <input type="text" class="form-control" [disabled]="true" #poNumIn [value]="chosenInv.poNum">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Change Order Num</span>
+            </div>
+            <input type="text" class="form-control" #coNumIn [value]="chosenInv.changeOrderNum">
+        </div>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Payment Status*</span>
+            </div>
+            <select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>
+                <option value=0>Not Paid</option>
+                <option value=1>Paid</option>
+            </select>
+        </div>
     </div>
 
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Payment Status*</span>
-      </div>
-      <select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>
-        <option value=0>Not Paid</option>
-        <option value=1>Paid</option>
-      </select>
-    </div>
-  </div>
+    <!--Detials-->
+    <div class="modal-body" *ngIf="chosenInv">
+        <p class="h4 text-right">Detail</p>
 
-  <!--Detials-->
-  <div class="modal-body" *ngIf="chosenInv">
-    <p class="h4 text-right">Detail</p>
-
-    <table class="table">
-      <thead>
-      <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: 100px">Fee</th>
-        <th scope="col" style="width: 100px">Quantity</th>
-      </tr>
-      </thead>
-      <!--<tbody>-->
-      <tbody *ngFor="let inDet of selectedInDetails; let i = index">
-      <tr class="p-0 m-0">
-        <!--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" (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></td>
-        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty" (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty></td>
-      </tr>
-      <tr class="p-0 m-0">
-        <th class="align-content-center">
-          <p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>
-        </th>
-        <td colspan="4">
-          <div class="progress" style="height: 25px;">
-            <div class="progress-bar bg-success" role="progressbar"
-                 [ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">${{fee.value * qty.value}}
-            </div>
-            <div class="progress-bar bg-danger" role="progressbar"
-                 [ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">${{inDet.remainingQty - (fee.value * qty.value)}}
-            </div>
-          </div>
-        </td>
-      </tr>
-      </tbody>
-      <tbody>
-      <tr>
-        <td colspan="5">
-          <select class="custom-select"
-                  (change)="pushOntoSelectedDetail(inNumIn.value, newInDetails.length + 1, selectedPODetails[poDetSelec.value].lineItemNo,
+        <table class="table">
+            <thead>
+            <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: 100px">Fee</th>
+                <th scope="col" style="width: 100px">Quantity</th>
+            </tr>
+            </thead>
+            <!--<tbody>-->
+            <tbody *ngFor="let inDet of selectedInDetails; let i = index">
+            <tr class="p-0 m-0">
+                <!--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"
+                                           (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>
+                </td>
+                <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
+                                           (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
+                </td>
+            </tr>
+            <tr class="p-0 m-0">
+                <th class="align-content-center">
+                    <p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>
+                </th>
+                <td colspan="4">
+                    <div class="progress" style="height: 25px;">
+                        <div class="progress-bar bg-success" role="progressbar"
+                             [ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">
+                            ${{fee.value * qty.value}}
+                        </div>
+                        <div class="progress-bar bg-danger" role="progressbar"
+                             [ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">
+                            ${{inDet.remainingQty - (fee.value * qty.value)}}
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+            <tbody>
+            <tr>
+                <td colspan="5">
+                    <select class="custom-select"
+                            (change)="pushOntoSelectedDetail(inNumIn.value, newInDetails.length + 1, selectedPODetails[poDetSelec.value].lineItemNo,
                   selectedPODetails[poDetSelec.value].feeTypeId, selectedPODetails[poDetSelec.value].serviceTypeId,
                   selectedPODetails[poDetSelec.value].serviceDesc, 1, 0, selectedPODetails[poDetSelec.value].remainingQty)"
-                  [disabled]="!selectedPODetails.length"
-                  #poDetSelec>
-            <option>Choose PO Detail...</option>
-            <option *ngFor="let po of selectedPODetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
-          </select>
-        </td>
-      </tr>
-      </tbody>
-    </table>
+                            [disabled]="!selectedPODetails.length"
+                            #poDetSelec>
+                        <option>Choose PO Detail...</option>
+                        <option *ngFor="let po of selectedPODetails; let i = index;" [value]="i">{{po.serviceDesc}}
+                        </option>
+                    </select>
+                </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>
-
-  <!--Footer-->
-  <div class="modal-body" *ngIf="chosenInv">
-    <p class="h4 text-right">Footer</p>
-    <hr>
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Special Notes*</span>
-      </div>
-      <textarea class="form-control" [value]="chosenInv.specialNotes" #notesIn></textarea>
+        <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>
 
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Certification*</span>
-      </div>
-      <textarea class="form-control" [value]="chosenInv.certification" #certIn></textarea>
+    <!--Footer-->
+    <div class="modal-body" *ngIf="chosenInv">
+        <p class="h4 text-right">Footer</p>
+        <hr>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Special Notes*</span>
+            </div>
+            <textarea class="form-control" [value]="chosenInv.specialNotes" #notesIn></textarea>
+        </div>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Certification*</span>
+            </div>
+            <textarea class="form-control" [value]="chosenInv.certification" #certIn></textarea>
+        </div>
     </div>
-  </div>
 
-  <!--Select Invoice Message-->
-  <div class="modal-body" *ngIf="!chosenInv">
-    <p>Choose an Invoice First!</p>
-  </div>
+    <!--Select Invoice Message-->
+    <div class="modal-body" *ngIf="!chosenInv">
+        <p>Choose an Invoice First!</p>
+    </div>
 
-  <div class="modal-footer">
-    <button type="button" class="btn btn-success"
-            (click)="editInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value)"
-            [disabled]="!(inNumIn.value && poNumIn.value && pmtStatusIn.value && notesIn.value && certIn.value)">Confirm
-    </button>
-    <button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
-  </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-success"
+                (click)="editInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value)"
+                [disabled]="!(inNumIn.value && poNumIn.value && pmtStatusIn.value && notesIn.value && certIn.value)">
+            Confirm
+        </button>
+        <button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
+    </div>
 </app-modal-form>
 
 <!--MODAL: new invoice-->
 <app-modal-form [title]="'New Invoice'" #new>
-  <div class="modal-body">
-    <p class="h4 text-right">General</p>
-    <hr>
+    <div class="modal-body">
+        <p class="h4 text-right">General</p>
+        <hr>
 
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Customer</span>
-      </div>
-      <select class="custom-select" (change)="customerDropdownChange(customerSelec.value)" #customerSelec>
-        <option>Choose Customer...</option>
-        <option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}</option>
-      </select>
-      <div class="input-group-prepend">
-        <span class="input-group-text">SO Number*</span>
-      </div>
-      <select class="custom-select" (change)="poDropdownChange(poNumIn.value)" [disabled]="!correspondingPos.length" #poNumIn>
-        <option>Choose Sales Order...</option>
-        <option *ngFor="let po of correspondingPos;" [value]="po.ponum">{{po.ponum}}</option>
-      </select>
+        <table class="table table-borderless table-sm">
+            <tbody>
+                <tr>
+                    <td style="width: 1%">
+                        <span class="input-group-text">Customer </span>
+                    </td>
+                    <td>
+                        <select class="custom-select" (change)="customerDropdownChange(customerSelec.value)" #customerSelec>
+                            <option [value]="-1">Choose Customer...</option>
+                            <option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}
+                            </option>
+                        </select>
+                    </td>
+                    <td style="width: 5%"></td>
+                    <td style="width: 10%">
+                        <span class="input-group-text">SO Number*</span>
+                    </td>
+                    <td>
+                        <select class="custom-select" (change)="poDropdownChange(poNumIn.value)"
+                                [disabled]="!correspondingPos.length" #poNumIn>
+                            <option>Choose Sales Order...</option>
+                            <option *ngFor="let po of correspondingPos;" [value]="po.ponum">{{po.ponum}}</option>
+                        </select>
+                    </td>
+                </tr>
+                <!--add1, add2, billToDept, city, customerId, customerName, email, fax, phone, state, zip, ziplast4-->
+                <tr>
+                    <td colspan="2">
+                        <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                            To, {{customers[customerSelec.value].billToDept}}
+                        </p>
+                    </td>
+                    <td></td>
+                    <td>
+                        <span class="input-group-text">Invoice Number*</span>
+                    </td>
+                    <td>
+                        <input type="text" class="form-control" [value]="generatedInvoiceNumber" #inNumIn>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                            {{customers[customerSelec.value].add1}} {{customers[customerSelec.value].add2}}
+                        </p>
+                    </td>
+                    <td></td>
+                    <td>
+                        <span class="input-group-text">Change Order Num</span>
+                    </td>
+                    <td>
+                        <input type="text" class="form-control" #coNumIn>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                            {{customers[customerSelec.value].city}} {{customers[customerSelec.value].state}} {{customers[customerSelec.value].zip}}-{{customers[customerSelec.value].ziplast4}}
+                        </p>
+                    </td>
+                    <td></td>
+                    <td>
+                        <span class="input-group-text">Payment Status*</span>
+                    </td>
+                    <td>
+                        <select class="custom-select" #pmtStatusIn>
+                            <option value=0>Not Paid</option>
+                            <option value=1>Paid</option>
+                        </select>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Invoice Number*</span>
-      </div>
-      <input type="text" class="form-control" [value]="generatedInvoiceNumber" #inNumIn disabled>
-      <div class="input-group-prepend">
-        <span class="input-group-text">Change Order Num</span>
-      </div>
-      <input type="text" class="form-control" #coNumIn>
-    </div>
-
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Payment Status*</span>
-      </div>
-      <select class="custom-select" #pmtStatusIn>
-        <option value=0>Not Paid</option>
-        <option value=1>Paid</option>
-      </select>
-    </div>
-  </div>
-
-  <!--Detail-->
-  <div class="modal-body">
-    <p class="h4 text-right">Detail</p>
-    <table class="table">
-      <thead>
-      <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: 100px">Fee</th>
-        <th scope="col" style="width: 100px">Quantity</th>
-      </tr>
-      </thead>
-      <!--<tbody>-->
-      <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 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" (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></td>
-        <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty" (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty></td>
-      </tr>
-      <tr class="p-0 m-0">
-        <th class="align-content-center">
-          <p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>
-        </th>
-        <td colspan="4">
-          <div class="progress" style="height: 25px;">
-            <div class="progress-bar bg-success" role="progressbar"
-                 [ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">${{fee.value * qty.value}}
-            </div>
-            <div class="progress-bar bg-danger" role="progressbar"
-                 [ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">${{inDet.remainingQty - (fee.value * qty.value)}}
-            </div>
-          </div>
-        </td>
-      </tr>
-      </tbody>
-      <tbody>
-      <tr>
-        <td colspan="5">
-          <select class="custom-select"
-                  (change)="pushOntoNewDetail(inNumIn.value, newInDetails.length + 1, poDetails[poDetSelec.value].lineItemNo,
+    <!--Detail-->
+    <div class="modal-body">
+        <p class="h4 text-right">Detail</p>
+        <table class="table">
+            <thead>
+            <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: 100px">Fee</th>
+                <th scope="col" style="width: 100px">Quantity</th>
+            </tr>
+            </thead>
+            <!--<tbody>-->
+            <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 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"
+                                           (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>
+                </td>
+                <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
+                                           (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
+                </td>
+            </tr>
+            <tr class="p-0 m-0">
+                <th class="align-content-center">
+                    <p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>
+                </th>
+                <td colspan="4">
+                    <div class="progress" style="height: 25px;">
+                        <div class="progress-bar bg-success" role="progressbar"
+                             [ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">
+                            ${{fee.value * qty.value}}
+                        </div>
+                        <div class="progress-bar bg-danger" role="progressbar"
+                             [ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">
+                            ${{inDet.remainingQty - (fee.value * qty.value)}}
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+            <tbody>
+            <tr>
+                <td colspan="5">
+                    <select class="custom-select"
+                            (change)="pushOntoNewDetail(inNumIn.value, newInDetails.length + 1, poDetails[poDetSelec.value].lineItemNo,
                   poDetails[poDetSelec.value].feeTypeId, poDetails[poDetSelec.value].serviceTypeId,
                   poDetails[poDetSelec.value].serviceDesc, 1, 0, poDetails[poDetSelec.value].remainingQty)"
-                  [disabled]="!poDetails.length"
-                  #poDetSelec>
-            <option>Choose PO Detail...</option>
-            <option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
-          </select>
-        </td>
-      </tr>
-      </tbody>
-    </table>
+                            [disabled]="!poDetails.length"
+                            #poDetSelec>
+                        <option>Choose PO Detail...</option>
+                        <option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
+                    </select>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+
+        <table class="table table-borderless table-sm">
+            <tbody>
+            <tr>
+                <td style="width: 40%" class="text-right"><b>Original Contract Amount</b></td>
+                <td style="width: 10%">
+                    <div *ngIf="chosenPo">{{chosenPo.contractAmt}}</div>
+                </td>
+                <td style="width: 30%" class="text-right">&nbsp;</td>
+                <td style="width: 20%" >&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Net Changes by Change Orders</b></td>
+                <td>
+                    <div *ngIf="chosenPo">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="chosenPo">{{chosenPo.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="chosenPo">{{chosenPo.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="chosenPo">{{chosenPo.contractAmt - chosenPo.previouslyBilledAmount - newBillAmt}}</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>{{newBillAmt}}</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]="newBillAmt" #billAmtIn disabled>
-      <div class="input-group-append">
-        <span class="input-group-text">.00</span>
-      </div>
-    </div>
-  </div>
 
-  <div class="modal-body">
-    <p class="h4 text-right">Footer</p>
-    <hr>
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Special Notes*</span>
-      </div>
-      <textarea class="form-control" #notesIn></textarea>
     </div>
 
-    <div class="input-group mb-3">
-      <div class="input-group-prepend">
-        <span class="input-group-text">Certification*</span>
-      </div>
-      <textarea class="form-control"
-                [value]="'Certified that the above items and rates are in accordance with the contractual agreement as verified by the undersigned'"
-                #certIn></textarea>
-    </div>
-  </div>
+    <div class="modal-body">
+        <p class="h4 text-right">Footer</p>
+        <hr>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Special Notes*</span>
+            </div>
+            <textarea class="form-control" #notesIn></textarea>
+        </div>
 
-  <div class="modal-footer">
-    <button type="button" class="btn btn-success"
-            (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value,  billAmtIn.value, notesIn.value, certIn.value, 1, new)"
-            [disabled]="!(inNumIn.value && poNumIn.value && pmtStatusIn.value && billAmtIn.value && notesIn.value && certIn.value)">
-      Confirm
-    </button>
-    <button type="button" class="btn btn-danger" (click)="close(new)">Cancel</button>
-  </div>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Certification*</span>
+            </div>
+            <textarea class="form-control"
+                      [value]="'Certified that the above items and rates are in accordance with the contractual agreement as verified by the undersigned'"
+                      #certIn>
+            </textarea>
+        </div>
+    </div>
+
+    <div class="modal-footer">
+        <button type="button" class="btn btn-success"
+                (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value, 1, new)"
+                [disabled]="!(inNumIn.value && poNumIn.value && pmtStatusIn.value && newBillAmt && notesIn.value && certIn.value)">
+            Confirm
+        </button>
+        <button type="button" class="btn btn-danger" (click)="close(new)">Cancel</button>
+    </div>
 </app-modal-form>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
+declare var $: any;
 
 @Component({
   selector: 'app-invoice',
@@ -13,6 +14,7 @@ export class InvoiceComponent implements OnInit {
   source;
   customers;
   pos = [];
+  chosenPo;
   correspondingPos = [];
   generatedInvoiceNumber = '';
   feeTypes = ['Fixed Fee', 'Hourly'];
@@ -26,7 +28,7 @@ export class InvoiceComponent implements OnInit {
     {headerName: 'Bll Amount', field: 'billAmt'}
   ];
   newInDetails = [];
-  newBillAmt;
+  newBillAmt = 0;
   selectedInDetails = [];
   selectedBillAmt;
   poDetails = [];
@@ -82,6 +84,11 @@ export class InvoiceComponent implements OnInit {
   }
 
   poDropdownChange(ponum) {
+    this.pos.forEach((po) => {
+      if (po.ponum === ponum) {
+        this.chosenPo = po;
+      }
+    })
     this.astuteClientService.getPODetail(ponum).then((data) => {
       if (data) {
         // fee
@@ -93,7 +100,6 @@ export class InvoiceComponent implements OnInit {
         // serviceDesc
         // serviceTypeId
         this.poDetails = data;
-        console.log(data);
       } else {
         alert("get PO detail failed!");
       }
@@ -101,7 +107,6 @@ export class InvoiceComponent implements OnInit {
     this.astuteClientService.generateInvoiceNumber(ponum).then((data) => {
       if (data) {
         this.generatedInvoiceNumber = data;
-        console.log (this.generatedInvoiceNumber);
       } else {
         alert('gen inv num failed!');
       }
@@ -135,6 +140,8 @@ export class InvoiceComponent implements OnInit {
     });
   }
 
+
+
   onSelectedCellChange(row: number, col: string, value) {
     this.selectedInDetails[row][col] = value;
     console.log(this.selectedInDetails);
@@ -182,6 +189,9 @@ export class InvoiceComponent implements OnInit {
 
   assignActity(): void {
     window.open('/invoice-gen');
+    $(
+
+    )
   }
 
   getSelectedRows() {
@@ -191,7 +201,6 @@ export class InvoiceComponent implements OnInit {
       this.astuteClientService.getPODetail(this.chosenInv.ponum).then((poDetails) => {
         if (poDetails) {
           this.selectedPODetails = poDetails;
-          console.log(this.chosenInv.invoiceNumber);
           this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then ((invoiceDetails) => {
             if (invoiceDetails) {
               this.selectedInDetails = invoiceDetails;
@@ -368,7 +377,7 @@ export class InvoiceComponent implements OnInit {
 
   setCorrespondingPos () {
     this.correspondingPos = this.pos.filter((po, index, array) => {
-      return po.customerId == this.chosenCustomerID
+      return po.customerId === this.chosenCustomerID;
     });
   }
 }

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

@@ -28,52 +28,41 @@
 <!--MODAL: new po-->
 <app-modal-form [title]="'New Sales Order'" #new>
   <div class="modal-body">
-    <form>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Astute Project Number</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" placeholder="Project Number" #projNum>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Customer Name</label>
-        <div class="col-sm-10">
-          <select class="form-control" #customerid>
-            <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
-          </select>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">SO Title</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" placeholder="SO Title" #title>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">SO Number</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" placeholder="SO Number" maxlength="40" #ponum>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">SO Date</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" [value]="getCurrDate()" #podate>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Contract Number</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" placeholder="Contract Number" #contractnum>
-        </div>
-      </div>
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Contract Amount</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" placeholder="Contract Amount" #contractamt>
-        </div>
-      </div>
-    </form>
+    <p class="h4 text-right">General</p>
+    <hr>
+    <table class="table table-borderless table-sm">
+      <tbody>
+        <tr>
+          <td><span class="input-group-text">Astute Proj. No.</span></td>
+          <td colspan="3"><input type="text" class="form-control" placeholder="Internal Project Number" #projNum></td>
+        </tr>
+        <tr>
+          <td><span class="input-group-text">Customer</span></td>
+          <td colspan="3">
+            <select class="form-control" #customerid>
+              <option [value]="-1">Choose Customer...</option>
+              <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td><span class="input-group-text">SO Title</span></td>
+          <td colspan="3"><input type="text" class="form-control" placeholder="Distinctive title, will be use to identify later" #title></td>
+        </tr>
+        <tr>
+          <td style="width: 20%"><span class="input-group-text">SO Number</span></td>
+          <td style="width: 30%"><input type="text" class="form-control" placeholder="Internal SO Number" maxlength="40" #ponum></td>
+          <td style="width: 20%"><span class="input-group-text">SO Date</span></td>
+          <td style="width: 30%"><input type="date" class="form-control" [value]="getCurrDate()" (change)="printValue(podate.value)" #podate></td>
+        </tr>
+        <tr>
+          <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>
+        </tr>
+      </tbody>
+    </table>
   </div>
 
   <!--fee-->
@@ -169,7 +158,7 @@
 
   <div class="modal-footer">
     <button class="btn btn-success" type="button"
-            [disabled]="!(ponum.value && podate.value && customerid.value && contractnum.value && contractamt.value)"
+            [disabled]="!(ponum.value && podate.value && customerid.value >= 0 && contractnum.value && contractamt.value)"
             (click)="addPo(projNum.value, ponum.value, podate.value, customerid.value, contractnum.value, contractamt.value, title.value, new)"
     >
       Add
@@ -184,55 +173,88 @@
     <div class="modal-body">
       <p class="h4 text-right">General</p>
       <hr>
-      <form>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Astute Project Number</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" placeholder="Project Number" [value]="selected.astuteProjectNumber" #projNum>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Customer Name</label>
-          <div class="col-sm-10">
-            <select class="form-control" [value]="selected.customerId" #customerid disabled>
-              <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}
-              </option>
+      <table class="table table-borderless table-sm">
+        <tbody>
+        <tr>
+          <td><span class="input-group-text">Astute Proj. No.</span></td>
+          <td colspan="3"><input type="text" class="form-control" placeholder="Project Number" [value]="selected.astuteProjectNumber" #projNum></td>
+        </tr>
+        <tr>
+          <td><span class="input-group-text">Customer</span></td>
+          <td colspan="3">
+            <select class="form-control" [value]="+selected.customerId" disabled="true" #customerid>
+              <option [value]="-1">No Customer</option>
+              <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
             </select>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">SO Title</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" [value]="selected.title" #title>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">SO Number</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" placeholder="SO Number" [value]="selected.ponum" #ponum disabled>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">SO Date</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" [value]="selected.podate" #podate>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Contract Number</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum"
-                   #contractnum>
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Contract Amount</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" placeholder="Contract Amount" [value]="selected.contractAmt"
-                   #contractamt>
-          </div>
-        </div>
-      </form>
+          </td>
+        </tr>
+        <tr>
+          <td><span class="input-group-text">SO Title</span></td>
+          <td colspan="3"><input type="text" class="form-control" placeholder="SO Title" [value]="selected.title" #title></td>
+        </tr>
+        <tr>
+          <td style="width: 20%"><span class="input-group-text">SO Number</span></td>
+          <td style="width: 30%"><input type="text" class="form-control" placeholder="SO Number" maxlength="40" [value]="selected.ponum" #ponum disabled></td>
+          <td style="width: 20%"><span class="input-group-text">SO Date</span></td>
+          <td style="width: 30%"><input type="date" class="form-control" [value]="selected.podate" #podate></td>
+        </tr>
+        <tr>
+          <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>
+        </tr>
+        </tbody>
+      </table>
+      <!--<form>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">Astute Project Number</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="text" class="form-control" placeholder="Project Number" [value]="selected.astuteProjectNumber" #projNum>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">Customer Name</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<select class="form-control" [value]="selected.customerId" #customerid disabled>-->
+              <!--<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}-->
+              <!--</option>-->
+            <!--</select>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">SO Title</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="text" class="form-control" [value]="selected.title" #title>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">SO Number</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="text" class="form-control" placeholder="SO Number" [value]="selected.ponum" #ponum disabled>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">SO Date</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="date" class="form-control" [value]="selected.podate" #podate>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">Contract Number</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum"-->
+                   <!--#contractnum>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="form-group row">-->
+          <!--<label class="col-sm-2 col-form-label">Contract Amount</label>-->
+          <!--<div class="col-sm-10">-->
+            <!--<input type="text" class="form-control" placeholder="Contract Amount" [value]="selected.contractAmt"-->
+                   <!--#contractamt>-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</form>-->
     </div>
 
 
@@ -338,7 +360,7 @@
   </div>
   <div *ngIf="!selected">
     <div class="modal-body">
-      Choose a Purchase Order Fisrt!
+      Choose a Sales Order First!
     </div>
 
     <div class="modal-footer">

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

@@ -32,17 +32,21 @@ export class SalesOrderComponent implements OnInit {
     this.refreshData();
   }
 
+  printValue(val) {
+      console.log(val);
+  }
+
   addPo(projNum, ponum, podate, customerid, contractnum, contractamt, title, ref ) {
     const poData = {
       "astuteProjectNumber": projNum,
       "poNum": ponum,
-      "PODate": podate,
+      "podate": podate,
       "customerId": customerid,
       "contractNum": contractnum,
       "contractAmt": contractamt,
       "title": title,
     }
-    console.log (poData.PODate);
+    console.log (poData);
     this.astuteClientService.createPO(poData).then((data) => {
       if (data) {
         this.refreshData();
@@ -76,7 +80,7 @@ export class SalesOrderComponent implements OnInit {
     const poData = {
       "astuteProjectNumber": projNum,
       "poNum": ponum,
-      "PODate": podate,
+      "podate": podate,
       "contractNum": contractnum,
       "contractAmt": contractamt,
       "title": title,

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

@@ -89,7 +89,7 @@ export class AstuteClientService {
   }
 
   public getPODetail(ponum): Promise<any> {
-    console.log("*** In getPOs()");
+    console.log("*** In getPODetails()");
     const url = `${this.PODetailUrl}?PONum=${ponum}`;
     console.log(url);
     return this.http.get(url)
@@ -142,7 +142,7 @@ export class AstuteClientService {
 
   // /{InvoiceNumber}/void
   public submitInvoice (invoiceNumber) {
-    console.log("*** In submitInvoice()");
+    console.log("*** In submitInvoice(), invoiceNumber" + invoiceNumber);
     const url = `${this.invoiceUrl}/${invoiceNumber}/submit`;
     return this.http.put(url, {})
       .toPromise()
@@ -153,7 +153,7 @@ export class AstuteClientService {
   }
 
   public voidInvoice (invoiceNumber) {
-    console.log("*** In voidInvoice()");
+    console.log("*** In voidInvoice(), invoiceNumber" + invoiceNumber);
     const url = `${this.invoiceUrl}/${invoiceNumber}/void`;
     return this.http.put(url, {})
       .toPromise()

AstuteClient2/src/index.html

@@ -8,6 +8,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="./assets/jspdf/dist/jspdf.min.js"></script>
+  <script src="./assets/html2pdf.js/dist/html2pdf.js"></script>
+  <script src="./assets/html2canvas/dist/html2canvas.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+          integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+          crossorigin="anonymous"></script>
+
+
 </head>
 <body>
   <app-root></app-root>