diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 2e47f80..21573f4 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -31,6 +31,8 @@ import { PiePanel } from '../panels/pie-panel.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.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 { PayrollResultComponent } from '../shared/payroll-result.component'; import { LeaderboardResultComponent } from '../shared/leaderboard-result.component'; @@ -61,6 +63,8 @@ import { environment } from '../../environments/environment'; AddDataComponent, OrgResultComponent, OrgTableComponent, + RecurResultComponent, + RecurTableComponent, TransactionLogComponent, CategoryMonthComponent, TransactionResultComponent, diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index f6f4bbf..5e7dde2 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -47,21 +47,75 @@
Recurring Transactions - Here you can control your recurring transactions. + Select a Recurring Transaction below to edit it.
- - - - - - - - - - - -
SellerValuePurchase Time
+ + +
+

Edit Recurring Transaction

+ +
+
+
+ +
+ + Enter the date and time the transaction occurred. +
+
+
+ +
+
+ + +
+ Enter the amount spent, such as 5.35 for £5.35. +
+
+
+ +
+
+ +
+ Tick if the purchase is deemed an essential purchase for budgeting purposes. +
+
+
+ +
+
+ +
+ Please give the period of time the purchase will recur from "Time of Transaction". +
+
+
+ +
+
+ +
+ Optional: Choose the Budget Type for the majority of the purchase. +
+
+
+
No Recurring Transactions. diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts index 03bcd9e..c379a9a 100644 --- a/src/app/dashboard/transaction-log.component.ts +++ b/src/app/dashboard/transaction-log.component.ts @@ -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 { PaginatePipe } 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 { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; +import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; +import { PaginationInstance } from 'ngx-pagination'; import * as moment from 'moment'; import 'rxjs/add/operator/map'; @@ -13,12 +11,19 @@ import 'rxjs/add/operator/map'; }) export class TransactionLogComponent implements OnInit { - transactionList; + transactionList: any; + recurringTransactionList: any; noTransactionList = true; noRecurringList = true; myDate: any; minDate: any; public p: any; + public modalRef: BsModalRef; + clickedRecur: any; + public updatedDate: string; + public startTime: string; + categoryIdList: number[] = []; + categoryNameList: string[] = []; public paginateConfig: PaginationInstance = { id: 'transpaginate', @@ -29,27 +34,33 @@ export class TransactionLogComponent implements OnInit { constructor( private api: ApiService, + private modalService: BsModalService, ) { 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); } ngOnInit(): void { - this.getMinDate(); this.loadTransactions(1); } - getMinDate() { - // gets the April 1st date of the current year - const aprilDate = moment().month(3).date(1); - 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'); - } + private setCategoryList(data: any) { + this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]); + this.categoryNameList = Object.keys(data.names).map(key => data.names[key]); + } + + byId(c1: ItemModel, c2: ItemModel) { + return c1 && c2 ? c1.id === c2.id : c1 === c2; } loadTransactions(logPage: number) { @@ -66,6 +77,13 @@ export class TransactionLogComponent implements OnInit { this.transactionList = null; this.noTransactionList = true; } + if (result.recurring_transactions) { + this.recurringTransactionList = result.recurring_transactions; + this.noRecurringList = false; + } else { + this.recurringTransactionList = null; + this.noRecurringList = true; + } }, error => { console.log(error); @@ -73,4 +91,65 @@ export class TransactionLogComponent implements OnInit { ); } + recurringTransactionDetails(clicked, template: TemplateRef) { + 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) { + 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); + } + ); + } + } diff --git a/src/app/shared/recur-result.component.html b/src/app/shared/recur-result.component.html new file mode 100644 index 0000000..ece4592 --- /dev/null +++ b/src/app/shared/recur-result.component.html @@ -0,0 +1,6 @@ +{{recur.seller}} +{{recur.category}} +{{recur.essential}} +{{updatedDate}} +{{recur.recurring_period}} +{{recur.value}} diff --git a/src/app/shared/recur-result.component.ts b/src/app/shared/recur-result.component.ts new file mode 100644 index 0000000..56a7954 --- /dev/null +++ b/src/app/shared/recur-result.component.ts @@ -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 + ); + } +} diff --git a/src/app/shared/recur-table.component.html b/src/app/shared/recur-table.component.html new file mode 100644 index 0000000..532fbb7 --- /dev/null +++ b/src/app/shared/recur-table.component.html @@ -0,0 +1,17 @@ +
+ + + + + + + + + + + + + + +
SellerCategoryEssentialLast UpdatedRecurring PeriodValue
+
diff --git a/src/app/shared/recur-table.component.ts b/src/app/shared/recur-table.component.ts new file mode 100644 index 0000000..4cf73cb --- /dev/null +++ b/src/app/shared/recur-table.component.ts @@ -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; + @Output() public onClick = new EventEmitter(); + + public recurClick(event: any): void { + this.onClick.emit( event ); + } +}