added some files

This commit is contained in:
Akash Shah 2018-08-23 16:06:08 -04:00
parent 23156e0384
commit 57a14c9247
19 changed files with 2808 additions and 2354 deletions

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

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

View File

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

View File

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

View File

@ -0,0 +1,137 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AstuteClientService} from '../services/astute-client-service';
declare var html2pdf: any;
declare var html2canvas: any;
declare var jsPDF: any;
@Component({
selector: 'app-invoice-gen',
templateUrl: './invoice-gen.component.html',
styleUrls: ['./invoice-gen.component.css']
})
export class InvoiceGenComponent implements OnInit {
@ViewChild('doc') invoiceHTML: ElementRef;
name;
email;
address;
poNum;
coNum;
inNum;
inDate;
inDetails; // :[{lineNum:number, desc:string, rate:string, hrs:number, amount:number}];
ogCoAmt;
netChanges = 0;
totCoAmt = 0;
prevBill;
inAmt;
balToBeBill;
subTotal; // =inAmt
milage = 0;
otherExp = 0;
outOf = 0;
finTot; // = inAmt;
notes;
cert;
constructor(protected astuteClientService: AstuteClientService) {
// console.log("********** " + this.astuteClientService.getInvoiceGen("123").then());
console.log("in invoice gen comp")
this.astuteClientService.getInvoiceGen("NVCC-01_1712_21").then((data) => {
this.name = data.customer.customerName;
this.email = data.customer.email;
this.address = data.customer.add1 + " " + data.customer.add2 + " " +
data.customer.city + ", " + data.customer.state.toUpperCase() + ", " +
data.customer.zip + "-" + data.customer.ziplast4;
this.poNum = data.po.ponum;
this.coNum = data.po.contractNum;
this.inNum = data.invoice.invoiceNumber;
this.inDate = data.invoice.invoiceDate;
this.inDetails = data.invoiceDetail;
this.ogCoAmt = data.po.contractAmt;
this.netChanges = 0;
this.totCoAmt = 0;
this.prevBill = data.previouslyPaidAmt;
this.inAmt = data.invoice.billAmt;
this.balToBeBill = data.balanceToBeBilled;
this.subTotal = this.inAmt;
this.milage = 0;
this.otherExp = 0;
this.outOf = 0;
this.finTot = this.inAmt;
this.notes = data.invoice.specialNotes;
this.cert = data.invoice.certification;
});
}
ngOnInit() {
}
downloadPDF() {
// new html2pdf(document.getElementById("doc"));
const A4_width = 425; // pixels
const A4_height = 550; // pixels
const ratio = 1;
//
const oldCanvas = document.createElement('canvas');
oldCanvas.width = A4_width;
oldCanvas.height = A4_height;
const oldContext = oldCanvas.getContext('2d');
const oldImg = new Image();
oldImg.src = oldCanvas.toDataURL();
oldContext.drawImage(oldImg, 0, 0, A4_width, A4_height);
const newImg = new Image();
newImg.onload = () => {
html2canvas(this.invoiceHTML.nativeElement).then((newCanvas) => {
// newCanvas.width = A4_width / 50;
// newCanvas.height = A4_height / 50;
const newContext = newCanvas.getContext('2d');
// Scale and draw the source image to the canvas
newContext.drawImage(newImg, 0, 0, A4_width * ratio, A4_height * ratio);
newImg.src = newCanvas.toDataURL();
const pdfDoc = new jsPDF({
unit: 'mm'
});
pdfDoc.addImage(newImg, 'png', 0, 0, 210, 297); // imageData, format, x, y, w, h
pdfDoc.addHTML(this.invoiceHTML.nativeElement);
pdfDoc.save(this.inNum + '.pdf'); // save file
newImg.onload = undefined; // kill the func
}
);
}
newImg.src = oldImg.src;
// let pdf = new jsPDF();
// pdf.addHTML(this.invoiceHTML.nativeElement, (data) => {
// pdf.save('testFile.pdf');
// console.log(data);
// });
setTimeout(window.close, 5000);
}
// html2pdf((<HTMLInputElement>document.getElementById('doc')));
// var data="hello";
// $.get("http://localhost/ws/service.asmx/HelloWord", function(response) {
// data = response;
// }).error(function(){
// alert("Sorry could not proceed");
// });
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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