Loads of changes in this one:

- customer and sales order are updated with new workflow for details
 - invoice has yet to be updated to the new workflow
 - added a settings tab and put service types and logout on there
 - updated homepage and nav-bar accordingly

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

@@ -7,8 +7,8 @@ import {InvoiceComponent} from './invoice/invoice.component';
 import {HomepageComponent} from './homepage/homepage.component';
 import {InvoiceGenComponent} from './invoice-gen/invoice-gen.component';
 import {InvoicePaymentComponent} from './invoice-payment/invoice-payment.component';
-import {ServiceTypeComponent} from './service-type/service-type.component';
 import {LoginComponent} from './login/login.component';
+import {SettingsComponent} from './settings/settings.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full'},
@@ -19,8 +19,9 @@ const routes: Routes = [
   { path: 'invoice', component: InvoiceComponent },
   { path: 'invoice-gen', component: InvoiceGenComponent },
   { path: 'invoice-payment', component: InvoicePaymentComponent },
-  { path: 'service-type', component: ServiceTypeComponent},
-  { path: 'login', component: LoginComponent }
+  // { path: 'service-type', component: ServiceTypeComponent},
+  { path: 'login', component: LoginComponent },
+  { path: 'settings', component: SettingsComponent }
 ];
 
 @NgModule({

AstuteClient2/src/app/app.module.ts

@@ -19,9 +19,10 @@ import { TextMaskModule } from 'angular2-text-mask';
 import { LoginComponent } from './login/login.component';
 import { InvoicePaymentComponent } from './invoice-payment/invoice-payment.component';
 import { CommonModule } from '@angular/common';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
-import { ServiceTypeComponent } from './service-type/service-type.component';
+import { SettingsComponent } from './settings/settings.component';
+// import { ServiceTypeComponent } from './service-type/service-type.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +37,8 @@ import { ServiceTypeComponent } from './service-type/service-type.component';
     InvoiceGenComponent,
     LoginComponent,
     InvoicePaymentComponent,
-    ServiceTypeComponent
+    SettingsComponent// ,
+    // ServiceTypeComponent
   ],
   imports: [
     BrowserModule,

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

@@ -5,27 +5,34 @@
   <div class="row">
     <div class="col-12">
       <ag-grid-angular
-        #agGrid
-        style="height: 500px;"
-        class="ag-theme-balham"
-        [enableSorting]="true"
-        [enableFilter]="true"
-        [rowData]="rowData | async"
-        [columnDefs]="columnDefs"
-        rowSelection="single"
-        rowDeselection="true"
+              style="height: 500px;"
+              class="ag-theme-balham"
+              [enableColResize]="true"
+              [enableSorting]="true"
+              [enableFilter]="true"
+              [rowData]="rowData | async"
+              [columnDefs]="columnDefs"
+              (cellEditingStopped)="updateRow($event)"
+              (gridReady)="onGridReady($event)"
+              (rowClicked)="setSelectedRow($event)"
+              (rowDataChanged)="resizeColumns($event)"
+              rowSelection="single"
+              rowDeselection="true"
       ></ag-grid-angular>
     </div>
   </div>
   <div class="row justify-content-center mt-2">
-    <div class="col-4">
+    <div class="col-3">
       <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Customer</button>
     </div>
-    <div class="col-4">
-      <button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit Customer</button>
+    <div class="col-3">
+      <button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected">Edit Customer</button>
     </div>
-    <div class="col-4">
-      <button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)">Delete Customer</button>
+    <div class="col-3">
+      <button class="btn btn-primary" style="width: 100%" (click)="open(contacts)" [disabled]="!selected">Contact Book</button>
+    </div>
+    <div class="col-3">
+      <button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button>
     </div>
   </div>
 </div>
@@ -244,16 +251,13 @@
           <td style="width: 1%">
             <span class="input-group-text">Phone*</span>
           </td>
-          <td colspan="7">
+          <td colspan="3">
             <input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone [value]="selected.phone">
           </td>
-        </tr>
-
-        <tr>
           <td style="width: 1%">
             <span class="input-group-text">Ext*</span>
           </td>
-          <td colspan="3">
+          <td colspan="2">
             <input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="selected.phExt">
           </td>
         </tr>
@@ -292,3 +296,58 @@
     </div>
   </div>
 </app-modal-form>
+
+<!--MODAL: customer contacts-->
+<app-modal-form [title]="'Contact Book'" #contacts>
+  <div *ngIf="selected">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <ag-grid-angular
+                  style="height: 500px;"
+                  class="ag-theme-balham"
+                  [enableColResize]="true"
+                  [enableSorting]="true"
+                  [enableFilter]="true"
+                  [rowData]="contactsData | async"
+                  [columnDefs]="contactsColDef"
+                  (cellEditingStopped)="updateContactRow($event)"
+                  (gridReady)="onContactGridReady($event)"
+                  (rowDataChanged)="resizeColumns($event)"
+                  rowSelection="single"
+                  rowDeselection="true"
+          ></ag-grid-angular>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="modal-footer">
+      <button class="btn btn-danger" type="button"
+              (click)="deleteContact()">
+        Delete Contact
+      </button>
+      <button class="btn btn-primary" type="button"
+              (click)="createEmptyContact()">
+        Add Contact
+      </button>
+      <button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>
+    </div>
+  </div>
+  <div *ngIf="!selected">
+    <div class="modal-body">
+      Choose a Customer First!
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-danger" type="button"
+              [disabled]="true">
+        Delete Contact
+      </button>
+      <button class="btn btn-primary" type="button"
+              [disabled]="true">
+        Add Contact
+      </button>
+      <button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>
+    </div>
+  </div>
+</app-modal-form>

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
 
 @Component({
@@ -7,23 +7,27 @@ import {AstuteClientService} from '../services/astute-client-service';
     styleUrls: ['./customer.component.css']
 })
 export class CustomerComponent implements OnInit {
-    @ViewChild('agGrid') agGrid;
+    // @ViewChild('agGrid') agGrid;
+    gridApi;
+    gridColumnApi;
+    contactGridApi;
+    contactColumnApi;
     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: 'phExt', field: 'phExt'},
-        {headerName: 'State', field: 'state'},
-        {headerName: 'ZIP', field: 'zip'},
-        {headerName: 'ZIP-4', field: 'ziplast4'}
+        {headerName: 'ID', field: 'customerId'},
+        {headerName: 'Name', field: 'customerName', editable: true},
+        {headerName: 'Bill To', field: 'billToDept', editable: true},
+        {headerName: 'Address 1', field: 'add1', editable: true},
+        {headerName: 'Address 2', field: 'add2', editable: true},
+        {headerName: 'City', field: 'city', editable: true},
+        {headerName: 'Email', field: 'email', editable: true},
+        {headerName: 'Fax', field: 'fax', editable: true},
+        {headerName: 'Phone', field: 'phone', editable: true},
+        {headerName: 'Ext.', field: 'phExt', editable: true},
+        {headerName: 'State', field: 'state', editable: true},
+        {headerName: 'ZIP', field: 'zip', editable: true},
+        {headerName: 'ZIP-4', field: 'ziplast4', editable: true}
     ];
     rowData: any;
     states = [
@@ -81,6 +85,30 @@ export class CustomerComponent implements OnInit {
     ];
     usPhoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
 
+    contactsData: any;
+    contactsColDef = [
+        {headerName: 'ID', field: 'contactId', checkboxSelection: true},
+        {headerName: 'Name', field: 'name', editable: true},
+        {headerName: 'Title', field: 'title', editable: true},
+        {headerName: 'Email', field: 'email', editable: true},
+        {headerName: 'Work', field: 'workPhone', editable: true},
+        {headerName: 'Phone', field: 'mobile', editable: true},
+        {headerName: 'Ext.', field: 'phExt', editable: true},
+        {headerName: 'Fax', field: 'fax', editable: true},
+        {headerName: 'Address', field: 'address', editable: true}
+    ];
+
+    // address: "123 Test Drive"
+    // contactId: 1
+    // customerId: "MDOT"
+    // email: "Test@Test.com"
+    // fax: 234123344
+    // mobile: 1232343455
+    // name: "John Shaw"
+    // phExt: 1233
+    // title: "Manager"
+    // workPhone: 1231231233
+
     constructor(protected astuteClientService: AstuteClientService) {
     }
 
@@ -88,104 +116,204 @@ export class CustomerComponent implements OnInit {
         this.refreshData();
     }
 
-    getSelectedRows() {
-        const selectedNodes = this.agGrid.api.getSelectedNodes();
-        if (selectedNodes.length) {
-            this.selected = selectedNodes.map(node => node.data)[0];
-        } else {
-            this.selected = null;
-        }
+    // callback for grid selection
+    setSelectedRow(event) {
+        this.selected = event.data;
     }
 
-    // inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inFax.value
+    // wrappers for customer service methods
     addCustomer(customerId, name, billTo, add1, add2, city, state, zip, zip4, email, phone, phExt, fax, ref) {
-        if (fax.length > 0 && fax.length < 14)  {
+        if (fax.length > 0 && fax.length < 14) {
             alert('Invalid fax.');
         } else if (phone.length > 0 && phone.length < 14) {
             alert('Invalid phone.');
-        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) == false) {
-            alert("You have entered an invalid email address!")
+        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
+            alert('You have entered an invalid email address!');
         } else {
-        let customerData = {
-            "customerId": customerId,
-            "customerName": name,
-            "billToDept": billTo,
-            "add1": add1,
-            "add2": add2,
-            "city": city,
-            "state": state,
-            "zip": zip,
-            "ziplast4": zip4,
-            "email": email,
-            "phone": phone,
-            "phExt": phExt,
-            "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, phExt, fax, ref) {
-        if (fax.length > 0 && fax.length < 14)  {
-            alert('Invalid fax.');
-        } else if (phone.length > 0 && phone.length < 14) {
-            alert('Invalid phone.');
-        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) == false) {
-            alert("You have entered an invalid email address!")
-        } else {
-                const customerData = {
-                    "customerId": id,
-                    "customerName": name,
-                    "billToDept": billTo,
-                    "add1": add1,
-                    "add2": add2,
-                    "city": city,
-                    "state": state,
-                    "zip": zip,
-                    "ziplast4": zip4,
-                    "email": email,
-                    "phone": phone,
-                    "phExt": phExt,
-                    "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);
-        });
-    }}
-
-    deleteCustomer (customerId) {
-        if (confirm('Are you sure you want to delete customer, ' + customerId)) {
-            this.astuteClientService.deleteCustomer(customerId).then((data) => {
+            const customerData = {
+                'customerId': customerId,
+                'customerName': name,
+                'billToDept': billTo,
+                'add1': add1,
+                'add2': add2,
+                'city': city,
+                'state': state,
+                'zip': zip,
+                'ziplast4': zip4,
+                'email': email,
+                'phone': phone,
+                'phExt': phExt,
+                'fax': fax
+            };
+            this.astuteClientService.createCustomer(customerData).then((data) => {
                 if (data) {
-                    console.log('Customer, ' + customerId + ' successfully deleted');
                     this.refreshData();
+                    ref.close();
                 } else {
-                    alert ('Error in deleting; Customer, ' + customerId + ' has not been deleted');
+                    alert('Customer Creation Failed, Check Input Fields');
                 }
+            }, (reason) => {
+                alert('Add customer failed: ' + reason);
             });
         }
     }
 
+    editCustomer(id, name, billTo, add1, add2, city, state, zip, zip4, email, phone, phExt, fax, ref) {
+        if (fax.length > 0 && fax.length < 14) {
+            alert('Invalid fax.');
+        } else if (phone.length > 0 && phone.length < 14) {
+            alert('Invalid phone.');
+        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
+            alert('You have entered an invalid email address!');
+        } else {
+            const customerData = {
+                'customerId': id,
+                'customerName': name,
+                'billToDept': billTo,
+                'add1': add1,
+                'add2': add2,
+                'city': city,
+                'state': state,
+                'zip': zip,
+                'ziplast4': zip4,
+                'email': email,
+                'phone': phone,
+                'phExt': phExt,
+                '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: ' + reason);
+            });
+        }
+    }
+
+    deleteCustomer(customerId) {
+        if (customerId) {
+            if (confirm('Are you sure you want to delete customer, ' + customerId)) {
+                this.astuteClientService.deleteCustomer(customerId).then((data) => {
+                    if (data) {
+                        console.log('Customer, ' + customerId + ' successfully deleted');
+                        this.refreshData();
+                    } else {
+                        alert('Error in deleting; Customer, ' + customerId + ' has not been deleted');
+                    }
+                });
+            }
+        } else {
+            alert('Choose a customer first!');
+        }
+    }
+
+    // wrappers for contact service methods (only inline editing)
+    createEmptyContact() {
+        const newContactData = {
+            address: '',
+            customerId: this.selected.customerId,
+            email: 'example@email.com',
+            fax: null,
+            mobile: null,
+            name: '',
+            phExt: null,
+            title: '',
+            workPhone: null
+        };
+        console.log(newContactData);
+        this.astuteClientService.createCustomerContact(newContactData).then ((data) => {
+            if (!data) {
+                alert('Contact Creation Failed, Check Input Fields');
+            } else {
+                this.refreshContactData(this.selected.customerId);
+            }
+        }, (reason) => {
+            alert('Create customer failed: ' + reason);
+        });
+    }
+
+    deleteContact() {
+        const selectedNodes = this.contactGridApi.getSelectedNodes();
+        if (selectedNodes.length > 0) {
+            if (confirm('Are you sure?')) {
+                const selec = selectedNodes.map(node => node.data)[0];
+                this.astuteClientService.deleteCustomerContact(selec.customerId, selec.contactId).then((data) => {
+                    if (data) {
+                        this.refreshContactData(selec.customerId);
+                    } else {
+                        alert('Contact Deletion Failed, Check Input Fields');
+                    }
+                }, (reason) => {
+                    alert('Delete customer failed: ' + reason);
+                });
+            }
+        } else {
+            alert('Choose a contact first!');
+        }
+    }
+
+    // for inline updating
+    updateRow(event) {
+        const eventData = event.data;
+        console.log(eventData);
+        if (eventData.fax.length > 0 && eventData.fax.length < 14) {
+            alert('Invalid fax.');
+        } else if (eventData.phone.length > 0 && eventData.phone.length < 14) {
+            alert('Invalid phone.');
+        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(eventData.email) === false) {
+            alert('You have entered an invalid email address!');
+        } else {
+            this.astuteClientService.updateCustomer(eventData.customerId, eventData).then((data) => {
+                if (data) {
+                    this.refreshData();
+                } else {
+                    alert('Customer Updating Failed, Check Input Fields');
+                }
+            }, (reason) => {
+                alert('Update customer failed: ' + reason);
+            });
+        }
+        this.refreshData();
+    }
+
+    updateContactRow(event) {
+        console.log(event);
+
+        const eventData = event.data;
+        // if (eventData.fax % 10 < 14) {
+        //     alert('Invalid fax.');
+        // } else if (eventData.mobile % 10 < 14) {
+        //     alert('Invalid phone.');
+        // } else if (eventData.workPhone % 10 < 14) {
+        //     alert('Invalid work phone.');
+        // } else
+        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(eventData.email) === false) {
+            alert('You have entered an invalid email address!');
+        } else {
+            this.astuteClientService.updateCustomerContact(eventData.customerId, eventData).then((data) => {
+                if (!data) {
+                    alert('Customer Updating Failed, Check Input Fields');
+                } else {
+                    this.contactsData = this.astuteClientService.getCustomerContacts(eventData.customerId);
+                }
+            }, (reason) => {
+                alert('Update customer failed: ' + reason);
+            });
+        }
+        this.contactsData = this.astuteClientService.getCustomerContacts(eventData.customerId);
+    }
+
+    // opening and closing modal-form components
     open(ref) {
-        this.getSelectedRows();
+        // this.getSelectedRows();
+        if (this.selected) {
+            this.contactsData = this.astuteClientService.getCustomerContacts(this.selected.customerId);
+        }
         ref.open();
     }
 
@@ -193,10 +321,32 @@ export class CustomerComponent implements OnInit {
         ref.close();
     }
 
+    // refreshes corresponding data
     refreshData() {
         this.rowData = this.astuteClientService.getCustomers();
+        this.selected = null;
         this.astuteClientService.getCustomers().then((data) => {
             this.customers = data;
         });
     }
-}
+
+    refreshContactData(customerId) {
+        this.contactsData = this.astuteClientService.getCustomerContacts(customerId);
+    }
+
+
+    // on each grid ready: sets api's and enable auto-resizing
+    onGridReady(evt) {
+        this.gridApi = evt.api;
+        this.gridColumnApi = evt.columnApi;
+    }
+
+    onContactGridReady(evt) {
+        this.contactGridApi = evt.api;
+        this.contactColumnApi = evt.columnApi;
+    }
+
+    resizeColumns(evt) {
+        evt.columnApi.autoSizeAllColumns();
+    }
+}

AstuteClient2/src/app/homepage/homepage.component.html

@@ -21,19 +21,23 @@
       </div>
       <div class="row">
         <app-app-box class="m-3" [color]="'#00bcd4'" [name]="'Customer'" [symbol]="'supervised_user_circle'" routerLink="/customer">
-          <h6 class="card-subtitle mb-2 text-muted">Go here to add or edit customers</h6>
+          <h6 class="card-subtitle mb-2 text-muted">Add or edit customers!</h6>
           <!--<i class="material-icons text-info">info</i> -->
         </app-app-box>
         <app-app-box class="m-3" [color]="'#f44336'" [name]="'Sales Order'" [symbol]="'assignment'" routerLink="/sales-order">
-          <h6 class="card-subtitle mb-2 text-muted">Go here to add sales orders or make change orders</h6>
+          <h6 class="card-subtitle mb-2 text-muted">Add sales orders or make change orders!</h6>
           <!--<i class="material-icons text-info">info</i> Medical Records Application-->
         </app-app-box>
-        <app-app-box class="m-3" [color]="'#4caf50'" [name]="'Invoice'" [symbol]="'view_headline'" routerLink="/invoice">
-          <h6 class="card-subtitle mb-2 text-muted">Go here to interact with invoices</h6>
+        <app-app-box class="m-3" [color]="'#4fd581'" [name]="'Invoice'" [symbol]="'view_headline'" routerLink="/invoice">
+          <h6 class="card-subtitle mb-2 text-muted">Interact with invoices!</h6>
           <!--<i class="material-icons text-danger">info</i> Not yet implemented-->
         </app-app-box>
-        <app-app-box class="m-3" [name]="'Invoice Payment'" [symbol]="'attach_money'" routerLink="/invoice-payment">
-          <h6 class="card-subtitle mb-2 text-muted">Go here to enter payments received</h6>
+        <app-app-box class="m-3" [color]="'#a5e076'" [name]="'Invoice Payment'" [symbol]="'attach_money'" routerLink="/invoice-payment">
+          <h6 class="card-subtitle mb-2 text-muted">Enter payments received!</h6>
+          <!--<i class="material-icons text-danger">info</i> Not yet implemented-->
+        </app-app-box>
+        <app-app-box class="m-3" [color]="'#feaa6a'" [name]="'Settings'" [symbol]="'settings'" routerLink="/settings">
+          <h6 class="card-subtitle mb-2 text-muted">Change your settings!</h6>
           <!--<i class="material-icons text-danger">info</i> Not yet implemented-->
         </app-app-box>
       </div>

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

@@ -70,11 +70,11 @@
                 <td>
                     <input type="text" class="form-control" [value]=chosenInv.customerId disabled>
                     <!--<select class="custom-select" (change)="customerDropdownChange(chosenInv.customerId)"-->
-                            <!--#test>-->
-                        <!--[value]="chosenInv.customerId"-->
-                        <!--<option [value]="-1">Choose Customer...</option>-->
-                        <!--<option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}-->
-                        <!--</option>-->
+                    <!--#test>-->
+                    <!--[value]="chosenInv.customerId"-->
+                    <!--<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>
@@ -84,9 +84,9 @@
                 <td>
                     <input type="text" class="form-control" [value]="chosenInv.poNum" #poNumIn disabled>
                     <!--<select class="custom-select" (change)="poDropdownChange(poNumIn.value)"-->
-                            <!--[value]="chosenInv.poNum" #poNumIn disabled>-->
-                        <!--<option>Choose Sales Order...</option>-->
-                        <!--<option *ngFor="let po of correspondingPos;" [value]="po.ponum">{{po.ponum}}</option>-->
+                    <!--[value]="chosenInv.poNum" #poNumIn disabled>-->
+                    <!--<option>Choose Sales Order...</option>-->
+                    <!--<option *ngFor="let po of correspondingPos;" [value]="po.ponum">{{po.ponum}}</option>-->
                     <!--</select>-->
                 </td>
             </tr>
@@ -131,36 +131,36 @@
                 <td>
                     <input type="text" class="form-control" [value]=chosenInv.pmtStatusDesc disabled>
                     <!--<select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn disabled>-->
-                        <!--<option value="Outstanding">"Outstanding"</option>-->
-                        <!--<option value="Paid">"Paid"</option>-->
+                    <!--<option value="Outstanding">"Outstanding"</option>-->
+                    <!--<option value="Paid">"Paid"</option>-->
                     <!--</select>-->
                 </td>
             </tr>
             </tbody>
         </table>
         <!--<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 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>Outstanding</option>-->
-                <!--<option value=1>Paid</option>-->
-            <!--</select>-->
+        <!--<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>Outstanding</option>-->
+        <!--<option value=1>Paid</option>-->
+        <!--</select>-->
         <!--</div>-->
     </div>
 
@@ -187,7 +187,7 @@
                 <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 [disabled]="chosenInv.invoiceStatus !== 1"></textarea>
                     <!--<input type="text" class="form-control cell" [value]="inDet.desc"-->
-                                           <!--(change)="onSelectedCellChange(i, 'desc', desc.value)" #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>
@@ -217,72 +217,72 @@
                 </td>
             </tr>
             <!--<tr class="p-0 m-0">-->
-                <!--&lt;!&ndash;INV Detail Items: invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee&ndash;&gt;-->
-                <!--<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>-->
+            <!--&lt;!&ndash;INV Detail Items: invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee&ndash;&gt;-->
+            <!--<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>-->
+            <!--<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>-->
             <!--<tr class="p-0 m-0" *ngIf="inDet.poLineItemNum !== -1">-->
-                <!--<th class="align-content-center">-->
-                    <!--<p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>-->
-                <!--</th>-->
-                <!--<td colspan="5">-->
-                    <!--<div class="progress" style="height: 25px;">-->
-                        <!--<div class="progress-bar bg-success" role="progressbar"-->
-                             <!--[ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">-->
-                            <!--Qty - {{(qty.value)}} / Amount - {{(qty.value * inDet.fee) | currency}}-->
-                        <!--</div>-->
-                        <!--<div class="progress-bar bg-danger" role="progressbar"-->
-                             <!--[ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">-->
-                            <!--Qty - {{(inDet.remainingQty - qty.value)}} / Amount - {{(inDet.remainingQty - qty.value)  * inDet.fee | currency}}-->
-                        <!--</div>-->
-                    <!--</div>-->
-                <!--</td>-->
+            <!--<th class="align-content-center">-->
+            <!--<p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>-->
+            <!--</th>-->
+            <!--<td colspan="5">-->
+            <!--<div class="progress" style="height: 25px;">-->
+            <!--<div class="progress-bar bg-success" role="progressbar"-->
+            <!--[ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">-->
+            <!--Qty - {{(qty.value)}} / Amount - {{(qty.value * inDet.fee) | currency}}-->
+            <!--</div>-->
+            <!--<div class="progress-bar bg-danger" role="progressbar"-->
+            <!--[ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">-->
+            <!--Qty - {{(inDet.remainingQty - qty.value)}} / Amount - {{(inDet.remainingQty - qty.value)  * inDet.fee | currency}}-->
+            <!--</div>-->
+            <!--</div>-->
+            <!--</td>-->
             <!--</tr>-->
             </tbody>
             <tbody>
             <!--<tr >-->
-                <!--<td colspan="5" >-->
-                    <!--<p *ngIf="chosenInv.invoiceStatus == 1">-->
-                    <!--<select class="custom-select"-->
-                            <!--(change)="pushOntoSelectedDetail(inNumIn.value, newInDetails.length + 1, selectedPODetails[poDetSelec.value].lineItemNo,-->
-                  <!--selectedPODetails[poDetSelec.value].feeTypeId,-->
-                  <!--selectedPODetails[poDetSelec.value].serviceDesc, 0, selectedPODetails[poDetSelec.value].fee)"-->
-                            <!--[disabled]="!selectedPODetails.length && chosenInv.invoiceStatus !== 1"-->
-                            <!--#poDetSelec>-->
-                        <!--<option>Add new line item...</option>-->
-                        <!--<option *ngFor="let po of selectedPODetails; let i = index;" [value]="i">{{po.serviceDesc}}-->
-                        <!--</option>-->
-                        <!--<option [value]="-1">Out of Pocket Expenses</option>-->
-                    <!--</select>-->
-                    <!--</p>-->
-                <!--</td>-->
+            <!--<td colspan="5" >-->
+            <!--<p *ngIf="chosenInv.invoiceStatus == 1">-->
+            <!--<select class="custom-select"-->
+            <!--(change)="pushOntoSelectedDetail(inNumIn.value, newInDetails.length + 1, selectedPODetails[poDetSelec.value].lineItemNo,-->
+            <!--selectedPODetails[poDetSelec.value].feeTypeId,-->
+            <!--selectedPODetails[poDetSelec.value].serviceDesc, 0, selectedPODetails[poDetSelec.value].fee)"-->
+            <!--[disabled]="!selectedPODetails.length && chosenInv.invoiceStatus !== 1"-->
+            <!--#poDetSelec>-->
+            <!--<option>Add new line item...</option>-->
+            <!--<option *ngFor="let po of selectedPODetails; let i = index;" [value]="i">{{po.serviceDesc}}-->
+            <!--</option>-->
+            <!--<option [value]="-1">Out of Pocket Expenses</option>-->
+            <!--</select>-->
+            <!--</p>-->
+            <!--</td>-->
             <!--</tr>-->
             </tbody>
         </table>
@@ -343,14 +343,14 @@
             </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 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>
 
@@ -380,14 +380,14 @@
     <!--Modal Footer-->
     <div class="modal-footer" >
         <p *ngIf="chosenInv.invoiceStatus == 1">
-        <button type="button" class="btn btn-success"
-                (click)="editInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value)">
+            <button type="button" class="btn btn-success"
+                    (click)="editInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value)">
                 <!--[disabled]="(chosenInv.invoiceStatus !== 1)">-->
-        Confirm
-        </button>
+                Confirm
+            </button>
         </p>
         <p>
-        <button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
+            <button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
         </p>
     </div>
 </app-modal-form>
@@ -395,268 +395,268 @@
 <!--MODAL: new invoice-->
 <app-modal-form [title]="'New Invoice'" #new>
     <!--<form>-->
-        <!--General-->
-        <div class="modal-body">
-            <p class="h4 text-right">General</p>
-            <hr>
-            <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">{{customerSelec.value}}
-                            <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
-                                {{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 == 0) ? '':'-' + customers[customerSelec.value].ziplast4}}
-                            </p>
-                        </td>
-                        <td></td>
-                        <td>
-                            <span class="input-group-text">Payment Status*</span>
-                        </td>
-                        <td>
-                            <!--<input type="text" value="Outstanding" class="form-control" #pmtStatusIn disabled>-->
+    <!--General-->
+    <div class="modal-body">
+        <p class="h4 text-right">General</p>
+        <hr>
+        <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">{{customerSelec.value}}
+                    <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                        {{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 == 0) ? '':'-' + customers[customerSelec.value].ziplast4}}
+                    </p>
+                </td>
+                <td></td>
+                <td>
+                    <span class="input-group-text">Payment Status*</span>
+                </td>
+                <td>
+                    <!--<input type="text" value="Outstanding" class="form-control" #pmtStatusIn disabled>-->
 
-                            <select class="custom-select" #pmtStatusIn disabled>
-                                <option value="1">Outstanding</option>
-                                <!--&lt;!&ndash;<option value=2>Paid</option>&ndash;&gt;-->
-                            </select>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+                    <select class="custom-select" #pmtStatusIn disabled>
+                        <option value="1">Outstanding</option>
+                        <!--&lt;!&ndash;<option value=2>Paid</option>&ndash;&gt;-->
+                    </select>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
 
-        <!--Detail-->
-        <div class="modal-body">
-            <p class="h4 text-right">Detail</p>
-            <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">Rate Type</th>
-                    <th scope="col" style="width: 100px">Rate</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">
-                        <button class="btn btn-outline-danger w-100" (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"><textarea style="height: 36px" class="form-control cell" [value]="inDet.desc"
-                                                  (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="text" class="form-control cell" [value]="inDet.fee | currency" #fee [disabled] = "poDetails[poDetSelec.value].lineItemNo!==-1"
-                                               (change)="onNewCellChange(i, 'fee', fee.value.substr(1)); updateNewBillAmt();">
-                    </td>
-                    <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
-                                               [step]="inDet.remainingQty / 100"
-                                               (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
-                    </td>
-                </tr>
-                <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum !== -1">
-                    <th class="align-content-center">
-                        <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
-                    </th>
-                    <td colspan="5">
-                        <div class="progress" style="height: 25px;">
-                            <div class="progress-bar bg-success" role="progressbar"
-                                 [ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">
-                                Qty - {{(qty.value)}} / Amount - {{(qty.value * inDet.fee) | currency}}
-                            </div>
-                            <div class="progress-bar bg-danger" role="progressbar"
-                                 [ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">
-                                Qty - {{(inDet.remainingQty - qty.value)}} / Amount - {{(inDet.remainingQty - qty.value)  * inDet.fee | currency}}
-                            </div>
+    <!--Detail-->
+    <div class="modal-body">
+        <p class="h4 text-right">Detail</p>
+        <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">Rate Type</th>
+                <th scope="col" style="width: 100px">Rate</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">
+                    <button class="btn btn-outline-danger w-100" (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"><textarea style="height: 36px" class="form-control cell" [value]="inDet.desc"
+                                              (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="text" class="form-control cell" [value]="inDet.fee | currency" #fee [disabled] = "poDetails[poDetSelec.value].lineItemNo!==-1"
+                                           (change)="onNewCellChange(i, 'fee', fee.value.substr(1)); updateNewBillAmt();">
+                </td>
+                <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
+                                           [step]="inDet.remainingQty / 100"
+                                           (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
+                </td>
+            </tr>
+            <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum !== -1">
+                <th class="align-content-center">
+                    <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
+                </th>
+                <td colspan="5">
+                    <div class="progress" style="height: 25px;">
+                        <div class="progress-bar bg-success" role="progressbar"
+                             [ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">
+                            Qty - {{(qty.value)}} / Amount - {{(qty.value * inDet.fee) | currency}}
                         </div>
-                    </td>
-                </tr>
-                <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum == -1">
-                    <th class="align-content-center">
-                        <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
-                    </th>
-                </tr>
-                </tbody>
-                <tbody>
-                <tr>
-                    <td colspan="6">
-                        <select class="custom-select"
-                                (change)="pushOntoNewDetail(inNumIn.value, newInDetails.length + 1, poDetails[poDetSelec.value].lineItemNo,
+                        <div class="progress-bar bg-danger" role="progressbar"
+                             [ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">
+                            Qty - {{(inDet.remainingQty - qty.value)}} / Amount - {{(inDet.remainingQty - qty.value)  * inDet.fee | currency}}
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum == -1">
+                <th class="align-content-center">
+                    <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
+                </th>
+            </tr>
+            </tbody>
+            <tbody>
+            <tr>
+                <td colspan="6">
+                    <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, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty,
                       poNumIn.value)"
-                                [disabled]="!poDetails.length"
-                                #poDetSelec>
-                            <option>Add line item...</option>
-                            <option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
-                            <option [value]="-1">Out of Pocket Expenses</option>
-                        </select>
-                    </td>
-                </tr>
+                            [disabled]="!poDetails.length"
+                            #poDetSelec>
+                        <option>Add line item...</option>
+                        <option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
+                        <option [value]="-1">Out of Pocket Expenses</option>
+                    </select>
+                </td>
+            </tr>
 
-                <!--<tr>-->
-                    <!--<td colspan="6">-->
-                        <!--<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, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty,-->
-                      <!--poNumIn.value)"-->
-                                <!--[disabled]="!poDetails.length"-->
-                                <!--#poDetSelec>-->
-                            <!--<option>Add line item...</option>-->
-                            <!--<option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>-->
-                            <!--<option [value]="-1">Out of Pocket Expenses</option>-->
-                        <!--</select>-->
-                    <!--</td>-->
-                <!--</tr>-->
-                </tbody>
-            </table>
+            <!--<tr>-->
+            <!--<td colspan="6">-->
+            <!--<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, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty,-->
+            <!--poNumIn.value)"-->
+            <!--[disabled]="!poDetails.length"-->
+            <!--#poDetSelec>-->
+            <!--<option>Add line item...</option>-->
+            <!--<option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>-->
+            <!--<option [value]="-1">Out of Pocket Expenses</option>-->
+            <!--</select>-->
+            <!--</td>-->
+            <!--</tr>-->
+            </tbody>
+        </table>
 
-            <table class="table table-borderless table-sm">
-                <tbody>
-                <tr>
-                    <td class="text-right" style="width: 40%" class="text-right"><b>Original Contract Amount</b></td>
-                    <td class="text-right" style="width: 10%">
-                        <div *ngIf="chosenPo">{{chosenPo.contractAmt | currency}}</div>
-                    </td>
-                    <td class="text-right" style="width: 30%" class="text-right">&nbsp;</td>
-                    <td class="text-right" style="width: 20%" >&nbsp;</td>
-                </tr>
-                <tr>
-                    <td class="text-right"><b>Net Changes by Change Orders</b></td>
-                    <td class="text-right"><div *ngIf="chosenPo">{{0  | currency}}</div></td>
-                    <td class="text-right">&nbsp;</td>
-                    <td class="text-right">&nbsp;</td>
-                </tr>
-                <tr>
-                    <td class="text-right"><b>Total Contract Amount</b></td>
-                    <td class="text-right"><div *ngIf="chosenPo">{{chosenPo.contractAmt | currency}}</div></td>
-                    <td class="text-right">&nbsp;</td>
-                    <td class="text-right">&nbsp;</td>
-                </tr>
-                <tr>
-                    <td class="text-right"><b>Previously Billed</b></td>
-                    <td class="text-right"><div *ngIf="chosenPo">{{chosenPo.previouslyBilledAmount | currency}}</div></td>
-                    <td class="text-right">&nbsp;</td>
-                    <td class="text-right">&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 class="text-right"><div *ngIf="chosenPo">{{(chosenPo.contractAmt - chosenPo.previouslyBilledAmount - newBillAmt) | currency}}</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 | currency}}</td>
-                </tr>
-                </tbody>
-            </table>
+        <table class="table table-borderless table-sm">
+            <tbody>
+            <tr>
+                <td class="text-right" style="width: 40%" class="text-right"><b>Original Contract Amount</b></td>
+                <td class="text-right" style="width: 10%">
+                    <div *ngIf="chosenPo">{{chosenPo.contractAmt | currency}}</div>
+                </td>
+                <td class="text-right" style="width: 30%" class="text-right">&nbsp;</td>
+                <td class="text-right" style="width: 20%" >&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Net Changes by Change Orders</b></td>
+                <td class="text-right"><div *ngIf="chosenPo">{{0  | currency}}</div></td>
+                <td class="text-right">&nbsp;</td>
+                <td class="text-right">&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Total Contract Amount</b></td>
+                <td class="text-right"><div *ngIf="chosenPo">{{chosenPo.contractAmt | currency}}</div></td>
+                <td class="text-right">&nbsp;</td>
+                <td class="text-right">&nbsp;</td>
+            </tr>
+            <tr>
+                <td class="text-right"><b>Previously Billed</b></td>
+                <td class="text-right"><div *ngIf="chosenPo">{{chosenPo.previouslyBilledAmount | currency}}</div></td>
+                <td class="text-right">&nbsp;</td>
+                <td class="text-right">&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 class="text-right"><div *ngIf="chosenPo">{{(chosenPo.contractAmt - chosenPo.previouslyBilledAmount - newBillAmt) | currency}}</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 | currency}}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!--Invoice Footer-->
+    <div class="modal-body">
+        <hr>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Notes:</span>
+            </div>
+            <textarea class="form-control" #notesIn></textarea>
         </div>
 
-        <!--Invoice Footer-->
-        <div class="modal-body">
-            <hr>
-            <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">Notes:</span>
-                </div>
-                <textarea class="form-control" #notesIn></textarea>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Certification:</span>
             </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 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>
 
-        <!--Modal Footer-->
-        <div class="modal-footer">
-            <button type="button" class="btn btn-success"
-                    (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, newBillAmt, notesIn.value, certIn.value, 1, new)"
-                    [disabled]="!(inNumIn.value && poNumIn.value && newBillAmt && certIn.value)">
-                Confirm
-            </button>
-            <button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button>
-        </div>
+    <!--Modal Footer-->
+    <div class="modal-footer">
+        <button type="button" class="btn btn-success"
+                (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, newBillAmt, notesIn.value, certIn.value, 1, new)"
+                [disabled]="!(inNumIn.value && poNumIn.value && newBillAmt && certIn.value)">
+            Confirm
+        </button>
+        <button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button>
+    </div>
     <!--</form>-->
 </app-modal-form>

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

@@ -384,43 +384,43 @@ export class InvoiceComponent implements OnInit {
         if (details.length) {
             // console.log(details[0]);
             // if (details[0].poLineItemNum !== -1) {
-                this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
-                    if (data) {
-                        details.splice(0, 1);
-                        this.addInvoiceDetail(details);
-                    } else {
-                        alert('add inv detail failed');
-                    }
-                });
+            this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
+                if (data) {
+                    details.splice(0, 1);
+                    this.addInvoiceDetail(details);
+                } else {
+                    alert('add inv detail failed');
+                }
+            });
             // } else {
-                // desc
-                // fee
-                // feeTypeId
-                // invoiceNum
-                // lineItemNum
-                // poLineItemNum
-                // qty
-                // remainingQty
-                // serviceTypeId
-                // poNum
+            // desc
+            // fee
+            // feeTypeId
+            // invoiceNum
+            // lineItemNum
+            // poLineItemNum
+            // qty
+            // remainingQty
+            // serviceTypeId
+            // poNum
 
-                // const data = {
-                //     // 'lineItemNo': details[0].,
-                //     'poNum': details[0].poNum,
-                //     'serviceDesc': details[0].desc,
-                //     'feeTypeId': details[0].feeTypeId,
-                //     'serviceTypeId': details[0].serviceTypeId,
-                //     'qty': +details[0].qty,
-                //     'fee': +details[0].fee,
-                //     'remainingQty': +details[0].fee * +details[0].qty
-                // };
-                // this.astuteClientService.createPODetail(data).then((d) => {
-                //     if (d) {
-                //         console.log (d);
-                //     } else {
-                //         alert('create custom PO failed.');
-                //     }
-                // });
+            // const data = {
+            //     // 'lineItemNo': details[0].,
+            //     'poNum': details[0].poNum,
+            //     'serviceDesc': details[0].desc,
+            //     'feeTypeId': details[0].feeTypeId,
+            //     'serviceTypeId': details[0].serviceTypeId,
+            //     'qty': +details[0].qty,
+            //     'fee': +details[0].fee,
+            //     'remainingQty': +details[0].fee * +details[0].qty
+            // };
+            // this.astuteClientService.createPODetail(data).then((d) => {
+            //     if (d) {
+            //         console.log (d);
+            //     } else {
+            //         alert('create custom PO failed.');
+            //     }
+            // });
             // }
         } else {
             this.newInDetails = [];

AstuteClient2/src/app/nav-bar/nav-bar.component.html

@@ -9,8 +9,9 @@
       <a class="nav-link" [ngClass]="salesOrderActive ? 'active' : ''"routerLink="/sales-order" routerLinkActive="active">Sales Order</a>
       <a class="nav-link" [ngClass]="invoiceActive ? 'active' : ''"routerLink="/invoice" routerLinkActive="active">Invoice</a>
       <a class="nav-link" [ngClass]="invoicePaymentActive ? 'active' : ''"routerLink="/invoice-payment" routerLinkActive="active">Invoice Payment</a>
-      <a class="nav-link" [ngClass]="serviceTypeActive ? 'active' : ''"routerLink="/service-type" routerLinkActive="active">Service Type</a>
-      <a class="nav-link" [ngClass]="logoffActive ? 'active' : ''"routerLink="/login" routerLinkActive="active">Log off</a>
+      <!--<a class="nav-link" [ngClass]="serviceTypeActive ? 'active' : ''"routerLink="/service-type" routerLinkActive="active">Service Type</a>-->
+      <!--<a class="nav-link" [ngClass]="logoffActive ? 'active' : ''"routerLink="/login" (click)="logout()" routerLinkActive="active">Log off</a>-->
+      <a class="nav-link" [ngClass]="settingsActive ? 'active' : ''"routerLink="/settings" routerLinkActive="active">Settings</a>
     </div>
   </div>
 </nav>

AstuteClient2/src/app/nav-bar/nav-bar.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {AstuteClientService} from '../services/astute-client-service';
 
 @Component({
   selector: 'app-nav-bar',
@@ -6,17 +7,29 @@ import {Component, Input, OnInit} from '@angular/core';
   styleUrls: ['./nav-bar.component.css']
 })
 export class NavBarComponent implements OnInit {
-  @Input() customerActive: boolean;
-  @Input() salesOrderActive: boolean;
-  @Input() invoiceActive: boolean;
-  @Input() invoicePaymentActive: boolean;
-  @Input() serviceTypeActive: boolean;
-  @Input() logoffActive: boolean;
+    @Input() customerActive: boolean;
+    @Input() salesOrderActive: boolean;
+    @Input() invoiceActive: boolean;
+    @Input() invoicePaymentActive: boolean;
+    // @Input() serviceTypeActive: boolean;
+    // @Input() logoffActive: boolean;
+    @Input() settingsActive: boolean;
 
 
-  constructor() { }
+    constructor(private astuteClientService: AstuteClientService) {
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
+    // logout() {
+    //     this.astuteClientService.logout().then((data) => {
+    //         if (data) {
+    //             alert('Logout successful');
+    //         } else {
+    //             alert('Logout unsuccessful');
+    //         }
+    //     });
+    // }
 }
+

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

@@ -4,28 +4,36 @@
   <div class="row">
     <div class="col-12">
       <ag-grid-angular
-        #agGrid
-        style="height: 500px;"
-        class="ag-theme-balham"
-        [enableSorting]="true"
-        [enableFilter]="true"
-        [rowData]="rowData"
-        [columnDefs]="columnDefs"
-        rowSelection="single"
+              #agGrid
+              style="height: 500px;"
+              class="ag-theme-balham"
+              [enableColResize]="true"
+              [enableSorting]="true"
+              [enableFilter]="true"
+              [rowData]="rowData | async"
+              [columnDefs]="columnDefs"
+              (cellEditingStopped)="updateRow($event)"
+              (gridReady)="onGridReady($event)"
+              (rowClicked)="setSelectedRow($event)"
+              (rowDataChanged)="resizeColumns($event)"
+              rowSelection="single"
       ></ag-grid-angular>
     </div>
   </div>
   <div class="row justify-content-center mt-2">
-    <div class="col-3">
+    <div class="col-2">
       <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
     </div>
-    <div class="col-3">
+    <div class="col-2">
       <button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit</button>
     </div>
-    <div class="col-3">
-      <button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">Finalize</button>
+    <div class="col-2">
+      <button class="btn btn-primary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>
     </div>
-    <div class="col-3">
+    <div class="col-2">
+      <button class="btn btn-success" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">Finalize</button>
+    </div>
+    <div class="col-2">
       <button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected?true:selected.final === 0">Delete</button>
     </div>
   </div>
@@ -38,127 +46,127 @@
     <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="text" class="form-control" placeholder="Derived From Details" [value]="newContractAmount | currency" #contractamt disabled></td>
-        </tr>
-        <tr>
-          <td><span class="input-group-text">Notes</span></td>
-          <td colspan="3"><input type="text" class="form-control" placeholder="Notes..." #notes></td>
-        </tr>
+      <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()" #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="text" class="form-control" placeholder="Derived From Details" [value]="0 | currency" #contractamt disabled></td>
+      </tr>
+      <tr>
+        <td><span class="input-group-text">Notes</span></td>
+        <td colspan="3"><input type="text" class="form-control" placeholder="Notes..." #notes></td>
+      </tr>
       </tbody>
     </table>
   </div>
 
   <!--Detail-->
-  <div class="modal-body">
-    <p class="h4 text-right">Detail</p>
-    <hr>
-    <table class="table">
-      <thead>
-      <tr>
-        <th scope="col"></th>
-        <th scope="col" style="width: 50px">#</th>
-        <th scope="col">Description</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">Rate($)</th>
-      </tr>
-      </thead>
+  <!--<div class="modal-body">-->
+  <!--<p class="h4 text-right">Detail</p>-->
+  <!--<hr>-->
+  <!--<table class="table">-->
+  <!--<thead>-->
+  <!--<tr>-->
+  <!--<th scope="col"></th>-->
+  <!--<th scope="col" style="width: 50px">#</th>-->
+  <!--<th scope="col">Description</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">Rate($)</th>-->
+  <!--</tr>-->
+  <!--</thead>-->
 
-      <tbody *ngFor="let poDetail of newPODetail; let i = index">
-      <tr class="p-0 m-0">
-        <td class="p-1 m-0">
-          <button class="btn btn-outline-danger" type="button" (click)="newPODetail.splice(i, 1);">
-            -
-          </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">
-          <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>
-            <option value="2">Hourly</option>
-          </select>
-        </td>
-        <td class="p-0 m-0">
-          <select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onNewCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>
-            <option value="1">Study</option>
-            <option value="2">Design</option>
-            <option value="3">Peer Review</option>
-            <option value="4">Cost Estimation</option>
-            <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); 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); 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>
-      <tr class="p-0 m-0">
-        <td class="p-1 m-0">
-          <button class="btn btn-success" type="button"
-                  [disabled]="!ponum.value"
-                  (click)="pushOntoNewDetail(newPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">
-          <!--(click)="pushOntoNewDetail((lineItemNo) ? lineItemNo.value + 1: 1, ponum.value, serviceDesc.value,-->
-                  <!--feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">-->
-            +</button>
-        </td>
-        <!--<td class="p-0 m-0">-->
-          <!--<input type="number" class="form-control cell" [value]="(selectedPODetail.length) ? selectedPODetail[selectedPODetail.length-1].lineItemNo + 1: 1" #lineItemNo>-->
-        <!--</td>-->
-        <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>-->
-        <!--<td class="p-0 m-0">-->
-          <!--<select class="form-control cell" [value]="1" #feeTypeId>-->
-            <!--<option value="1">Fixed Fee</option>-->
-            <!--<option value="2">Hourly</option>-->
-          <!--</select>-->
-        <!--</td>-->
-        <!--<td class="p-0 m-0">-->
-          <!--<select class="form-control cell" [value]="1" #serviceTypeId>-->
-            <!--<option value="1">Study</option>-->
-            <!--<option value="2">Design</option>-->
-            <!--<option value="3">Peer Review</option>-->
-            <!--<option value="4">Cost Estimation</option>-->
-            <!--<option value="5">Forensic Investigation</option>-->
-          <!--</select>-->
-        <!--</td>-->
-        <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="1" #qty></td>-->
-        <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #fee></td>-->
-        <!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;-->
-      </tr>
-      </tbody>
-    </table>
-  </div>
+  <!--<tbody *ngFor="let poDetail of newPODetail; let i = index">-->
+  <!--<tr class="p-0 m-0">-->
+  <!--<td class="p-1 m-0">-->
+  <!--<button class="btn btn-outline-danger" type="button" (click)="newPODetail.splice(i, 1);">-->
+  <!-- - -->
+  <!--</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">-->
+  <!--<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>-->
+  <!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
+  <!--</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>-->
+  <!--<option value="2">Hourly</option>-->
+  <!--</select>-->
+  <!--</td>-->
+  <!--<td class="p-0 m-0">-->
+  <!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onNewCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
+  <!--<option value="1">Study</option>-->
+  <!--<option value="2">Design</option>-->
+  <!--<option value="3">Peer Review</option>-->
+  <!--<option value="4">Cost Estimation</option>-->
+  <!--<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); 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); updateNewContractAmt();" #fee></td>-->
+  <!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>&ndash;&gt;-->
+  <!--</tr>-->
+  <!--</tbody>-->
+  <!--<tr class="p-0 m-0">-->
+  <!--<td class="p-1 m-0">-->
+  <!--<button class="btn btn-success" type="button"-->
+  <!--[disabled]="!ponum.value"-->
+  <!--(click)="pushOntoNewDetail(newPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
+  <!--&lt;!&ndash;(click)="pushOntoNewDetail((lineItemNo) ? lineItemNo.value + 1: 1, ponum.value, serviceDesc.value,&ndash;&gt;-->
+  <!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
+  <!--+</button>-->
+  <!--</td>-->
+  <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+  <!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="(selectedPODetail.length) ? selectedPODetail[selectedPODetail.length-1].lineItemNo + 1: 1" #lineItemNo>&ndash;&gt;-->
+  <!--&lt;!&ndash;</td>&ndash;&gt;-->
+  <!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
+  <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+  <!--&lt;!&ndash;<select class="form-control cell" [value]="1" #feeTypeId>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="1">Fixed Fee</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="2">Hourly</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;</select>&ndash;&gt;-->
+  <!--&lt;!&ndash;</td>&ndash;&gt;-->
+  <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+  <!--&lt;!&ndash;<select class="form-control cell" [value]="1" #serviceTypeId>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="1">Study</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
+  <!--&lt;!&ndash;</select>&ndash;&gt;-->
+  <!--&lt;!&ndash;</td>&ndash;&gt;-->
+  <!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="1" #qty></td>&ndash;&gt;-->
+  <!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #fee></td>&ndash;&gt;-->
+  <!--&lt;!&ndash;&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;&ndash;&gt;-->
+  <!--</tr>-->
+  <!--</tbody>-->
+  <!--</table>-->
+  <!--</div>-->
 
   <div class="modal-footer">
     <button class="btn btn-success" type="button"
@@ -206,7 +214,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="text" class="form-control" placeholder="Contract Amount" [value]="editContractAmount | currency" #contractamt disabled></td>
+          <td style="width: 30%"><input type="text" class="form-control" placeholder="Contract Amount" [value]="selected.contractAmtString" #contractamt disabled></td>
         </tr>
         <tr>
           <td><span class="input-group-text">Notes</span></td>
@@ -215,53 +223,53 @@
         </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>-->
+      <!--<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>
 
@@ -276,89 +284,90 @@
     <!--serviceTypeId-->
 
     <!--Detail-->
-    <div class="modal-body" *ngIf="selectedPODetail">
-      <p class="h4 text-right">Detail</p>
-      <hr>
-      <table class="table">
-        <thead>
-        <tr>
-          <th scope="col" style="width: 50px">#</th>
-          <!--<th scope="col">Purchase Order Number</th>-->
-          <th scope="col">Description</th>
-          <th scope="col">Rate Type</th>
-          <th scope="col">Service Type</th>
-          <th scope="col" style="width: 75px">Quantity</th>
-          <th scope="col" style="width: 100px">Rate</th>
-          <!--<th scope="col">Remaining Quantity</th>-->
-        </tr>
-        </thead>
-        <!--<tbody>-->
-        <tbody *ngFor="let poDetail of selectedPODetail; let i = index">
-        <tr class="p-0 m-0">
-          <!--<td class="p-0 m-0">-->
-          <!--<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">-->
-          <!-- - -->
-          <!--</button>-->
-          <!--</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">
-            <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>
-              <option value="2">Hourly</option>
-            </select>
-            <!--<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">-->
-          </td>
-          <td class="p-0 m-0">
-            <select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>
-              <option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceTypes">{{serviceType.desc}}</option>
-              <!--<option value="">Study</option>-->
-              <!--<option value="2">Design</option>-->
-              <!--<option value="3">Peer Review</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); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #qty></td>
-          <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="+poDetail.fee | currency" (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>
-        <tr class="p-0 m-0">
-          <td class="p-1 m-0">
-            <button class="btn btn-success" type="button"
-                    (click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">
-                    <!--(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,-->
-                     <!--feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">-->
-              +</button>
-          </td>
-          <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>-->
-          <!--<td class="p-0 m-0">-->
-            <!--<select class="form-control cell" [value]="1" #feeTypeId>-->
-              <!--<option value="1">Fixed Fee</option>-->
-              <!--<option value="2">Hourly</option>-->
-            <!--</select>-->
-          <!--</td>-->
-          <!--<td class="p-0 m-0">-->
-            <!--<select class="form-control cell" [value]="1" #serviceTypeId>-->
-              <!--<option value="1">Study</option>-->
-              <!--<option value="2">Design</option>-->
-              <!--<option value="3">Peer Review</option>-->
-              <!--<option value="4">Cost Estimation</option>-->
-              <!--<option value="5">Forensic Investigation</option>-->
-            <!--</select>-->
-          <!--</td>-->
-          <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #qty></td>-->
-          <!--<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>-->
-        </tr>
-        </tbody>
-      </table>
-    </div>
+    <!--<div class="modal-body" *ngIf="selectedPODetail">-->
+    <!--<p class="h4 text-right">Detail</p>-->
+    <!--<hr>-->
+
+    <!--<table class="table">-->
+    <!--<thead>-->
+    <!--<tr>-->
+    <!--<th scope="col" style="width: 50px">#</th>-->
+    <!--&lt;!&ndash;<th scope="col">Purchase Order Number</th>&ndash;&gt;-->
+    <!--<th scope="col">Description</th>-->
+    <!--<th scope="col">Rate Type</th>-->
+    <!--<th scope="col">Service Type</th>-->
+    <!--<th scope="col" style="width: 75px">Quantity</th>-->
+    <!--<th scope="col" style="width: 100px">Rate</th>-->
+    <!--&lt;!&ndash;<th scope="col">Remaining Quantity</th>&ndash;&gt;-->
+    <!--</tr>-->
+    <!--</thead>-->
+    <!--&lt;!&ndash;<tbody>&ndash;&gt;-->
+    <!--<tbody *ngFor="let poDetail of selectedPODetail; let i = index">-->
+    <!--<tr class="p-0 m-0">-->
+    <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+    <!--&lt;!&ndash;<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">&ndash;&gt;-->
+    <!--&lt;!&ndash; - &ndash;&gt;-->
+    <!--&lt;!&ndash;</button>&ndash;&gt;-->
+    <!--&lt;!&ndash;</td>&ndash;&gt;-->
+    <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>-->
+    <!--&lt;!&ndash;<td class="p-0"><input type="text" class="form-control cell" [value]="poDetail.ponum"></td>&ndash;&gt;-->
+    <!--<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>-->
+    <!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
+    <!--</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>-->
+    <!--<option value="2">Hourly</option>-->
+    <!--</select>-->
+    <!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">&ndash;&gt;-->
+    <!--</td>-->
+    <!--<td class="p-0 m-0">-->
+    <!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
+    <!--<option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceTypes">{{serviceType.desc}}</option>-->
+    <!--&lt;!&ndash;<option value="">Study</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
+    <!--</select>-->
+    <!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>&ndash;&gt;-->
+    <!--</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="text" class="form-control cell" [value]="+poDetail.fee | currency" (change)="onSelectedCellChange(i, 'fee', fee.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #fee></td>-->
+    <!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>&ndash;&gt;-->
+    <!--</tr>-->
+    <!--</tbody>-->
+    <!--<tr class="p-0 m-0">-->
+    <!--<td class="p-1 m-0">-->
+    <!--<button class="btn btn-success" type="button"-->
+    <!--(click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
+    <!--&lt;!&ndash;(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,&ndash;&gt;-->
+    <!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
+    <!--+</button>-->
+    <!--</td>-->
+    <!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
+    <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+    <!--&lt;!&ndash;<select class="form-control cell" [value]="1" #feeTypeId>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="1">Fixed Fee</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="2">Hourly</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;</select>&ndash;&gt;-->
+    <!--&lt;!&ndash;</td>&ndash;&gt;-->
+    <!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
+    <!--&lt;!&ndash;<select class="form-control cell" [value]="1" #serviceTypeId>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="1">Study</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
+    <!--&lt;!&ndash;</select>&ndash;&gt;-->
+    <!--&lt;!&ndash;</td>&ndash;&gt;-->
+    <!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #qty></td>&ndash;&gt;-->
+    <!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;-->
+    <!--</tr>-->
+    <!--</tbody>-->
+    <!--</table>-->
+    <!--</div>-->
 
     <div class="modal-footer">
       <button class="btn btn-success" type="button"
@@ -385,3 +394,39 @@
     </div>
   </div>
 </app-modal-form>
+
+<!--MODAL: po details-->
+<app-modal-form [title]="'Details of ' + (selected ? selected.ponum: '')" #editDetails>
+  <div class="modal-body">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12 align-items-end">
+          <ag-grid-angular
+                  style="height: 350px;"
+                  class="ag-theme-balham"
+                  [enableColResize]="true"
+                  [enableSorting]="true"
+                  [enableFilter]="true"
+                  [rowData]="selectedPODetail | async"
+                  [columnDefs]="detailColumnDefs"
+                  (cellEditingStopped)="updateDetailRow($event)"
+                  (gridReady)="onDetailGridReady($event)"
+                  (rowDataChanged)="resizeColumns($event)"
+                  rowSelection="single"
+          ></ag-grid-angular>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="col-12">
+          <h4 align="end">Total Cost: {{contractAmount | currency}}</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button class="btn btn-primary" type="button" (click)="addEmptyDetail()">Add</button>
+    <button class="btn btn-outline-danger" (click)="close(editDetails)">Exit</button>
+  </div>
+</app-modal-form>

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

@@ -1,6 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
-import {formatCurrency} from "@angular/common";
+import {formatCurrency} from '@angular/common';
 
 @Component({
     selector: 'app-sales-order',
@@ -8,225 +8,335 @@ import {formatCurrency} from "@angular/common";
     styleUrls: ['./sales-order.component.css']
 })
 export class SalesOrderComponent implements OnInit {
-    @ViewChild('agGrid') agGrid;
-    selected = null;
-    selectedPODetail = [];
-    newPODetail = [];
-    newContractAmount = 0;
-    editContractAmount = 0;
+    // both of the grid api's
+    gridApi;
+    gridColumnApi;
+    detailGridApi;
+    detailColumnApi;
+
+    // one time fetch meta-data
     customers;
-    pos;
     serviceTypes;
+    serviceNames = [];
+    rateTypes = [];
+    rateNames = [];
+
+    // data for SO grid
+    rowData: any;
     columnDefs = [
-        {headerName: 'Project Number', field: 'astuteProjectNumber'},
+        {headerName: 'Project Number', field: 'astuteProjectNumber', editable: true},
         {headerName: 'SO Number', field: 'ponum'},
         // {headerName: 'Customer ID', field: 'customerId'},
         {headerName: 'Customer Name', field: 'customerName'},
-        {headerName: 'Contract Number', field: 'contractNum'},
-        {headerName: 'SO Title', field: 'title'},
-        {headerName: 'Contract Amount', field: 'contractAmt'},
-        {headerName: 'SO Date', field: 'podate'},
+        {headerName: 'Contract Number', field: 'contractNum', editable: true},
+        {headerName: 'SO Title', field: 'title', editable: true},
+        {headerName: 'Contract Amount', field: 'contractAmtString'},
+        // {headerName: 'Contract Amount', field: 'contractAmt'},
+        {headerName: 'SO Date', field: 'podate', editable: true},
         {headerName: '# of Invoice', field: 'invoiceSequence'},
-        {headerName: 'notes', field: 'notes'}
+        {headerName: 'notes', field: 'notes', editable: true, cellEditor: 'agLargeTextCellEditor'}
         // {headerName: 'oneInvInDraft', field: 'oneInvInDraft'}
     ];
-    rowData: any;
+    selected = null; // the selected SO row
+
+    // data for SO detail grid
+    selectedPODetail;
+    detailColumnDefs = [
+        {headerName: '#', field: 'lineItemNo'},
+        {headerName: 'Description', field: 'serviceDesc', editable: true},
+        {headerName: 'Rate Type', field: 'rateTypeName', editable: true,
+            cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.rateNames}},
+        {headerName: 'Service Type', field: 'serviceTypeName', editable: true,
+            cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.serviceNames}},
+        {headerName: 'Qty or Hours', field: 'qty', editable: true},
+        {headerName: 'Rate ($)', field: 'fee', editable: true}
+    ];
+    contractAmount = 0; // used to show total amount
 
     constructor(private astuteClientService: AstuteClientService) {
     }
 
     ngOnInit() {
-        this.refreshData();
         this.astuteClientService.getServiceTypes().then((d) => {
             if (d) {
                 this.serviceTypes = d;
+                this.serviceTypes.forEach((type) => {
+                    this.serviceNames.push(type.serviceTypeDesc);
+                });
+                // console.log(this.serviceNames);
             } else {
-                alert ('get service types failed');
+                alert ('Get service types failed');
             }
+        }, reason => {
+            alert('Get service type failed: ' + reason);
+        });
+        this.astuteClientService.getRateTypes().then((d) => {
+            if (d) {
+                this.rateTypes = d;
+                this.rateTypes.forEach((type) => {
+                    this.rateNames.push(type.feeTypeDesc);
+                });
+            } else {
+                alert ('Get rate types failed');
+            }
+        }, reason => {
+            alert('Get rate type failed: ' + reason);
+        });
+        this.astuteClientService.getCustomers().then((customers) => {
+            if (customers) {
+                this.customers = customers;
+                this.refreshData();
+            } else {
+                alert('Get Customers Failed!');
+            }
+        }, (reason) => {
+            alert('Get Customers Failed: ' + reason);
         });
     }
-    printValue(val) {
-        console.log(val);
+
+    // callback for grid selection
+    setSelectedRow(event) {
+        if (event) {
+            this.selected = event.data;
+        }
+
+        this.selectedPODetail = this.astuteClientService.getPODetail(this.selected.ponum).then((data) => {
+            if (data) {
+                data.forEach((row) => {
+                    row.poNum = row.ponum;
+                    row.serviceTypeName = this.serviceNames[row.serviceTypeId - 1];
+                    row.rateTypeName = this.rateNames[row.feeTypeId - 1];
+                });
+                // console.log(this.selectedPODetail);
+                this.updateContractAmt();
+                if (this.gridColumnApi) {
+                    this.gridColumnApi.autoSizeAllColumns();
+                }
+                if (this.detailColumnApi) {
+                    this.detailColumnApi.autoSizeAllColumns();
+                }
+                return data;
+            } else {
+                alert('Get SO detail failed!');
+            }
+        }, (reason) => {
+            alert('Get SO detail failed: ' + reason);
+        });
     }
 
-    gridOptions = {
-        onRowClicked: (event) => {
-            this.getSelectedRows();
+    // for inline updating
+    updateRow(event) {
+        const eventData = event.data;
+        // console.log(eventData);
+
+        this.astuteClientService.updatePO(eventData.poNum, eventData).then((data) => {
+            if (!data) {
+                alert('SO updating failed, check input fields');
+            }
+            this.refreshData();
+        }, (reason) => {
+            alert('Update SO failed: ' + reason);
+        });
+        // this.refreshData();
+    }
+    updateDetailRow(event) {
+        const eventData = event.data;
+        // console.log(eventData);
+        event.data.serviceTypeId = this.getServiceIdFromName(event.data.serviceTypeName);
+        event.data.feeTypeId = this.getFeeIdFromName(event.data.rateTypeName);
+        if (event.data.feeTypeId === 1 && event.data.qty > 1) { // fixed fee and qty > 1
+            alert('Cannot have a quantity greater than 1 for fixed fee rate type.');
+            this.refreshDetailsOfSelected();
+        } else {
+            // console.log(event.data.serviceTypeId);
+            this.astuteClientService.updatePODetail(eventData.poNum, eventData.lineItemNo, eventData).then((data) => {
+                if (!data) {
+                    alert('SO Detail updating failed, check input fields');
+                }
+                this.refreshDetailsOfSelected();
+            }, (reason) => {
+                alert('Update SO Detail failed: ' + reason);
+            });
+            // this.refreshData();
         }
     }
 
+    // wrappers for PO service methods
     addPo(projNum, ponum, podate, customerid, contractnum, contractamt, title, notes, ref) {
         const poData = {
-            "astuteProjectNumber": projNum,
-            "poNum": ponum,
-            "podate": podate,
-            "customerId": customerid,
-            "contractNum": contractnum,
-            "contractAmt": contractamt,
-            "title": title,
-            "notes": notes,
-        }
-        console.log(poData);
+            'astuteProjectNumber': projNum,
+            'poNum': ponum,
+            'podate': podate,
+            'customerId': customerid,
+            'contractNum': contractnum,
+            'contractAmt': contractamt,
+            'title': title,
+            'notes': notes
+        };
+        // console.log(poData);
         this.astuteClientService.createPO(poData).then((data) => {
             if (data) {
                 this.refreshData();
-                this.addPODetail(this.newPODetail);
+                // this.addPODetail(this.newPODetail);
                 ref.close();
             } else {
-                alert("PO Creation failed, check input fields");
+                alert('SO Creation failed, check input fields');
             }
         }, (reason) => {
-            alert("add po failed for " + reason);
+            alert('Add SO failed for ' + reason);
         });
     }
-
-    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 = [];
-        }
-    }
-
     editPo(projNum, ponum, podate, contractnum, contractamt, title, notes, ref) {
         const poData = {
-            "astuteProjectNumber": projNum,
-            "poNum": ponum,
-            "podate": podate,
-            "contractNum": contractnum,
-            "contractAmt": contractamt,
-            "title": title,
-            "notes": notes,
-        }
-        console.log(poData);
+            'astuteProjectNumber': projNum,
+            'poNum': ponum,
+            'podate': podate,
+            'contractNum': contractnum,
+            'contractAmt': contractamt,
+            'title': title,
+            'notes': notes,
+        };
+        // console.log(poData);
         this.astuteClientService.updatePO(ponum, poData).then((data) => {
             if (data) {
                 this.refreshData();
-                this.editPODetail(this.selectedPODetail);
+                // this.editPODetail(this.selectedPODetail);
                 ref.close();
             } else {
-                alert("PO updating failed, check input fields");
+                alert('SO updating failed, check input fields');
             }
         }, (reason) => {
-            alert("update po failed for " + reason);
+            alert('Update SO 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 = [];
-        }
-    }
-
-
     finalizePO(ponum) {
         this.astuteClientService.finalizePO(ponum).then((data) => {
             if (data) {
                 this.refreshData();
-                alert("PO is now final and ready to be used, you can't delete it anymore!");
+                alert('SO is now final and ready to be used, you can\'t delete it anymore!');
             } else {
-                alert("Finalizing PO failed, check input fields");
+                alert('Finalizing SO failed, check input fields');
             }
+        }, reason => {
+            alert('Finalizing SO failed: ' + reason);
         });
     }
-
     deletePO(ponum) {
-        this.astuteClientService.deletePO(ponum).then((data) => {
-            if (data) {
-                this.refreshData();
-            } else {
-                alert("deleting PO failed, check input fields");
+        if (confirm('Are you sure?')) {
+            this.astuteClientService.deletePO(ponum).then((data) => {
+                if (data) {
+                    this.refreshData();
+                } else {
+                    alert('Deleting SO failed, check input fields');
+                }
+            }, (reason) => {
+                alert('Deleting SO failed: ' + reason);
+
+            });
+        }
+    }
+
+    // wrappers for SO detail service methods
+    addEmptyDetail() {
+        const emptyData = {
+            fee: 0,
+            feeTypeId: 1,
+            // lineItemNo: 7,
+            poNum: this.selected.poNum,
+            qty: 1,
+            remainingQty: 1,
+            serviceDesc: '',
+            serviceTypeId: 1
+        };
+
+        // String poNum;
+        // int lineItemNo;
+        // String serviceDesc;
+        // int feeTypeId;
+        // Double qty;
+        // Double fee;
+        // int serviceTypeId;
+        // Double remainingQuantity;
+        this.astuteClientService.createPODetail(emptyData).then((data) => {
+            if (!data) {
+                alert('Creating SO detailed failed!');
             }
+            this.refreshDetailsOfSelected();
+        }, (reason) => {
+            alert('Creating SO detailed failed: ' + reason);
         });
     }
 
-    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 and closing modal-form components
     open(ref) {
-        this.getSelectedRows();
+        // this.getSelectedRows();
+        this.gridColumnApi.autoSizeAllColumns();
+        this.detailColumnApi.autoSizeAllColumns();
         ref.open();
     }
-
     close(ref) {
-        this.newPODetail = [];
-        this.selectedPODetail = [];
-
+        // 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);
+    // refreshing data methods
+    refreshData() {
+        // this.astuteClientService.getPOs().then((data) => {
+        //     if (data) {
+        //         // this.pos = data;
+        //         this.rowData = data;
+        //         this.rowData.forEach((row) => {
+        //             row.customerName = this.getCustomerNameFromId(row.customerId);
+        //             row.contractAmtString = formatCurrency(row.contractAmt, 'en-US', '$', 'USD');
+        //             row.poNum = row.ponum;
+        //         });
+        //         this.selected = null;
+        //         this.updateNewContractAmt();
+        //         this.updateEditContractAmt();
+        //     } else {
+        //         alert('Get SO\'s Failed!');
+        //     }
+        // }, (reason) => {
+        //     alert('Get SO\'s Failed: ' + reason);
+        // });
+        this.rowData = this.astuteClientService.getPOs().then((data) => {
+            if (data) {
+                // this.pos = data;
+                data.forEach((row) => {
+                    row.customerName = this.getCustomerNameFromId(row.customerId);
+                    row.contractAmtString = formatCurrency(row.contractAmt, 'en-US', '$', 'USD');
+                    row.poNum = row.ponum;
+                });
+                this.selected = null;
+                this.contractAmount = 0;
+                return data;
+            } else {
+                alert('Get SO\'s Failed!');
+            }
+        }, (reason) => {
+            alert('Get SO\'s Failed: ' + reason);
+        });
+    }
+    refreshDetailsOfSelected() {
+        this.setSelectedRow(null);
+    }
+    updateContractAmt() {
+        this.contractAmount = 0;
+        if (this.selectedPODetail) {
+            this.selectedPODetail.then((detail) => {
+                detail.forEach((d) => {
+                    this.contractAmount += +d.qty * +d.fee;
+                });
+            });
+        }
     }
 
+    // helper methods
     getCurrDate() {
         const d = new Date();
         return this.formatDate(d);
     }
-
     formatDate(d: Date) {
         let month = '' + (d.getMonth() + 1),
             day = '' + d.getDate(),
@@ -240,50 +350,7 @@ export class SalesOrderComponent implements OnInit {
         }
         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;
-            console.log(this.selected.contractNum);
-            this.astuteClientService.getPODetail(this.selected.ponum).then((data) => {
-                if (data) {
-                    this.selectedPODetail = data;
-                    // console.log(this.selectedPODetail);
-                    this.updateEditContractAmt();
-                } 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);
-                            row.contractAmt = formatCurrency(row.contractAmt, 'en-US', '$', 'USD');
-                        });
-                    }
-                });
-            } else {
-                alert('get Customers Failed!');
-            }
-        });
-        // this.rowData = this.astuteClientService.getPOs();
-    }
-
-    getCustomerName(customerId) {
+    getCustomerNameFromId(customerId) {
         let name = '';
         this.customers.forEach((customer) => {
             if (customer.customerId === customerId) {
@@ -292,4 +359,36 @@ export class SalesOrderComponent implements OnInit {
         });
         return name;
     }
+    getServiceIdFromName(name) {
+        let id = -1;
+        this.serviceTypes.forEach((type) => {
+            console.log(type.serviceTypeDesc + ' ' + name);
+            if (type.serviceTypeDesc === name) {
+                id = type.serviceTypeId;
+            }
+        });
+        return id;
+    }
+    getFeeIdFromName(name: any) {
+        let id = -1;
+        this.rateTypes.forEach((type) => {
+            if (type.feeTypeDesc === name) {
+                id = type.feeTypeId;
+            }
+        });
+        return id;
+    }
+
+    // ag grid callbacks
+    onGridReady(evt) {
+        this.gridApi = evt.api;
+        this.gridColumnApi = evt.columnApi;
+    }
+    onDetailGridReady(evt) {
+        this.detailGridApi = evt.api;
+        this.detailColumnApi = evt.columnApi;
+    }
+    resizeColumns(evt) {
+        evt.columnApi.autoSizeAllColumns();
+    }
 }

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

@@ -3,101 +3,100 @@ import {Injectable} from '@angular/core';
 
 @Injectable()
 export class AstuteClientService {
-  headers = {
-    headers: new HttpHeaders().set('Content-Type', 'application/json'),
-  };
-  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';
-  private invoiceGenUrl = 'http://localhost:8080/astutesystem/invoice/generatedInvoice';
-  private invoicePaymentUrl = 'http://localhost:8080/astutesystem/invoicePayment';
-  private serviceTypeUrl = 'http://localhost:8080/astutesystem/serviceType';
-  private sessionId = localStorage.getItem('');
-  private sessionString = `?sessionId=${this.sessionId}`;
-
-  constructor(private http: HttpClient) { }
-
-  // **************************************** AUTH Service methods
-
-  public login(username: string, password: string): Promise<string> {
-    const data = {
-      'username': username,
-      'password': password
+    headers = {
+        headers: new HttpHeaders().set('Content-Type', 'application/json'),
     };
+    private authUrl = 'http://localhost:8080/astutesystem/auth';
+    private customerUrl = 'http://localhost:8080/astutesystem/customer';
+    private customerContactUrl = 'http://localhost:8080/astutesystem/customer/contact';
+    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';
+    private invoiceGenUrl = 'http://localhost:8080/astutesystem/invoice/generatedInvoice';
+    private invoicePaymentUrl = 'http://localhost:8080/astutesystem/invoicePayment';
+    private serviceTypeUrl = 'http://localhost:8080/astutesystem/serviceType';
+    private sessionString = `?sessionId=${localStorage.getItem('SESSION_ID')}`;
 
-    return this.http
-      .post(this.authUrl, data)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        const name = response['entity'].name;
-        const sessionId = response['entity'].sessionId;
-        if (sessionId != null) {
-          localStorage.setItem('SESSION_ID', sessionId);
-            localStorage.setItem('SESSION_USER', name);
-          return sessionId;
-        } else {
-          return null;
-        }
-      });
-  }
 
-    public logout() {
-        localStorage.removeItem('SESSION_ID');
-        localStorage.removeItem('SESSION_USER');
-        console.log(localStorage.getItem('SESSION_ID'));
+    constructor(private http: HttpClient) { }
+
+    // **************************************** AUTH Service methods
+    public login(username: string, password: string): Promise<string> {
+        const data = {
+            'username': username,
+            'password': password
+        };
+        return this.http
+            .post(this.authUrl, data)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                const name = response['entity'].name;
+                const sessionId = response['entity'].sessionId;
+                if (sessionId != null) {
+                    localStorage.setItem('SESSION_ID', sessionId);
+                    this.sessionString = `?sessionId=${localStorage.getItem('SESSION_ID')}`;
+                    console.log(sessionId);
+                    localStorage.setItem('SESSION_USER', name);
+                    return sessionId;
+                } else {
+                    return null;
+                }
+            });
+    }
+    public logout() {
+        return this.http
+            .post(`${this.authUrl}/logout${this.sessionString}`, {})
+            .toPromise()
+            .then(response => {
+                localStorage.removeItem('SESSION_ID');
+                localStorage.removeItem('SESSION_USER');
+                return response['entity'];
+            });
     }
-
     public getSessionId(): string {
         console.log(localStorage.getItem('SESSION_ID'));
         return localStorage.getItem('SESSION_ID');
     }
-
     public getSessionUser(): string {
         console.log(localStorage.getItem('SESSION_USER'));
         return localStorage.getItem('SESSION_USER');
     }
 
-
-  // **************************************** Customer Service methods
-
-  public getCustomers(): Promise<any> {
-    console.log("*** In getCustomers()");
-    const url = `${this.customerUrl}${this.sessionString}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        return response['entity'];
-      })
-        .catch( error => {
-            alert(error);
-        });
-  }
-
-  public updateCustomer(customerId: number, data: any): Promise<any> {
-    console.log("*** In updateCustomer()");
-    const url = `${this.customerUrl}/${customerId}`; //TODO send sessionId
-    return this.http.put(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public createCustomer(data: any): Promise<any> {
-    console.log("*** In createCustomer()");
-    const url = `${this.customerUrl}`; //TODO send sessionId
-    return this.http.post(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
+    // **************************************** Customer Service methods
+    public getCustomers(): Promise<any> {
+        console.log('*** In getCustomers()');
+        const url = `${this.customerUrl}${this.sessionString}`;
+        console.log(url);
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            })
+            .catch( error => {
+                alert(error);
+            });
+    }
+    public updateCustomer(customerId: number, data: any): Promise<any> {
+        console.log('*** In updateCustomer()');
+        const url = `${this.customerUrl}/${customerId}${this.sessionString}`;
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createCustomer(data: any): Promise<any> {
+        console.log('*** In createCustomer()');
+        const url = `${this.customerUrl}${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
     public deleteCustomer(customerId) {
-        console.log("*** In deleteCustomer()");
-        const url = `${this.customerUrl}/${customerId}/delete`;
+        console.log('*** In deleteCustomer()');
+        const url = `${this.customerUrl}/${customerId}/delete${this.sessionString}`;
         return this.http.put(url, {})
             .toPromise()
             .then(response => {
@@ -106,200 +105,11 @@ export class AstuteClientService {
             });
     }
 
-  // **************************************** PO Service methods
-
-
-  public getPOs(): Promise<any> {
-    console.log("*** In getPOs()");
-    const url = `${this.POUrl}`;
-    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}`;
-    console.log(url);
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        return response['entity'];
-      });
-  }
-
-  public updatePO(ponum: string, data: any): Promise<any> {
-    console.log("*** In updatePO()");
-    const url = `${this.POUrl}/${ponum}`; //TODO send sessionId
-    return this.http.put(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public createPO(data: any): Promise<any> {
-    console.log("*** In createPO()");
-    const url = `${this.POUrl}`; //TODO send sessionId
-    return this.http.post(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public updatePODetail(ponum, lineItemNo, data) {
-    console.log("*** In updatePODetail()");
-    const sessionId = localStorage.getItem('sessionId');
-    const url = `${this.POUrl}/detail/${ponum}/${lineItemNo}`; //TODO send sessionId
-    return this.http.put(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public createPODetail(data) {
-    console.log("*** In createPODetail()");
-    const url = `${this.POUrl}/detail`; //TODO send sessionId
-    return this.http.post(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-    public finalizePO(ponum: string){
-        console.log("*** In finalizePO()");
-        const url = `${this.POUrl}/${ponum}/finalize`; //TODO send sessionId
-        return this.http.put(url, {})
-            .toPromise()
-            .then(response => response['entity']);
-    }
-
-
-    public deletePO(ponum: string) {
-        console.log("*** In deletePO()");
-        const url = `${this.POUrl}/${ponum}/delete`; //TODO send sessionId
-        return this.http.put(url, {})
-            .toPromise()
-            .then(response => response['entity']);
-    }
-
-    // **************************************** Invoice Service methods
-
-  // /{InvoiceNumber}/void
-  public submitInvoice (invoiceNumber) {
-    console.log("*** In submitInvoice(), invoiceNumber" + invoiceNumber);
-    const url = `${this.invoiceUrl}/${invoiceNumber}/submit`;
-    return this.http.put(url, {})
-      .toPromise()
-      .then(response => {
-        console.log (response['entity']);
-        return response['entity'];
-      });
-  }
-
-  public voidInvoice (invoiceNumber) {
-    console.log("*** In voidInvoice(), invoiceNumber" + invoiceNumber);
-    const url = `${this.invoiceUrl}/${invoiceNumber}/void`;
-    return this.http.put(url, {})
-      .toPromise()
-      .then(response => {
-        console.log (response['entity']);
-        return response['entity'];
-      });
-  }
-
-  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}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log (response['entity'])
-        return response['entity'];
-      });
-  }
-
-  public getInvoices(): Promise<any> {
-    console.log("*** In getInvoices()");
-    const url = `${this.invoiceUrl}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        return response['entity'];
-      });
-  }
-
-  public getInvoiceDetail(invoiceId: string): Promise<any> {
-    console.log("*** In getInvoiceDetail()");
-    const url = `${this.invoiceDetailUrl}?invoiceNumber=${invoiceId}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        return response['entity'];
-      });
-  }
-
-  public getInvoiceGen (invoiceId: string): Promise<any> {
-    console.log("*** In getInvoiceGen()");
-    const url = `${this.invoiceGenUrl}/${invoiceId}`;
-    return this.http.get(url)
-      .toPromise()
-      .then(response => {
-        console.log(response['entity']);
-        return response['entity'];
-      });
-  }
-
-  public updateInvoice(invoiceNumber: string, data: any): Promise<any> {
-    console.log("*** In updateInvoice()");
-    const url = `${this.invoiceUrl}/${invoiceNumber}`; //TODO send sessionId
-    return this.http.put(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public createInvoice(data: any): Promise<any> {
-    console.log("*** In createInvoice()");
-    const url = `${this.invoiceUrl}`; //TODO send sessionId
-    return this.http.post(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public updateInvoiceDetail(invNum, lineItemNo, data) {
-    console.log("*** In updateInvoiceDetail()");
-    const url = `${this.invoiceUrl}/detail/${invNum}/${lineItemNo}`; //TODO send sessionId
-    return this.http.put(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-  public createInvoiceDetail(data) {
-    console.log("*** In createInvoiceDetail()");
-    const url = `${this.invoiceUrl}/detail`; //TODO send sessionId
-    return this.http.post(url, data)
-      .toPromise()
-      .then(response => response['entity']);
-  }
-
-
-   // **************************************** Invoice Payment Service methods
-
-    public getSumittedInvoices(): Promise<any> {
-        console.log("*** In getSumittedInvoices()");
-        const url = `${this.invoiceUrl}/submitted`;
+    // **************************************** Customer Contact Service methods
+    public getCustomerContacts(customerId): Promise<any> {
+        console.log('*** In getCustomerContacts()');
+        const url = `${this.customerContactUrl}?customerId=${customerId}&sessionId=${localStorage.getItem('SESSION_ID')}`;
+        console.log(url);
         return this.http.get(url)
             .toPromise()
             .then(response => {
@@ -307,51 +117,257 @@ export class AstuteClientService {
                 return response['entity'];
             });
     }
-
-    public getInvoiceTypes(): Promise<any> {
-        const url = `${this.invoicePaymentUrl}/paymentTypes`;
-        console.log("*** In getInvoiceTypes() ... calling " + url);
-        return this.http.get(url)
-            .toPromise()
-            .then(response => {
-                console.log(response['entity']);
-                return response['entity'];
-            });
-    }
-
-    public getInvoicePayments(): Promise<any> {
-        console.log("*** In getInvoicePayments()");
-        const url = `${this.invoicePaymentUrl}`;
-        return this.http.get(url)
-            .toPromise()
-            .then(response => {
-                console.log(response['entity']);
-                return response['entity'];
-            });
-    }
-
-    public updateInvoicePayment(invoiceNumber: string, invoicePaymentId: string, data: any): Promise<any> {
-        console.log("*** In updateInvoicePayment()");
-        const url = `${this.invoicePaymentUrl}/${invoiceNumber}/${invoicePaymentId}`; //TODO send sessionId
-        console.log("*** invoicePaymentUrl is " + url);
+    public updateCustomerContact(customerId: string, data: any): Promise<any> {
+        console.log('*** In updateCustomerContact()');
+        const url = `${this.customerContactUrl}/${customerId}${this.sessionString}`;
         return this.http.put(url, data)
             .toPromise()
             .then(response => response['entity']);
     }
+    public deleteCustomerContact(customerId: string, contactId: number): Promise<any> {
+        console.log('*** In deleteCustomerContact()');
+        const url = `${this.customerContactUrl}/${customerId}/${contactId}/delete${this.sessionString}`;
+        return this.http.put(url, {})
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createCustomerContact(data: any): Promise<any> {
+        console.log('*** In createCustomerContact()');
+        const url = `${this.customerContactUrl}/${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
 
+    // **************************************** PO Service methods
+    public getPOs(): Promise<any> {
+        console.log('*** In getPOs()');
+        const url = `${this.POUrl}${this.sessionString}`;
+        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}&sessionId=${localStorage.getItem('SESSION_ID')}`;
+        console.log(url);
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public updatePO(ponum: string, data: any): Promise<any> {
+        console.log('*** In updatePO()');
+        const url = `${this.POUrl}/${ponum}${this.sessionString}`;
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createPO(data: any): Promise<any> {
+        console.log('*** In createPO()');
+        const url = `${this.POUrl}${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public updatePODetail(ponum, lineItemNo, data) {
+        console.log('*** In updatePODetail()');
+        const sessionId = localStorage.getItem('sessionId');
+        const url = `${this.POUrl}/detail/${ponum}/${lineItemNo}${this.sessionString}`;
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createPODetail(data) {
+        console.log('*** In createPODetail()');
+        const url = `${this.POUrl}/detail${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public finalizePO(ponum: string) {
+        console.log('*** In finalizePO()');
+        const url = `${this.POUrl}/${ponum}/finalize${this.sessionString}`;
+        return this.http.put(url, {})
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public deletePO(ponum: string) {
+        console.log('*** In deletePO()');
+        const url = `${this.POUrl}/${ponum}/delete${this.sessionString}`;
+        return this.http.put(url, {})
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public getRateTypes(): Promise<any> {
+        console.log('*** In getPOs()');
+        const url = `${this.POUrl}/feeTypes${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+
+    // **************************************** Invoice Service methods
+    public submitInvoice (invoiceNumber) {
+        console.log('*** In submitInvoice(), invoiceNumber' + invoiceNumber);
+        const url = `${this.invoiceUrl}/${invoiceNumber}/submit${this.sessionString}`;
+        return this.http.put(url, {})
+            .toPromise()
+            .then(response => {
+                console.log (response['entity']);
+                return response['entity'];
+            });
+    }
+    public voidInvoice (invoiceNumber) {
+        console.log('*** In voidInvoice(), invoiceNumber' + invoiceNumber);
+        const url = `${this.invoiceUrl}/${invoiceNumber}/void${this.sessionString}`;
+        return this.http.put(url, {})
+            .toPromise()
+            .then(response => {
+                console.log (response['entity']);
+                return response['entity'];
+            });
+    }
+    public deleteInvoice (invoiceNumber) {
+        console.log('*** In deleteInvoice(), invoiceNumber' + invoiceNumber);
+        const url = `${this.invoiceUrl}/${invoiceNumber}/delete${this.sessionString}`;
+        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}${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log (response['entity']);
+                return response['entity'];
+            });
+    }
+    public getInvoices(): Promise<any> {
+        console.log('*** In getInvoices()');
+        const url = `${this.invoiceUrl}${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public getInvoiceDetail(invoiceId: string): Promise<any> {
+        console.log('*** In getInvoiceDetail()');
+        const url = `${this.invoiceDetailUrl}?invoiceNumber=${invoiceId}&sessionId=${localStorage.getItem('SESSION_ID')}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public getInvoiceGen (invoiceId: string): Promise<any> {
+        console.log('*** In getInvoiceGen()');
+        const url = `${this.invoiceGenUrl}/${invoiceId}${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public updateInvoice(invoiceNumber: string, data: any): Promise<any> {
+        console.log('*** In updateInvoice()');
+        const url = `${this.invoiceUrl}/${invoiceNumber}${this.sessionString}`;
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createInvoice(data: any): Promise<any> {
+        console.log('*** In createInvoice()');
+        const url = `${this.invoiceUrl}${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public updateInvoiceDetail(invNum, lineItemNo, data) {
+        console.log('*** In updateInvoiceDetail()');
+        const url = `${this.invoiceUrl}/detail/${invNum}/${lineItemNo}${this.sessionString}`;
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+    public createInvoiceDetail(data) {
+        console.log('*** In createInvoiceDetail()');
+        const url = `${this.invoiceUrl}/detail${this.sessionString}`;
+        return this.http.post(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
+
+
+    // **************************************** Invoice Payment Service methods
+    public getSumittedInvoices(): Promise<any> {
+        console.log('*** In getSumittedInvoices()');
+        const url = `${this.invoiceUrl}/submitted${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public getInvoiceTypes(): Promise<any> {
+        const url = `${this.invoicePaymentUrl}/paymentTypes${this.sessionString}`;
+        console.log('*** In getInvoiceTypes() ... calling ' + url);
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public getInvoicePayments(): Promise<any> {
+        console.log('*** In getInvoicePayments()');
+        const url = `${this.invoicePaymentUrl}${this.sessionString}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => {
+                console.log(response['entity']);
+                return response['entity'];
+            });
+    }
+    public updateInvoicePayment(invoiceNumber: string, invoicePaymentId: string, data: any): Promise<any> {
+        console.log('*** In updateInvoicePayment()');
+        const url = `${this.invoicePaymentUrl}/${invoiceNumber}/${invoicePaymentId}${this.sessionString}`;
+        console.log('*** invoicePaymentUrl is ' + url);
+        return this.http.put(url, data)
+            .toPromise()
+            .then(response => response['entity']);
+    }
     public addInvoicePayment(data: any): Promise<any> {
-        console.log("*** In addInvoicePayment()");
-        const url = `${this.invoicePaymentUrl}`; //TODO send sessionId
+        console.log('*** In addInvoicePayment()');
+        const url = `${this.invoicePaymentUrl}${this.sessionString}`;
         return this.http.post(url, data)
             .toPromise()
             .then(response => response['entity']);
     }
 
     // **************************************** Service Type methods
-
     public getServiceTypes(): Promise<any> {
-        console.log("*** In getPOServiceTypes()");
-        const url = `${this.serviceTypeUrl}`;
+        console.log('*** In getPOServiceTypes()');
+        const url = `${this.serviceTypeUrl}${this.sessionString}`;
+        // console.log(url);
         return this.http.get(url)
             .toPromise()
             .then(response => {
@@ -359,19 +375,17 @@ export class AstuteClientService {
                 return response['entity'];
             });
     }
-
-    public updateServiceType(serviceTypeId, serviceTypeDesc, data: any): Promise<any> {
-        console.log("*** In updateServiceType()");
-        const url = `${this.serviceTypeUrl}/${serviceTypeId}/?desc=${serviceTypeDesc}`; //TODO send sessionId
-        console.log("*** updateServiceType is " + url);
+    public updateServiceType(serviceTypeId, data: any): Promise<any> {
+        console.log('*** In updateServiceType()');
+        const url = `${this.serviceTypeUrl}/${serviceTypeId}${this.sessionString}`;
+        console.log('*** updateServiceType is ' + url);
         return this.http.put(url, data)
             .toPromise()
             .then(response => response['entity']);
     }
-
     public createServiceType(data: any): Promise<any> {
-        console.log("*** In createServiceType()");
-        const url = `${this.serviceTypeUrl}`; //TODO send sessionId
+        console.log('*** In createServiceType()');
+        const url = `${this.serviceTypeUrl}${this.sessionString}`;
         return this.http.post(url, data)
             .toPromise()
             .then(response => response['entity']);

AstuteClient2/src/app/settings/settings.component.css

@@ -0,0 +1,3 @@
+.top-buffer {
+    margin-top:20px;
+}

AstuteClient2/src/app/settings/settings.component.html

@@ -0,0 +1,75 @@
+<app-nav-bar></app-nav-bar>
+<div class="container p-2">
+  <div class="row top-buffer align-items-center">
+    <div class="col-lg-12">
+      <h1 class="display-4">Settings</h1>
+      <hr>
+
+      <h3 class="display-5">Configuration</h3>
+      <hr>
+      <div class="container-fluid m-1">
+        <div class="row m-1 align-content-center w-100">
+          <button class="btn btn-info" style="width: 100%" (click)="open(serviceTypes)">Edit Service Types</button>
+        </div>
+        <div class="row m-1 p-1 align-content-center w-100">
+          <div class="col-4">
+            <button class="btn btn-primary w-100" [disabled]="true">Export Customers</button>
+          </div>
+          <div class="col-4">
+            <button class="btn btn-primary w-100" style="width: 100%" [disabled]="true">Export Sales Orders</button>
+          </div>
+          <div class="col-4">
+            <button class="btn btn-info w-100" style="width: 100%" [disabled]="true">Export Invoices</button>
+          </div>
+        </div>
+      </div>
+
+      <h3 class="display-5">Configuration</h3>
+      <hr>
+      <div class="container-fluid m-1">
+        <div class="row m-1 align-content-center w-100">
+          <div class="col-12 m-1">
+            <div class="row p-1">
+              <button class="btn btn-primary" style="width: 100%" [disabled]="true">Edit Users</button>
+            </div>
+            <div class="row p-1">
+              <button class="btn btn-warning" style="width: 100%" [disabled]="true">Change Password</button>
+            </div>
+            <div class="row p-1">
+              <button class="btn btn-danger" style="width: 100%" (click)="logout()">Logout</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<app-modal-form [title]="'Service Types'" #serviceTypes>
+  <div class="modal-body">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12 align-items-end">
+          <ag-grid-angular
+                  style="height: 350px;"
+                  class="ag-theme-balham"
+                  [enableColResize]="true"
+                  [enableSorting]="true"
+                  [enableFilter]="true"
+                  [rowData]="serviceTypeData | async"
+                  [columnDefs]="columnDefs"
+                  (cellEditingStopped)="updateServiceTypeRow($event)"
+                  (gridReady)="onGridReady($event)"
+                  (rowDataChanged)="resizeColumns($event)"
+                  rowSelection="single"
+          ></ag-grid-angular>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button class="btn btn-primary" type="button" (click)="addEmptyServiceTypes()">Add</button>
+    <button class="btn btn-outline-danger" (click)="close(serviceTypes)">Exit</button>
+  </div>
+</app-modal-form>

AstuteClient2/src/app/settings/settings.component.spec.ts

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

AstuteClient2/src/app/settings/settings.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import {AstuteClientService} from '../services/astute-client-service';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.css']
+})
+export class SettingsComponent implements OnInit {
+    serviceTypeData: Promise<any>;
+    columnDefs = [
+        {headerName: 'Service Type ID', field: 'serviceTypeId'},
+        {headerName: 'Service Type Description', field: 'serviceTypeDesc', editable: true},
+    ];
+    gridApi;
+    gridColumnApi;
+
+    constructor(private astuteClientService: AstuteClientService,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+        this.refreshServiceTypeData();
+    }
+
+    updateServiceTypeRow(evt) {
+        const data = evt.data;
+        console.log(data);
+        this.astuteClientService.updateServiceType(data.serviceTypeId, data).then((d) => {
+            if (!d) {
+                alert('Service Type updating failed, check input fields');
+            }
+            this.refreshServiceTypeData();
+        }, (reason) => {
+            alert('Update Service Type failed: ' + reason);
+        });
+    }
+
+    addEmptyServiceTypes() {
+        const data = {'serviceTypeName': ''};
+        this.astuteClientService.createServiceType(data).then((d) => {
+            if (!d) {
+                alert('Create Service Type Failed!');
+            }
+            this.refreshServiceTypeData();
+        }, (reason) => {
+            alert('Create Service Type Failed: ' + reason);
+        });
+    }
+
+    open(ref) {
+        ref.open();
+    }
+    close(ref) {
+        this.refreshServiceTypeData();
+        ref.close();
+    }
+
+    refreshServiceTypeData() {
+        this.serviceTypeData = this.astuteClientService.getServiceTypes();
+    }
+
+    onGridReady(evt) {
+        this.gridApi = evt.api;
+        this.gridColumnApi = evt.columnApi;
+    }
+    resizeColumns(evt) {
+        evt.columnApi.autoSizeAllColumns();
+    }
+
+    logout() {
+        this.astuteClientService.logout().then((data) => {
+            if (data) {
+                this.router.navigate(['/login']);
+                alert('Logout successful');
+            } else {
+                alert('Logout unsuccessful');
+            }
+        });
+    }
+
+
+}