Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #70 from Pear-Trading/finn/buttoncategory

Browse source 
Added ability to edit and delete recurring transactions
This commit is contained in:
Finn 2018-03-20 19:11:22 +00:00 committed by GitHub
commit 8b65d8eefb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 403 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -2,6 +2,13 @@
# Next Release # Next Release
# v0.1.5
* Fixed category viewing on purchase
* Changed category view from radio buttons to full label buttons
* Amended local validation of submit
* Changed recurring purchase selection view
# v0.1.4 # v0.1.4
* Amended category list on transaction submission * Amended category list on transaction submission

6
package-lock.json generated
View file

@ -6752,9 +6752,9 @@
"integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE=" "integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE="
}, },
"ngx-bootstrap": { "ngx-bootstrap": {
"version": "2.0.0-beta.8", "version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.8.tgz", "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-rc.1.tgz",
"integrity": "sha512-e+3euXDb4nhzxn9kBO4RPWwRaI2ef7Lg+us8Yo2DBfD/Kuk/vl7ksWjoolMFLKEGpcTcKhMT/4BH5dUx+S4AtA==" "integrity": "sha512-/ARJ2LLrT4bDghOVS16btJovJ7lsDcILmBUvGt0EXzNlU1HbTQZKfl/OKhrufmRgHQIzc6kXckVUhz5d5QIsUA=="
}, },
"ngx-pagination": { "ngx-pagination": {
"version": "3.0.3", "version": "3.0.3",

2
package.json
View file

@ -35,7 +35,7 @@
"moment": "^2.21.0", "moment": "^2.21.0",
"ng2-charts": "1.6.0", "ng2-charts": "1.6.0",
"ng2-validation-manager": "0.5.3", "ng2-validation-manager": "0.5.3",
"ngx-bootstrap": "2.0.0-beta.8", "ngx-bootstrap": "2.0.0-rc.1",
"ngx-pagination": "3.0.3", "ngx-pagination": "3.0.3",
"rxjs": "5.5.6", "rxjs": "5.5.6",
"ts-helpers": "1.1.2", "ts-helpers": "1.1.2",

16
src/app/auth/register.component.ts
View file

@ -78,24 +78,18 @@ export class RegisterComponent {
.register(data) .register(data)
.subscribe( .subscribe(
result => { result => {
console.log('registered!');
this.registerStatus = 'success'; this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']); this.router.navigate(['/dashboard']);
}, },
error => { error => {
console.log('Register Error'); console.log('Register Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.registerStatusError = 'There was a server error, please try again later.'; this.registerStatusError = 'There was a server error, please try again later.';
} }
this.registerStatus = 'send_failed'; this.registerStatus = 'send_failed';
console.log(this.registerStatus);
} }
); );
} }
@ -127,19 +121,13 @@ export class RegisterComponent {
.register(data) .register(data)
.subscribe( .subscribe(
result => { result => {
console.log('registered!');
this.registerStatus = 'success'; this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']); this.router.navigate(['/dashboard']);
}, },
error => { error => {
console.log('Register Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.registerStatusError = 'There was a server error, please try again later.'; this.registerStatusError = 'There was a server error, please try again later.';
} }

9
src/app/dashboard/account-edit.component.ts
View file

@ -105,23 +105,17 @@ export class AccountEditComponent implements OnInit {
.accountEditUpdate(submitData) .accountEditUpdate(submitData)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.submitStatus = 'success'; this.submitStatus = 'success';
console.log(this.submitStatus);
}, },
error => { error => {
console.log('Edit Error'); console.log('Edit Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); this.submitStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.submitStatusError = 'There was a server error, please try again later.'; this.submitStatusError = 'There was a server error, please try again later.';
} }
this.submitStatus = 'send_failed'; this.submitStatus = 'send_failed';
console.log(this.submitStatus);
} }
); );
} }
@ -131,7 +125,6 @@ export class AccountEditComponent implements OnInit {
if (!this.settingForm.valid && !this.settingCustomerForm.valid) { if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
console.log('Not Valid!'); console.log('Not Valid!');
this.submitStatus = 'validation_failed'; this.submitStatus = 'validation_failed';
console.log(this.submitStatus);
return; return;
} }

70
src/app/dashboard/add-data.component.html
View file

@ -46,29 +46,22 @@
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 btn-group-vertical">
<div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
<input value="daily" type="radio" name="daily" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> <input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Daily
<label>Daily</label> </label>
</div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
<div> <input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Weekly
<input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> </label>
<label>Weekly</label> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
</div> <input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Fortnightly
<div> </label>
<input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()"> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
<label>Fortnightly</label> <input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Monthly
</div> </label>
</div> <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
<div class="col-md-6"> <input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Quarterly
<div> </label>
<input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Monthly</label>
</div>
<div>
<input value="quarterly" type="radio" name="quarterly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Quarterly</label>
</div>
</div> </div>
</div> </div>
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span> <span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
@ -78,21 +71,18 @@
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label> <label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
<div class="col-md-9"> <div class="col-md-9">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 btn-group-vertical">
<div> <label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
<input value="" type="radio" name="radios" [(ngModel)]="categoryId"> <input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
<label>Uncategorised</label> </label>
</div> <label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index"> <input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId"> </label>
<label>{{ leftCategoryNameList[i] }}</label>
</div>
</div>
<div class="col-md-6">
<div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
<input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
<label>{{ rightCategoryNameList[i] }}</label>
</div> </div>
<div class="col-md-6 btn-group-vertical">
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
</label>
</div> </div>
</div> </div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span> <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
@ -108,21 +98,21 @@
<org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table> <org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
<div *ngIf="showAddStore"> <div *ngIf="showAddStore">
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label> <label class="col-md-3 form-control-label" for="text-input">Organisation Street Name</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the street name where the organisation is located at.</span> <span class="help-block">Enter the street name where the organisation is located at.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label> <label class="col-md-3 form-control-label" for="text-input">Organisation Town</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the name of the town where the organisation is located at.</span> <span class="help-block">Enter the name of the town where the organisation is located at.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label> <label class="col-md-3 form-control-label" for="text-input">Organisation Postcode</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()"> <input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the postcode where the organisation is located at.</span> <span class="help-block">Enter the postcode where the organisation is located at.</span>

62
src/app/dashboard/add-data.component.ts
View file

@ -30,8 +30,6 @@ export class AddDataComponent implements OnInit {
organisationTown: string; organisationTown: string;
organisationPostcode: string; organisationPostcode: string;
amount: number; amount: number;
// Assumes Groceries is 1st category
categoryId: number = 1;
essentialPurchase = false; essentialPurchase = false;
recurringPurchase = false; recurringPurchase = false;
recurringType: string; recurringType: string;
@ -42,10 +40,11 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true; transactionFormInvalid = true;
myDate: any; myDate: any;
minDate: any; minDate: any;
leftCategoryIdList: number[] = []; categoryList: any;
rightCategoryIdList: number[] = []; categoryIdList: any;
leftCategoryNameList: number[] = []; leftCategoryList: number[] = [];
rightCategoryNameList: number[] = []; rightCategoryList: string[] = [];
categoryId: number;
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
@ -75,7 +74,9 @@ export class AddDataComponent implements OnInit {
// this.myDate = new Date().toISOString().slice(0, 16); // this.myDate = new Date().toISOString().slice(0, 16);
this.api.categoryList().subscribe( this.api.categoryList().subscribe(
result => { result => {
this.setCategoryList(result.categories); this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
this.setCategoryList(this.categoryIdList);
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -90,13 +91,9 @@ export class AddDataComponent implements OnInit {
} }
private setCategoryList(data: any) { private setCategoryList(data: any) {
let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]); let halfLength = Math.floor(data.length / 2);
let categoryNameList = Object.keys(data.names).map(key => data.names[key]); this.leftCategoryList = data.splice(0, halfLength);
let halfLength = Math.floor(categoryIdList.length / 2); this.rightCategoryList = data;
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
this.leftCategoryNameList = categoryNameList.splice(0, halfLength);
this.rightCategoryIdList = categoryIdList;
this.rightCategoryNameList = categoryNameList;
} }
getMinDate() { getMinDate() {
@ -177,14 +174,15 @@ export class AddDataComponent implements OnInit {
} }
transactionFormValidate() { transactionFormValidate() {
if (this.submitOrg.name.length === 0 || if (this.submitOrg.name.length &&
this.submitOrg.town.length === 0 || this.amount &&
this.amount === 0 || (this.recurringPurchase &&
this.recurringPurchase && this.recurringType ||
!this.recurringType) { !this.recurringPurchase &&
this.transactionFormInvalid = true; !this.recurringType)) {
} else {
this.transactionFormInvalid = false; this.transactionFormInvalid = false;
} else {
this.transactionFormInvalid = true;
} }
} }
@ -238,31 +236,22 @@ export class AddDataComponent implements OnInit {
.subscribe( .subscribe(
result => { result => {
if ( result.success === true ) { if ( result.success === true ) {
console.log('Successful Upload');
console.log(result);
this.transactionFormStatus = 'success'; this.transactionFormStatus = 'success';
console.log(this.transactionFormStatus);
this.resetForm(); this.resetForm();
} else { } else {
console.log('Upload Error');
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message); this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed'; this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
} }
}, },
error => { error => {
console.log('Upload Error');
console.log(error); console.log(error);
try { try {
console.log(error.error); console.log(error.error);
const jsonError = error.json(); this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
console.log('boop');
this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.'; this.transactionFormStatusError = 'There was a server error, please try again later.';
} }
this.transactionFormStatus = 'send_failed'; this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
} }
); );
} }
@ -290,14 +279,11 @@ export class AddDataComponent implements OnInit {
.orgPayroll(this.payrollForm.value) .orgPayroll(this.payrollForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.payrollFormStatus = 'success'; this.payrollFormStatus = 'success';
console.log(this.payrollFormStatus);
}, },
error => { error => {
console.log( error._body ); console.log( error._body );
this.payrollFormStatus = 'send_failed'; this.payrollFormStatus = 'send_failed';
console.log(this.payrollFormStatus);
} }
); );
} }
@ -309,14 +295,10 @@ export class AddDataComponent implements OnInit {
.orgSupplier(this.singleSupplierForm.value) .orgSupplier(this.singleSupplierForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.singleSupplierFormStatus = 'success'; this.singleSupplierFormStatus = 'success';
console.log(this.singleSupplierFormStatus);
}, },
error => { error => {
console.log( error._body );
this.singleSupplierFormStatus = 'send_failed'; this.singleSupplierFormStatus = 'send_failed';
console.log(this.singleSupplierFormStatus);
} }
); );
} }
@ -328,14 +310,10 @@ export class AddDataComponent implements OnInit {
.orgEmployee(this.employeeForm.value) .orgEmployee(this.employeeForm.value)
.subscribe( .subscribe(
result => { result => {
console.log('data submitted!');
this.employeeFormStatus = 'success'; this.employeeFormStatus = 'success';
console.log(this.employeeFormStatus);
}, },
error => { error => {
console.log( error._body );
this.employeeFormStatus = 'send_failed'; this.employeeFormStatus = 'send_failed';
console.log(this.employeeFormStatus);
} }
); );
} }

24
src/app/dashboard/category-month.component.html
View file

@ -12,8 +12,8 @@
<ul *ngIf="weekList1" class="horizontal-bars type-2"> <ul *ngIf="weekList1" class="horizontal-bars type-2">
<li *ngIf="weekEssential1"> <li *ngIf="weekEssential1">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential1 ? weekEssential1.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential1.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential1 ? weekEssential1.value : 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -22,7 +22,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;"> <li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -54,8 +54,8 @@
<ul *ngIf="weekList2" class="horizontal-bars type-2"> <ul *ngIf="weekList2" class="horizontal-bars type-2">
<li *ngIf="weekEssential2"> <li *ngIf="weekEssential2">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential2.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential2 ? weekEssential2.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential2.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential2 ? weekEssential2.value : 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -64,7 +64,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;"> <li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -96,8 +96,8 @@
<ul *ngIf="weekList3" class="horizontal-bars type-2"> <ul *ngIf="weekList3" class="horizontal-bars type-2">
<li *ngIf="weekEssential3"> <li *ngIf="weekEssential3">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential3 ? weekEssential3.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential3.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential3 ? weekEssential3.value : 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -106,7 +106,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;"> <li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
@ -138,8 +138,8 @@
<ul *ngIf="weekList4" class="horizontal-bars type-2"> <ul *ngIf="weekList4" class="horizontal-bars type-2">
<li *ngIf="weekEssential4"> <li *ngIf="weekEssential4">
<span class="title">Essential Purchases</span> <span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential4.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( weekEssential4 ? weekEssential4.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential4.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span> ({{ ( weekEssential4 ? weekEssential4.value : 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
@ -148,7 +148,7 @@
</div> </div>
</li> </li>
<li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;"> <li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span> <span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small"> <span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span> ({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">

12
src/app/dashboard/category-month.component.ts
View file

@ -31,15 +31,13 @@ export class CategoryMonthComponent implements OnInit {
weekEssential3: number = 0; weekEssential3: number = 0;
weekEssential4: number = 0; weekEssential4: number = 0;
categoryList: number[] = []; categoryList: any;
dayList: any[] = []; dayList: any[] = [];
valueList: number[] = []; valueList: number[] = [];
myWeek1: any; myWeek1: any;
myWeek2: any; myWeek2: any;
myWeek3: any; myWeek3: any;
myWeek4: any; myWeek4: any;
categoryIdList: number[] = [];
categoryNameList: string[] = [];
categoryLimit1: number = 6; categoryLimit1: number = 6;
categoryLimit2: number = 6; categoryLimit2: number = 6;
categoryLimit3: number = 6; categoryLimit3: number = 6;
@ -51,7 +49,8 @@ export class CategoryMonthComponent implements OnInit {
this.setDate(); this.setDate();
this.api.categoryList().subscribe( this.api.categoryList().subscribe(
result => { result => {
this.setCategoryList(result.categories); this.categoryList = result.categories;
console.log('Category List received');
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -72,11 +71,6 @@ export class CategoryMonthComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
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]);
}
private setDate () { private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD'); this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');

4
src/app/dashboard/dashboard.module.ts
View file

@ -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,

10
src/app/dashboard/feedback.component.ts
View file

@ -55,9 +55,7 @@ export class FeedbackComponent implements OnInit {
result => { result => {
if ( result.success === true ) { if ( result.success === true ) {
console.log('Successful Upload'); console.log('Successful Upload');
console.log(result);
this.feedbackFormStatus = 'success'; this.feedbackFormStatus = 'success';
console.log(this.feedbackFormStatus);
this.feedbackForm.patchValue({ this.feedbackForm.patchValue({
feedbacktext: '', feedbacktext: '',
}); });
@ -65,22 +63,16 @@ export class FeedbackComponent implements OnInit {
console.log('Upload Error'); console.log('Upload Error');
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message); this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.feedbackFormStatus = 'send_failed'; this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
} }
}, },
error => { error => {
console.log('Upload Error'); console.log('Upload Error');
console.log(error);
try { try {
console.log(error.error); this.feedbackFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
const jsonError = error.json();
console.log('boop');
this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
} catch (e) { } catch (e) {
this.feedbackFormStatusError = 'There was a server error, please try again later.'; this.feedbackFormStatusError = 'There was a server error, please try again later.';
} }
this.feedbackFormStatus = 'send_failed'; this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
} }
); );
} }

1
src/app/dashboard/trail-map.component.ts
View file

@ -51,7 +51,6 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
} }
public onMarkerClick(clickedMarker, template: TemplateRef<any>) { public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker);
this.clickedMarker = clickedMarker; this.clickedMarker = clickedMarker;
this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png'; this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png';
this.openModal(template); this.openModal(template);

96
src/app/dashboard/transaction-log.component.html
View file

@ -44,6 +44,102 @@
No Transactions available. No Transactions available.
</div> </div>
</div> </div>
<div class="card">
<div class="card-header">
<strong>Recurring Transactions</strong>
<small>Select a Recurring Transaction below to edit it.</small>
</div>
<div *ngIf="!noRecurringList" class="card-block">
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
<ng-template #template>
<div class="modal-header d-flex justify-content-between">
<h4 class="modal-title">Edit Recurring Transaction</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
<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" [(ngModel)]="clickedRecur.category">
<option value="0">Uncategorised</option>
<option *ngFor="let category of categoryIdList" [ngValue]="category">
{{ categoryList[category] }}
</option>
</select>
</div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<span class="col-12"><strong>WARNING: Clicking "Delete" will completely remove the Recurring Transaction.</strong></span>
</div>
</div>
<div class="col-md-12">
<div [ngSwitch]="transactionFormStatus">
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
{{transactionFormStatusSuccess}}
</div>
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
{{transactionFormStatusError}}
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Edit</button>
</div>
</ng-template>
</div>
<div *ngIf="noRecurringList" class="card-block">
No Recurring Transactions.
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

130
src/app/dashboard/transaction-log.component.ts
View file

@ -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,11 +11,24 @@ 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;
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: any;
categoryList: any;
categoryNameList: string[] = [];
transactionFormStatus: string;
transactionFormStatusSuccess: string;
transactionFormStatusError = 'Error received, please try again.';
updatedTime: string;
public paginateConfig: PaginationInstance = { public paginateConfig: PaginationInstance = {
id: 'transpaginate', id: 'transpaginate',
@ -28,31 +39,27 @@ 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.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
},
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() {
// 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');
}
}
loadTransactions(logPage: number) { loadTransactions(logPage: number) {
console.log(logPage);
this.api.transList(logPage).subscribe( this.api.transList(logPage).subscribe(
result => { result => {
if (result.transactions.length > 0) { if (result.transactions.length > 0) {
@ -66,6 +73,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 +87,78 @@ export class TransactionLogComponent implements OnInit {
); );
} }
recurringTransactionDetails(clicked, template: TemplateRef<any>) {
this.clickedRecur = clicked;
this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
this.openModal(template);
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
editRecurringTransaction() {
let updatedTimeSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
this.clickedRecur.display_time = moment(this.updatedTime).format('llll');
let myParams = {
category: (this.clickedRecur.category == 0 ? undefined : this.clickedRecur.category),
essential: this.clickedRecur.essential,
id: this.clickedRecur.id,
apply_time: updatedTimeSubmit,
recurring_period: this.clickedRecur.recurring_period,
seller: this.clickedRecur.seller,
value: this.clickedRecur.value,
};
this.api
.recurUpdate(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Edit Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
deleteRecurringTransaction() {
let myParams = {
id: this.clickedRecur.id,
};
this.api
.recurDelete(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Delete Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
} }

20
src/app/providers/api-service.ts
View file

@ -158,6 +158,26 @@ export class ApiService {
); );
} }
// Edits a recurring transaction
public recurUpdate(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions',
data
);
}
// Edits a recurring transaction
public recurDelete(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions/delete',
data
);
}
// gets payroll list for log // gets payroll list for log
public payrollList(data) { public payrollList(data) {

6
src/app/shared/recur-result.component.html Normal file
View file

@ -0,0 +1,6 @@
<td (click)="recurClick()">{{recur.seller}}</td>
<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
<td (click)="recurClick()">{{recur.essential == 1 ? 'true' : 'false'}}</td>
<td (click)="recurClick()">{{recur.display_time}}</td>
<td (click)="recurClick()">{{recur.recurring_period}}</td>
<td (click)="recurClick()">{{recur.value}}</td>

40
src/app/shared/recur-result.component.ts Normal file
View file

@ -0,0 +1,40 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
interface RecurData {
category: number;
essential: number;
id: number;
last_updated: string;
recurring_period: string;
seller: string;
start_time: string;
value: number;
display_time: any;
}
@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();
@Input() public categories: any;
public updatedDate: string;
ngOnInit(): void {
if (this.recur.last_updated) {
this.recur.display_time = moment(this.recur.last_updated).format('llll');
} else {
this.recur.display_time = 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
View 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 Applied</th>
<th>Recurring Period</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
</tbody>
</table>
</div>

30
src/app/shared/recur-table.component.ts Normal file
View file

@ -0,0 +1,30 @@
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;
display_time: any;
}
@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();
@Input() public categories: any;
public recurClick(event: any): void {
this.onClick.emit( event );
}
}