rushilwiz/astute
1
0
Fork 0
mirror of https://github.com/dyiop/astute.git synced 2025-04-05 21:10:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

i cant even keep track anymore

Browse Source
This commit is contained in:
Akash Shah 2019-07-16 23:12:22 -04:00
parent 12748b8035
commit 6f54177cad
19 changed files with 1849 additions and 1548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
AstuteClient2/src/app/ag-grid-components/empty-error-editor/empty-error-editor.component.spec.ts Normal file
View File

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

46
AstuteClient2/src/app/ag-grid-components/empty-error-editor/empty-error-editor.component.ts Normal file
View File

@ -0,0 +1,46 @@
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {ToastManagerService} from '../../services/toast-manager/toast-service.service';
@Component({
selector: 'app-empty-error-editor',
template: `
<input #i class="w-100" [value]="params.value" (keydown)="onKeyDown($event)"/>
`
})
export class EmptyErrorEditorComponent implements AfterViewInit {
@ViewChild('i', {'static': false}) textInput;
params;
constructor(protected toastService: ToastManagerService) { }
ngAfterViewInit() {
setTimeout(() => {
this.textInput.nativeElement.focus();
});
}
agInit(params: any): void {
this.params = params;
}
getValue() {
return this.textInput.nativeElement.value;
}
onKeyDown(event) {
if (event.keyCode === 9 || event.keyCode === 13) {
if (!this.textInput.nativeElement.value) {
event.stopPropagation();
this.notif('Value should not be empty');
setTimeout(() => {
this.textInput.nativeElement.focus();
});
}
}
}
// ** toast notification method
notif(text: string) {
this.toastService.show(text, {classname: 'bg-warning'});
}
}

25
AstuteClient2/src/app/ag-grid-components/numeric-editor/numeric-editor.component.spec.ts Normal file
View File

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

51
AstuteClient2/src/app/ag-grid-components/numeric-editor/numeric-editor.component.ts Normal file
View File

@ -0,0 +1,51 @@
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {ToastManagerService} from '../../services/toast-manager/toast-service.service';
@Component({
selector: 'app-numeric-editor',
template: `
<input #i type="number" class="w-100" [value]="params.value" (keydown)="onKeyDown($event)"/>
`
})
export class NumericEditorComponent implements AfterViewInit {
@ViewChild('i', {'static': false}) numberInput;
params;
canBeEmpty: boolean;
constructor(protected toastService: ToastManagerService) { }
ngAfterViewInit() {
setTimeout(() => {
this.numberInput.nativeElement.focus();
});
}
agInit(params: any): void {
this.params = params;
this.canBeEmpty = params.canBeEmpty;
}
getValue() {
return this.numberInput.nativeElement.value;
}
onKeyDown(event) {
if (this.canBeEmpty) {
if (event.keyCode === 9 || event.keyCode === 13) {
if (!this.numberInput.nativeElement.value) {
event.stopPropagation();
this.notif('Value should not be empty');
setTimeout(() => {
this.numberInput.nativeElement.focus();
});
}
}
}
}
// ** toast notification method
notif(text: string) {
this.toastService.show(text, {classname: 'bg-warning'});
}
}

2
AstuteClient2/src/app/ag-grid-components/phone-editor/phone-editor.component.ts
View File

@ -4,7 +4,7 @@ import {ToastManagerService} from '../../services/toast-manager/toast-service.se
@Component({
selector: 'app-phone-editor-cell',
template: `
<input #i [value]="params.value" [textMask]="{mask: usPhoneMask, guide: false}" (keydown)="onKeyDown($event)"/>
<input #i class="w-100" [value]="params.value" [textMask]="{mask: usPhoneMask, guide: false}" (keydown)="onKeyDown($event)"/>
`
})
export class PhoneEditorComponent implements AfterViewInit {

10
AstuteClient2/src/app/app.module.ts
View File

@ -26,6 +26,8 @@ import { ToastsContainerComponent } from './services/toast-manager/toasts-contai
import { NumberFormatterComponent } from './ag-grid-components/number-formatter/number-formatter.component';
import { PhoneFormatterComponent } from './ag-grid-components/phone-formatter/phone-formatter.component';
import { PhoneEditorComponent } from './ag-grid-components/phone-editor/phone-editor.component';
import { EmptyErrorEditorComponent } from './ag-grid-components/empty-error-editor/empty-error-editor.component';
import { NumericEditorComponent } from './ag-grid-components/numeric-editor/numeric-editor.component';
// import { ServiceTypeComponent } from './service-type/service-type.component';
@NgModule({
@ -45,7 +47,9 @@ import { PhoneEditorComponent } from './ag-grid-components/phone-editor/phone-ed
ToastsContainerComponent,
NumberFormatterComponent,
PhoneFormatterComponent,
PhoneEditorComponent// ,
PhoneEditorComponent,
EmptyErrorEditorComponent,
NumericEditorComponent// ,
// ServiceTypeComponent
],
imports: [
@ -53,7 +57,9 @@ import { PhoneEditorComponent } from './ag-grid-components/phone-editor/phone-ed
AgGridModule.withComponents([
NumberFormatterComponent,
PhoneFormatterComponent,
PhoneEditorComponent
PhoneEditorComponent,
EmptyErrorEditorComponent,
NumericEditorComponent
]),
NgbModule,
HttpClientModule,

8
AstuteClient2/src/app/customer/customer.component.css
View File

@ -8,4 +8,12 @@
::-ms-input-placeholder { /* Microsoft Edge */
color: lightblue;
}
.disabled {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5) !important;
}

499
AstuteClient2/src/app/customer/customer.component.html
View File

@ -1,180 +1,60 @@
<app-nav-bar [customerActive]="true"></app-nav-bar>
<h1 align="center">Customers</h1>
<div *ngIf="loggedIn">
<h1 align="center">Customers</h1>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ag-grid-angular
style="height: 500px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateRow($event)"
(gridReady)="onGridReady($event)"
(rowClicked)="setSelectedRow($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
rowDeselection="true"
></ag-grid-angular>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ag-grid-angular
style="height: 500px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateRow($event)"
(gridReady)="onGridReady($event)"
(rowClicked)="setSelectedRow($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
rowDeselection="true"
></ag-grid-angular>
</div>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="btn-group w-100">
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Customer</button>
<button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected">Edit Customer</button>
<button class="btn btn-primary" style="width: 100%" (click)="open(contacts)" [disabled]="!selected">Contacts</button>
<button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="btn-group w-100">
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Customer</button>
<button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected">Edit Customer</button>
<button class="btn btn-primary" style="width: 100%" (click)="open(contacts)" [disabled]="!selected">Contacts</button>
<button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button>
</div>
</div>
</div>
</div>
</div>
<!--MODAL: new customer-->
<app-modal-form [title]="'New Customer'" #new>
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td style="width: 10%">
<span class="input-group-text">ID*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="johndoe" #inId>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Name*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="John Doe" #inName>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Bill To Dept*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Billing" #inBillToDept>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Address 1*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Address 2</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Apt #, Unit, etc..." [value]="''" #inAdd2>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">City*</span>
</td>
<td>
<input type="text" class="form-control" placeholder="New York City" #inCity>
</td>
<td style="width: 1%">
<span class="input-group-text">State*</span>
</td>
<td>
<select class="custom-select" #inState>
<option selected>Choose...</option>
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
</td>
<td style="width: 1%">
<span class="input-group-text">ZIP*(+4)</span>
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP>
<input type="number" class="form-control" placeholder="(+4)" #inZIP4>
</div>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Email*</span>
</td>
<td colspan="7">
<input type="email" class="form-control" placeholder="john@doe.com" #inEmail>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Phone*</span>
</td>
<td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Ext*</span>
</td>
<td colspan="3">
<input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="">
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Fax</span>
</td>
<td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [value]="''" [textMask]="{mask: usPhoneMask, guide: false}" #inFax>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button"
[disabled]="!(inId.value && inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)"
(click)="addCustomer(inId.value, inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inPhExt.value, inFax.value, new)">
Add
</button>
<button type="button" class="btn btn-danger" (click)="close(new)">Cancel</button>
</div>
</app-modal-form>
<!--MODAL: edit customer-->
<app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected">
<!--MODAL: new customer-->
<app-modal-form [title]="'New Customer'" #new>
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td style="width: 10%">
<span class="input-group-text">ID*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="johndoe" #inId>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Name*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inName placeholder="John Doe" [value]="selected.customerName">
<input type="text" class="form-control" placeholder="John Doe" #inName>
</td>
</tr>
@ -183,7 +63,7 @@
<span class="input-group-text">Bill To Dept*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Billing" #inBillToDept [value]="selected.billToDept">
<input type="text" class="form-control" placeholder="Billing" #inBillToDept>
</td>
</tr>
@ -192,7 +72,7 @@
<span class="input-group-text">Address 1*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1 [value]="selected.add1">
<input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1>
</td>
</tr>
@ -201,7 +81,7 @@
<span class="input-group-text">Address 2</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Apt#, Unit, etc." #inAdd2 [value]="selected.add2">
<input type="text" class="form-control" placeholder="Apt #, Unit, etc..." [value]="''" #inAdd2>
</td>
</tr>
@ -210,14 +90,14 @@
<span class="input-group-text">City*</span>
</td>
<td>
<input type="text" class="form-control" placeholder="New York City" #inCity [value]="selected.city">
<input type="text" class="form-control" placeholder="New York City" #inCity>
</td>
<td style="width: 1%">
<span class="input-group-text">State*</span>
</td>
<td>
<select class="custom-select" #inState [value]="selected.state">
<select class="custom-select" #inState>
<option selected>Choose...</option>
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
@ -229,8 +109,8 @@
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip">
<input type="number" class="form-control" placeholder="(+4)" #inZIP4 [value]="selected.ziplast4">
<input type="number" class="form-control" placeholder="12345" #inZIP>
<input type="number" class="form-control" placeholder="(+4)" #inZIP4>
</div>
</td>
</tr>
@ -240,7 +120,7 @@
<span class="input-group-text">Email*</span>
</td>
<td colspan="7">
<input type="email" class="form-control" placeholder="john@doe.com" #inEmail [value]="selected.email">
<input type="email" class="form-control" placeholder="john@doe.com" #inEmail>
</td>
</tr>
@ -248,14 +128,17 @@
<td style="width: 1%">
<span class="input-group-text">Phone*</span>
</td>
<td colspan="3">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone [value]="selected.phone">
<td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Ext*</span>
</td>
<td colspan="2">
<input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="selected.phExt">
<td colspan="3">
<input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="">
</td>
</tr>
@ -264,7 +147,7 @@
<span class="input-group-text">Fax</span>
</td>
<td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inFax [value]="selected.fax">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [value]="''" [textMask]="{mask: usPhoneMask, guide: false}" #inFax>
</td>
</tr>
</tbody>
@ -272,80 +155,216 @@
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="!(inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)"
(click)="editCustomer(selected.customerId ,inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inPhExt.value, inFax.value, edit)">
Update
<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)"
(click)="addCustomer(inId.value, inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inPhExt.value, inFax.value, new)">
Add
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
<button type="button" class="btn btn-danger" (click)="close(new)">Cancel</button>
</div>
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Customer First!
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="true">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
</app-modal-form>
</app-modal-form>
<!--MODAL: customer contacts-->
<app-modal-form [title]="'Customer Contacts'" #contacts>
<div *ngIf="selected">
<div class="container-fluid">
<div class="row">
<div class="col-12 align-items-end">
<ag-grid-angular
style="height: 500px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="contactsData | async"
[columnDefs]="contactsColDef"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateContactRow($event)"
(gridReady)="onContactGridReady($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
rowDeselection="true"
></ag-grid-angular>
</div>
<!--MODAL: edit customer-->
<app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected">
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td style="width: 10%">
<span class="input-group-text">Name*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inName placeholder="John Doe" [value]="selected.customerName">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Bill To Dept*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Billing" #inBillToDept [value]="selected.billToDept">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Address 1*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1 [value]="selected.add1">
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Address 2</span>
</td>
<td colspan="7">
<input type="text" class="form-control" placeholder="Apt#, Unit, etc." #inAdd2 [value]="selected.add2">
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">City*</span>
</td>
<td>
<input type="text" class="form-control" placeholder="New York City" #inCity [value]="selected.city">
</td>
<td style="width: 1%">
<span class="input-group-text">State*</span>
</td>
<td>
<select class="custom-select" #inState [value]="selected.state">
<option selected>Choose...</option>
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
</td>
<td style="width: 1%">
<span class="input-group-text">ZIP*(+4)</span>
</td>
<td style="width: 25%">
<div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip">
<input type="number" class="form-control" placeholder="(+4)" #inZIP4 [value]="selected.ziplast4">
</div>
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Email*</span>
</td>
<td colspan="7">
<input type="email" class="form-control" placeholder="john@doe.com" #inEmail [value]="selected.email">
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Phone*</span>
</td>
<td colspan="3">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone [value]="selected.phone">
</td>
<td style="width: 1%">
<span class="input-group-text">Ext*</span>
</td>
<td colspan="2">
<input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="selected.phExt">
</td>
</tr>
<tr>
<td style="width: 1%">
<span class="input-group-text">Fax</span>
</td>
<td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inFax [value]="selected.fax">
</td>
</tr>
</tbody>
</table>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="input-group mb-3 mt-2">
<input type="text" class="form-control input-group-sm" placeholder="Name" #customerContactName>
<div class="input-group-append w-25">
<button class="btn btn-success w-50 input-group-sm" type="button"
(click)="createEmptyContact(customerContactName.value); customerContactName.value = '';" [disabled]="!customerContactName.value">
Add
</button>
<button class="btn btn-danger w-50 input-group-sm" type="button"
(click)="deleteContact()">
Delete
</button>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="!(inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)"
(click)="editCustomer(selected.customerId ,inName.value, inBillToDept.value, inAdd1.value, inAdd2.value, inCity.value, inState.value, inZIP.value, inZIP4.value, inEmail.value, inPhone.value, inPhExt.value, inFax.value, edit)">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Customer First!
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="true">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
</app-modal-form>
<!--MODAL: customer contacts-->
<app-modal-form [title]="'Customer Contacts'" #contacts>
<div *ngIf="selected">
<div class="container-fluid">
<div class="row">
<div class="col-12 align-items-end">
<ag-grid-angular
style="height: 500px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="contactsData | async"
[columnDefs]="contactsColDef"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateContactRow($event)"
(gridReady)="onContactGridReady($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
rowDeselection="true"
></ag-grid-angular>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="input-group mb-3 mt-2">
<input type="text" class="form-control input-group-sm" placeholder="Name" #customerContactName>
<div class="input-group-append w-25">
<button class="btn btn-success w-50 input-group-sm" type="button"
(click)="createEmptyContact(customerContactName.value); customerContactName.value = '';" [disabled]="!customerContactName.value">
Add
</button>
<button class="btn btn-danger w-50 input-group-sm" type="button"
(click)="deleteContact()">
Delete
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="modal-footer">-->
<!--<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>-->
<!--</div>-->
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Customer First!
<!--<div class="modal-footer">-->
<!--<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>-->
<!--</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Customer First!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>
</div>
</div>
</app-modal-form>
</div>
<div *ngIf="!loggedIn">
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-4">Please Log In First!</h1>
<p class="lead">Once you do, you will be able to create new customers and edit existing ones to your hearts content!</p>
<p class="lead">
<a class="btn btn-success btn-lg" href="#" role="button">Log In</a>
</p>
</div>
</div>
</div>
</div>
</app-modal-form>
</div>

36
AstuteClient2/src/app/customer/customer.component.ts
View File

@ -3,6 +3,8 @@ import {AstuteClientService} from '../services/astute-client-service';
import {ToastManagerService} from '../services/toast-manager/toast-service.service';
import {PhoneFormatterComponent} from '../ag-grid-components/phone-formatter/phone-formatter.component';
import {PhoneEditorComponent} from '../ag-grid-components/phone-editor/phone-editor.component';
import {EmptyErrorEditorComponent} from '../ag-grid-components/empty-error-editor/empty-error-editor.component';
import {NumericEditorComponent} from "../ag-grid-components/numeric-editor/numeric-editor.component";
@Component({
selector: 'app-customer',
@ -11,6 +13,7 @@ import {PhoneEditorComponent} from '../ag-grid-components/phone-editor/phone-edi
})
export class CustomerComponent implements OnInit {
// @ViewChild('agGrid') agGrid;
loggedIn: boolean;
gridApi;
gridColumnApi;
contactGridApi;
@ -19,22 +22,24 @@ export class CustomerComponent implements OnInit {
customers;
columnDefs = [
{headerName: 'ID', field: 'customerId'},
{headerName: 'Name ✎', field: 'customerName', editable: true},
{headerName: 'Bill To ✎', field: 'billToDept', editable: true},
{headerName: 'Address 1 ✎', field: 'add1', editable: true},
{headerName: 'Address 2 ✎', field: 'add2', editable: true},
{headerName: 'City ✎', field: 'city', editable: true},
{headerName: 'Email ✎', field: 'email', editable: true},
{headerName: 'Name ✎', field: 'customerName', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Bill To ✎', field: 'billToDept', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Email ✎', field: 'email', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Fax ✎', field: 'fax', editable: true, cellEditor: 'phoneEditorComponent'},
{headerName: 'Phone ✎', field: 'phone', editable: true, cellEditor: 'phoneEditorComponent'},
{headerName: 'Ext. ✎', field: 'phExt', editable: true},
{headerName: 'State ✎', field: 'state', editable: true},
{headerName: 'ZIP ✎', field: 'zip', editable: true},
{headerName: 'ZIP-4 ✎', field: 'ziplast4', editable: true}
{headerName: 'Ext. ✎', field: 'phExt', editable: true, cellEditor: 'numericEditorComponent'},
{headerName: 'Address 1 ✎', field: 'add1', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Address 2 ✎', field: 'add2', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'City ✎', field: 'city', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'State ✎', field: 'state', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'ZIP ✎', field: 'zip', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'ZIP-4 ✎', field: 'ziplast4', editable: true, cellEditor: 'numericEditorComponent'}
];
frameworkComponents = {
phoneFormatterComponent: PhoneFormatterComponent,
phoneEditorComponent: PhoneEditorComponent
phoneEditorComponent: PhoneEditorComponent,
emptyErrorEditorComponent: EmptyErrorEditorComponent,
numericEditorComponent: NumericEditorComponent
};
rowData: any;
states = [
@ -94,7 +99,7 @@ export class CustomerComponent implements OnInit {
contactsData: any;
contactsColDef = [
{headerName: 'Name ✎', field: 'name', editable: true},
{headerName: 'Name ✎', field: 'name', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Title ✎', field: 'title', editable: true},
{headerName: 'Email ✎', field: 'email', editable: true},
{headerName: 'Work ✎', field: 'workPhone', editable: true, cellEditor: 'phoneEditorComponent'},
@ -119,7 +124,12 @@ export class CustomerComponent implements OnInit {
}
ngOnInit() {
this.refreshData();
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
this.refreshData();
} else {
this.loggedIn = false;
}
}
// callback for grid selection

379
AstuteClient2/src/app/invoice-payment/invoice-payment.component.html
View File

@ -1,206 +1,225 @@
<app-nav-bar [invoicePaymentActive]="true"></app-nav-bar>
<h1 align="center">Invoice Payments</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 *ngIf="loggedIn">
<h1 align="center">Invoice Payments</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-success" style="width: 100%" (click)="open(new)">Add Invoice Payment</button>
</div>
<div class="col-6">
<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit Invoice payment</button>
</div>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col-6">
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Invoice Payment</button>
</div>
<div class="col-6">
<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit Invoice payment</button>
</div>
</div>
</div>
<!--MODAL: new Invoice Payment-->
<app-modal-form [title]="'New Invoice Payment'" #new>
<form>
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td>
<span class="input-group-text">Invoice Number*</span>
</td>
<td>
<select class="custom-select" (change)="invoiceDropdownChange(invoiceSelect.value)"
#invoiceSelect>
<!--[value]="chosenInv.invoiceNumber"-->
<option [value]="-1">Choose Invoice...</option>
<option *ngFor="let invoice of invoices; let i = index;" [value]="i">{{invoice.invoiceNumber}}
</option>
</select>
</td>
</tr>
<!--MODAL: new Invoice Payment-->
<app-modal-form [title]="'New Invoice Payment'" #new>
<form>
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td>
<span class="input-group-text">Invoice Number*</span>
</td>
<td>
<select class="custom-select" (change)="invoiceDropdownChange(invoiceSelect.value)"
#invoiceSelect>
<!--[value]="chosenInv.invoiceNumber"-->
<option [value]="-1">Choose Invoice...</option>
<option *ngFor="let invoice of invoices; let i = index;" [value]="i">{{invoice.invoiceNumber}}
</option>
</select>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Received*</span>
</td>
<td class="p-0 m-0" colspan="7">
<input type="text" class="form-control cell" [value]="0 | currency" #inPaymentReceived>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Received*</span>
</td>
<td class="p-0 m-0" colspan="7">
<input type="text" class="form-control cell" [value]="0 | currency" #inPaymentReceived>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Type*</span>
</td>
<td>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Type*</span>
</td>
<td>
<select class="custom-select" (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"
#paymentTypeSelect>
<option selected>Choose...</option>
<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}</option>
</select>
</td>
</tr>
<option selected>Choose...</option>
<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}</option>
</select>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Date*</span>
</td>
<td colspan="7">
<input type="date" class="form-control" #inDateReceived>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Date*</span>
</td>
<td colspan="7">
<input type="date" class="form-control" #inDateReceived>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Check#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #incheckNo>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Check#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #incheckNo>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Transaction#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inTransactionNo>
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Transaction#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inTransactionNo>
</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button"
[disabled]="!(chosenInv && inPaymentReceived.value && chosenPaymentType && inDateReceived.value)"
(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, inDateReceived.value, inPaymentReceived.value.replace('$', '').replace(',', ''), incheckNo.value, inTransactionNo.value, new)">
<!--(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, null, inDateReceived.value, inPaymentReceived.value, new)">-->
Add
</button>
<!--<input type="reset" (click)="close(new)">Cancel-->
<button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button>
</div>
</form>
</app-modal-form>
<div class="modal-footer">
<button class="btn btn-success" type="button"
[disabled]="!(chosenInv && inPaymentReceived.value && chosenPaymentType && inDateReceived.value)"
(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, inDateReceived.value, inPaymentReceived.value.replace('$', '').replace(',', ''), incheckNo.value, inTransactionNo.value, new)">
<!--(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, null, inDateReceived.value, inPaymentReceived.value, new)">-->
Add
</button>
<!--<input type="reset" (click)="close(new)">Cancel-->
<button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button>
</div>
</form>
</app-modal-form>
<!--MODAL: edit invoice payment-->
<app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected">
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td style="width: 10%">
<span class="input-group-text">Invoice Number**</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #invoiceSelect [value]="selected.invoiceNum">
</td>
</tr>
<!--MODAL: edit invoice payment-->
<app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected">
<div class="modal-body">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td style="width: 10%">
<span class="input-group-text">Invoice Number**</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #invoiceSelect [value]="selected.invoiceNum">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Received*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inPaymentReceived [value]="selected.invoiceAmount">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Received*</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #inPaymentReceived [value]="selected.invoiceAmount">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Type*</span>
</td>
<td>
<input type="text" class="form-control" #paymentTypeSelect [value]="paymentTypes[selected.paymentTypeId-1].paymentTypeName">
<!--<select class="custom-select" [value]={{paymentTypes[selected.paymentTypeId-1].paymentTypeName}} (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"-->
<!--#paymentTypeSelect>-->
<tr>
<td style="width: 10%">
<span class="input-group-text">Payment Type*</span>
</td>
<td>
<input type="text" class="form-control" #paymentTypeSelect [value]="paymentTypes[selected.paymentTypeId-1].paymentTypeName">
<!--<select class="custom-select" [value]={{paymentTypes[selected.paymentTypeId-1].paymentTypeName}} (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"-->
<!--#paymentTypeSelect>-->
<!--<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}-->
<!--&lt;!&ndash;{{paymentTypes[selected.paymentTypeId-1].paymentTypeName}}}&ndash;&gt;-->
<!--&lt;!&ndash;{{paymentTypes[selected.paymentTypeId-1].paymentTypeName}}}&ndash;&gt;-->
<!--</option>-->
<!--</select>-->
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Date Received*</span>
</td>
<td colspan="7">
<input type="date" class="form-control" #inDateReceived [value]="selected.paymentDate">
</td>
</tr>
<!--</select>-->
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Date Received*</span>
</td>
<td colspan="7">
<input type="date" class="form-control" #inDateReceived [value]="selected.paymentDate">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Check#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #incheckNo [value]="selected.checkNo">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Check#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #incheckNo [value]="selected.checkNo">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Transaction#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #intransactionNo [value]="selected.transactionNo">
</td>
</tr>
<tr>
<td style="width: 10%">
<span class="input-group-text">Transaction#</span>
</td>
<td colspan="7">
<input type="text" class="form-control" #intransactionNo [value]="selected.transactionNo">
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="!(invoiceSelect.value && inPaymentReceived.value && inDateReceived.value)"
(click)="updateInvoicePayment(invoiceSelect.value, selected.invoicePaymentId, selected.paymentTypeId, inDateReceived.value, inPaymentReceived.value.substr(1).replace(',', ''), incheckNo.value, intransactionNo.value, edit)">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="!(invoiceSelect.value && inPaymentReceived.value && inDateReceived.value)"
(click)="updateInvoicePayment(invoiceSelect.value, selected.invoicePaymentId, selected.paymentTypeId, inDateReceived.value, inPaymentReceived.value.substr(1).replace(',', ''), incheckNo.value, intransactionNo.value, edit)">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
<div *ngIf="!selected">
<div class="modal-body">
Choose an Invoice Payment First!
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="true">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
</app-modal-form>
</div>
<div *ngIf="!loggedIn">
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-4">Please Log In First!</h1>
<p class="lead">Once you do, you will be able to log payments to your hearts content!</p>
<p class="lead">
<a class="btn btn-success btn-lg" href="#" role="button">Log In</a>
</p>
</div>
</div>
</div>
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose an Invoice Payment First!
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
[disabled]="true">
Update
</button>
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</div>
</div>
</app-modal-form>
</div>

11
AstuteClient2/src/app/invoice-payment/invoice-payment.component.ts
View File

@ -10,6 +10,8 @@ import {ToastManagerService} from "../services/toast-manager/toast-service.servi
})
export class InvoicePaymentComponent implements OnInit {
@ViewChild('agGrid', {'static': false}) agGrid;
loggedIn: boolean;
selected = null;
chosenInv: any = 0;
chosenPaymentType: any = 0;
@ -25,14 +27,17 @@ export class InvoicePaymentComponent implements OnInit {
{headerName: 'Payment Type', field: 'paymentType'},
{headerName: 'Check / ACH #', field: 'checkNo'},
{headerName: 'Transaction #', field: 'transactionNo'}
];
constructor(protected astuteClientService: AstuteClientService, protected toastService: ToastManagerService) {
}
ngOnInit() {
this.refreshData();
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
this.refreshData();
} else {
this.loggedIn = false;
}
}
invoiceDropdownChange(index) {

1293
AstuteClient2/src/app/invoice/invoice.component.html
View File

File diff suppressed because it is too large Load Diff

175
AstuteClient2/src/app/invoice/invoice.component.ts
View File

@ -13,6 +13,8 @@ declare var $: any;
styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent implements OnInit {
loggedIn: boolean;
gridApi;
gridColumnApi;
detailGridApi;
@ -49,7 +51,7 @@ export class InvoiceComponent implements OnInit {
{headerName: 'Date', field: 'invoiceDate'},
{headerName: 'Sales Order Number', field: 'poNum'},
{headerName: 'Change Order Number', field: 'changeOrderNum'},
{headerName: 'Outstanding Balance', field: 'outstandingBalanceString'},
{headerName: 'Outstanding Balance', field: 'outstandingBalance', cellRenderer: 'numberFormatterComponent'},
{headerName: 'Bill Amount', field: 'billAmt', cellRenderer: 'numberFormatterComponent'},
{headerName: 'Notes ✎', field: 'specialNotes',
editable: (node => node.data.invoiceStatus === 1), cellEditor: 'agLargeTextCellEditor'}
@ -67,15 +69,17 @@ export class InvoiceComponent implements OnInit {
detailColumnDefs = [
{headerName: '#', field: 'lineItemNum'},
{headerName: 'PO Detail', field: 'poDetailName'},
{headerName: 'Description ✎', field: 'desc',
{headerName: 'Description ✎*', field: 'desc',
editable: (_ => (this.chosenInv && this.chosenInv.invoiceStatus === 1)), cellEditor: 'agLargeTextCellEditor'},
{headerName: 'Fee Type', field: 'rateTypeName'},
{headerName: 'Fee Type *', field: 'rateTypeName',
editable: (node => (node.data.poLineItemNum === -1 && this.chosenInv && this.chosenInv.invoiceStatus === 1)),
cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.rateNames}},
{headerName: 'Service Type', field: 'serviceTypeName'},
{headerName: 'Qty or Hours ✎', field: 'qty',
{headerName: 'Qty or Hours ✎*', field: 'qty',
editable: (_ => (this.chosenInv && this.chosenInv.invoiceStatus === 1))},
{headerName: '(/Remaining)', field: 'remainingQty'},
{headerName: 'Fee', field: 'fee',
cellRenderer: 'numberFormatterComponent'}
{headerName: 'Remaining Qty', field: 'remainingQty'},
{headerName: 'Fee *', field: 'fee',
editable: (node => (node.data.poLineItemNum === -1 && this.chosenInv && this.chosenInv.invoiceStatus === 1)), cellRenderer: 'numberFormatterComponent'}
];
@ -124,39 +128,49 @@ export class InvoiceComponent implements OnInit {
}
ngOnInit() {
this.astuteClientService.getServiceTypes().then((d) => {
if (d) {
this.serviceTypes = d;
this.serviceTypes.forEach((type) => {
this.serviceNames.push(type.serviceTypeDesc);
});
} else {
this.notif ('Get service types failed');
}
}, reason => {
this.notif('Get service type failed: ' + reason);
});
this.astuteClientService.getRateTypes().then((d) => {
if (d) {
this.rateTypes = d;
this.rateTypes.forEach((type) => {
this.rateNames.push(type.feeTypeDesc);
});
} else {
this.notif ('Get rate types failed');
}
}, reason => {
this.notif('Get rate type failed: ' + reason);
});
this.astuteClientService.getCustomers().then((customers) => {
if (customers) {
this.customers = customers;
} else {
this.notif('Get Customers Failed!');
}
}, (reason) => {
this.notif('Get Customers Failed: ' + reason);
});
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
this.astuteClientService.getServiceTypes().then((d) => {
if (d) {
this.serviceTypes = d;
this.serviceTypes.forEach((type) => {
this.serviceNames.push(type.serviceTypeDesc);
});
} else {
this.notif ('Get service types failed');
}
}, reason => {
this.notif('Get service type failed: ' + reason);
});
this.astuteClientService.getRateTypes().then((d) => {
if (d) {
this.rateTypes = d;
this.rateTypes.forEach((type) => {
this.rateNames.push(type.feeTypeDesc);
});
} else {
this.notif ('Get rate types failed');
}
}, reason => {
this.notif('Get rate type failed: ' + reason);
});
this.astuteClientService.getCustomers().then((customers) => {
if (customers) {
this.customers = customers;
} else {
this.notif('Get Customers Failed!');
}
}, (reason) => {
this.notif('Get Customers Failed: ' + reason);
});
this.refreshPOs();
this.refreshData();
} else {
this.loggedIn = false;
}
}
refreshPOs() {
this.astuteClientService.getPOs().then((data) => {
if (data) {
this.pos = data;
@ -164,6 +178,7 @@ export class InvoiceComponent implements OnInit {
this.astuteClientService.getPODetail(po.ponum).then((details) => {
if (details) {
details.forEach((detail) => {
detail.tempRemainingQty = detail.remainingQty;
this.allPODetails.push(detail);
});
// console.log(this.allPODetails);
@ -181,18 +196,12 @@ export class InvoiceComponent implements OnInit {
}, (reason) => {
this.notif('Get SOs Failed: ' + reason);
});
this.refreshData();
}
refreshData() {
this.astuteClientService.getInvoices().then((data) => {
if (data) {
this.source = data;
// console.log(data);
this.source.forEach((row) => {
row.billAmtString = formatCurrency(row.billAmt, 'en-US', '$', 'USD');
row.outstandingBalanceString = formatCurrency(row.outstandingBalance, 'en-US', '$', 'USD');
});
} else {
this.notif('Get Invoices failed!');
}
@ -221,15 +230,16 @@ export class InvoiceComponent implements OnInit {
// this.refreshData();
}
updateDetailRow(event) {
const eventData = event.data;
// console.log(eventData);
event.data.feeTypeId = this.getFeeIdFromName(event.data.rateTypeName);
const eventData = event.data;
this.astuteClientService.updateInvoiceDetail(eventData.invoiceNum, eventData.lineItemNum, eventData).then((data) => {
if (!data) {
this.refreshDetailsOfSelected();
this.notif('Detail Updating Failed, Check Input Fields');
} else {
this.updateSelectedBillAmt();
}
this.refreshDetailsOfSelected();
}, (reason) => {
this.notif('Update Detail failed: ' + reason);
});
@ -251,18 +261,21 @@ export class InvoiceComponent implements OnInit {
this.selectedInDetails = this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then((data) => {
if (data) {
data.forEach((invDetail) => {
const tempPo = this.selectedPODetails.filter((po) => {
return po.lineItemNo === invDetail.poLineItemNum;
})[0];
if (tempPo) {
invDetail.remainingQty = tempPo.remainingQty;
}
invDetail.serviceTypeName = this.serviceNames[invDetail.serviceTypeId - 1];
invDetail.rateTypeName = this.rateNames[invDetail.feeTypeId - 1];
if (invDetail.poLineItemNum === -1) {
invDetail.remainingQty = '-';
invDetail.poDetailName = 'Out of Pocket Expenses';
} else {
if (this.chosenInv.invoiceStatus === 1) {
invDetail.remainingQty = invDetail.draftRemainingQty;
} else {
const tempPo = this.selectedPODetails[invDetail.poLineItemNum - 1];
if (tempPo) {
invDetail.remainingQty = tempPo.remainingQty;
} else {
invDetail.remainingQty = '';
}
}
const temp = this.selectedPODetails[invDetail.poLineItemNum - 1];
if (temp) {
invDetail.poDetailName = this.selectedPODetails[invDetail.poLineItemNum - 1].serviceDesc;
@ -270,6 +283,9 @@ export class InvoiceComponent implements OnInit {
invDetail.poDetailName = '';
}
}
invDetail.serviceTypeName = this.serviceNames[invDetail.serviceTypeId - 1];
invDetail.rateTypeName = this.rateNames[invDetail.feeTypeId - 1];
});
this.updateSelectedBillAmt();
return data;
@ -339,7 +355,19 @@ export class InvoiceComponent implements OnInit {
});
}
}
// updateSelectedDetailRemainingQty(poLineItemNum: number) {
// this.selectedInDetails.then((data) => {
// if (data) {
// let newRemainingQty = this.selectedPODetails[poLineItemNum - 1].remainingQty;
// data.forEach(invDetail => {
// if (invDetail.poLineItemNum.toString() === poLineItemNum.toString()) {
// newRemainingQty = newRemainingQty - invDetail.qty;
// }
// });
// this.selectedPODetails[poLineItemNum - 1].tempRemainingQty = newRemainingQty;
// }
// });
// }
printInvoice() {
this.printService.printPDF (this.chosenInv.invoiceNumber);
@ -555,7 +583,19 @@ export class InvoiceComponent implements OnInit {
// creates empty line item detail
addEmptyDetail(poLineItemNum) {
let emptyData;
if (poLineItemNum === -1) {
if (poLineItemNum === '-1') {
emptyData = {
desc: 'Out of Pocket Expenses',
fee: 0,
feeTypeId: 1,
invoiceNum: this.chosenInv.invoiceNumber,
// lineItemNum: 1,
poLineItemNum: poLineItemNum,
qty: 0,
// remainingQty: 1,
serviceTypeId: 6
};
} else {
emptyData = {
desc: this.selectedPODetails[poLineItemNum - 1].serviceDesc,
fee: this.selectedPODetails[poLineItemNum - 1].fee,
@ -563,20 +603,8 @@ export class InvoiceComponent implements OnInit {
invoiceNum: this.chosenInv.invoiceNumber,
// lineItemNum: 1,
poLineItemNum: poLineItemNum,
qty: 1,
remainingQty: this.selectedPODetails[poLineItemNum - 1].remainingQty,
serviceTypeId: this.selectedPODetails[poLineItemNum - 1].serviceTypeId
};
} else {
emptyData = {
desc: 'Out of Pocket Expenses',
fee: this.selectedPODetails[poLineItemNum - 1].fee,
feeTypeId: this.selectedPODetails[poLineItemNum - 1].feeTypeId,
invoiceNum: this.chosenInv.invoiceNumber,
// lineItemNum: 1,
poLineItemNum: poLineItemNum,
qty: 1,
remainingQty: this.selectedPODetails[poLineItemNum - 1].remainingQty,
qty: 0,
// remainingQty: this.selectedPODetails[poLineItemNum - 1].remainingQty,
serviceTypeId: this.selectedPODetails[poLineItemNum - 1].serviceTypeId
};
}
@ -709,5 +737,4 @@ export class InvoiceComponent implements OnInit {
notif(text: string) {
this.toastService.show(text, {classname: 'bg-danger text-light'});
}
}

20
AstuteClient2/src/app/login/login.component.html
View File

@ -8,16 +8,20 @@
</div>
<label for="username" class="sr-only">Username</label>
<input class="form-control" type="text" id="username" name="username" ngModel placeholder="Username">
<input class="form-control"
type="text"
id="username"
name="username"
ngModel
placeholder="Username">
<label for="password" class="sr-only">Password</label>
<input
class="form-control"
type="password"
id="password"
name="password"
ngModel
placeholder="Password">
<input class="form-control"
type="password"
id="password"
name="password"
ngModel
placeholder="Password">
<button class="btn btn-primary" type="submit" style="float: right">Log in</button>
</form>

2
AstuteClient2/src/app/login/login.component.ts
View File

@ -30,7 +30,7 @@ export class LoginComponent implements OnInit {
} else {
this.notif('login failed, checked credentials');
}
})
});
}
// ** toast notification method

5
AstuteClient2/src/app/nav-bar/nav-bar.component.html
View File

@ -21,10 +21,11 @@
<span class="nav-item">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [ngClass]="settingsActive ? 'active' : ''"routerLink="/settings" routerLinkActive="active">Settings</a>
<a *ngIf="loggedIn" class="nav-link" [ngClass]="settingsActive ? 'active' : ''"routerLink="/settings" routerLinkActive="active">Settings</a>
</li>
<li class="nav-item">
<button class="btn" style="color: red" (click)="logout()">Logout</button>
<button *ngIf="loggedIn" class="btn" style="color: red" (click)="logout()">Logout</button>
<a *ngIf="!loggedIn" class="btn" style="color: lawngreen" href="#" role="button">Log In</a>
</li>
</ul>
</span>

6
AstuteClient2/src/app/nav-bar/nav-bar.component.ts
View File

@ -17,11 +17,17 @@ export class NavBarComponent implements OnInit {
// @Input() logoffActive: boolean;
@Input() settingsActive: boolean;
loggedIn: boolean;
constructor(private astuteClientService: AstuteClientService, private router: Router, private toastService: ToastManagerService) {
}
ngOnInit() {
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
} else {
this.loggedIn = false;
}
}
logout() {

714
AstuteClient2/src/app/sales-order/sales-order.component.html
View File

@ -1,194 +1,55 @@
<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
style="height: 500px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateRow($event)"
(gridReady)="onGridReady($event)"
(rowClicked)="setSelectedRow($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
></ag-grid-angular>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="btn-group w-100">
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
<button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected || selected.isFinal">Edit</button>
<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>
<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected || selected.isFinal">Finalize</button>
<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected || selected.invoiceSequence > 0">Delete</button>
<div *ngIf="loggedIn">
<h1 align="center">Sales Orders</h1>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ag-grid-angular
style="height: 500px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateRow($event)"
(gridReady)="onGridReady($event)"
(rowClicked)="setSelectedRow($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
></ag-grid-angular>
</div>
</div>
<!--<div class="col">-->
<!--<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">Finalize</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected?true:selected.final === 0">Delete</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 used to identify later" #title></td>
</tr>
<tr>
<td style="width: 20%"><span class="input-group-text">SO Number</span></td>
<td style="width: 30%"><input type="text" class="form-control" placeholder="Internal SO Number" maxlength="40" #ponum></td>
<td style="width: 20%"><span class="input-group-text">SO Date</span></td>
<td style="width: 30%"><input type="date" class="form-control" [value]="getCurrDate()" #podate></td>
</tr>
<tr>
<td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
<td style="width: 30%"><input type="text" class="form-control" placeholder="External Contract Number" #contractnum></td>
<td style="width: 20%"><span class="input-group-text">Contract Amount</span></td>
<td style="width: 30%"><input type="text" class="form-control" placeholder="Derived From Details" [value]="0 | currency" #contractamt disabled></td>
</tr>
<tr>
<td><span class="input-group-text">Notes</span></td>
<td colspan="3"><input type="text" class="form-control" placeholder="Notes..." #notes></td>
</tr>
</tbody>
</table>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="btn-group w-100">
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
<button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected || selected.isFinal">Edit</button>
<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>
<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected || selected.isFinal">Finalize</button>
<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected || selected.invoiceSequence > 0">Delete</button>
</div>
</div>
<!--<div class="col">-->
<!--<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">Finalize</button>-->
<!--</div>-->
<!--<div class="col">-->
<!--<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected?true:selected.final === 0">Delete</button>-->
<!--</div>-->
</div>
</div>
<!--Detail-->
<!--<div class="modal-body">-->
<!--<p class="h4 text-right">Detail</p>-->
<!--<hr>-->
<!--<table class="table">-->
<!--<thead>-->
<!--<tr>-->
<!--<th scope="col"></th>-->
<!--<th scope="col" style="width: 50px">#</th>-->
<!--<th scope="col">Description</th>-->
<!--<th scope="col">Rate Type</th>-->
<!--<th scope="col">Service Type</th>-->
<!--<th scope="col" style="width: 75px">Qty(#)</th>-->
<!--<th scope="col" style="width: 100px">Rate($)</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody *ngFor="let poDetail of newPODetail; let i = index">-->
<!--<tr class="p-0 m-0">-->
<!--<td class="p-1 m-0">-->
<!--<button class="btn btn-outline-danger" type="button" (click)="newPODetail.splice(i, 1);">-->
<!-- - -->
<!--</button>-->
<!--</td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onNewCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>-->
<!--<td class="p-0 m-0">-->
<!--<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>-->
<!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onNewCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>-->
<!--<option value="1">Fixed Fee</option>-->
<!--<option value="2">Hourly</option>-->
<!--</select>-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onNewCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
<!--<option value="1">Study</option>-->
<!--<option value="2">Design</option>-->
<!--<option value="3">Peer Review</option>-->
<!--<option value="4">Cost Estimation</option>-->
<!--<option value="5">Forensic Investigation</option>-->
<!--</select>-->
<!--</td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onNewCellChange(i, 'qty', qty.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #qty></td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.fee" (change)="onNewCellChange(i, 'fee', fee.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #fee></td>-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--<tr class="p-0 m-0">-->
<!--<td class="p-1 m-0">-->
<!--<button class="btn btn-success" type="button"-->
<!--[disabled]="!ponum.value"-->
<!--(click)="pushOntoNewDetail(newPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
<!--&lt;!&ndash;(click)="pushOntoNewDetail((lineItemNo) ? lineItemNo.value + 1: 1, ponum.value, serviceDesc.value,&ndash;&gt;-->
<!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
<!--+</button>-->
<!--</td>-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="(selectedPODetail.length) ? selectedPODetail[selectedPODetail.length-1].lineItemNo + 1: 1" #lineItemNo>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<select class="form-control cell" [value]="1" #feeTypeId>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="1">Fixed Fee</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Hourly</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<select class="form-control cell" [value]="1" #serviceTypeId>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="1">Study</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="1" #qty></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #fee></td>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<div class="modal-footer">
<button class="btn btn-success" type="button"
[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">
<!--MODAL: new po-->
<app-modal-form [title]="'New Sales Order'" #new>
<div class="modal-body">
<p class="h4 text-right">General</p>
<hr>
@ -196,163 +57,102 @@
<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>
<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" [value]="selected.customerId" disabled="true" #customerid>
<option [value]="-1">No Customer</option>
<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="SO Title" [value]="selected.title" #title></td>
<td colspan="3"><input type="text" class="form-control" placeholder="Distinctive title, will be used 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="SO Number" maxlength="40" [value]="selected.ponum" #ponum disabled></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]="selected.podate" #podate></td>
<td style="width: 30%"><input type="date" class="form-control" [value]="getCurrDate()" #podate></td>
</tr>
<tr>
<td style="width: 20%"><span class="input-group-text">Contract Number</span></td>
<td style="width: 30%"><input type="text" class="form-control" placeholder="Contract Number" [value]="selected.contractNum" #contractnum></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="Contract Amount" [value]="selected.contractAmtString" #contractamt disabled></td>
<td style="width: 30%"><input type="text" class="form-control" placeholder="Derived From Details" [value]="0 | currency" #contractamt disabled></td>
</tr>
<tr>
<td><span class="input-group-text">Notes</span></td>
<td colspan="3"><input type="text" class="form-control" placeholder="Notes..." [value]="selected.notes" #notes></td>
<td colspan="3"><input type="text" class="form-control" placeholder="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">-->
<!--<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>-->
<!--&lt;!&ndash;<th scope="col">Purchase Order Number</th>&ndash;&gt;-->
<!--<th scope="col">Description</th>-->
<!--<th scope="col">Rate Type</th>-->
<!--<th scope="col">Service Type</th>-->
<!--<th scope="col" style="width: 75px">Quantity</th>-->
<!--<th scope="col" style="width: 100px">Rate</th>-->
<!--&lt;!&ndash;<th scope="col">Remaining Quantity</th>&ndash;&gt;-->
<!--<th scope="col" style="width: 75px">Qty(#)</th>-->
<!--<th scope="col" style="width: 100px">Rate($)</th>-->
<!--</tr>-->
<!--</thead>-->
<!--&lt;!&ndash;<tbody>&ndash;&gt;-->
<!--<tbody *ngFor="let poDetail of selectedPODetail; let i = index">-->
<!--<tbody *ngFor="let poDetail of newPODetail; let i = index">-->
<!--<tr class="p-0 m-0">-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">&ndash;&gt;-->
<!--&lt;!&ndash; - &ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>-->
<!--&lt;!&ndash;<td class="p-0"><input type="text" class="form-control cell" [value]="poDetail.ponum"></td>&ndash;&gt;-->
<!--<td class="p-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)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>-->
<!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
<!--<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>-->
<!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onSelectedCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>-->
<!--<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>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
<!--<option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceNames">{{serviceType.desc}}</option>-->
<!--&lt;!&ndash;<option value="">Study</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--<select 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>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onSelectedCellChange(i, 'qty', qty.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #qty></td>-->
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="+poDetail.fee | currency" (change)="onSelectedCellChange(i, 'fee', fee.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #fee></td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onNewCellChange(i, 'qty', qty.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #qty></td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.fee" (change)="onNewCellChange(i, 'fee', fee.value); onNewCellChange(i, 'remainingQty', qty.value * fee.value); updateNewContractAmt();" #fee></td>-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--<tr class="p-0 m-0">-->
<!--<td class="p-1 m-0">-->
<!--<button class="btn btn-success" type="button"-->
<!--(click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
<!--&lt;!&ndash;(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,&ndash;&gt;-->
<!--[disabled]="!ponum.value"-->
<!--(click)="pushOntoNewDetail(newPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
<!--&lt;!&ndash;(click)="pushOntoNewDetail((lineItemNo) ? lineItemNo.value + 1: 1, ponum.value, serviceDesc.value,&ndash;&gt;-->
<!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
<!--+</button>-->
<!--</td>-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="(selectedPODetail.length) ? selectedPODetail[selectedPODetail.length-1].lineItemNo + 1: 1" #lineItemNo>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<select class="form-control cell" [value]="1" #feeTypeId>&ndash;&gt;-->
@ -369,8 +169,9 @@
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #qty></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="1" #qty></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #fee></td>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
@ -378,76 +179,295 @@
<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)"
[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)"
>
Update
Add
</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!
<button class="btn btn-outline-danger" (click)="close(new)">Cancel</button>
</div>
</app-modal-form>
<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>
<!--MODAL: po details-->
<app-modal-form [title]="'Details of ' + (selected ? selected.ponum: '')" #editDetails>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12 align-items-end">
<ag-grid-angular
style="height: 350px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="selectedPODetail | async"
[columnDefs]="detailColumnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateDetailRow($event)"
(gridReady)="onDetailGridReady($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
></ag-grid-angular>
</div>
<!--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]="selected.contractAmtString" #contractamt disabled></td>
</tr>
<tr>
<td><span class="input-group-text">Notes</span></td>
<td colspan="3"><input type="text" class="form-control" placeholder="Notes..." [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>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="input-group mb-3 mt-2">
<input type="text" class="form-control input-group-sm" placeholder="Descrpition" #poDescription>
<div class="input-group-append w-25">
<button class="btn btn-success w-50 input-group-sm" type="button"
(click)="addEmptyDetail(poDescription.value); poDescription.value = '';"
[disabled]="!poDescription.value || (selected ? selected.isFinal : false)">
Add
</button>
<button class="btn btn-danger w-50 input-group-sm" type="button"
[disabled]="true">
Delete
</button>
<!--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>-->
<!--&lt;!&ndash;<th scope="col">Purchase Order Number</th>&ndash;&gt;-->
<!--<th scope="col">Description</th>-->
<!--<th scope="col">Rate Type</th>-->
<!--<th scope="col">Service Type</th>-->
<!--<th scope="col" style="width: 75px">Quantity</th>-->
<!--<th scope="col" style="width: 100px">Rate</th>-->
<!--&lt;!&ndash;<th scope="col">Remaining Quantity</th>&ndash;&gt;-->
<!--</tr>-->
<!--</thead>-->
<!--&lt;!&ndash;<tbody>&ndash;&gt;-->
<!--<tbody *ngFor="let poDetail of selectedPODetail; let i = index">-->
<!--<tr class="p-0 m-0">-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">&ndash;&gt;-->
<!--&lt;!&ndash; - &ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>-->
<!--&lt;!&ndash;<td class="p-0"><input type="text" class="form-control cell" [value]="poDetail.ponum"></td>&ndash;&gt;-->
<!--<td class="p-0 m-0">-->
<!--<textarea style="height: 36px" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc></textarea>-->
<!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.feeTypeId" (change)="onSelectedCellChange(i, 'feeTypeId', feeTypeId.value)" #feeTypeId>-->
<!--<option value="1">Fixed Fee</option>-->
<!--<option value="2">Hourly</option>-->
<!--</select>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
<!--<option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceNames">{{serviceType.desc}}</option>-->
<!--&lt;!&ndash;<option value="">Study</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--</select>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>&ndash;&gt;-->
<!--</td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="+poDetail.qty" (change)="onSelectedCellChange(i, 'qty', qty.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #qty></td>-->
<!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="+poDetail.fee | currency" (change)="onSelectedCellChange(i, 'fee', fee.value); onSelectedCellChange(i, 'remainingQty', qty.value * fee.value); updateEditContractAmt();" #fee></td>-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="poDetail.remainingQty" [id]="'remainingQty' + i"></td>&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--<tr class="p-0 m-0">-->
<!--<td class="p-1 m-0">-->
<!--<button class="btn btn-success" type="button"-->
<!--(click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">-->
<!--&lt;!&ndash;(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,&ndash;&gt;-->
<!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
<!--+</button>-->
<!--</td>-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<select class="form-control cell" [value]="1" #feeTypeId>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="1">Fixed Fee</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Hourly</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;-->
<!--&lt;!&ndash;<select class="form-control cell" [value]="1" #serviceTypeId>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="1">Study</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="0" #qty></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0"><input type="number" class="form-control cell" #remainingQty></td>&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<div class="modal-footer">
<button class="btn btn-success" type="button"
[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>
<!--MODAL: po details-->
<app-modal-form [title]="'Details of ' + (selected ? selected.ponum: '')" #editDetails>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12 align-items-end">
<ag-grid-angular
style="height: 350px;"
class="ag-theme-balham"
[enableColResize]="true"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="selectedPODetail | async"
[columnDefs]="detailColumnDefs"
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateDetailRow($event)"
(gridReady)="onDetailGridReady($event)"
(rowDataChanged)="resizeColumns($event)"
rowSelection="single"
></ag-grid-angular>
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="input-group mb-3 mt-2">
<input type="text" class="form-control input-group-sm" placeholder="Descrpition"
[disabled]="selected ? selected.isFinal : false" #poDescription>
<div class="input-group-append w-25">
<button class="btn btn-success w-50 input-group-sm" type="button"
(click)="addEmptyDetail(poDescription.value); poDescription.value = '';"
[disabled]="!poDescription.value || (selected ? selected.isFinal : false)">
Add
</button>
<button class="btn btn-danger w-50 input-group-sm" type="button"
[disabled]="true">
Delete
</button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 justify-content-start">
<h4 align="end">Contract Amount: {{contractAmount | currency}}</h4>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 justify-content-start">
<h4 align="end">Contract Amount: {{contractAmount | currency}}</h4>
</div>
</app-modal-form>
</div>
<div *ngIf="!loggedIn">
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-4">Please Log In First!</h1>
<p class="lead">Once you do, you will be able to create new sales orders and edit existing ones to your hearts content!</p>
<p class="lead">
<a class="btn btn-success btn-lg" href="#" role="button">Log In</a>
</p>
</div>
</div>
</div>
</div>
</app-modal-form>
</div>

90
AstuteClient2/src/app/sales-order/sales-order.component.ts
View File

@ -3,6 +3,7 @@ import {AstuteClientService} from '../services/astute-client-service';
import {formatCurrency, formatNumber} from '@angular/common';
import {ToastManagerService} from '../services/toast-manager/toast-service.service';
import {NumberFormatterComponent} from '../ag-grid-components/number-formatter/number-formatter.component';
import {EmptyErrorEditorComponent} from "../ag-grid-components/empty-error-editor/empty-error-editor.component";
@Component({
selector: 'app-sales-order',
@ -10,6 +11,8 @@ import {NumberFormatterComponent} from '../ag-grid-components/number-formatter/n
styleUrls: ['./sales-order.component.css']
})
export class SalesOrderComponent implements OnInit {
loggedIn: boolean;
// both of the grid api's
gridApi;
gridColumnApi;
@ -26,15 +29,15 @@ export class SalesOrderComponent implements OnInit {
// data for SO grid
rowData: any;
columnDefs = [
{headerName: 'Project Number ✎', field: 'astuteProjectNumber', editable: (node => !node.data.isFinal)},
{headerName: 'Project Number ✎', field: 'astuteProjectNumber', editable: (node => !node.data.isFinal), cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'SO Number', field: 'ponum'},
// {headerName: 'Customer ID', field: 'customerId'},
{headerName: 'Customer Name', field: 'customerName'},
{headerName: 'Contract Number ✎', field: 'contractNum', editable: (node => !node.data.isFinal)},
{headerName: 'SO Title ✎', field: 'title', editable: (node => !node.data.isFinal)},
{headerName: 'Contract Number ✎', field: 'contractNum', editable: (node => !node.data.isFinal), cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'SO Title ✎', field: 'title', editable: (node => !node.data.isFinal), cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Contract Amount', field: 'contractAmt', cellRenderer: 'numberFormatterComponent'},
// {headerName: 'Contract Amount', field: 'contractAmt'},
{headerName: 'SO Date ✎', field: 'podate', editable: (node => !node.data.isFinal)},
{headerName: 'SO Date ✎', field: 'podate', editable: (node => !node.data.isFinal), cellEditor: 'emptyErrorEditorComponent'},
{headerName: '# of Invoices', field: 'invoiceSequence'},
{headerName: 'notes ✎', field: 'notes', editable: (node => !node.data.isFinal), cellEditor: 'agLargeTextCellEditor'}
// {headerName: 'oneInvInDraft', field: 'oneInvInDraft'}
@ -52,6 +55,7 @@ export class SalesOrderComponent implements OnInit {
};
frameworkComponents = {
emptyErrorEditorComponent: EmptyErrorEditorComponent,
numberFormatterComponent: NumberFormatterComponent
};
@ -61,7 +65,8 @@ export class SalesOrderComponent implements OnInit {
selectedPODetail;
detailColumnDefs = [
{headerName: '#', field: 'lineItemNo'},
{headerName: 'Description ✎', field: 'serviceDesc', editable: (_ => (this.selected && !this.selected.isFinal))},
{headerName: 'Description ✎', field: 'serviceDesc', editable: (_ => (this.selected && !this.selected.isFinal)),
cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Rate Type ✎', field: 'rateTypeName', editable: (_ => (this.selected && !this.selected.isFinal)),
cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.rateNames}},
{headerName: 'Service Type ✎', field: 'serviceTypeName', editable: (_ => (this.selected && !this.selected.isFinal)),
@ -76,41 +81,46 @@ export class SalesOrderComponent implements OnInit {
}
ngOnInit() {
this.astuteClientService.getServiceTypes().then((d) => {
if (d) {
this.serviceTypes = d;
this.serviceTypes.forEach((type) => {
this.serviceNames.push(type.serviceTypeDesc);
});
// console.log(this.serviceNames);
} else {
this.notif ('Get service types failed');
}
}, reason => {
this.notif('Get service type failed: ' + reason);
});
this.astuteClientService.getRateTypes().then((d) => {
if (d) {
this.rateTypes = d;
this.rateTypes.forEach((type) => {
this.rateNames.push(type.feeTypeDesc);
});
} else {
this.notif ('Get rate types failed');
}
}, reason => {
this.notif('Get rate type failed: ' + reason);
});
this.astuteClientService.getCustomers().then((customers) => {
if (customers) {
this.customers = customers;
} else {
this.notif('Get Customers Failed!');
}
}, (reason) => {
this.notif('Get Customers Failed: ' + reason);
});
this.refreshData();
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
this.astuteClientService.getServiceTypes().then((d) => {
if (d) {
this.serviceTypes = d;
this.serviceTypes.forEach((type) => {
this.serviceNames.push(type.serviceTypeDesc);
});
// console.log(this.serviceNames);
} else {
this.notif ('Get service types failed');
}
}, reason => {
this.notif('Get service type failed: ' + reason);
});
this.astuteClientService.getRateTypes().then((d) => {
if (d) {
this.rateTypes = d;
this.rateTypes.forEach((type) => {
this.rateNames.push(type.feeTypeDesc);
});
} else {
this.notif ('Get rate types failed');
}
}, reason => {
this.notif('Get rate type failed: ' + reason);
});
this.astuteClientService.getCustomers().then((customers) => {
if (customers) {
this.customers = customers;
} else {
this.notif('Get Customers Failed!');
}
}, (reason) => {
this.notif('Get Customers Failed: ' + reason);
});
this.refreshData();
} else {
this.loggedIn = false;
}
}
// callback for grid selection