diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts index c22fd27..81a4439 100644 --- a/Client/src/app/app.module.ts +++ b/Client/src/app/app.module.ts @@ -68,6 +68,7 @@ import { AddUserPopupComponent } from './components/popups/add-user-popup/add-us import { UserService } from './services/user.service'; import { TransactionService } from './services/transaction.service'; import { AddTransactionPageComponent } from './components/add-transaction-page/add-transaction-page.component'; +import { AddTransactionPopupComponent } from './components/add-transaction-page/add-transaction-popup/add-transaction-popup.component'; @@ -111,7 +112,8 @@ import { AddTransactionPageComponent } from './components/add-transaction-page/a CampPageComponent, MembersPageComponent, AddUserPopupComponent, - AddTransactionPageComponent + AddTransactionPageComponent, + AddTransactionPopupComponent ], imports: [ BrowserModule, @@ -140,7 +142,8 @@ import { AddTransactionPageComponent } from './components/add-transaction-page/a SharePopupComponent, AddEventPopupComponent, AddUserPopupComponent, - VideoPopupComponent], + VideoPopupComponent, + AddTransactionPopupComponent], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.css b/Client/src/app/components/add-transaction-page/add-transaction-page.component.css index 588f460..4e13e73 100644 --- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.css +++ b/Client/src/app/components/add-transaction-page/add-transaction-page.component.css @@ -1,85 +1,73 @@ -.d-inline-block { - display: inline-block; +.b-0 { + border: 0; } -.d-none { +.fab-buttons{ display: none; } -.w-40px { - width: 40px; -} - -.w-25less10px { - width: calc(25% - 10px); -} - -.w-33less13px { - width: calc(33% - 13px); -} - -.w-100less40px { - width: calc(100% - 40px); -} - -.w-130px { - width: 130px; -} - -.w-100less130px { - width: calc(100% - 130px); -} - .fw-bold { font-weight: bold; } +.fs-1-2-5 { + font-size: 1.25rem; +} + +.highlight { + background-color: #F3FAFF; +} + +.highlight-yellow { + background-color: lightyellow; +} + .ml-1 { margin-left: 1rem; } -.mt-1 { - margin-top: 1rem; -} - -.mt-2 { - margin-top: 2rem; -} - -.pt-1 { - padding-top: 1rem; +.p-0 { + padding: 0; } .bb-1 { border-bottom: 1px solid #ff4081; } -.bb-double { - border-bottom: 1px solid #ff4081; - border-style: double; -} - table { border-collapse: collapse; + width: 100%; } td, th { padding: 5px; - border: 1px solid #ff4081; + border: 1px solid lightslategray; } -@media(max-width: 800px) { - table { - width: 100%; - } +.remove-top-border { + border-top: 0; } -@media(max-width: 600px) { - .md-inline-block { +.remove-border { + border: 0; +} + +.side-bar > button { + margin: 20px; + width: calc(100% - 40px); +} + + + +#audio-player-filler{ + height: 60px; + background-color: inherit; +} + +@media(max-width:800px){ + .fab-buttons{ display: inline-block; + position: fixed; + bottom: 20px; + right: 20px; } - - .mw-50less20px { - width: calc(50% - 20px); - } -} - +} \ No newline at end of file diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.html b/Client/src/app/components/add-transaction-page/add-transaction-page.component.html index b70acd9..78aea06 100644 --- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.html +++ b/Client/src/app/components/add-transaction-page/add-transaction-page.component.html @@ -1,121 +1,83 @@
 

Add Transactions

- +
-
-
-
- - - - - - - - - {{option.display}} - - - - -
-
- - - - - {{type.display}} - - - - - - -
- - - - {{fund.display}} - - - - - - -
- - - -
-
- -
- {{contributorName(i)}} -
-
-
- General: {{contributorTotal(i, 1) | currency}} -
-
- Missions: {{contributorTotal(i, 2) | currency}} -
-
- Total: {{contributorTotal(i, 0) | currency}} -
-
-
-
 
-
- General: {{combinedTotal(1) | currency}} -
-
- Missions: {{combinedTotal(2) | currency}} -
-
- Total: {{combinedTotal(0) | currency}} -
-
- - -
-
-
- - - - - - - - + - + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + +
GeneralMissionsTotal
{{contributorName(i)}}{{c.date}}{{contributorName(c.contributorId)}}
{{contributorTotal(i, 1) | currency}}{{contributorTotal(i, 2) | currency}}{{contributorTotal(i, 0) | currency}}TypeCheckFundAmount
+ + {{t.description}}
{{transactionType[t.typeId]}}{{t.checkNumber}}{{fund[t.fundId]}}{{t.amount | currency}}
GeneralMissionsTotal
{{contributorTotal(c.contributorId, 1) | currency}}{{contributorTotal(c.contributorId, 2) | currency}}{{contributorTotal(c.contributorId, 0) | currency}}
+ +
- Total - Grand Totals
GeneralMissionsTotal
{{combinedTotal(1) | currency}} {{combinedTotal(2) | currency}} {{combinedTotal(0) | currency}}
+
+ +
+
+
+ +
diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts b/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts index 1bff535..f9211c7 100644 --- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts +++ b/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts @@ -2,10 +2,11 @@ import { Component, OnInit } from '@angular/core'; import { Transaction } from './transaction'; import { UserService } from '../../services/user.service'; import { Contribution } from './contribution'; -import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms'; -import { checkNumberValidator } from './check-number-validator'; -import { contributorValidator } from './contributor-validator'; import { TransactionService } from '../../services/transaction.service'; +import { MatDialog } from '@angular/material'; +import { AddTransactionPopupComponent, ValDisplay } from './add-transaction-popup/add-transaction-popup.component'; +import { TransactionType } from './transaction-type'; +import { Fund } from './fund'; @Component({ selector: 'app-add-transaction-page', @@ -16,120 +17,98 @@ export class AddTransactionPageComponent implements OnInit { errorMessages = []; - form: FormGroup; + contributions: Contribution[] = []; submitButtonDisabled: boolean = false; - submitButtonText: string = "Submit"; - types: {value:number,display:string}[] = []; - funds: {value:number,display:string}[] = []; + submitButtonText: string = "Submit Transactions"; + transactionType = TransactionType; + fund = Fund; + transactionTypes: ValDisplay[] = []; + funds: ValDisplay[] = []; contributors: {value:number,display:string}[] = []; - filteredContributors: {value:number,display:string}[] - - constructor(private userService: UserService, private formBuilder: FormBuilder, private transactionService: TransactionService) { - this.form = this.formBuilder.group({ - contributions: this.formBuilder.array([this.getContribution()]) - }); + constructor(private dialogService: MatDialog, private userService: UserService, private transactionService: TransactionService) { + for(let m in TransactionType) { + if (typeof TransactionType[m] === 'number') { + this.transactionTypes.push({value:TransactionType[m], display: m}); + } + } + for(let m in Fund) { + if (typeof Fund[m] === 'number') { + this.funds.push({value:Fund[m], display: m}); + } + } } - ngOnInit() { - this.types = [{value:1, display: 'Cash'},{value:2, display: 'Check'}]; - this.funds = [{value:1, display: 'General'},{value:2, display: 'Missions'}]; + ngOnInit() { this.userService.getAll().subscribe(res => this.contributors = (res).users); } - getContributionsFormArray(): FormArray { - return this.form.get('contributions') as FormArray; - } - getContribution(): FormGroup { - const date = new Date(); - const dte = date.getFullYear() + "-" + (date.getMonth()<10?'0':'') + (date.getMonth() + 1) + "-" + (date.getDate()<10?'0':'') + date.getDate(); + - return this.formBuilder.group({ - date: [dte, Validators.required], - contributorId: [0, [Validators.required, contributorValidator(this)]], - transactions: this.formBuilder.array([this.getTransaction()]) - }); - } + addTransaction(contributorId: number) { + const contrib = this.contributors.find(c => c.value === contributorId); + const contributor = this.contributions.find(c => c.contributorId === contributorId); + const lastTransaction = contributor && contributor.transactions.length > 0 ? contributor.transactions[contributor.transactions.length-1] : null; - getTransaction(): FormGroup { - return this.formBuilder.group({ - amount: [null, Validators.required], - checkNumber: [''], - description: [''], - fundId: [1, [Validators.required, Validators.min(1), Validators.max(2)]], - taxYear: [(new Date()).getFullYear(), Validators.required], - typeId: [1, [Validators.required, Validators.min(1), Validators.max(2)]], - }, { validators: checkNumberValidator }); - } - - onContributorChange(event) { - if (event && event.value) { - if (event.value === -1) { - // Open new user dialog + const ref = this.dialogService.open(AddTransactionPopupComponent, { + data: { + contributors: this.contributors, + funds: this.funds, + types: this.transactionTypes, + contributor: contrib ? contrib : undefined, + typeId: lastTransaction ? lastTransaction.typeId : TransactionType.Cash, + fundId: lastTransaction ? (lastTransaction.fundId === Fund.General ? Fund.Missions : Fund.General) : Fund.General, + checkNumber: lastTransaction ? lastTransaction.checkNumber : '' } - event = event.display; - } - const filterValue = event.toLowerCase(); - this.filteredContributors = this.contributors.filter(option => option.display.toLowerCase().indexOf(filterValue) >= 0); - if (this.filteredContributors.length === 0) { - this.filteredContributors.push({value:-1, display:'Add New Contributor'}); + }); + + ref.afterClosed().subscribe((trans: Transaction) => { + if (trans) { + let contrib = this.contributions.find(c => c.contributorId === trans.contributorId); + if (!contrib) { + contrib = new Contribution(); + contrib.contributorId = trans.contributorId; + contrib.date = trans.date; + contrib.transactions = []; + this.contributions.push(contrib); + } + contrib.transactions.push(trans); + } + }); + + } + + deleteContributor(contributorId: number) { + const contrib = this.contributions.findIndex(c => c.contributorId === contributorId); + if (contrib >= 0) { + this.contributions.splice(contrib, 1); } } - contirbutorDisplayFn(contributor?: {value:number,display:string}): string | undefined { - return contributor ? contributor.display : undefined; - } - - addTransaction(contributorPosition: number) { - const contributors = this.form.get('contributions') as FormArray; - const transactions = contributors.controls[contributorPosition].get('transactions') as FormArray; - const lastTransaction = transactions.value.length > 0 ? transactions.value[transactions.value.length-1] : undefined; - const newTransaction = this.getTransaction(); - if (lastTransaction) { - newTransaction.patchValue({ - "typeId": lastTransaction.typeId, - "checkNumber": lastTransaction.checkNumber, - "fundId": lastTransaction.fundId === 1 ? 2 : 1 - }); - } - transactions.push(newTransaction); - } - - addContributor() { - const contributors = this.form.get('contributions') as FormArray; - contributors.push(this.getContribution()); - } - - deleteContributor(index: number) { - const contributors = this.form.get('contributions') as FormArray; - contributors.removeAt(index); - } - - deleteTransaction(contributorIndex: number, transactionIndex: number) { - const contributors = this.form.get('contributions') as FormArray; - const transactions = contributors.controls[contributorIndex].get('transactions') as FormArray; - transactions.removeAt(transactionIndex); - if (transactions.length === 0) { - this.deleteContributor(contributorIndex); + deleteTransaction(contributorId: number, transactionIndex: number) { + const contrib = this.contributions.find(c => c.contributorId === contributorId); + if (contrib) { + contrib.transactions.splice(transactionIndex, 1); + } + if (contrib.transactions.length === 0) { + this.deleteContributor(contributorId); } } - contributorName(index: number) { - const contributors = this.form.get('contributions') as FormArray; - const contributor = contributors.controls[index].get('contributorId'); - if (contributor && contributor.value.display) { - return contributor.value.display; - } + contributorName(id: number) { + const contributor = this.contributors.find(c => c.value === id); + return contributor ? contributor.display : undefined; } - contributorTotal(index: number, fundId: number) { - const contributors = this.form.get('contributions') as FormArray; - const transactions = contributors.controls[index].get('transactions').value; + contributorTotal(contributorId: number, fundId: number) { + const contrib = this.contributions.find(c => c.contributorId === contributorId); + if (!contrib) return 0; + var sum = 0; - transactions.forEach(e => { + contrib.transactions.forEach(e => { if (e.fundId === fundId || fundId === 0) { sum += e.amount; } @@ -138,9 +117,8 @@ export class AddTransactionPageComponent implements OnInit { } combinedTotal(fundId: number) { - const contributors = this.form.get('contributions').value; var sum = 0; - contributors.forEach(c => { + this.contributions.forEach(c => { c.transactions.forEach(t => { if (t.fundId === fundId || fundId === 0) { sum += +t.amount; @@ -150,23 +128,20 @@ export class AddTransactionPageComponent implements OnInit { return sum; } - onSubmit() { + submit() { this.submitButtonText = 'Submitting...'; this.submitButtonDisabled = true; - var data = this.form.value; + const transactions: Transaction[] = []; - for(let c = 0; c < data.contributions.length; c++) { - const contribution = data.contributions[c] as Contribution; - for(let t = 0; t < contribution.transactions.length; t++) { - const transaction = contribution.transactions[t] as Transaction; - transaction.contributorId = (contribution.contributorId).value; - transaction.date = contribution.date; - transactions.push(transaction); + for(let c = 0; c < this.contributions.length; c++) { + for(let t = 0; t < this.contributions[c].transactions.length; t++) { + transactions.push(this.contributions[c].transactions[t]); } } + console.log(transactions); this.transactionService.createFromArray(transactions).subscribe(x =>{ - this.submitButtonText = 'Submit'; + this.submitButtonText = 'Submit Transactions'; this.submitButtonDisabled = false; }, e => console.log(e)); } diff --git a/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.css b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.css new file mode 100644 index 0000000..163c370 --- /dev/null +++ b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.css @@ -0,0 +1,3 @@ +.w-100 { + width: 100%; +} \ No newline at end of file diff --git a/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.html b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.html new file mode 100644 index 0000000..b0803a6 --- /dev/null +++ b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.html @@ -0,0 +1,49 @@ +
+

Add Event

+
+
+
+ + + + + + + + {{option.display}} + + + +
+ + + + {{type.display}} + + + + + + +
+ + + + {{fund.display}} + + + + + + +
+ + + +
+ + +
+ + +
\ No newline at end of file diff --git a/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.spec.ts b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.spec.ts new file mode 100644 index 0000000..903e6ab --- /dev/null +++ b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddTransactionPopupComponent } from './add-transaction-popup.component'; + +describe('AddTransactionPopupComponent', () => { + let component: AddTransactionPopupComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddTransactionPopupComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddTransactionPopupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.ts b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.ts new file mode 100644 index 0000000..4831be2 --- /dev/null +++ b/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.component.ts @@ -0,0 +1,101 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material'; +import { contributorValidator } from '../contributor-validator'; +import { Transaction } from '../transaction'; + +export interface ValDisplay { + value: number; + display: string; +} + +export interface DialogData { + contributors: ValDisplay[], + funds: ValDisplay[], + types: ValDisplay[], + contributor: ValDisplay, + date: string, + typeId: number, + fundId: number, + checkNumber: string, + description: string, + taxYear: number +} + + +@Component({ + selector: 'app-add-transaction-popup', + templateUrl: './add-transaction-popup.component.html', + styleUrls: ['./add-transaction-popup.component.css'] +}) +export class AddTransactionPopupComponent implements OnInit { + + form: FormGroup; + + saveBtnDisabled: boolean = false; + saveBtnTxt: string = 'Save'; + contributors: ValDisplay[] = []; + filteredContributors: ValDisplay[] + funds: ValDisplay[]; + types: ValDisplay[]; + + constructor(private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: DialogData, private dialogRef:MatDialogRef) { + this.contributors = this.data.contributors || []; + this.funds = this.data.funds || []; + this.types = this.data.types || []; + + const date = new Date(); + const dte = date.getFullYear() + "-" + (date.getMonth()<10?'0':'') + (date.getMonth() + 1) + "-" + (date.getDate()<10?'0':'') + date.getDate(); + + this.form = this.formBuilder.group({ + date: [this.data.date || dte, [Validators.required]], + contributor: [this.data.contributor, [Validators.required, contributorValidator(this.contributors)]], + typeId: [this.data.typeId || 1, [Validators.required]], + fundId: [this.data.fundId || 1, [Validators.required]], + checkNumber: [this.data.checkNumber], + description: [this.data.description], + amount: ['', [Validators.required]], + taxYear: [this.data.taxYear || new Date().getFullYear(), [Validators.required]] + }); + } + + ngOnInit() { + } + + contributorDisplayFn(contributor?: {value:number,display:string}): string | undefined { + console.log(contributor); + return contributor ? contributor.display : undefined; + } + + onContributorChange(event) { + if (event && event.value) { + if (event.value === -1) { + // Open new user dialog + } + event = event.display; + } + const filterValue = event.toLowerCase(); + this.filteredContributors = this.contributors.filter(option => option.display.toLowerCase().indexOf(filterValue) >= 0); + if (this.filteredContributors.length === 0) { + this.filteredContributors.push({value:-1, display:'Add New Contributor'}); + } + } + + onSubmit() { + const trans = new Transaction(); + trans.amount = this.form.value.amount; + trans.checkNumber = this.form.value.checkNumber; + trans.contributorId = this.form.value.contributor.value; + trans.date = this.form.value.date; + trans.description = this.form.value.description; + trans.fundId = this.form.value.fundId; + trans.taxYear = this.form.value.taxYear; + trans.typeId = this.form.value.typeId; + this.dialogRef.close(trans); + } + + cancel() { + this.dialogRef.close(); + } + +} diff --git a/Client/src/app/components/add-transaction-page/contributor-validator.ts b/Client/src/app/components/add-transaction-page/contributor-validator.ts index a29494c..43317c3 100644 --- a/Client/src/app/components/add-transaction-page/contributor-validator.ts +++ b/Client/src/app/components/add-transaction-page/contributor-validator.ts @@ -1,14 +1,14 @@ import { ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms'; import { AddTransactionPageComponent } from './add-transaction-page.component'; -export function contributorValidator(comp: AddTransactionPageComponent): ValidatorFn { +export function contributorValidator(contributors: {value:number,display:string}[]): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const val = control.value; const error = {'invalidName':{value: val}}; if (!val || !val.value) { return error; } - const contributor = comp.contributors.findIndex(c => c.value === val.value); + const contributor = contributors.findIndex(c => c.value === val.value); if (contributor >= 0) { return null; } diff --git a/Client/src/app/components/add-transaction-page/fund.ts b/Client/src/app/components/add-transaction-page/fund.ts new file mode 100644 index 0000000..29da395 --- /dev/null +++ b/Client/src/app/components/add-transaction-page/fund.ts @@ -0,0 +1,4 @@ +export enum Fund { + General = 1, + Missions = 2 +} \ No newline at end of file diff --git a/Client/src/app/components/add-transaction-page/transaction-type.ts b/Client/src/app/components/add-transaction-page/transaction-type.ts new file mode 100644 index 0000000..695c9e9 --- /dev/null +++ b/Client/src/app/components/add-transaction-page/transaction-type.ts @@ -0,0 +1,4 @@ +export enum TransactionType { + Cash = 1, + Check = 2 +} \ No newline at end of file diff --git a/Server/src/database/transactions.js b/Server/src/database/transactions.js index 8f405bd..eecbc77 100644 --- a/Server/src/database/transactions.js +++ b/Server/src/database/transactions.js @@ -33,7 +33,7 @@ exports.addArray = async function(transactions) { try { for(let i = 0; i < transactions.length; i++) { const t = transactions[i]; - const newTrans = getTransaction(t.date, t.typeId, t.check, t.contributorId, t.fundId, t.description, t.amount, t.taxYear); + const newTrans = getTransaction(t.date, t.typeId, t.checkNumber, t.contributorId, t.fundId, t.description, t.amount, t.taxYear); const result = await conn.nonQuery('INSERT INTO Transactions Set ?', newTrans); results.push(result); } @@ -44,11 +44,11 @@ exports.addArray = async function(transactions) { return results; } -function getTransaction(date, typeId, check, contributorId, fundId, description, amount, taxYear) { +function getTransaction(date, typeId, checkNumber, contributorId, fundId, description, amount, taxYear) { const newTrans = { Date: date, TypeId: typeId, - CheckNumber: check, + CheckNumber: checkNumber, ContributorId: contributorId, FundId: fundId, Description: description, @@ -58,8 +58,8 @@ function getTransaction(date, typeId, check, contributorId, fundId, description, return newTrans; } -exports.add = async function(date, typeId, check, contributorId, fundId, description, amount, taxYear) { - const newTrans = getTransaction(date, typeId, check, contributorId, fundId, description, amount, taxYear); +exports.add = async function(date, typeId, checkNumber, contributorId, fundId, description, amount, taxYear) { + const newTrans = getTransaction(date, typeId, checkNumber, contributorId, fundId, description, amount, taxYear); const newTransResult = await connectionAsync.nonQuery('INSERT INTO Transactions Set ?', newTrans); return newTransResult; }