wbrawner/twigs-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Filter categories based on transaction expense and make buttons easier to tap

Browse source 
Signed-off-by: William Brawner <me@wbrawner.com>
This commit is contained in:
William Brawner 2020-02-27 16:42:34 +00:00
parent 89e75b2ff8
commit a431cce041
3 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/transactions/add-edit-transaction/add-edit-transaction.component.css
View file

@ -11,6 +11,7 @@ mat-radio-button {
padding-bottom: 15px;
}
.button-delete {
float: right;
button {
width: 100%;
margin: 1em 0;
}

12
src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
View file

@ -17,6 +17,10 @@
<mat-form-field>
<input matInput type="time" [(ngModel)]="currentTime" placeholder="Time" required>
</mat-form-field>
<mat-radio-group [(ngModel)]="currentTransaction.expense" (change)="updateCategories($event)">
<mat-radio-button [value]="true">Expense</mat-radio-button>
<mat-radio-button [value]="false">Income</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<mat-select placeholder="Category" [(ngModel)]="currentTransaction.categoryId">
<mat-option *ngFor="let category of categories" [value]="category.id">
@ -24,10 +28,6 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-radio-group [(ngModel)]="currentTransaction.expense">
<mat-radio-button [value]="true">Expense</mat-radio-button>
<mat-radio-button [value]="false">Income</mat-radio-button>
</mat-radio-group>
<button mat-button color="accent" (click)="save()">Save</button>
<button class="button-delete" mat-button color="warn" *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
<button mat-raised-button color="accent" (click)="save()">Save</button>
<button class="button-delete" mat-raised-button color="warn" *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
</div>

23
src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
View file

@ -4,6 +4,7 @@ import { TransactionType } from '../transaction.type';
import { Category } from 'src/app/categories/category';
import { AppComponent } from 'src/app/app.component';
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
import { MatRadioChange } from '@angular/material';
@Component({
selector: 'app-add-edit-transaction',
@ -28,13 +29,15 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
ngOnInit() {
this.app.title = this.title;
this.app.backEnabled = true;
this.getCategories();
let d: Date;
let d: Date, expense: boolean;
if (this.currentTransaction) {
d = new Date(this.currentTransaction.date);
expense = this.currentTransaction.expense;
} else {
d = new Date();
expense = true;
}
this.updateCategories(new MatRadioChange(undefined, expense));
this.transactionDate = d.toLocaleDateString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit'});
this.currentTime = d.toLocaleTimeString(undefined, {hour: '2-digit', hour12: false, minute: '2-digit'});
}
@ -49,14 +52,18 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
this.currentTime = d.toLocaleTimeString(undefined, {hour: '2-digit', hour12: false, minute: '2-digit'});
}
updateCategories(change: MatRadioChange) {
this.twigsService.getCategories(this.budgetId)
.subscribe(newCategories => {
this.categories = newCategories.filter(category => category.expense === change.value)
})
}
save(): void {
// The amount will be input as a decimal value so we need to convert it
// to an integer
let observable;
const dateParts = this.transactionDate.split('-');
this.currentTransaction.date.setFullYear(parseInt(dateParts[0], 10));
this.currentTransaction.date.setMonth(parseInt(dateParts[1], 10) - 1);
this.currentTransaction.date.setDate(parseInt(dateParts[2], 10));
this.currentTransaction.date = new Date(this.transactionDate);
const timeParts = this.currentTime.split(':');
this.currentTransaction.date.setHours(parseInt(timeParts[0], 10));
this.currentTransaction.date.setMinutes(parseInt(timeParts[1], 10));
@ -97,8 +104,4 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
this.app.goBack();
});
}
getCategories() {
this.twigsService.getCategories(this.budgetId).subscribe(categories => this.categories = categories);
}
}