mirror of
https://github.com/dyiop/astute.git
synced 2025-04-06 21:30:20 -04:00
Add files via upload
This commit is contained in:
gopi17701
GitHub
parent
b115829ae7
commit
bc42292d2c
|
|
@ -0,0 +1,151 @@
|
||||||
|
<app-nav-bar [invoicePaymentActive]="true"></app-nav-bar>
|
||||||
|
<h1 align="center">Invoice Payments</h1>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<ag-grid-angular
|
||||||
|
#agGrid
|
||||||
|
style="height: 500px;"
|
||||||
|
class="ag-theme-balham"
|
||||||
|
[enableSorting]="true"
|
||||||
|
[enableFilter]="true"
|
||||||
|
[rowData]="rowData | async"
|
||||||
|
[columnDefs]="columnDefs"
|
||||||
|
rowSelection="single"
|
||||||
|
></ag-grid-angular>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center mt-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<button class="btn btn-primary" style="width: 100%" (click)="open(edit)">Edit Invoice payment</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<button class="btn btn-success" style="width: 100%" (click)="open(new)">Add Invoice Payment</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--MODAL: new Invoice Payment-->
|
||||||
|
<app-modal-form [title]="'New Invoice Payment'" #new>
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-borderless table-sm">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span class="input-group-text">Invoice Number*</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<select class="custom-select" (change)="invoiceDropdownChange(invoiceSelect.value)"
|
||||||
|
#invoiceSelect>
|
||||||
|
<!--[value]="chosenInv.invoiceNumber"-->
|
||||||
|
<option [value]="-1">Choose Invoice...</option>
|
||||||
|
<option *ngFor="let invoice of invoices; let i = index;" [value]="i">{{invoice.invoiceNumber}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Payment Received*</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="7">
|
||||||
|
<input type="text" class="form-control" placeholder="$00.00" #inPaymentReceived>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Payment Type*</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<select class="custom-select" (change)="paymentTypeDropdownChange(paymentTypeSelect.value)"
|
||||||
|
#paymentTypeSelect>
|
||||||
|
|
||||||
|
<option selected>Choose...</option>
|
||||||
|
<option *ngFor="let paymentType of paymentTypes; let i = index;" [value]="i">{{paymentType.paymentTypeName}}</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Payment Date*</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="7">
|
||||||
|
<input type="text" class="form-control" #inDateReceived>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-success" type="button"
|
||||||
|
[disabled]="!(chosenInv && inPaymentReceived.value && chosenPaymentType && inDateReceived.value)"
|
||||||
|
(click)="addInvoicePayment(chosenInv, null, chosenPaymentType, null, inDateReceived.value, inPaymentReceived.value, new)">
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger" (click)="close(new)">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</app-modal-form>
|
||||||
|
|
||||||
|
<!--MODAL: edit invoice payment-->
|
||||||
|
<app-modal-form [title]="'Editing'" #edit>
|
||||||
|
<div *ngIf="selected">
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-borderless table-sm">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Invoice Number**</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="7">
|
||||||
|
<input type="text" class="form-control" #invoiceSelect [value]="selected.invoiceNum">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Payment Received*</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="7">
|
||||||
|
<input type="text" class="form-control" #inPaymentReceived [value]="selected.invoiceAmount">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td style="width: 10%">
|
||||||
|
<span class="input-group-text">Date Received*</span>
|
||||||
|
</td>
|
||||||
|
<td colspan="7">
|
||||||
|
<input type="text" class="form-control" #inDateReceived [value]="selected.paymentDate">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-warning" type="button"
|
||||||
|
[disabled]="!(invoiceSelect.value && inPaymentReceived.value && inDateReceived.value)"
|
||||||
|
(click)="updateInvoicePayment(invoiceSelect.value, selected.invoicePaymentId, selected.paymentTypeId, selected.paymentType, inDateReceived.value, inPaymentReceived.value, edit)">
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger" (click)="close(edit)">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!selected">
|
||||||
|
<div class="modal-body">
|
||||||
|
Choose an Invoice 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>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { InvoicePaymentComponent } from './invoice-payment.component';
|
||||||
|
|
||||||
|
describe('InvoicePaymentComponent', () => {
|
||||||
|
let component: InvoicePaymentComponent;
|
||||||
|
let fixture: ComponentFixture<InvoicePaymentComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ InvoicePaymentComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(InvoicePaymentComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
|
import {AstuteClientService} from '../services/astute-client-service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-invoice-payment',
|
||||||
|
templateUrl: './invoice-payment.component.html',
|
||||||
|
styleUrls: ['./invoice-payment.component.css']
|
||||||
|
})
|
||||||
|
export class InvoicePaymentComponent implements OnInit {
|
||||||
|
@ViewChild('agGrid') agGrid;
|
||||||
|
selected = null;
|
||||||
|
chosenInv: any = 0;
|
||||||
|
chosenPaymentType: any = 0;
|
||||||
|
invoices;
|
||||||
|
rowData;
|
||||||
|
paymentTypes;
|
||||||
|
invoicePaymentData;
|
||||||
|
columnDefs = [
|
||||||
|
{headerName: 'Invoice Payment Id', field: 'invoicePaymentId'},
|
||||||
|
{headerName: 'Invoice Number', field: 'invoiceNum'},
|
||||||
|
{headerName: 'payment Received', field: 'invoiceAmount'},
|
||||||
|
{headerName: 'Date Received', field: 'paymentDate'},
|
||||||
|
{headerName: 'Payment Type', field: 'paymentType'}
|
||||||
|
|
||||||
|
];
|
||||||
|
constructor(protected astuteClientService: AstuteClientService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.refreshData();
|
||||||
|
}
|
||||||
|
|
||||||
|
invoiceDropdownChange(index) {
|
||||||
|
this.chosenInv = this.invoices[index].invoiceNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
paymentTypeDropdownChange(index) {
|
||||||
|
this.chosenPaymentType = this.paymentTypes[index].paymentTypeId;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedRows() {
|
||||||
|
const selectedNodes = this.agGrid.api.getSelectedNodes();
|
||||||
|
if (selectedNodes.length) {
|
||||||
|
this.selected = selectedNodes.map(node => node.data)[0];
|
||||||
|
} else {
|
||||||
|
this.selected = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addInvoicePayment(invoiceNum, invoicePaymentId, paymentTypeId, paymentType, paymentDate, paymentReceived, ref) {
|
||||||
|
let invoicePaymentData = {
|
||||||
|
"invoiceNum": invoiceNum,
|
||||||
|
"invoicePaymentId":invoicePaymentId,
|
||||||
|
"paymentTypeId":paymentTypeId,
|
||||||
|
"paymentType": paymentType,
|
||||||
|
"paymentDate": paymentDate,
|
||||||
|
"invoiceAmount": paymentReceived
|
||||||
|
};
|
||||||
|
this.astuteClientService.addInvoicePayment(invoicePaymentData).then((data) => {
|
||||||
|
if (data) {
|
||||||
|
this.refreshData();
|
||||||
|
ref.close();
|
||||||
|
} else {
|
||||||
|
alert("Adding Invoice Payment Failed, Check Input Fields")
|
||||||
|
}
|
||||||
|
}, (reason) => {
|
||||||
|
alert("Adding Invoice Payment failed for " + reason);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateInvoicePayment(invoiceNum, invoicePaymentId, paymentTypeId, paymentType, dateReceived, paymentReceived, ref) {
|
||||||
|
const invoicePaymentData = {
|
||||||
|
"invoiceNum": invoiceNum,
|
||||||
|
"invoicePaymentId": invoicePaymentId,
|
||||||
|
"paymentTypeId": paymentTypeId,
|
||||||
|
"paymentType": paymentType,
|
||||||
|
"paymentDate": dateReceived,
|
||||||
|
"invoiceAmount": paymentReceived
|
||||||
|
};
|
||||||
|
|
||||||
|
this.astuteClientService.updateInvoicePayment(invoiceNum, invoicePaymentId, invoicePaymentData).then((data) => {
|
||||||
|
if (data) {
|
||||||
|
this.refreshData();
|
||||||
|
ref.close();
|
||||||
|
} else {
|
||||||
|
alert("Updating Invoice Payment Failed, Check Input Fields")
|
||||||
|
}
|
||||||
|
}, (reason) => {
|
||||||
|
alert("Updating Invoice Payment failed for " + reason);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
open(ref) {
|
||||||
|
this.getSelectedRows();
|
||||||
|
ref.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
close(ref) {
|
||||||
|
ref.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshData() {
|
||||||
|
this.astuteClientService.getSumittedInvoices().then((data) => {
|
||||||
|
this.invoices = data;
|
||||||
|
});
|
||||||
|
this.astuteClientService.getInvoiceTypes().then((data) => {
|
||||||
|
this.paymentTypes = data;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.rowData = this.astuteClientService.getInvoicePayments();
|
||||||
|
this.astuteClientService.getInvoicePayments().then((data) => {
|
||||||
|
this.invoicePaymentData = data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user