Added initial recurring variable viewing
This commit is contained in:
parent
c45790c7e9
commit
b9578da579
7 changed files with 257 additions and 32 deletions
|
@ -31,6 +31,8 @@ import { PiePanel } from '../panels/pie-panel.component';
|
||||||
import { DashboardRoutingModule } from './dashboard.routing';
|
import { DashboardRoutingModule } from './dashboard.routing';
|
||||||
import { OrgResultComponent } from '../shared/org-result.component';
|
import { OrgResultComponent } from '../shared/org-result.component';
|
||||||
import { OrgTableComponent } from '../shared/org-table.component';
|
import { OrgTableComponent } from '../shared/org-table.component';
|
||||||
|
import { RecurResultComponent } from '../shared/recur-result.component';
|
||||||
|
import { RecurTableComponent } from '../shared/recur-table.component';
|
||||||
import { TransactionResultComponent } from '../shared/transaction-result.component';
|
import { TransactionResultComponent } from '../shared/transaction-result.component';
|
||||||
import { PayrollResultComponent } from '../shared/payroll-result.component';
|
import { PayrollResultComponent } from '../shared/payroll-result.component';
|
||||||
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
|
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
|
||||||
|
@ -61,6 +63,8 @@ import { environment } from '../../environments/environment';
|
||||||
AddDataComponent,
|
AddDataComponent,
|
||||||
OrgResultComponent,
|
OrgResultComponent,
|
||||||
OrgTableComponent,
|
OrgTableComponent,
|
||||||
|
RecurResultComponent,
|
||||||
|
RecurTableComponent,
|
||||||
TransactionLogComponent,
|
TransactionLogComponent,
|
||||||
CategoryMonthComponent,
|
CategoryMonthComponent,
|
||||||
TransactionResultComponent,
|
TransactionResultComponent,
|
||||||
|
|
|
@ -47,21 +47,75 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<strong>Recurring Transactions</strong>
|
<strong>Recurring Transactions</strong>
|
||||||
<small>Here you can control your recurring transactions.</small>
|
<small>Select a Recurring Transaction below to edit it.</small>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!noRecurringList" class="card-block">
|
<div *ngIf="!noRecurringList" class="card-block">
|
||||||
<table class="table table-striped table-hover">
|
<recur-table [recurList]="recurringTransactionList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
|
||||||
<thead>
|
<ng-template #template>
|
||||||
<tr>
|
<div class="modal-header d-flex justify-content-between">
|
||||||
<th>Seller</th>
|
<h4 class="modal-title">Edit Recurring Transaction</h4>
|
||||||
<th>Value</th>
|
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||||
<th>Purchase Time</th>
|
<span aria-hidden="true">×</span>
|
||||||
</tr>
|
</button>
|
||||||
</thead>
|
</div>
|
||||||
<tbody>
|
<div class="modal-body">
|
||||||
<tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
|
<div class="form-group row">
|
||||||
</tbody>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
|
||||||
</table>
|
<div class="col-md-9">
|
||||||
|
<input type="datetime-local" class="form-control" [(ngModel)]="updatedTime">
|
||||||
|
<span class="help-block">Enter the date and time the transaction occurred.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
||||||
|
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="clickedRecur.value">
|
||||||
|
</div>
|
||||||
|
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="checkbox" class="mr-auto" [(ngModel)]="clickedRecur.essential">
|
||||||
|
</div>
|
||||||
|
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="input-group">
|
||||||
|
<select type="text" class="form-control" [(ngModel)]="clickedRecur.recurring_period">
|
||||||
|
<option value="daily">Daily</option>
|
||||||
|
<option value="weekly">Weekly</option>
|
||||||
|
<option value="fortnightly">Fortnightly</option>
|
||||||
|
<option value="monthly">Monthly</option>
|
||||||
|
<option value="quarterly">Quarterly</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="input-group">
|
||||||
|
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
|
||||||
|
<option value="Uncategorised">Uncategorised</option>
|
||||||
|
<option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category">
|
||||||
|
{{ category.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="noRecurringList" class="card-block">
|
<div *ngIf="noRecurringList" class="card-block">
|
||||||
No Recurring Transactions.
|
No Recurring Transactions.
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
import { Component, OnInit, EventEmitter, TemplateRef } from '@angular/core';
|
||||||
import { ApiService } from '../providers/api-service';
|
import { ApiService } from '../providers/api-service';
|
||||||
// import { PaginatePipe } from 'ngx-pagination';
|
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
|
||||||
|
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
||||||
import { PaginationInstance } from 'ngx-pagination';
|
import { PaginationInstance } from 'ngx-pagination';
|
||||||
// import { PaginationControlsComponent } from 'ngx-pagination';
|
|
||||||
// import { PaginationControlsDirective } from 'ngx-pagination';
|
|
||||||
// import { TransactionResultComponent } from '../shared/transaction-result.component';
|
|
||||||
import * as moment from 'moment';
|
import * as moment from 'moment';
|
||||||
import 'rxjs/add/operator/map';
|
import 'rxjs/add/operator/map';
|
||||||
|
|
||||||
|
@ -13,12 +11,19 @@ import 'rxjs/add/operator/map';
|
||||||
})
|
})
|
||||||
export class TransactionLogComponent implements OnInit {
|
export class TransactionLogComponent implements OnInit {
|
||||||
|
|
||||||
transactionList;
|
transactionList: any;
|
||||||
|
recurringTransactionList: any;
|
||||||
noTransactionList = true;
|
noTransactionList = true;
|
||||||
noRecurringList = true;
|
noRecurringList = true;
|
||||||
myDate: any;
|
myDate: any;
|
||||||
minDate: any;
|
minDate: any;
|
||||||
public p: any;
|
public p: any;
|
||||||
|
public modalRef: BsModalRef;
|
||||||
|
clickedRecur: any;
|
||||||
|
public updatedDate: string;
|
||||||
|
public startTime: string;
|
||||||
|
categoryIdList: number[] = [];
|
||||||
|
categoryNameList: string[] = [];
|
||||||
|
|
||||||
public paginateConfig: PaginationInstance = {
|
public paginateConfig: PaginationInstance = {
|
||||||
id: 'transpaginate',
|
id: 'transpaginate',
|
||||||
|
@ -29,27 +34,33 @@ export class TransactionLogComponent implements OnInit {
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private api: ApiService,
|
private api: ApiService,
|
||||||
|
private modalService: BsModalService,
|
||||||
) {
|
) {
|
||||||
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
||||||
|
this.api.categoryList().subscribe(
|
||||||
|
result => {
|
||||||
|
//this.setCategoryList(result.categories);
|
||||||
|
this.categoryIdList = result.categories;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log('Retrieval Error');
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
// this.myDate = new Date().toISOString().slice(0, 16);
|
// this.myDate = new Date().toISOString().slice(0, 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.getMinDate();
|
|
||||||
this.loadTransactions(1);
|
this.loadTransactions(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
getMinDate() {
|
private setCategoryList(data: any) {
|
||||||
// gets the April 1st date of the current year
|
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
|
||||||
const aprilDate = moment().month(3).date(1);
|
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
|
||||||
const now = moment();
|
|
||||||
// Checks if current time is before April 1st, if so returns true
|
|
||||||
const beforeApril = now.isBefore(aprilDate);
|
|
||||||
if ( beforeApril === true ) {
|
|
||||||
this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
|
|
||||||
} else {
|
|
||||||
this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
byId(c1: ItemModel, c2: ItemModel) {
|
||||||
|
return c1 && c2 ? c1.id === c2.id : c1 === c2;
|
||||||
}
|
}
|
||||||
|
|
||||||
loadTransactions(logPage: number) {
|
loadTransactions(logPage: number) {
|
||||||
|
@ -66,6 +77,13 @@ export class TransactionLogComponent implements OnInit {
|
||||||
this.transactionList = null;
|
this.transactionList = null;
|
||||||
this.noTransactionList = true;
|
this.noTransactionList = true;
|
||||||
}
|
}
|
||||||
|
if (result.recurring_transactions) {
|
||||||
|
this.recurringTransactionList = result.recurring_transactions;
|
||||||
|
this.noRecurringList = false;
|
||||||
|
} else {
|
||||||
|
this.recurringTransactionList = null;
|
||||||
|
this.noRecurringList = true;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
@ -73,4 +91,65 @@ export class TransactionLogComponent implements OnInit {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
recurringTransactionDetails(clicked, template: TemplateRef<any>) {
|
||||||
|
this.clickedRecur = clicked;
|
||||||
|
console.log(this.clickedRecur);
|
||||||
|
this.updatedTime = moment(this.clickedRecur.last_updated).format('YYYY-MM-DD[T]HH:mm');
|
||||||
|
this.startTime = moment(this.clickedRecur.start_time).format('YYYY-MM-DD[T]HH:mm');
|
||||||
|
this.openModal(template);
|
||||||
|
}
|
||||||
|
|
||||||
|
openModal(template: TemplateRef<any>) {
|
||||||
|
this.modalRef = this.modalService.show(template);
|
||||||
|
}
|
||||||
|
|
||||||
|
editRecurringTransaction() {
|
||||||
|
let updatedDateSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
|
||||||
|
let startTimeSubmit = moment(this.startTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
|
||||||
|
let myParams = {
|
||||||
|
category: this.clickedRecur.category,
|
||||||
|
essential: this.clickedRecur.essential,
|
||||||
|
id: this.clickedRecur.id,
|
||||||
|
last_updated: this.updatedDate,
|
||||||
|
recurring_period: this.updatedDateSubmit,
|
||||||
|
seller: this.clickedRecur.seller,
|
||||||
|
start_time: this.startTimeSubmit,
|
||||||
|
value: this.clickedRecur.value,
|
||||||
|
};
|
||||||
|
/******************************/
|
||||||
|
|
||||||
|
this.api
|
||||||
|
.upload(myParams)
|
||||||
|
.subscribe(
|
||||||
|
result => {
|
||||||
|
if ( result.success === true ) {
|
||||||
|
console.log('Successful Upload');
|
||||||
|
console.log(result);
|
||||||
|
this.transactionFormStatus = 'success';
|
||||||
|
console.log(this.transactionFormStatus);
|
||||||
|
this.resetForm();
|
||||||
|
} else {
|
||||||
|
console.log('Upload Error');
|
||||||
|
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
|
||||||
|
this.transactionFormStatus = 'send_failed';
|
||||||
|
console.log(this.transactionFormStatus);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log('Upload Error');
|
||||||
|
console.log(error);
|
||||||
|
try {
|
||||||
|
console.log(error.error);
|
||||||
|
const jsonError = error.json();
|
||||||
|
console.log('boop');
|
||||||
|
this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
|
||||||
|
} catch (e) {
|
||||||
|
this.transactionFormStatusError = 'There was a server error, please try again later.';
|
||||||
|
}
|
||||||
|
this.transactionFormStatus = 'send_failed';
|
||||||
|
console.log(this.transactionFormStatus);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
6
src/app/shared/recur-result.component.html
Normal file
6
src/app/shared/recur-result.component.html
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
<td (click)="recurClick()">{{recur.seller}}</td>
|
||||||
|
<td (click)="recurClick()">{{recur.category}}</td>
|
||||||
|
<td (click)="recurClick()">{{recur.essential}}</td>
|
||||||
|
<td (click)="recurClick()">{{updatedDate}}</td>
|
||||||
|
<td (click)="recurClick()">{{recur.recurring_period}}</td>
|
||||||
|
<td (click)="recurClick()">{{recur.value}}</td>
|
38
src/app/shared/recur-result.component.ts
Normal file
38
src/app/shared/recur-result.component.ts
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
interface RecurData {
|
||||||
|
category: string;
|
||||||
|
essential: number;
|
||||||
|
id: number;
|
||||||
|
last_updated: string;
|
||||||
|
recurring_period: string;
|
||||||
|
seller: string;
|
||||||
|
start_time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
// tslint:disable-next-line
|
||||||
|
selector: '[recur-result]',
|
||||||
|
templateUrl: 'recur-result.component.html',
|
||||||
|
})
|
||||||
|
export class RecurResultComponent {
|
||||||
|
@Input() public recur: RecurData;
|
||||||
|
@Output() public onClick = new EventEmitter();
|
||||||
|
public updatedDate: string;
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
if (this.recur.last_updated) {
|
||||||
|
this.updatedDate = moment(this.recur.last_updated).format('llll');
|
||||||
|
} else {
|
||||||
|
this.updatedDate = moment(this.recur.start_time).format('llll');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public recurClick(): void {
|
||||||
|
this.onClick.emit(
|
||||||
|
this.recur
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
17
src/app/shared/recur-table.component.html
Normal file
17
src/app/shared/recur-table.component.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="form-group row">
|
||||||
|
<table class="table table-striped table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Seller</th>
|
||||||
|
<th>Category</th>
|
||||||
|
<th>Essential</th>
|
||||||
|
<th>Last Updated</th>
|
||||||
|
<th>Recurring Period</th>
|
||||||
|
<th>Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
27
src/app/shared/recur-table.component.ts
Normal file
27
src/app/shared/recur-table.component.ts
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { RecurResultComponent } from '../shared/recur-result.component';
|
||||||
|
|
||||||
|
interface RecurData {
|
||||||
|
category: string;
|
||||||
|
essential: number;
|
||||||
|
id: number;
|
||||||
|
last_updated: string;
|
||||||
|
recurring_period: string;
|
||||||
|
seller: string;
|
||||||
|
start_time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
// tslint:disable-next-line
|
||||||
|
selector: 'recur-table',
|
||||||
|
templateUrl: 'recur-table.component.html',
|
||||||
|
})
|
||||||
|
export class RecurTableComponent {
|
||||||
|
@Input() public recurList: Array<RecurData>;
|
||||||
|
@Output() public onClick = new EventEmitter();
|
||||||
|
|
||||||
|
public recurClick(event: any): void {
|
||||||
|
this.onClick.emit( event );
|
||||||
|
}
|
||||||
|
}
|
Reference in a new issue