From d678eecdddbc7c979a7b16421c82fa2e9a092f3a Mon Sep 17 00:00:00 2001 From: Billy Brawner Date: Wed, 29 Aug 2018 09:11:07 -0500 Subject: [PATCH] WIP: Implement add transaction page --- src/app/app-routing.module.ts | 4 ++ src/app/app.module.ts | 27 +++++++++++-- .../new-transaction.component.css | 0 .../new-transaction.component.html | 34 +++++++++++++++++ .../new-transaction.component.spec.ts | 25 ++++++++++++ .../new-transaction.component.ts | 29 ++++++++++++++ .../transaction-details.component.css | 0 .../transaction-details.component.html | 8 ++++ .../transaction-details.component.spec.ts | 25 ++++++++++++ .../transaction-details.component.ts | 18 +++++++++ src/app/transaction.service.ts | 38 +++++++++++++------ src/app/transaction.ts | 6 +-- .../transactions/transactions.component.css | 4 +- .../transactions/transactions.component.html | 4 +- 14 files changed, 199 insertions(+), 23 deletions(-) create mode 100644 src/app/new-transaction/new-transaction.component.css create mode 100644 src/app/new-transaction/new-transaction.component.html create mode 100644 src/app/new-transaction/new-transaction.component.spec.ts create mode 100644 src/app/new-transaction/new-transaction.component.ts create mode 100644 src/app/transaction-details/transaction-details.component.css create mode 100644 src/app/transaction-details/transaction-details.component.html create mode 100644 src/app/transaction-details/transaction-details.component.spec.ts create mode 100644 src/app/transaction-details/transaction-details.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 89aac3c..013b1dc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,10 +1,14 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { TransactionsComponent } from './transactions/transactions.component'; +import { TransactionDetailsComponent } from './transaction-details/transaction-details.component'; +import { NewTransactionComponent } from './new-transaction/new-transaction.component'; const routes: Routes = [ { path: '', redirectTo: '/transactions', pathMatch: 'full' }, { path: 'transactions', component: TransactionsComponent }, + { path: 'transactions/new', component: NewTransactionComponent }, + { path: 'transactions/:id', component: TransactionDetailsComponent }, ] @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6d7c4ac..f348732 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,25 +1,44 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatButtonModule, MatIconModule, MatListModule, MatToolbarModule} from '@angular/material'; +import { FormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { + MatButtonModule, + MatDatepickerModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatListModule, + MatRadioModule, + MatToolbarModule, +} from '@angular/material'; import { AppComponent } from './app.component'; import { TransactionsComponent } from './transactions/transactions.component'; import { AppRoutingModule } from './app-routing.module'; +import { TransactionDetailsComponent } from './transaction-details/transaction-details.component'; +import { NewTransactionComponent } from './new-transaction/new-transaction.component'; @NgModule({ declarations: [ AppComponent, - TransactionsComponent + TransactionsComponent, + TransactionDetailsComponent, + NewTransactionComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule, + MatFormFieldModule, + MatDatepickerModule, MatIconModule, + MatInputModule, MatListModule, + MatRadioModule, MatToolbarModule, - AppRoutingModule + AppRoutingModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/new-transaction/new-transaction.component.css b/src/app/new-transaction/new-transaction.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/new-transaction/new-transaction.component.html b/src/app/new-transaction/new-transaction.component.html new file mode 100644 index 0000000..47432a4 --- /dev/null +++ b/src/app/new-transaction/new-transaction.component.html @@ -0,0 +1,34 @@ + + + + Add Transaction + + + Save + + +
+ + + + + + + + + + + + + + + Expense + Income + + +
diff --git a/src/app/new-transaction/new-transaction.component.spec.ts b/src/app/new-transaction/new-transaction.component.spec.ts new file mode 100644 index 0000000..7ecd6d4 --- /dev/null +++ b/src/app/new-transaction/new-transaction.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewTransactionComponent } from './new-transaction.component'; + +describe('NewTransactionComponent', () => { + let component: NewTransactionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewTransactionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewTransactionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/new-transaction/new-transaction.component.ts b/src/app/new-transaction/new-transaction.component.ts new file mode 100644 index 0000000..070a44a --- /dev/null +++ b/src/app/new-transaction/new-transaction.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { TransactionService } from '../transaction.service' +import { Transaction } from '../transaction' +import { TransactionType } from '../transaction.type' +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-new-transaction', + templateUrl: './new-transaction.component.html', + styleUrls: ['./new-transaction.component.css'] +}) +export class NewTransactionComponent implements OnInit { + + public transaction = new Transaction() + public transactionType = TransactionType; + + constructor( + private transactionService: TransactionService, + private location: Location + ) { } + + ngOnInit() { + } + + save(): void { + this.transactionService.saveTransaction(this.transaction); + this.location.back() + } +} diff --git a/src/app/transaction-details/transaction-details.component.css b/src/app/transaction-details/transaction-details.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/transaction-details/transaction-details.component.html b/src/app/transaction-details/transaction-details.component.html new file mode 100644 index 0000000..dfadeda --- /dev/null +++ b/src/app/transaction-details/transaction-details.component.html @@ -0,0 +1,8 @@ +
+
+ + transaction-details works! + + + transaction-details works! + diff --git a/src/app/transaction-details/transaction-details.component.spec.ts b/src/app/transaction-details/transaction-details.component.spec.ts new file mode 100644 index 0000000..e99fd50 --- /dev/null +++ b/src/app/transaction-details/transaction-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TransactionDetailsComponent } from './transaction-details.component'; + +describe('TransactionDetailsComponent', () => { + let component: TransactionDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TransactionDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TransactionDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/transaction-details/transaction-details.component.ts b/src/app/transaction-details/transaction-details.component.ts new file mode 100644 index 0000000..2b1747f --- /dev/null +++ b/src/app/transaction-details/transaction-details.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { Transaction } from '../transaction' + +@Component({ + selector: 'app-transaction-details', + templateUrl: './transaction-details.component.html', + styleUrls: ['./transaction-details.component.css'] +}) +export class TransactionDetailsComponent implements OnInit { + + public transaction: Transaction; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/transaction.service.ts b/src/app/transaction.service.ts index 244ada0..8cc7a9a 100644 --- a/src/app/transaction.service.ts +++ b/src/app/transaction.service.ts @@ -7,21 +7,35 @@ import { TransactionType } from './transaction.type'; providedIn: 'root' }) export class TransactionService { + transactions: Transaction[] = [ + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, + {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, + ] constructor() { } getTransactions(): Observable { - return of([ - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Spent some money", title: "An Expense", type: TransactionType.EXPENSE, categoryId: 0}, - {id: 0, amount: Math.random() * 100, date: new Date(), description: "Earned some money", title: "Some Income", type: TransactionType.INCOME, categoryId: 0}, - ]) + return of(this.transactions) + } + + saveTransaction(transaction: Transaction): Observable { + // TODO: Replace this with a DB save method + var newId = 0; + for (let transaction of this.transactions) { + if (transaction.id > newId) { + newId = transaction.id + 1; + } + } + transaction.id = newId; + this.transactions.push(transaction) + return of(transaction) } } diff --git a/src/app/transaction.ts b/src/app/transaction.ts index 17e2c99..c808345 100644 --- a/src/app/transaction.ts +++ b/src/app/transaction.ts @@ -5,7 +5,7 @@ export class Transaction { title: string; description: string; amount: number; - date: Date; + date: Date = new Date(); categoryId: number; - type: TransactionType; -} \ No newline at end of file + type: TransactionType = TransactionType.EXPENSE; +} diff --git a/src/app/transactions/transactions.component.css b/src/app/transactions/transactions.component.css index 52a6567..9ad4f42 100644 --- a/src/app/transactions/transactions.component.css +++ b/src/app/transactions/transactions.component.css @@ -15,8 +15,8 @@ p { justify-content: space-between; } -button.mat-fab { +a.mat-fab { position: fixed; right: 2em; bottom: 2em; -} \ No newline at end of file +} diff --git a/src/app/transactions/transactions.component.html b/src/app/transactions/transactions.component.html index 47196df..ae481a7 100644 --- a/src/app/transactions/transactions.component.html +++ b/src/app/transactions/transactions.component.html @@ -9,6 +9,6 @@

{{ transaction.date | date }}

- \ No newline at end of file +