added some files

This commit is contained in:
Akash Shah 2018-09-15 22:23:15 -04:00
parent d06eb1008e
commit 77325a02fd
8 changed files with 608 additions and 392 deletions

View File

@ -1 +1,11 @@
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightblue;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: lightblue;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: lightblue;
}

View File

@ -100,7 +100,7 @@
<td style="width: 25%"> <td style="width: 25%">
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP> <input type="number" class="form-control" placeholder="12345" #inZIP>
<input type="number" class="form-control" placeholder="6789" #inZIP4> <input type="number" class="form-control" placeholder="(+4)" #inZIP4>
</div> </div>
</td> </td>
</tr> </tr>
@ -212,7 +212,7 @@
<td style="width: 25%"> <td style="width: 25%">
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip"> <input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip">
<input type="number" class="form-control" placeholder="6789" #inZIP4 [value]="selected.ziplast4"> <input type="number" class="form-control" placeholder="(+4)" #inZIP4 [value]="selected.ziplast4">
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -12,3 +12,15 @@
.cell:focus { .cell:focus {
outline: none; outline: none;
} }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightblue;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: lightblue;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: lightblue;
}

View File

@ -56,30 +56,106 @@
<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"> <table class="table table-borderless table-sm">
<div class="input-group-prepend"> <tbody>
<span class="input-group-text">Invoice Number*</span> <tr>
</div> <td style="width: 1%">
<input type="text" class="form-control" #inNumIn [value]="chosenInv.invoiceNumber"> <span class="input-group-text">Customer </span>
<div class="input-group-prepend"> </td>
<span class="input-group-text">PO Number*</span> <td>
</div> <select class="custom-select" (change)="customerDropdownChange(customerSelec.value)"
<input type="text" class="form-control" [disabled]="true" #poNumIn [value]="chosenInv.poNum"> #customerSelec disabled>
<div class="input-group-prepend"> <!--[value]="chosenInv.customerName"-->
<span class="input-group-text">Change Order Num</span> <option [value]="-1">Choose Customer...</option>
</div> <option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}
<input type="text" class="form-control" #coNumIn [value]="chosenInv.changeOrderNum"> </option>
</div> </select>
</td>
<td style="width: 5%"></td>
<td style="width: 10%">
<span class="input-group-text">SO Number*</span>
</td>
<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>-->
<!--</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]="chosenInv.invoiceNumber" #inNumIn disabled>
</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" [value]="chosenInv.changeOrderNum" #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" [value]="chosenInv.pmtStatus" #pmtStatusIn>
<option value=0>Not Paid</option>
<option value=1>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>-->
<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">Payment Status*</span> <!--<span class="input-group-text">Payment Status*</span>-->
</div> <!--</div>-->
<select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn> <!--<select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>-->
<option value=0>Not Paid</option> <!--<option value=0>Not Paid</option>-->
<option value=1>Paid</option> <!--<option value=1>Paid</option>-->
</select> <!--</select>-->
</div> <!--</div>-->
</div> </div>
<!--Detials--> <!--Detials-->
@ -103,33 +179,66 @@
<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled> <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled>
</td> </td>
<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc" <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc"
(change)="onNewCellChange(i, 'desc', desc.value)" #desc></td> (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]" <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"
disabled></td> 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> (change)="onSelectedCellChange(i, 'fee', fee.value); updateSelectedBillAmt()" #fee>
</td> </td>
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty" <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
(change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty> [step]="inDet.remainingQty / 100"
(change)="onSelectedCellChange(i, 'qty', qty.value); updateSelectedBillAmt()" #qty>
</td> </td>
</tr> </tr>
<tr class="p-0 m-0"> <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum != -1" >
<th class="align-content-center"> <th class="align-content-center">
<p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p> <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
</th> </th>
<td colspan="4"> <td colspan="4">
<div class="progress" style="height: 25px;"> <div class="progress" style="height: 25px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
[ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}"> [ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">
${{fee.value * qty.value}} {{qty.value}}
</div> </div>
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
[ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}"> [ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">
${{inDet.remainingQty - (fee.value * qty.value)}} {{inDet.remainingQty - (qty.value)}}
</div> </div>
</div> </div>
</td> </td>
</tr> </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>-->
<!--</tr>-->
<!--<tr class="p-0 m-0">-->
<!--<th class="align-content-center">-->
<!--<p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>-->
<!--</th>-->
<!--<td colspan="4">-->
<!--<div class="progress" style="height: 25px;">-->
<!--<div class="progress-bar bg-success" role="progressbar"-->
<!--[ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">-->
<!--${{fee.value * qty.value}}-->
<!--</div>-->
<!--<div class="progress-bar bg-danger" role="progressbar"-->
<!--[ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">-->
<!--${{inDet.remainingQty - (fee.value * qty.value)}}-->
<!--</div>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
@ -161,7 +270,7 @@
</div> </div>
</div> </div>
<!--Footer--> <!--Invoice Footer-->
<div class="modal-body" *ngIf="chosenInv"> <div class="modal-body" *ngIf="chosenInv">
<p class="h4 text-right">Footer</p> <p class="h4 text-right">Footer</p>
<hr> <hr>
@ -185,6 +294,7 @@
<p>Choose an Invoice First!</p> <p>Choose an Invoice First!</p>
</div> </div>
<!--Modal Footer-->
<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)"
@ -300,14 +410,14 @@
<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]="feeTypes[inDet.feeTypeId - 1]"
disabled></td> 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 disabled> (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee>
</td> </td>
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty" <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
[step]="inDet.remainingQty / 100" [step]="inDet.remainingQty / 100"
(change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty> (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
</td> </td>
</tr> </tr>
<tr class="p-0 m-0"> <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum != -1">
<th class="align-content-center"> <th class="align-content-center">
<p>{{getPerc(qty.value, inDet.remainingQty)}}%</p> <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
</th> </th>
@ -331,11 +441,13 @@
<select class="custom-select" <select class="custom-select"
(change)="pushOntoNewDetail(inNumIn.value, newInDetails.length + 1, poDetails[poDetSelec.value].lineItemNo, (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, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty)" poDetails[poDetSelec.value].serviceDesc, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty,
poNumIn.value)"
[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>
<option [value]="-1">Out of Pocket Expenses</option>
</select> </select>
</td> </td>
</tr> </tr>
@ -398,23 +510,22 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<!--Invoice Footer-->
<div class="modal-body"> <div class="modal-body">
<p class="h4 text-right">Footer</p> <p class="h4 text-right">Footer</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">Special Notes*</span> <span class="input-group-text">Notes:</span>
</div> </div>
<textarea class="form-control" #notesIn></textarea> <textarea class="form-control" #notesIn></textarea>
</div> </div>
<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">Certification*</span> <span class="input-group-text">Certification:</span>
</div> </div>
<textarea class="form-control" <textarea class="form-control"
[value]="'Certified that the above items and rates are in accordance with the contractual agreement as verified by the undersigned'" [value]="'Certified that the above items and rates are in accordance with the contractual agreement as verified by the undersigned'"
@ -423,6 +534,7 @@
</div> </div>
</div> </div>
<!--Modal Footer-->
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success" <button type="button" class="btn btn-success"
(click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value, pmtStatusIn.value, newBillAmt, notesIn.value, certIn.value, 1, new)" (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value, pmtStatusIn.value, newBillAmt, notesIn.value, certIn.value, 1, new)"

View File

@ -1,257 +1,297 @@
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; declare var $: any;
@Component({ @Component({
selector: 'app-invoice', selector: 'app-invoice',
templateUrl: './invoice.component.html', templateUrl: './invoice.component.html',
styleUrls: ['./invoice.component.css'] styleUrls: ['./invoice.component.css']
}) })
export class InvoiceComponent implements OnInit { export class InvoiceComponent implements OnInit {
@ViewChild('agGrid') agGrid; @ViewChild('agGrid') agGrid;
chosenCustomerID: any = 0; chosenCustomerID: any = 0;
chosenInv: any = 0; chosenInv: any = 0;
source; source;
customers; customers;
pos = []; pos = [];
chosenPo; chosenPo;
correspondingPos = []; correspondingPos = [];
generatedInvoiceNumber = ''; generatedInvoiceNumber = '';
feeTypes = ['Fixed Fee', 'Hourly']; feeTypes = ['Fixed Fee', 'Hourly'];
serviceTypes = ['Study', 'Design', 'Peer Review', 'Cost Investigation', 'Forensic Investigation']; serviceTypes = ['Study', 'Design', 'Peer Review', 'Cost Investigation', 'Forensic Investigation'];
columnDefs = [ columnDefs = [
{headerName: 'Invoice Number', field: 'invoiceNumber'}, {headerName: 'Invoice Number', field: 'invoiceNumber'},
{headerName: 'Date', field: 'invoiceDate'}, {headerName: 'Date', field: 'invoiceDate'},
{headerName: 'Sales Order Number', field: 'poNum'}, {headerName: 'Sales Order Number', field: 'poNum'},
{headerName: 'Change Order Number', field: 'changeOrderNum'}, {headerName: 'Change Order Number', field: 'changeOrderNum'},
{headerName: 'Paid', field: 'pmtStatus'}, {headerName: 'Paid', field: 'pmtStatus'},
{headerName: 'Bll Amount', field: 'billAmt'} {headerName: 'Bll Amount', field: 'billAmt'}
]; ];
newInDetails = []; newInDetails = [];
newBillAmt = 0; newBillAmt = 0;
selectedInDetails = []; selectedInDetails = [];
selectedBillAmt; selectedBillAmt = 0;
poDetails = []; poDetails = [];
selectedPODetails = []; selectedPODetails = [];
gridOptions = { gridOptions = {
// PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application
rowData: this.source, rowData: this.source,
columnDefs: this.columnDefs, columnDefs: this.columnDefs,
// PROPERTIES - simple boolean / string / number properties // PROPERTIES - simple boolean / string / number properties
enableColResize: true, enableColResize: true,
rowSelection: 'single', rowSelection: 'single',
// EVENTS - add event callback handlers // EVENTS - add event callback handlers
onRowClicked: (event) => { this.getSelectedRows() }, onRowClicked: (event) => {
onColumnResized: function(event) { console.log('a column was resized'); }, this.getSelectedRows()
onGridReady: (event) => {}, },
// this.agGrid.sizeColumnsToFit(); onColumnResized: function (event) {
// 1: draft console.log('a column was resized');
// 2: submitted },
// 3: void onGridReady: (event) => {
},
// this.agGrid.sizeColumnsToFit();
// 1: draft
// 2: submitted
// 3: void
// getRowStyle: function(params) { // getRowStyle: function(params) {
// if (params.data.invoiceStatus === 1) { // if (params.data.invoiceStatus === 1) {
// return { 'color': 'red' } // return { 'color': 'red' }
// } else if (params.data.invoiceStatus === 3) { // } else if (params.data.invoiceStatus === 3) {
// return { 'text-decoration': 'line-through'} // return { 'text-decoration': 'line-through'}
// } // }
// } // }
rowClassRules: { rowClassRules: {
// apply green to 2008 // apply green to 2008
// 'bg-red': true, // 'bg-red': true,
// apply amber 2004 // apply amber 2004
'text-danger': function(params) { return params.data.invoiceStatus === 1}, 'text-danger': function (params) {
'text-primary': function(params) { return params.data.invoiceStatus === 2}, return params.data.invoiceStatus === 1
'text-warning': function(params) { return params.data.invoiceStatus === 3}, },
'text-primary': function (params) {
return params.data.invoiceStatus === 2
},
'text-warning': function (params) {
return params.data.invoiceStatus === 3
},
// apply red to 2000 // apply red to 2000
// 'rag-red-outer': function(params) { return params.data.year === 2000} // 'rag-red-outer': function(params) { return params.data.year === 2000}
}
}
constructor(protected astuteClientService: AstuteClientService) {
}
customerDropdownChange(index) {
this.chosenCustomerID = this.customers[index].customerId;
this.setCorrespondingPos();
}
poDropdownChange(ponum) {
this.pos.forEach((po) => {
if (po.ponum === ponum) {
this.chosenPo = po;
}
})
this.astuteClientService.getPODetail(ponum).then((data) => {
if (data) {
// fee
// feeTypeId
// lineItemNo
// ponum
// qty
// remainingQty
// serviceDesc
// serviceTypeId
this.poDetails = data;
} else {
alert("get PO detail failed!");
}
});
this.astuteClientService.generateInvoiceNumber(ponum).then((data) => {
if (data) {
this.generatedInvoiceNumber = data;
} else {
alert('gen inv num failed!');
}
});
}
ngOnInit() {
this.refreshData();
}
refreshData () {
this.astuteClientService.getInvoices().then((data) => {
this.source = data;
});
this.astuteClientService.getCustomers().then ( (data) => {
this.customers = data;
});
this.astuteClientService.getPOs().then ( (data) => {
this.pos = data;
});
}
getPODetails (poIndex) {
let ponum = this.pos[poIndex].ponum;
this.astuteClientService.getPODetail(ponum).then ( (data) => {
this.selectedInDetails = data;
console.log ("inDetails:");
console.log (this.selectedInDetails);
});
}
onSelectedCellChange(row: number, col: string, value) {
this.selectedInDetails[row][col] = value;
console.log(this.selectedInDetails);
}
onNewCellChange(row: number, col: string, value) {
this.newInDetails[row][col] = value;
console.log(this.newInDetails);
}
pushOntoSelectedDetail(invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee) {
this.selectedInDetails.push({
'invoiceNum': invoiceNum,
'lineItemNum': lineItemNum,
'poLineItemNum': poLineItemNum,
'serviceTypeId': serviceTypeId,
'desc': desc,
'qty': qty,
'fee': fee,
});
}
pushOntoNewDetail(invoiceNum, lineItemNum, poLineItemNum, feeTypeId, serviceTypeId, desc, qty, fee, remainingQty) {
this.newInDetails.push({
'invoiceNum': invoiceNum,
'lineItemNum': lineItemNum,
'poLineItemNum': poLineItemNum,
'feeTypeId': feeTypeId,
'serviceTypeId': serviceTypeId,
'desc': desc,
'qty': +qty,
'fee': +fee,
'remainingQty' : +remainingQty
});
console.log(this.newInDetails);
}
updateNewBillAmt () {
let tot = 0;
this.newInDetails.forEach((d) => {
tot += +d.qty * +d.fee;
});
this.newBillAmt = tot;
}
assignActity(): void {
window.open('/invoice-gen');
}
getSelectedRows() {
const selectedNodes = this.agGrid.api.getSelectedNodes();
if (selectedNodes.length) {
this.chosenInv = selectedNodes.map(node => node.data)[0];
// console.log (this.chosenInv);
this.astuteClientService.getPODetail(this.chosenInv.poNum).then((poDetails) => {
if (poDetails) {
this.selectedPODetails = poDetails;
this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then ((invoiceDetails) => {
if (invoiceDetails) {
this.selectedInDetails = invoiceDetails;
} else {
alert("get Inv detail failed!");
}
});
} else {
alert("get PO detail failed!")
} }
});
} else {
this.chosenInv = null;
this.selectedPODetails = [];
} }
}
open(content, indexPO, indexINV) { constructor(protected astuteClientService: AstuteClientService) {
content.open() }
// this.detailDescription = ViewChild('detailDescription');
// this.detailAmount = ViewChild('detailAmount');
// this.detailRate = ViewChild('detailRate');
// this.detailTotal = ViewChild('detailTotal');
// if (indexINV) {
// this.chosenInv = indexINV;
// }
// if (indexPO) {
// this.chosenPo = indexPO;
// this.getPODetails(this.chosenPo);
// }
// this.modalService.open(content, { size: 'lg' }).result.then((result) => {
// this.closeResult = `Closed with: ${result}`;
// }, (reason) => {
// this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
// });
}
close(content) { customerDropdownChange(index) {
content.close(); this.chosenCustomerID = this.customers[index].customerId;
} this.setCorrespondingPos();
}
getCurrDate() { poDropdownChange(ponum) {
let d = new Date(), this.pos.forEach((po) => {
month = '' + (d.getMonth() + 1), if (po.ponum === ponum) {
day = '' + d.getDate(), this.chosenPo = po;
year = d.getFullYear(); }
})
this.astuteClientService.getPODetail(ponum).then((data) => {
if (data) {
// fee
// feeTypeId
// lineItemNo
// ponum
// qty
// remainingQty
// serviceDesc
// serviceTypeId
if (month.length < 2) month = '0' + month; // lineItemNo, feeTypeId, serviceTypeId, serviceDesc, fee, remainingQty
if (day.length < 2) day = '0' + day; this.poDetails = data;
this.poDetails[-1] = {
'lineItemNo': -1,
'feeTypeId': 1,
'serviceTypeId': 1,
'serviceDesc': 'Out of Pocket Expenses',
'fee': 0,
'remainingQty': 0
};
} else {
alert("get PO detail failed!");
}
});
this.astuteClientService.generateInvoiceNumber(ponum).then((data) => {
if (data) {
this.generatedInvoiceNumber = data;
} else {
alert('gen inv num failed!');
}
});
}
ngOnInit() {
this.refreshData();
}
refreshData() {
this.astuteClientService.getInvoices().then((data) => {
this.source = data;
});
this.astuteClientService.getCustomers().then((data) => {
this.customers = data;
});
this.astuteClientService.getPOs().then((data) => {
this.pos = data;
});
}
getPODetails(poIndex) {
let ponum = this.pos[poIndex].ponum;
this.astuteClientService.getPODetail(ponum).then((data) => {
this.selectedInDetails = data;
console.log("inDetails:");
console.log(this.selectedInDetails);
});
}
onSelectedCellChange(row: number, col: string, value) {
this.selectedInDetails[row][col] = value;
console.log(this.selectedInDetails);
}
onNewCellChange(row: number, col: string, value) {
this.newInDetails[row][col] = value;
console.log(this.newInDetails);
}
pushOntoSelectedDetail(invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee) {
this.selectedInDetails.push({
'invoiceNum': invoiceNum,
'lineItemNum': lineItemNum,
'poLineItemNum': poLineItemNum,
'serviceTypeId': serviceTypeId,
'desc': desc,
'qty': +qty,
'fee': +fee
});
}
pushOntoNewDetail(invoiceNum, lineItemNum, poLineItemNum, feeTypeId, serviceTypeId, desc, qty, fee, remainingQty, poNum) {
this.newInDetails.push({
'invoiceNum': invoiceNum,
'lineItemNum': lineItemNum,
'poLineItemNum': poLineItemNum,
'feeTypeId': feeTypeId,
'serviceTypeId': serviceTypeId,
'desc': desc,
'qty': +qty,
'fee': +fee,
'remainingQty': +remainingQty,
'poNum': poNum
});
console.log(this.newInDetails);
}
updateNewBillAmt() {
let tot = 0;
this.newInDetails.forEach((d) => {
tot += +d.qty * +d.fee;
});
this.newBillAmt = tot;
}
updateSelectedBillAmt() {
let tot = 0;
this.selectedInDetails.forEach((d) => {
tot += +d.qty * +d.fee;
});
this.selectedBillAmt = tot;
}
return [year, month, day].join('-'); assignActity(): void {
} window.open('/invoice-gen');
}
getSelectedRows() {
const selectedNodes = this.agGrid.api.getSelectedNodes();
if (selectedNodes.length) {
this.chosenInv = selectedNodes.map(node => node.data)[0];
// console.log (this.chosenInv);
this.selectedBillAmt = +this.chosenInv.billAmt;
this.astuteClientService.getPODetail(this.chosenInv.poNum).then((poDetails) => {
if (poDetails) {
this.selectedPODetails = poDetails;
this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then((invoiceDetails) => {
if (invoiceDetails) {
this.selectedInDetails = invoiceDetails;
this.selectedInDetails.forEach((invDetail) => {
const tempPo = this.selectedPODetails.filter((po) => {
// console.log (po.lineItemNo + " and " + invDetail.poLineItemNum);
return po.lineItemNo === invDetail.poLineItemNum;
})[0];
if (tempPo) {
invDetail.remainingQty = tempPo.remainingQty;
}
});
} else {
alert("get Inv detail failed!");
}
});
} else {
alert("get PO detail failed!")
}
});
} else {
this.chosenInv = null;
this.selectedPODetails = [];
}
}
open(content, indexPO, indexINV) {
content.open()
// this.detailDescription = ViewChild('detailDescription');
// this.detailAmount = ViewChild('detailAmount');
// this.detailRate = ViewChild('detailRate');
// this.detailTotal = ViewChild('detailTotal');
// if (indexINV) {
// this.chosenInv = indexINV;
// }
// if (indexPO) {
// this.chosenPo = indexPO;
// this.getPODetails(this.chosenPo);
// }
// this.modalService.open(content, { size: 'lg' }).result.then((result) => {
// this.closeResult = `Closed with: ${result}`;
// }, (reason) => {
// this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
// });
}
close(content) {
content.close();
}
getCurrDate() {
let d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
formatDate(d: Date) { formatDate(d: Date) {
let month = '' + (d.getMonth() + 1), let month = '' + (d.getMonth() + 1),
@ -267,130 +307,161 @@ export class InvoiceComponent implements OnInit {
return [year, month, day].join('-'); return [year, month, day].join('-');
} }
addInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification, status, ref) { addInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification, status, ref) {
// String invoiceNumber; // String invoiceNumber;
// Date invoiceDate; // Date invoiceDate;
// String poNum; // String poNum;
// String changeOrderNum; // String changeOrderNum;
// int pmtStatus; // int pmtStatus;
// Double billAmt; // Double billAmt;
// String specialNotes; // String specialNotes;
// String certification; // String certification;
// Date pmtReceivedDate; // Date pmtReceivedDate;
const invData = { const invData = {
"invoiceNumber": invoiceNumber, "invoiceNumber": invoiceNumber,
"invoiceDate": this.formatDate(new Date()), "invoiceDate": this.formatDate(new Date()),
"poNum": poNum, "poNum": poNum,
"changeOrderNum": changeOrderNum, "changeOrderNum": changeOrderNum,
"pmtStatus": +pmtStatus, "pmtStatus": +pmtStatus,
"billAmt": +billAmt, "billAmt": +billAmt,
"specialNotes": specialNotes, "specialNotes": specialNotes,
"certification": certification, "certification": certification,
"pmtReceivedDate": this.formatDate(new Date()), "pmtReceivedDate": this.formatDate(new Date()),
'invoiceStatus': status 'invoiceStatus': status
}; };
console.log (invData); console.log(invData);
this.astuteClientService.createInvoice(invData) this.astuteClientService.createInvoice(invData)
.catch((response) => { .catch((response) => {
console.log("rejected: " + response); console.log("rejected: " + response);
}) })
.then((data) => { .then((data) => {
if (data) { if (data) {
this.refreshData(); this.refreshData();
this.addInvoiceDetail(this.newInDetails); this.addInvoiceDetail(this.newInDetails);
ref.close(); ref.close();
} else { } else {
alert ("Invoice Creation Failed, Check Input Fields") alert('Invoice Creation Failed, Check Input Fields');
} }
}); });
}
addInvoiceDetail(details) {
if (details.length) {
console.log(details[0]);
this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
if (data) {
details.splice(0, 1);
this.addInvoiceDetail(details);
} else {
alert("add inv detail failed");
}
});
} else {
this.newInDetails = [];
} }
}
editInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification) { addInvoiceDetail(details) {
// String invoiceNumber; if (details.length) {
// Date invoiceDate; // console.log(details[0]);
// String poNum; // if (details[0].poLineItemNum !== -1) {
// String changeOrderNum; this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
// int pmtStatus; if (data) {
// Double billAmt; details.splice(0, 1);
// String specialNotes; this.addInvoiceDetail(details);
// String certification; } else {
// Date pmtReceivedDate; alert('add inv detail failed');
const invData = { }
"invoiceNumber": invoiceNumber, });
"invoiceDate": new Date(), // } else {
"poNum": poNum, // desc
"changeOrderNum": changeOrderNum, // fee
"pmtStatus": +pmtStatus, // feeTypeId
"billAmt": +billAmt, // invoiceNum
"specialNotes": specialNotes, // lineItemNum
"certification": certification, // poLineItemNum
"pmtReceivedDate": new Date() // qty
}; // remainingQty
// serviceTypeId
// poNum
this.astuteClientService.updateInvoice(invoiceNumber, invData) // const data = {
.catch((response) => { // // 'lineItemNo': details[0].,
console.log("rejected: " + response); // 'poNum': details[0].poNum,
}) // 'serviceDesc': details[0].desc,
.then((data) => { // 'feeTypeId': details[0].feeTypeId,
if (data) { // 'serviceTypeId': details[0].serviceTypeId,
alert("invoice " + invoiceNumber + " updated!"); // 'qty': +details[0].qty,
console.log("fulfilled: " + data); // 'fee': +details[0].fee,
// this.source[this.chosenInv] = invData; // 'remainingQty': +details[0].fee * +details[0].qty
this.refreshData(); // };
// this.astuteClientService.createPODetail(data).then((d) => {
// if (d) {
// console.log (d);
// } else {
// alert('create custom PO failed.');
// }
// });
// }
} else { } else {
alert ("Invoice Update Failed, Check Input Fields") this.newInDetails = [];
} }
}); }
}
voidInvoice(invoiceNumber) { editInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification) {
this.astuteClientService.voidInvoice(invoiceNumber).then ((data) => { // String invoiceNumber;
if (data) { // Date invoiceDate;
this.refreshData(); // String poNum;
} else { // String changeOrderNum;
alert('void invoice failed.') // int pmtStatus;
} // Double billAmt;
}); // String specialNotes;
} // String certification;
// Date pmtReceivedDate;
const invData = {
"invoiceNumber": invoiceNumber,
"invoiceDate": new Date(),
"poNum": poNum,
"changeOrderNum": changeOrderNum,
"pmtStatus": +pmtStatus,
"billAmt": +billAmt,
"specialNotes": specialNotes,
"certification": certification,
"pmtReceivedDate": new Date()
};
submitInvoice(invoiceNumber) { this.astuteClientService.updateInvoice(invoiceNumber, invData)
this.astuteClientService.submitInvoice(invoiceNumber).then ((data) => { .catch((response) => {
if (data) { console.log("rejected: " + response);
this.refreshData(); })
} else { .then((data) => {
alert('submit invoice failed.'); if (data) {
} alert("invoice " + invoiceNumber + " updated!");
}); console.log("fulfilled: " + data);
} // this.source[this.chosenInv] = invData;
this.refreshData();
} else {
alert("Invoice Update Failed, Check Input Fields")
}
});
}
getPerc (amt, total): number { voidInvoice(invoiceNumber) {
return Math.floor(((amt) / total) * 100); this.astuteClientService.voidInvoice(invoiceNumber).then((data) => {
} if (data) {
this.refreshData();
} else {
alert('void invoice failed.')
}
});
}
getRangeMax(total, num) { submitInvoice(invoiceNumber) {
return Math.floor (total/num); this.astuteClientService.submitInvoice(invoiceNumber).then((data) => {
} if (data) {
this.refreshData();
} else {
alert('submit invoice failed.');
}
});
}
setCorrespondingPos () { getPerc(amt, total): number {
this.correspondingPos = this.pos.filter((po, index, array) => { return Math.floor(((amt) / total) * 100);
return po.customerId === this.chosenCustomerID; }
});
} getRangeMax(total, num) {
return Math.floor(total / num);
}
setCorrespondingPos() {
this.correspondingPos = this.pos.filter((po, index, array) => {
return po.customerId === this.chosenCustomerID;
});
}
} }

View File

@ -12,3 +12,15 @@
.cell:focus { .cell:focus {
outline: none; outline: none;
} }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightblue;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: lightblue;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: lightblue;
}

View File

@ -158,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 >= 0 && contractnum.value && contractamt.value)" [disabled]="!(ponum.value && podate.value && customerid.value && 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
@ -182,7 +182,7 @@
<tr> <tr>
<td><span class="input-group-text">Customer</span></td> <td><span class="input-group-text">Customer</span></td>
<td colspan="3"> <td colspan="3">
<select class="form-control" [value]="+selected.customerId" disabled="true" #customerid> <select class="form-control" [value]="selected.customerId" disabled="true" #customerid>
<option [value]="-1">No Customer</option> <option [value]="-1">No Customer</option>
<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option> <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
</select> </select>