mirror of
https://github.com/dyiop/astute.git
synced 2025-04-05 21:10:16 -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