mirror of
https://github.com/dyiop/astute.git
synced 2025-04-05 21:10:16 -04:00
391 lines
19 KiB
HTML
391 lines
19 KiB
HTML
<app-nav-bar [salesOrderActive]="true"></app-nav-bar>
|
|
<h1 align="center">Sales Orders</h1>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ag-grid-angular
|
|
#agGrid
|
|
style="height: 500px;"
|
|
class="ag-theme-balham"
|
|
[enableSorting]="true"
|
|
[enableFilter]="true"
|
|
[rowData]="rowData"
|
|
[columnDefs]="columnDefs"
|
|
rowSelection="single"
|
|
></ag-grid-angular>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mt-2">
|
|
<div class="col-6">
|
|
<button class="btn btn-primary" style="width: 100%" (click)="open(edit)">Edit Sales Order</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Sales Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--MODAL: new po-->
|
|
<app-modal-form [title]="'New Sales Order'" #new>
|
|
<div class="modal-body">
|
|
<p class="h4 text-right">General</p>
|
|
<hr>
|
|
<table class="table table-borderless table-sm">
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="input-group-text">Astute Proj. No.</span></td>
|
|
<td colspan="3"><input type="text" class="form-control" placeholder="Internal Project Number" #projNum></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="input-group-text">Customer</span></td>
|
|
<td colspan="3">
|
|
<select class="form-control" #customerid>
|
|
<option [value]="-1">Choose Customer...</option>
|
|
<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="input-group-text">SO Title</span></td>
|
|
<td colspan="3"><input type="text" class="form-control" placeholder="Distinctive title, will be use to identify later" #title></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 20%"><span class="input-group-text">SO Number</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="Internal SO Number" maxlength="40" #ponum></td>
|
|
<td style="width: 20%"><span class="input-group-text">SO Date</span></td>
|
|
<td style="width: 30%"><input type="date" class="form-control" [value]="getCurrDate()" (change)="printValue(podate.value)" #podate></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="External Contract Number" #contractnum></td>
|
|
<td style="width: 20%"><span class="input-group-text">Contract Amount</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="Derived From Details" [value]="newContractAmount | currency" #contractamt disabled></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 80%"><span class="input-group-text">Notes</span></td>
|
|
<td style="width: 70%"><input type="text" class="form-control" placeholder="Notes..." [value]="selected.notes" #notes></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!--fee-->
|
|
<!--feeTypeId-->
|
|
<!--lineItemNo-->
|
|
<!--ponum-->
|
|
<!--qty-->
|
|
<!--remainingQty-->
|
|
<!--serviceDesc-->
|
|
<!--serviceTypeId-->
|
|
|
|
<!--Detail-->
|
|
<div class="modal-body">
|
|
<p class="h4 text-right">Detail</p>
|
|
<hr>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col" style="width: 50px">#</th>
|
|
<th scope="col">Description</th>
|
|
<th scope="col">Rate Type</th>
|
|
<th scope="col">Service Type</th>
|
|
<th scope="col" style="width: 75px">Qty(#)</th>
|
|
<th scope="col" style="width: 100px">Rate($)</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody *ngFor="let poDetail of newPODetail; let i = index">
|
|
<tr class="p-0 m-0">
|
|
<td class="p-1 m-0">
|
|
<button class="btn btn-outline-danger" type="button" (click)="newPODetail.splice(i, 1);">
|
|
-
|
|
</button>
|
|
</td>
|
|
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onNewCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>
|
|
<td class="p-0 m-0">
|
|
<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>
|
|
<!--<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>-->
|
|
</td>
|
|
<td class="p-0 m-0">
|
|
<select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onNewCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>
|
|
<option value="1">Fixed Fee</option>
|
|
<option value="2">Hourly</option>
|
|
</select>
|
|
</td>
|
|
<td class="p-0 m-0">
|
|
<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onNewCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>
|
|
<option value="1">Study</option>
|
|
<option value="2">Design</option>
|
|
<option value="3">Peer Review</option>
|
|
<option value="4">Cost Estimation</option>
|
|
<option value="5">Forensic Investigation</option>
|
|
</select>
|
|
</td>
|
|
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onNewCellChange(i, 'qty', qty.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #qty></td>
|
|
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.fee" (change)="onNewCellChange(i, 'fee', fee.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #fee></td>
|
|
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>-->
|
|
</tr>
|
|
</tbody>
|
|
<tr class="p-0 m-0">
|
|
<td class="p-1 m-0">
|
|
<button class="btn btn-success" type="button"
|
|
[disabled]="!ponum.value"
|
|
(click)="pushOntoNewDetail(newPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">
|
|
<!--(click)="pushOntoNewDetail((lineItemNo) ? lineItemNo.value + 1: 1, ponum.value, serviceDesc.value,-->
|
|
<!--feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">-->
|
|
+</button>
|
|
</td>
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<input type="number" class="form-control cell" [value]="(selectedPODetail.length) ? selectedPODetail[selectedPODetail.length-1].lineItemNo + 1: 1" #lineItemNo>-->
|
|
<!--</td>-->
|
|
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>-->
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<select class="form-control cell" [value]="1" #feeTypeId>-->
|
|
<!--<option value="1">Fixed Fee</option>-->
|
|
<!--<option value="2">Hourly</option>-->
|
|
<!--</select>-->
|
|
<!--</td>-->
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<select class="form-control cell" [value]="1" #serviceTypeId>-->
|
|
<!--<option value="1">Study</option>-->
|
|
<!--<option value="2">Design</option>-->
|
|
<!--<option value="3">Peer Review</option>-->
|
|
<!--<option value="4">Cost Estimation</option>-->
|
|
<!--<option value="5">Forensic Investigation</option>-->
|
|
<!--</select>-->
|
|
<!--</td>-->
|
|
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="1" #qty></td>-->
|
|
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #fee></td>-->
|
|
<!--<!–<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>–>-->
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button class="btn btn-success" type="button"
|
|
[disabled]="!(ponum.value && podate.value && customerid.value && contractnum.value && contractamt.value && projNum.value)"
|
|
(click)="addPo(projNum.value, ponum.value, podate.value, customerid.value, contractnum.value, contractamt.value.replace('$', '').replace(',', ''), title.value, notes.value, new)"
|
|
>
|
|
Add
|
|
</button>
|
|
<button class="btn btn-outline-danger" (click)="close(new)">Cancel</button>
|
|
</div>
|
|
</app-modal-form>
|
|
|
|
<!--MODAL: edit po-->
|
|
<app-modal-form [title]="'Edit Sales Order'" #edit>
|
|
<div *ngIf="selected">
|
|
<div class="modal-body">
|
|
<p class="h4 text-right">General</p>
|
|
<hr>
|
|
<table class="table table-borderless table-sm">
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="input-group-text">Astute Proj. No.</span></td>
|
|
<td colspan="3"><input type="text" class="form-control" placeholder="Project Number" [value]="selected.astuteProjectNumber" #projNum></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="input-group-text">Customer</span></td>
|
|
<td colspan="3">
|
|
<select class="form-control" [value]="selected.customerId" disabled="true" #customerid>
|
|
<option [value]="-1">No Customer</option>
|
|
<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="input-group-text">SO Title</span></td>
|
|
<td colspan="3"><input type="text" class="form-control" placeholder="SO Title" [value]="selected.title" #title></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 20%"><span class="input-group-text">SO Number</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="SO Number" maxlength="40" [value]="selected.ponum" #ponum disabled></td>
|
|
<td style="width: 20%"><span class="input-group-text">SO Date</span></td>
|
|
<td style="width: 30%"><input type="date" class="form-control" [value]="selected.podate" #podate></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum" #contractnum></td>
|
|
<td style="width: 20%"><span class="input-group-text">Contract Amount</span></td>
|
|
<td style="width: 30%"><input type="text" class="form-control" placeholder="Contract Amount" [value]="editContractAmount | currency" #contractamt disabled></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 20%"><span class="input-group-text">Notes</span></td>
|
|
<td style="width: 70%"><input type="text" class="form-control" placeholder="Notes..." [value]="selected.notes" #notes></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!--<form>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">Astute Project Number</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="text" class="form-control" placeholder="Project Number" [value]="selected.astuteProjectNumber" #projNum>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">Customer Name</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<select class="form-control" [value]="selected.customerId" #customerid disabled>-->
|
|
<!--<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}-->
|
|
<!--</option>-->
|
|
<!--</select>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">SO Title</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="text" class="form-control" [value]="selected.title" #title>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">SO Number</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="text" class="form-control" placeholder="SO Number" [value]="selected.ponum" #ponum disabled>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">SO Date</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="date" class="form-control" [value]="selected.podate" #podate>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">Contract Number</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum"-->
|
|
<!--#contractnum>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="form-group row">-->
|
|
<!--<label class="col-sm-2 col-form-label">Contract Amount</label>-->
|
|
<!--<div class="col-sm-10">-->
|
|
<!--<input type="text" class="form-control" placeholder="Contract Amount" [value]="selected.contractAmt"-->
|
|
<!--#contractamt>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</form>-->
|
|
</div>
|
|
|
|
|
|
<!--fee-->
|
|
<!--feeTypeId-->
|
|
<!--lineItemNo-->
|
|
<!--ponum-->
|
|
<!--qty-->
|
|
<!--remainingQty-->
|
|
<!--serviceDesc-->
|
|
<!--serviceTypeId-->
|
|
|
|
<!--Detail-->
|
|
<div class="modal-body" *ngIf="selectedPODetail">
|
|
<p class="h4 text-right">Detail</p>
|
|
<hr>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" style="width: 50px">#</th>
|
|
<!--<th scope="col">Purchase Order Number</th>-->
|
|
<th scope="col">Description</th>
|
|
<th scope="col">Rate Type</th>
|
|
<th scope="col">Service Type</th>
|
|
<th scope="col" style="width: 75px">Quantity</th>
|
|
<th scope="col" style="width: 100px">Rate</th>
|
|
<!--<th scope="col">Remaining Quantity</th>-->
|
|
</tr>
|
|
</thead>
|
|
<!--<tbody>-->
|
|
<tbody *ngFor="let poDetail of selectedPODetail; let i = index">
|
|
<tr class="p-0 m-0">
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">-->
|
|
<!-- - -->
|
|
<!--</button>-->
|
|
<!--</td>-->
|
|
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>
|
|
<!--<td class="p-0"><input type="text" class="form-control cell" [value]="poDetail.ponum"></td>-->
|
|
<td class="p-0 m-0">
|
|
<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>
|
|
<!--<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>-->
|
|
</td>
|
|
<td class="p-0 m-0">
|
|
<select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onSelectedCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>
|
|
<option value="1">Fixed Fee</option>
|
|
<option value="2">Hourly</option>
|
|
</select>
|
|
<!--<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">-->
|
|
</td>
|
|
<td class="p-0 m-0">
|
|
<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>
|
|
<option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceTypes">{{serviceType.desc}}</option>
|
|
<!--<option value="">Study</option>-->
|
|
<!--<option value="2">Design</option>-->
|
|
<!--<option value="3">Peer Review</option>-->
|
|
<!--<option value="4">Cost Estimation</option>-->
|
|
<!--<option value="5">Forensic Investigation</option>-->
|
|
</select>
|
|
<!--<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>-->
|
|
</td>
|
|
<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onSelectedCellChange(i, 'qty', qty.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #qty></td>
|
|
<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="+poDetail.fee | currency" (change)="onSelectedCellChange(i, 'fee', fee.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #fee></td>
|
|
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>-->
|
|
</tr>
|
|
</tbody>
|
|
<tr class="p-0 m-0">
|
|
<td class="p-1 m-0">
|
|
<button class="btn btn-success" type="button"
|
|
(click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">
|
|
<!--(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,-->
|
|
<!--feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">-->
|
|
+</button>
|
|
</td>
|
|
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>-->
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<select class="form-control cell" [value]="1" #feeTypeId>-->
|
|
<!--<option value="1">Fixed Fee</option>-->
|
|
<!--<option value="2">Hourly</option>-->
|
|
<!--</select>-->
|
|
<!--</td>-->
|
|
<!--<td class="p-0 m-0">-->
|
|
<!--<select class="form-control cell" [value]="1" #serviceTypeId>-->
|
|
<!--<option value="1">Study</option>-->
|
|
<!--<option value="2">Design</option>-->
|
|
<!--<option value="3">Peer Review</option>-->
|
|
<!--<option value="4">Cost Estimation</option>-->
|
|
<!--<option value="5">Forensic Investigation</option>-->
|
|
<!--</select>-->
|
|
<!--</td>-->
|
|
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #qty></td>-->
|
|
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>-->
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button class="btn btn-success" type="button"
|
|
[disabled]="!(ponum.value && podate.value && contractnum.value && contractamt.value && projNum.value)"
|
|
(click)="editPo(projNum.value, ponum.value, podate.value, contractnum.value, contractamt.value.replace(',', '').replace('$', ''), title.value, notes.value, edit)"
|
|
>
|
|
Update
|
|
</button>
|
|
<button class="btn btn-outline-danger" (click)="close(edit)">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!selected">
|
|
<div class="modal-body">
|
|
Choose a Sales Order First!
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button class="btn btn-success" type="button"
|
|
[disabled]="true"
|
|
>
|
|
Update
|
|
</button>
|
|
<button class="btn btn-outline-danger" (click)="close(edit)">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</app-modal-form>
|