rushilwiz/astute
1
0
Fork 0
mirror of https://github.com/dyiop/astute.git synced 2025-04-06 21:30:20 -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({ @Component({
selector: 'app-phone-editor-cell', selector: 'app-phone-editor-cell',
template: ` 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 { 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 { NumberFormatterComponent } from './ag-grid-components/number-formatter/number-formatter.component';
import { PhoneFormatterComponent } from './ag-grid-components/phone-formatter/phone-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 { 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'; // import { ServiceTypeComponent } from './service-type/service-type.component';
@NgModule({ @NgModule({
@ -45,7 +47,9 @@ import { PhoneEditorComponent } from './ag-grid-components/phone-editor/phone-ed
ToastsContainerComponent, ToastsContainerComponent,
NumberFormatterComponent, NumberFormatterComponent,
PhoneFormatterComponent, PhoneFormatterComponent,
PhoneEditorComponent// , PhoneEditorComponent,
EmptyErrorEditorComponent,
NumericEditorComponent// ,
// ServiceTypeComponent // ServiceTypeComponent
], ],
imports: [ imports: [
@ -53,7 +57,9 @@ import { PhoneEditorComponent } from './ag-grid-components/phone-editor/phone-ed
AgGridModule.withComponents([ AgGridModule.withComponents([
NumberFormatterComponent, NumberFormatterComponent,
PhoneFormatterComponent, PhoneFormatterComponent,
PhoneEditorComponent PhoneEditorComponent,
EmptyErrorEditorComponent,
NumericEditorComponent
]), ]),
NgbModule, NgbModule,
HttpClientModule, HttpClientModule,

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

@ -8,4 +8,12 @@
::-ms-input-placeholder { /* Microsoft Edge */ ::-ms-input-placeholder { /* Microsoft Edge */
color: lightblue; 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> <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="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<ag-grid-angular <ag-grid-angular
style="height: 500px;" style="height: 500px;"
class="ag-theme-balham" class="ag-theme-balham"
[enableColResize]="true" [enableColResize]="true"
[enableSorting]="true" [enableSorting]="true"
[enableFilter]="true" [enableFilter]="true"
[rowData]="rowData | async" [rowData]="rowData | async"
[columnDefs]="columnDefs" [columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents" [frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateRow($event)" (cellEditingStopped)="updateRow($event)"
(gridReady)="onGridReady($event)" (gridReady)="onGridReady($event)"
(rowClicked)="setSelectedRow($event)" (rowClicked)="setSelectedRow($event)"
(rowDataChanged)="resizeColumns($event)" (rowDataChanged)="resizeColumns($event)"
rowSelection="single" rowSelection="single"
rowDeselection="true" rowDeselection="true"
></ag-grid-angular> ></ag-grid-angular>
</div>
</div> </div>
</div> <div class="row justify-content-center mt-2">
<div class="row justify-content-center mt-2"> <div class="col">
<div class="col"> <div class="btn-group w-100">
<div class="btn-group w-100"> <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Customer</button>
<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-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-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>
<button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!--MODAL: new customer--> <!--MODAL: new customer-->
<app-modal-form [title]="'New Customer'" #new> <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">
<div class="modal-body"> <div class="modal-body">
<table class="table table-borderless table-sm"> <table class="table table-borderless table-sm">
<tbody> <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> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Name*</span> <span class="input-group-text">Name*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #inName placeholder="John Doe" [value]="selected.customerName"> <input type="text" class="form-control" placeholder="John Doe" #inName>
</td> </td>
</tr> </tr>
@ -183,7 +63,7 @@
<span class="input-group-text">Bill To Dept*</span> <span class="input-group-text">Bill To Dept*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" placeholder="Billing" #inBillToDept [value]="selected.billToDept"> <input type="text" class="form-control" placeholder="Billing" #inBillToDept>
</td> </td>
</tr> </tr>
@ -192,7 +72,7 @@
<span class="input-group-text">Address 1*</span> <span class="input-group-text">Address 1*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1 [value]="selected.add1"> <input type="text" class="form-control" placeholder="13254 John Doe Rd." #inAdd1>
</td> </td>
</tr> </tr>
@ -201,7 +81,7 @@
<span class="input-group-text">Address 2</span> <span class="input-group-text">Address 2</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" placeholder="Apt#, Unit, etc." #inAdd2 [value]="selected.add2"> <input type="text" class="form-control" placeholder="Apt #, Unit, etc..." [value]="''" #inAdd2>
</td> </td>
</tr> </tr>
@ -210,14 +90,14 @@
<span class="input-group-text">City*</span> <span class="input-group-text">City*</span>
</td> </td>
<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>
<td style="width: 1%"> <td style="width: 1%">
<span class="input-group-text">State*</span> <span class="input-group-text">State*</span>
</td> </td>
<td> <td>
<select class="custom-select" #inState [value]="selected.state"> <select class="custom-select" #inState>
<option selected>Choose...</option> <option selected>Choose...</option>
<option *ngFor="let state of states" [value]="state">{{state}}</option> <option *ngFor="let state of states" [value]="state">{{state}}</option>
</select> </select>
@ -229,8 +109,8 @@
</td> </td>
<td style="width: 25%"> <td style="width: 25%">
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip"> <input type="number" class="form-control" placeholder="12345" #inZIP>
<input type="number" class="form-control" placeholder="(+4)" #inZIP4 [value]="selected.ziplast4"> <input type="number" class="form-control" placeholder="(+4)" #inZIP4>
</div> </div>
</td> </td>
</tr> </tr>
@ -240,7 +120,7 @@
<span class="input-group-text">Email*</span> <span class="input-group-text">Email*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="email" class="form-control" placeholder="john@doe.com" #inEmail [value]="selected.email"> <input type="email" class="form-control" placeholder="john@doe.com" #inEmail>
</td> </td>
</tr> </tr>
@ -248,14 +128,17 @@
<td style="width: 1%"> <td style="width: 1%">
<span class="input-group-text">Phone*</span> <span class="input-group-text">Phone*</span>
</td> </td>
<td colspan="3"> <td colspan="7">
<input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone [value]="selected.phone"> <input type="tel" class="form-control" placeholder="(123) 456-7890" [textMask]="{mask: usPhoneMask, guide: false}" #inPhone>
</td> </td>
</tr>
<tr>
<td style="width: 1%"> <td style="width: 1%">
<span class="input-group-text">Ext*</span> <span class="input-group-text">Ext*</span>
</td> </td>
<td colspan="2"> <td colspan="3">
<input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="selected.phExt"> <input type="tel" class="form-control" placeholder="123456" #inPhExt [value]="">
</td> </td>
</tr> </tr>
@ -264,7 +147,7 @@
<span class="input-group-text">Fax</span> <span class="input-group-text">Fax</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="tel" class="form-control" 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> </td>
</tr> </tr>
</tbody> </tbody>
@ -272,80 +155,216 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-warning" type="button" <button class="btn btn-success" type="button"
[disabled]="!(inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)" [disabled]="!(inId.value && 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)"> (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)">
Update Add
</button> </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> </app-modal-form>
<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--> <!--MODAL: edit customer-->
<app-modal-form [title]="'Customer Contacts'" #contacts> <app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected"> <div *ngIf="selected">
<div class="container-fluid"> <div class="modal-body">
<div class="row"> <table class="table table-borderless table-sm">
<div class="col-12 align-items-end"> <tbody>
<ag-grid-angular <tr>
style="height: 500px;" <td style="width: 10%">
class="ag-theme-balham" <span class="input-group-text">Name*</span>
[enableColResize]="true" </td>
[enableSorting]="true" <td colspan="7">
[enableFilter]="true" <input type="text" class="form-control" #inName placeholder="John Doe" [value]="selected.customerName">
[rowData]="contactsData | async" </td>
[columnDefs]="contactsColDef" </tr>
[frameworkComponents]="frameworkComponents"
(cellEditingStopped)="updateContactRow($event)" <tr>
(gridReady)="onContactGridReady($event)" <td style="width: 10%">
(rowDataChanged)="resizeColumns($event)" <span class="input-group-text">Bill To Dept*</span>
rowSelection="single" </td>
rowDeselection="true" <td colspan="7">
></ag-grid-angular> <input type="text" class="form-control" placeholder="Billing" #inBillToDept [value]="selected.billToDept">
</div> </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>
<div class="row justify-content-center mt-2">
<div class="col"> <div class="modal-footer">
<div class="input-group mb-3 mt-2"> <button class="btn btn-warning" type="button"
<input type="text" class="form-control input-group-sm" placeholder="Name" #customerContactName> [disabled]="!(inName.value && inBillToDept.value && inAdd1.value && inCity.value && inState.value && inZIP.value && inEmail.value && inPhone.value)"
<div class="input-group-append w-25"> (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)">
<button class="btn btn-success w-50 input-group-sm" type="button" Update
(click)="createEmptyContact(customerContactName.value); customerContactName.value = '';" [disabled]="!customerContactName.value"> </button>
Add <button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
</button> </div>
<button class="btn btn-danger w-50 input-group-sm" type="button" </div>
(click)="deleteContact()"> <div *ngIf="!selected">
Delete <div class="modal-body">
</button> 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>
</div> </div>
</div>
<!--<div class="modal-footer">--> <!--<div class="modal-footer">-->
<!--<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>--> <!--<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button>-->
<!--</div>--> <!--</div>-->
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Customer First!
</div> </div>
<div class="modal-footer"> <div *ngIf="!selected">
<button type="button" class="btn btn-info" (click)="close(contacts)">Exit</button> <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>
</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 {ToastManagerService} from '../services/toast-manager/toast-service.service';
import {PhoneFormatterComponent} from '../ag-grid-components/phone-formatter/phone-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 {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({ @Component({
selector: 'app-customer', selector: 'app-customer',
@ -11,6 +13,7 @@ import {PhoneEditorComponent} from '../ag-grid-components/phone-editor/phone-edi
}) })
export class CustomerComponent implements OnInit { export class CustomerComponent implements OnInit {
// @ViewChild('agGrid') agGrid; // @ViewChild('agGrid') agGrid;
loggedIn: boolean;
gridApi; gridApi;
gridColumnApi; gridColumnApi;
contactGridApi; contactGridApi;
@ -19,22 +22,24 @@ export class CustomerComponent implements OnInit {
customers; customers;
columnDefs = [ columnDefs = [
{headerName: 'ID', field: 'customerId'}, {headerName: 'ID', field: 'customerId'},
{headerName: 'Name ✎', field: 'customerName', editable: true}, {headerName: 'Name ✎', field: 'customerName', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Bill To ✎', field: 'billToDept', editable: true}, {headerName: 'Bill To ✎', field: 'billToDept', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Address 1 ✎', field: 'add1', editable: true}, {headerName: 'Email ✎', field: 'email', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Address 2 ✎', field: 'add2', editable: true},
{headerName: 'City ✎', field: 'city', editable: true},
{headerName: 'Email ✎', field: 'email', editable: true},
{headerName: 'Fax ✎', field: 'fax', editable: true, cellEditor: 'phoneEditorComponent'}, {headerName: 'Fax ✎', field: 'fax', editable: true, cellEditor: 'phoneEditorComponent'},
{headerName: 'Phone ✎', field: 'phone', editable: true, cellEditor: 'phoneEditorComponent'}, {headerName: 'Phone ✎', field: 'phone', editable: true, cellEditor: 'phoneEditorComponent'},
{headerName: 'Ext. ✎', field: 'phExt', editable: true}, {headerName: 'Ext. ✎', field: 'phExt', editable: true, cellEditor: 'numericEditorComponent'},
{headerName: 'State ✎', field: 'state', editable: true}, {headerName: 'Address 1 ✎', field: 'add1', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'ZIP ✎', field: 'zip', editable: true}, {headerName: 'Address 2 ✎', field: 'add2', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'ZIP-4 ✎', field: 'ziplast4', editable: true} {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 = { frameworkComponents = {
phoneFormatterComponent: PhoneFormatterComponent, phoneFormatterComponent: PhoneFormatterComponent,
phoneEditorComponent: PhoneEditorComponent phoneEditorComponent: PhoneEditorComponent,
emptyErrorEditorComponent: EmptyErrorEditorComponent,
numericEditorComponent: NumericEditorComponent
}; };
rowData: any; rowData: any;
states = [ states = [
@ -94,7 +99,7 @@ export class CustomerComponent implements OnInit {
contactsData: any; contactsData: any;
contactsColDef = [ contactsColDef = [
{headerName: 'Name ✎', field: 'name', editable: true}, {headerName: 'Name ✎', field: 'name', editable: true, cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Title ✎', field: 'title', editable: true}, {headerName: 'Title ✎', field: 'title', editable: true},
{headerName: 'Email ✎', field: 'email', editable: true}, {headerName: 'Email ✎', field: 'email', editable: true},
{headerName: 'Work ✎', field: 'workPhone', editable: true, cellEditor: 'phoneEditorComponent'}, {headerName: 'Work ✎', field: 'workPhone', editable: true, cellEditor: 'phoneEditorComponent'},
@ -119,7 +124,12 @@ export class CustomerComponent implements OnInit {
} }
ngOnInit() { 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 // 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> <app-nav-bar [invoicePaymentActive]="true"></app-nav-bar>
<h1 align="center">Invoice Payments</h1> <div *ngIf="loggedIn">
<div class="container-fluid"> <h1 align="center">Invoice Payments</h1>
<div class="row">
<div class="col-12"> <div class="container-fluid">
<ag-grid-angular <div class="row">
#agGrid <div class="col-12">
style="height: 500px;" <ag-grid-angular
class="ag-theme-balham" #agGrid
[enableSorting]="true" style="height: 500px;"
[enableFilter]="true" class="ag-theme-balham"
[rowData]="rowData" [enableSorting]="true"
[columnDefs]="columnDefs" [enableFilter]="true"
rowSelection="single" [rowData]="rowData"
></ag-grid-angular> [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> </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--> <!--MODAL: new Invoice Payment-->
<app-modal-form [title]="'New Invoice Payment'" #new> <app-modal-form [title]="'New Invoice Payment'" #new>
<form> <form>
<div class="modal-body"> <div class="modal-body">
<table class="table table-borderless table-sm"> <table class="table table-borderless table-sm">
<tbody> <tbody>
<tr> <tr>
<td> <td>
<span class="input-group-text">Invoice Number*</span> <span class="input-group-text">Invoice Number*</span>
</td> </td>
<td> <td>
<select class="custom-select" (change)="invoiceDropdownChange(invoiceSelect.value)" <select class="custom-select" (change)="invoiceDropdownChange(invoiceSelect.value)"
#invoiceSelect> #invoiceSelect>
<!--[value]="chosenInv.invoiceNumber"--> <!--[value]="chosenInv.invoiceNumber"-->
<option [value]="-1">Choose Invoice...</option> <option [value]="-1">Choose Invoice...</option>
<option *ngFor="let invoice of invoices; let i = index;" [value]="i">{{invoice.invoiceNumber}} <option *ngFor="let invoice of invoices; let i = index;" [value]="i">{{invoice.invoiceNumber}}
</option> </option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Payment Received*</span> <span class="input-group-text">Payment Received*</span>
</td> </td>
<td class="p-0 m-0" colspan="7"> <td class="p-0 m-0" colspan="7">
<input type="text" class="form-control cell" [value]="0 | currency" #inPaymentReceived> <input type="text" class="form-control cell" [value]="0 | currency" #inPaymentReceived>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Payment Type*</span> <span class="input-group-text">Payment Type*</span>
</td> </td>
<td> <td>
<select class="custom-select" (change)="paymentTypeDropdownChange(paymentTypeSelect.value)" <select class="custom-select" (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"
#paymentTypeSelect> #paymentTypeSelect>
<option selected>Choose...</option> <option selected>Choose...</option>
<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}</option> <option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Payment Date*</span> <span class="input-group-text">Payment Date*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="date" class="form-control" #inDateReceived> <input type="date" class="form-control" #inDateReceived>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Check#</span> <span class="input-group-text">Check#</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #incheckNo> <input type="text" class="form-control" #incheckNo>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Transaction#</span> <span class="input-group-text">Transaction#</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #inTransactionNo> <input type="text" class="form-control" #inTransactionNo>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-success" type="button" <button class="btn btn-success" type="button"
[disabled]="!(chosenInv && inPaymentReceived.value && chosenPaymentType && inDateReceived.value)" [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, inDateReceived.value, inPaymentReceived.value.replace('$', '').replace(',', ''), incheckNo.value, inTransactionNo.value, new)">
<!--(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, null, inDateReceived.value, inPaymentReceived.value, new)">--> <!--(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, null, inDateReceived.value, inPaymentReceived.value, new)">-->
Add Add
</button> </button>
<!--<input type="reset" (click)="close(new)">Cancel--> <!--<input type="reset" (click)="close(new)">Cancel-->
<button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button> <button type="reset" class="btn btn-danger" (click)="close(new)">Cancel</button>
</div> </div>
</form> </form>
</app-modal-form> </app-modal-form>
<!--MODAL: edit invoice payment--> <!--MODAL: edit invoice payment-->
<app-modal-form [title]="'Editing'" #edit> <app-modal-form [title]="'Editing'" #edit>
<div *ngIf="selected"> <div *ngIf="selected">
<div class="modal-body"> <div class="modal-body">
<table class="table table-borderless table-sm"> <table class="table table-borderless table-sm">
<tbody> <tbody>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Invoice Number**</span> <span class="input-group-text">Invoice Number**</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #invoiceSelect [value]="selected.invoiceNum"> <input type="text" class="form-control" #invoiceSelect [value]="selected.invoiceNum">
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Payment Received*</span> <span class="input-group-text">Payment Received*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #inPaymentReceived [value]="selected.invoiceAmount"> <input type="text" class="form-control" #inPaymentReceived [value]="selected.invoiceAmount">
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Payment Type*</span> <span class="input-group-text">Payment Type*</span>
</td> </td>
<td> <td>
<input type="text" class="form-control" #paymentTypeSelect [value]="paymentTypes[selected.paymentTypeId-1].paymentTypeName"> <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)"--> <!--<select class="custom-select" [value]={{paymentTypes[selected.paymentTypeId-1].paymentTypeName}} (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"-->
<!--#paymentTypeSelect>--> <!--#paymentTypeSelect>-->
<!--<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}--> <!--<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>--> <!--</option>-->
<!--</select>--> <!--</select>-->
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Date Received*</span> <span class="input-group-text">Date Received*</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="date" class="form-control" #inDateReceived [value]="selected.paymentDate"> <input type="date" class="form-control" #inDateReceived [value]="selected.paymentDate">
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Check#</span> <span class="input-group-text">Check#</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #incheckNo [value]="selected.checkNo"> <input type="text" class="form-control" #incheckNo [value]="selected.checkNo">
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 10%"> <td style="width: 10%">
<span class="input-group-text">Transaction#</span> <span class="input-group-text">Transaction#</span>
</td> </td>
<td colspan="7"> <td colspan="7">
<input type="text" class="form-control" #intransactionNo [value]="selected.transactionNo"> <input type="text" class="form-control" #intransactionNo [value]="selected.transactionNo">
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </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>
<div class="modal-footer"> <div *ngIf="!selected">
<button class="btn btn-warning" type="button" <div class="modal-body">
[disabled]="!(invoiceSelect.value && inPaymentReceived.value && inDateReceived.value)" Choose an Invoice Payment First!
(click)="updateInvoicePayment(invoiceSelect.value, selected.invoicePaymentId, selected.paymentTypeId, inDateReceived.value, inPaymentReceived.value.substr(1).replace(',', ''), incheckNo.value, intransactionNo.value, edit)"> </div>
Update <div class="modal-footer">
</button> <button class="btn btn-warning" type="button"
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</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> </div>
<div *ngIf="!selected"> </div>
<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>

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

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

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

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

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

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

@ -21,10 +21,11 @@
<span class="nav-item"> <span class="nav-item">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <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>
<li class="nav-item"> <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> </li>
</ul> </ul>
</span> </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() logoffActive: boolean;
@Input() settingsActive: boolean; @Input() settingsActive: boolean;
loggedIn: boolean;
constructor(private astuteClientService: AstuteClientService, private router: Router, private toastService: ToastManagerService) { constructor(private astuteClientService: AstuteClientService, private router: Router, private toastService: ToastManagerService) {
} }
ngOnInit() { ngOnInit() {
if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
this.loggedIn = true;
} else {
this.loggedIn = false;
}
} }
logout() { 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> <app-nav-bar [salesOrderActive]="true"></app-nav-bar>
<h1 align="center">Sales Orders</h1> <div *ngIf="loggedIn">
<div class="container-fluid"> <h1 align="center">Sales Orders</h1>
<div class="row">
<div class="col-12"> <div class="container-fluid">
<ag-grid-angular <div class="row">
style="height: 500px;" <div class="col-12">
class="ag-theme-balham" <ag-grid-angular
[gridOptions]="gridOptions" style="height: 500px;"
[enableColResize]="true" class="ag-theme-balham"
[enableSorting]="true" [gridOptions]="gridOptions"
[enableFilter]="true" [enableColResize]="true"
[rowData]="rowData | async" [enableSorting]="true"
[columnDefs]="columnDefs" [enableFilter]="true"
[frameworkComponents]="frameworkComponents" [rowData]="rowData | async"
(cellEditingStopped)="updateRow($event)" [columnDefs]="columnDefs"
(gridReady)="onGridReady($event)" [frameworkComponents]="frameworkComponents"
(rowClicked)="setSelectedRow($event)" (cellEditingStopped)="updateRow($event)"
(rowDataChanged)="resizeColumns($event)" (gridReady)="onGridReady($event)"
rowSelection="single" (rowClicked)="setSelectedRow($event)"
></ag-grid-angular> (rowDataChanged)="resizeColumns($event)"
</div> rowSelection="single"
</div> ></ag-grid-angular>
<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> </div>
<!--<div class="col">--> <div class="row justify-content-center mt-2">
<!--<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit</button>--> <div class="col">
<!--</div>--> <div class="btn-group w-100">
<!--<div class="col">--> <button class="btn btn-success" style="width: 100%" (click)="open(new)">Add</button>
<!--<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>--> <button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected || selected.isFinal">Edit</button>
<!--</div>--> <button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>
<!--<div class="col">--> <button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected || selected.isFinal">Finalize</button>
<!--<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">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">--> </div>
<!--<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected?true:selected.final === 0">Delete</button>--> <!--<div class="col">-->
<!--</div>--> <!--<button class="btn btn-info" style="width: 100%" (click)="open(edit)">Edit</button>-->
</div> <!--</div>-->
</div> <!--<div class="col">-->
<!--<button class="btn btn-secondary" style="width: 100%" (click)="open(editDetails)" [disabled]="!selected">Details</button>-->
<!--MODAL: new po--> <!--</div>-->
<app-modal-form [title]="'New Sales Order'" #new> <!--<div class="col">-->
<div class="modal-body"> <!--<button class="btn btn-primary" style="width: 100%" (click)="finalizePO(selected.ponum)" [disabled]="!selected?true:selected.final === 1">Finalize</button>-->
<p class="h4 text-right">General</p> <!--</div>-->
<hr> <!--<div class="col">-->
<table class="table table-borderless table-sm"> <!--<button class="btn btn-danger" style="width: 100%" (click)="deletePO(selected.ponum)" [disabled]="!selected?true:selected.final === 0">Delete</button>-->
<tbody> <!--</div>-->
<tr> </div>
<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> </div>
<!--Detail--> <!--MODAL: new po-->
<!--<div class="modal-body">--> <app-modal-form [title]="'New Sales Order'" #new>
<!--<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">
<div class="modal-body"> <div class="modal-body">
<p class="h4 text-right">General</p> <p class="h4 text-right">General</p>
<hr> <hr>
@ -196,163 +57,102 @@
<tbody> <tbody>
<tr> <tr>
<td><span class="input-group-text">Astute Proj. No.</span></td> <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>
<tr> <tr>
<td><span class="input-group-text">Customer</span></td> <td><span class="input-group-text">Customer</span></td>
<td colspan="3"> <td colspan="3">
<select class="form-control" [value]="selected.customerId" disabled="true" #customerid> <select class="form-control" #customerid>
<option [value]="-1">No Customer</option> <option [value]="-1">Choose Customer...</option>
<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option> <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><span class="input-group-text">SO Title</span></td> <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>
<tr> <tr>
<td style="width: 20%"><span class="input-group-text">SO Number</span></td> <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: 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>
<tr> <tr>
<td style="width: 20%"><span class="input-group-text">Contract Number</span></td> <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: 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>
<tr> <tr>
<td><span class="input-group-text">Notes</span></td> <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> </tr>
</tbody> </tbody>
</table> </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>
<!--fee-->
<!--feeTypeId-->
<!--lineItemNo-->
<!--ponum-->
<!--qty-->
<!--remainingQty-->
<!--serviceDesc-->
<!--serviceTypeId-->
<!--Detail--> <!--Detail-->
<!--<div class="modal-body" *ngIf="selectedPODetail">--> <!--<div class="modal-body">-->
<!--<p class="h4 text-right">Detail</p>--> <!--<p class="h4 text-right">Detail</p>-->
<!--<hr>--> <!--<hr>-->
<!--<table class="table">--> <!--<table class="table">-->
<!--<thead>--> <!--<thead>-->
<!--<tr>--> <!--<tr>-->
<!--<th scope="col"></th>-->
<!--<th scope="col" style="width: 50px">#</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">Description</th>-->
<!--<th scope="col">Rate Type</th>--> <!--<th scope="col">Rate Type</th>-->
<!--<th scope="col">Service Type</th>--> <!--<th scope="col">Service Type</th>-->
<!--<th scope="col" style="width: 75px">Quantity</th>--> <!--<th scope="col" style="width: 75px">Qty(#)</th>-->
<!--<th scope="col" style="width: 100px">Rate</th>--> <!--<th scope="col" style="width: 100px">Rate($)</th>-->
<!--&lt;!&ndash;<th scope="col">Remaining Quantity</th>&ndash;&gt;-->
<!--</tr>--> <!--</tr>-->
<!--</thead>--> <!--</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">--> <!--<tr class="p-0 m-0">-->
<!--&lt;!&ndash;<td class="p-0 m-0">&ndash;&gt;--> <!--<td class="p-1 m-0">-->
<!--&lt;!&ndash;<button class="btn btn-outline-danger" type="button" (click)="selectedPODetail.splice(i, 1);">&ndash;&gt;--> <!--<button class="btn btn-outline-danger" type="button" (click)="newPODetail.splice(i, 1);">-->
<!--&lt;!&ndash; - &ndash;&gt;--> <!-- - -->
<!--&lt;!&ndash;</button>&ndash;&gt;--> <!--</button>-->
<!--&lt;!&ndash;</td>&ndash;&gt;--> <!--</td>-->
<!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onSelectedCellChange(i, 'lineItemNo', lineItemNo.value)" #lineItemNo></td>--> <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="poDetail.lineItemNo" (change)="onNewCellChange(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">--> <!--<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>--> <!--<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)="onSelectedCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;--> <!--&lt;!&ndash;<input type="text" class="form-control cell" [value]="poDetail.serviceDesc" (change)="onNewCellChange(i, 'serviceDesc', serviceDesc.value)" #serviceDesc>&ndash;&gt;-->
<!--</td>--> <!--</td>-->
<!--<td class="p-0 m-0">--> <!--<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="1">Fixed Fee</option>-->
<!--<option value="2">Hourly</option>--> <!--<option value="2">Hourly</option>-->
<!--</select>--> <!--</select>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.feeTypeId">&ndash;&gt;-->
<!--</td>--> <!--</td>-->
<!--<td class="p-0 m-0">--> <!--<td class="p-0 m-0">-->
<!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onSelectedCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>--> <!--<select class="form-control cell" [value]="poDetail.serviceTypeId" (change)="onNewCellChange(i, 'serviceTypeId', serviceTypeId.value)" #serviceTypeId>-->
<!--<option [value]="serviceType.serviceTypeId" *ngFor="let serviceType of serviceNames">{{serviceType.desc}}</option>--> <!--<option value="1">Study</option>-->
<!--&lt;!&ndash;<option value="">Study</option>&ndash;&gt;--> <!--<option value="2">Design</option>-->
<!--&lt;!&ndash;<option value="2">Design</option>&ndash;&gt;--> <!--<option value="3">Peer Review</option>-->
<!--&lt;!&ndash;<option value="3">Peer Review</option>&ndash;&gt;--> <!--<option value="4">Cost Estimation</option>-->
<!--&lt;!&ndash;<option value="4">Cost Estimation</option>&ndash;&gt;--> <!--<option value="5">Forensic Investigation</option>-->
<!--&lt;!&ndash;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--</select>--> <!--</select>-->
<!--&lt;!&ndash;<input type="number" class="form-control cell" [value]="poDetail.serviceTypeId" #serviceTypeId>&ndash;&gt;-->
<!--</td>--> <!--</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="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="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.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;--> <!--&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>--> <!--</tr>-->
<!--</tbody>--> <!--</tbody>-->
<!--<tr class="p-0 m-0">--> <!--<tr class="p-0 m-0">-->
<!--<td class="p-1 m-0">--> <!--<td class="p-1 m-0">-->
<!--<button class="btn btn-success" type="button"--> <!--<button class="btn btn-success" type="button"-->
<!--(click)="pushOntoSelectedDetail(selectedPODetail.length + 1, ponum.value, '', '1', '1', 1, 0, 0)">--> <!--[disabled]="!ponum.value"-->
<!--&lt;!&ndash;(click)="pushOntoSelectedDetail(selectedPODetail[selectedPODetail.length-1].lineItemNo + 1, selected.ponum, serviceDesc.value,&ndash;&gt;--> <!--(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;--> <!--&lt;!&ndash;feeTypeId.value, serviceTypeId.value, qty.value, fee.value, 0)">&ndash;&gt;-->
<!--+</button>--> <!--+</button>-->
<!--</td>--> <!--</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"><input type="text" class="form-control cell" [value]="''" #serviceDesc></td>&ndash;&gt;-->
<!--&lt;!&ndash;<td class="p-0 m-0">&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;<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;<option value="5">Forensic Investigation</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;--> <!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</td>&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" [value]="1" #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]="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>--> <!--</tr>-->
<!--</tbody>--> <!--</tbody>-->
<!--</table>--> <!--</table>-->
@ -378,76 +179,295 @@
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-success" type="button" <button class="btn btn-success" type="button"
[disabled]="!(ponum.value && podate.value && contractnum.value && contractamt.value && projNum.value)" [disabled]="!(ponum.value && podate.value && customerid.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)" (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>
<button class="btn btn-outline-danger" (click)="close(edit)">Cancel</button> <button class="btn btn-outline-danger" (click)="close(new)">Cancel</button>
</div>
</div>
<div *ngIf="!selected">
<div class="modal-body">
Choose a Sales Order First!
</div> </div>
</app-modal-form>
<div class="modal-footer"> <!--MODAL: edit po-->
<button class="btn btn-success" type="button" <app-modal-form [title]="'Edit Sales Order'" #edit>
[disabled]="true" <div *ngIf="selected">
> <div class="modal-body">
Update <p class="h4 text-right">General</p>
</button> <hr>
<button class="btn btn-outline-danger" (click)="close(edit)">Cancel</button> <table class="table table-borderless table-sm">
</div> <tbody>
</div> <tr>
</app-modal-form> <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>
<!--MODAL: po details--> </tr>
<app-modal-form [title]="'Details of ' + (selected ? selected.ponum: '')" #editDetails> <tr>
<div class="modal-body"> <td><span class="input-group-text">Customer</span></td>
<div class="container-fluid"> <td colspan="3">
<div class="row"> <select class="form-control" [value]="selected.customerId" disabled="true" #customerid>
<div class="col-12 align-items-end"> <option [value]="-1">No Customer</option>
<ag-grid-angular <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
style="height: 350px;" </select>
class="ag-theme-balham" </td>
[enableColResize]="true" </tr>
[enableSorting]="true" <tr>
[enableFilter]="true" <td><span class="input-group-text">SO Title</span></td>
[rowData]="selectedPODetail | async" <td colspan="3"><input type="text" class="form-control" placeholder="SO Title" [value]="selected.title" #title></td>
[columnDefs]="detailColumnDefs" </tr>
[frameworkComponents]="frameworkComponents" <tr>
(cellEditingStopped)="updateDetailRow($event)" <td style="width: 20%"><span class="input-group-text">SO Number</span></td>
(gridReady)="onDetailGridReady($event)" <td style="width: 30%"><input type="text" class="form-control" placeholder="SO Number" maxlength="40" [value]="selected.ponum" #ponum disabled></td>
(rowDataChanged)="resizeColumns($event)" <td style="width: 20%"><span class="input-group-text">SO Date</span></td>
rowSelection="single" <td style="width: 30%"><input type="date" class="form-control" [value]="selected.podate" #podate></td>
></ag-grid-angular> </tr>
</div> <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>
<div class="row justify-content-center mt-2">
<div class="col">
<div class="input-group mb-3 mt-2"> <!--fee-->
<input type="text" class="form-control input-group-sm" placeholder="Descrpition" #poDescription> <!--feeTypeId-->
<div class="input-group-append w-25"> <!--lineItemNo-->
<button class="btn btn-success w-50 input-group-sm" type="button" <!--ponum-->
(click)="addEmptyDetail(poDescription.value); poDescription.value = '';" <!--qty-->
[disabled]="!poDescription.value || (selected ? selected.isFinal : false)"> <!--remainingQty-->
Add <!--serviceDesc-->
</button> <!--serviceTypeId-->
<button class="btn btn-danger w-50 input-group-sm" type="button"
[disabled]="true"> <!--Detail-->
Delete <!--<div class="modal-body" *ngIf="selectedPODetail">-->
</button> <!--<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> </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> </div>
<hr> </div>
<div class="row"> </app-modal-form>
<div class="col-12 justify-content-start"> </div>
<h4 align="end">Contract Amount: {{contractAmount | currency}}</h4>
<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>
</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 {formatCurrency, formatNumber} from '@angular/common';
import {ToastManagerService} from '../services/toast-manager/toast-service.service'; import {ToastManagerService} from '../services/toast-manager/toast-service.service';
import {NumberFormatterComponent} from '../ag-grid-components/number-formatter/number-formatter.component'; 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({ @Component({
selector: 'app-sales-order', selector: 'app-sales-order',
@ -10,6 +11,8 @@ import {NumberFormatterComponent} from '../ag-grid-components/number-formatter/n
styleUrls: ['./sales-order.component.css'] styleUrls: ['./sales-order.component.css']
}) })
export class SalesOrderComponent implements OnInit { export class SalesOrderComponent implements OnInit {
loggedIn: boolean;
// both of the grid api's // both of the grid api's
gridApi; gridApi;
gridColumnApi; gridColumnApi;
@ -26,15 +29,15 @@ export class SalesOrderComponent implements OnInit {
// data for SO grid // data for SO grid
rowData: any; rowData: any;
columnDefs = [ 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: 'SO Number', field: 'ponum'},
// {headerName: 'Customer ID', field: 'customerId'}, // {headerName: 'Customer ID', field: 'customerId'},
{headerName: 'Customer Name', field: 'customerName'}, {headerName: 'Customer Name', field: 'customerName'},
{headerName: 'Contract Number ✎', field: 'contractNum', 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)}, {headerName: 'SO Title ✎', field: 'title', editable: (node => !node.data.isFinal), cellEditor: 'emptyErrorEditorComponent'},
{headerName: 'Contract Amount', field: 'contractAmt', cellRenderer: 'numberFormatterComponent'}, {headerName: 'Contract Amount', field: 'contractAmt', cellRenderer: 'numberFormatterComponent'},
// {headerName: 'Contract Amount', field: 'contractAmt'}, // {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: '# of Invoices', field: 'invoiceSequence'},
{headerName: 'notes ✎', field: 'notes', editable: (node => !node.data.isFinal), cellEditor: 'agLargeTextCellEditor'} {headerName: 'notes ✎', field: 'notes', editable: (node => !node.data.isFinal), cellEditor: 'agLargeTextCellEditor'}
// {headerName: 'oneInvInDraft', field: 'oneInvInDraft'} // {headerName: 'oneInvInDraft', field: 'oneInvInDraft'}
@ -52,6 +55,7 @@ export class SalesOrderComponent implements OnInit {
}; };
frameworkComponents = { frameworkComponents = {
emptyErrorEditorComponent: EmptyErrorEditorComponent,
numberFormatterComponent: NumberFormatterComponent numberFormatterComponent: NumberFormatterComponent
}; };
@ -61,7 +65,8 @@ export class SalesOrderComponent implements OnInit {
selectedPODetail; selectedPODetail;
detailColumnDefs = [ detailColumnDefs = [
{headerName: '#', field: 'lineItemNo'}, {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)), {headerName: 'Rate Type ✎', field: 'rateTypeName', editable: (_ => (this.selected && !this.selected.isFinal)),
cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.rateNames}}, cellEditor: 'agSelectCellEditor', cellEditorParams: {values: this.rateNames}},
{headerName: 'Service Type ✎', field: 'serviceTypeName', editable: (_ => (this.selected && !this.selected.isFinal)), {headerName: 'Service Type ✎', field: 'serviceTypeName', editable: (_ => (this.selected && !this.selected.isFinal)),
@ -76,41 +81,46 @@ export class SalesOrderComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.astuteClientService.getServiceTypes().then((d) => { if (localStorage.getItem('SESSION_ID') && localStorage.getItem('SESSION_USER')) {
if (d) { this.loggedIn = true;
this.serviceTypes = d; this.astuteClientService.getServiceTypes().then((d) => {
this.serviceTypes.forEach((type) => { if (d) {
this.serviceNames.push(type.serviceTypeDesc); this.serviceTypes = d;
}); this.serviceTypes.forEach((type) => {
// console.log(this.serviceNames); this.serviceNames.push(type.serviceTypeDesc);
} else { });
this.notif ('Get service types failed'); // console.log(this.serviceNames);
} } else {
}, reason => { this.notif ('Get service types failed');
this.notif('Get service type failed: ' + reason); }
}); }, reason => {
this.astuteClientService.getRateTypes().then((d) => { this.notif('Get service type failed: ' + reason);
if (d) { });
this.rateTypes = d; this.astuteClientService.getRateTypes().then((d) => {
this.rateTypes.forEach((type) => { if (d) {
this.rateNames.push(type.feeTypeDesc); this.rateTypes = d;
}); this.rateTypes.forEach((type) => {
} else { this.rateNames.push(type.feeTypeDesc);
this.notif ('Get rate types failed'); });
} } else {
}, reason => { this.notif ('Get rate types failed');
this.notif('Get rate type failed: ' + reason); }
}); }, reason => {
this.astuteClientService.getCustomers().then((customers) => { this.notif('Get rate type failed: ' + reason);
if (customers) { });
this.customers = customers; this.astuteClientService.getCustomers().then((customers) => {
} else { if (customers) {
this.notif('Get Customers Failed!'); this.customers = customers;
} } else {
}, (reason) => { this.notif('Get Customers Failed!');
this.notif('Get Customers Failed: ' + reason); }
}); }, (reason) => {
this.refreshData(); this.notif('Get Customers Failed: ' + reason);
});
this.refreshData();
} else {
this.loggedIn = false;
}
} }
// callback for grid selection // callback for grid selection