Merge pull request #71 from Pear-Trading/finn/Release-v0.1.6
v0.1.6 Release
This commit is contained in:
commit
867bfda871
19 changed files with 406 additions and 161 deletions
10
CHANGELOG.md
10
CHANGELOG.md
|
@ -2,9 +2,19 @@
|
|||
|
||||
# Next Release
|
||||
|
||||
# v0.1.6
|
||||
|
||||
* Changed layout of category choosing on upload
|
||||
* Added ability to edit and remove recurring transactions
|
||||
* Fixed HttpClient error log viewing
|
||||
* Made transaction validation more lenient
|
||||
|
||||
# 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
|
||||
|
||||
|
|
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -6752,9 +6752,9 @@
|
|||
"integrity": "sha1-zJJ7GR2Yb+D7atKVeQdQxV3L6FE="
|
||||
},
|
||||
"ngx-bootstrap": {
|
||||
"version": "2.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-e+3euXDb4nhzxn9kBO4RPWwRaI2ef7Lg+us8Yo2DBfD/Kuk/vl7ksWjoolMFLKEGpcTcKhMT/4BH5dUx+S4AtA=="
|
||||
"version": "2.0.0-rc.1",
|
||||
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-rc.1.tgz",
|
||||
"integrity": "sha512-/ARJ2LLrT4bDghOVS16btJovJ7lsDcILmBUvGt0EXzNlU1HbTQZKfl/OKhrufmRgHQIzc6kXckVUhz5d5QIsUA=="
|
||||
},
|
||||
"ngx-pagination": {
|
||||
"version": "3.0.3",
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
"moment": "^2.21.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"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",
|
||||
"rxjs": "5.5.6",
|
||||
"ts-helpers": "1.1.2",
|
||||
|
|
|
@ -78,24 +78,18 @@ export class RegisterComponent {
|
|||
.register(data)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('registered!');
|
||||
this.registerStatus = 'success';
|
||||
console.log(this.registerStatus);
|
||||
this.router.navigate(['/dashboard']);
|
||||
},
|
||||
error => {
|
||||
console.log('Register Error');
|
||||
console.log(error);
|
||||
try {
|
||||
console.log(error.error);
|
||||
const jsonError = error.json();
|
||||
console.log('boop');
|
||||
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
|
||||
this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
|
||||
} catch (e) {
|
||||
this.registerStatusError = 'There was a server error, please try again later.';
|
||||
}
|
||||
this.registerStatus = 'send_failed';
|
||||
console.log(this.registerStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -127,19 +121,13 @@ export class RegisterComponent {
|
|||
.register(data)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('registered!');
|
||||
this.registerStatus = 'success';
|
||||
console.log(this.registerStatus);
|
||||
this.router.navigate(['/dashboard']);
|
||||
},
|
||||
error => {
|
||||
console.log('Register Error');
|
||||
console.log(error);
|
||||
try {
|
||||
console.log(error.error);
|
||||
const jsonError = error.json();
|
||||
console.log('boop');
|
||||
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
|
||||
this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
|
||||
} catch (e) {
|
||||
this.registerStatusError = 'There was a server error, please try again later.';
|
||||
}
|
||||
|
|
|
@ -105,23 +105,17 @@ export class AccountEditComponent implements OnInit {
|
|||
.accountEditUpdate(submitData)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('data submitted!');
|
||||
this.submitStatus = 'success';
|
||||
console.log(this.submitStatus);
|
||||
},
|
||||
error => {
|
||||
console.log('Edit Error');
|
||||
console.log(error);
|
||||
try {
|
||||
console.log(error.error);
|
||||
const jsonError = error.json();
|
||||
console.log('boop');
|
||||
this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
|
||||
this.submitStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
|
||||
} catch (e) {
|
||||
this.submitStatusError = 'There was a server error, please try again later.';
|
||||
}
|
||||
this.submitStatus = 'send_failed';
|
||||
console.log(this.submitStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -131,7 +125,6 @@ export class AccountEditComponent implements OnInit {
|
|||
if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
|
||||
console.log('Not Valid!');
|
||||
this.submitStatus = 'validation_failed';
|
||||
console.log(this.submitStatus);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
@ -46,29 +46,22 @@
|
|||
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
|
||||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<input value="daily" type="radio" name="daily" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
|
||||
<label>Daily</label>
|
||||
</div>
|
||||
<div>
|
||||
<input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
|
||||
<label>Weekly</label>
|
||||
</div>
|
||||
<div>
|
||||
<input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
|
||||
<label>Fortnightly</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<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 class="col-md-6 btn-group-vertical">
|
||||
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
|
||||
<input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Daily
|
||||
</label>
|
||||
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
|
||||
<input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Weekly
|
||||
</label>
|
||||
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
|
||||
<input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Fortnightly
|
||||
</label>
|
||||
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
|
||||
<input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Monthly
|
||||
</label>
|
||||
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
|
||||
<input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Quarterly
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>
|
||||
<input value="" type="radio" name="radios" [(ngModel)]="categoryId">
|
||||
<label>Uncategorised</label>
|
||||
</div>
|
||||
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
|
||||
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
|
||||
<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 class="col-md-6 btn-group-vertical">
|
||||
<label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
|
||||
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
|
||||
</label>
|
||||
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
|
||||
<input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
|
||||
</label>
|
||||
</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>
|
||||
<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>
|
||||
<div *ngIf="showAddStore">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
@ -30,8 +30,6 @@ export class AddDataComponent implements OnInit {
|
|||
organisationTown: string;
|
||||
organisationPostcode: string;
|
||||
amount: number;
|
||||
// Assumes Groceries is 1st category
|
||||
categoryId: number = 1;
|
||||
essentialPurchase = false;
|
||||
recurringPurchase = false;
|
||||
recurringType: string;
|
||||
|
@ -42,10 +40,11 @@ export class AddDataComponent implements OnInit {
|
|||
transactionFormInvalid = true;
|
||||
myDate: any;
|
||||
minDate: any;
|
||||
leftCategoryIdList: number[] = [];
|
||||
rightCategoryIdList: number[] = [];
|
||||
leftCategoryNameList: number[] = [];
|
||||
rightCategoryNameList: number[] = [];
|
||||
categoryList: any;
|
||||
categoryIdList: any;
|
||||
leftCategoryList: number[] = [];
|
||||
rightCategoryList: string[] = [];
|
||||
categoryId: number;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
|
@ -75,7 +74,9 @@ export class AddDataComponent implements OnInit {
|
|||
// this.myDate = new Date().toISOString().slice(0, 16);
|
||||
this.api.categoryList().subscribe(
|
||||
result => {
|
||||
this.setCategoryList(result.categories);
|
||||
this.categoryList = result.categories;
|
||||
this.categoryIdList = Object.keys(this.categoryList);
|
||||
this.setCategoryList(this.categoryIdList);
|
||||
},
|
||||
error => {
|
||||
console.log('Retrieval Error');
|
||||
|
@ -90,13 +91,9 @@ export class AddDataComponent implements OnInit {
|
|||
}
|
||||
|
||||
private setCategoryList(data: any) {
|
||||
let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
|
||||
let categoryNameList = Object.keys(data.names).map(key => data.names[key]);
|
||||
let halfLength = Math.floor(categoryIdList.length / 2);
|
||||
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
|
||||
this.leftCategoryNameList = categoryNameList.splice(0, halfLength);
|
||||
this.rightCategoryIdList = categoryIdList;
|
||||
this.rightCategoryNameList = categoryNameList;
|
||||
let halfLength = Math.floor(data.length / 2);
|
||||
this.leftCategoryList = data.splice(0, halfLength);
|
||||
this.rightCategoryList = data;
|
||||
}
|
||||
|
||||
getMinDate() {
|
||||
|
@ -177,14 +174,15 @@ export class AddDataComponent implements OnInit {
|
|||
}
|
||||
|
||||
transactionFormValidate() {
|
||||
if (this.submitOrg.name.length === 0 ||
|
||||
this.submitOrg.town.length === 0 ||
|
||||
this.amount === 0 ||
|
||||
this.recurringPurchase &&
|
||||
!this.recurringType) {
|
||||
this.transactionFormInvalid = true;
|
||||
} else {
|
||||
if (this.submitOrg.name.length &&
|
||||
this.amount &&
|
||||
(this.recurringPurchase &&
|
||||
this.recurringType ||
|
||||
!this.recurringPurchase &&
|
||||
!this.recurringType)) {
|
||||
this.transactionFormInvalid = false;
|
||||
} else {
|
||||
this.transactionFormInvalid = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -238,31 +236,22 @@ export class AddDataComponent implements OnInit {
|
|||
.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;
|
||||
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';
|
||||
console.log(this.transactionFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -290,14 +279,11 @@ export class AddDataComponent implements OnInit {
|
|||
.orgPayroll(this.payrollForm.value)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('data submitted!');
|
||||
this.payrollFormStatus = 'success';
|
||||
console.log(this.payrollFormStatus);
|
||||
},
|
||||
error => {
|
||||
console.log( error._body );
|
||||
this.payrollFormStatus = 'send_failed';
|
||||
console.log(this.payrollFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -309,14 +295,10 @@ export class AddDataComponent implements OnInit {
|
|||
.orgSupplier(this.singleSupplierForm.value)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('data submitted!');
|
||||
this.singleSupplierFormStatus = 'success';
|
||||
console.log(this.singleSupplierFormStatus);
|
||||
},
|
||||
error => {
|
||||
console.log( error._body );
|
||||
this.singleSupplierFormStatus = 'send_failed';
|
||||
console.log(this.singleSupplierFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -328,14 +310,10 @@ export class AddDataComponent implements OnInit {
|
|||
.orgEmployee(this.employeeForm.value)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('data submitted!');
|
||||
this.employeeFormStatus = 'success';
|
||||
console.log(this.employeeFormStatus);
|
||||
},
|
||||
error => {
|
||||
console.log( error._body );
|
||||
this.employeeFormStatus = 'send_failed';
|
||||
console.log(this.employeeFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,8 +12,8 @@
|
|||
<ul *ngIf="weekList1" class="horizontal-bars type-2">
|
||||
<li *ngIf="weekEssential1">
|
||||
<span class="title">Essential Purchases</span>
|
||||
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ (weekEssential1.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
|
||||
<span class="value">{{ ( weekEssential1 ? weekEssential1.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ ( weekEssential1 ? weekEssential1.value : 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<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">
|
||||
({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
|
@ -54,8 +54,8 @@
|
|||
<ul *ngIf="weekList2" class="horizontal-bars type-2">
|
||||
<li *ngIf="weekEssential2">
|
||||
<span class="title">Essential Purchases</span>
|
||||
<span class="value">{{ ( weekEssential2.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ (weekEssential2.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
|
||||
<span class="value">{{ ( weekEssential2 ? weekEssential2.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ ( weekEssential2 ? weekEssential2.value : 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<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">
|
||||
({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
|
@ -96,8 +96,8 @@
|
|||
<ul *ngIf="weekList3" class="horizontal-bars type-2">
|
||||
<li *ngIf="weekEssential3">
|
||||
<span class="title">Essential Purchases</span>
|
||||
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ (weekEssential3.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
|
||||
<span class="value">{{ ( weekEssential3 ? weekEssential3.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ ( weekEssential3 ? weekEssential3.value : 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
|
@ -106,7 +106,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<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">
|
||||
({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
|
@ -138,8 +138,8 @@
|
|||
<ul *ngIf="weekList4" class="horizontal-bars type-2">
|
||||
<li *ngIf="weekEssential4">
|
||||
<span class="title">Essential Purchases</span>
|
||||
<span class="value">{{ ( weekEssential4.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ (weekEssential4.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
|
||||
<span class="value">{{ ( weekEssential4 ? weekEssential4.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
|
||||
({{ ( weekEssential4 ? weekEssential4.value : 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
|
@ -148,7 +148,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<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">
|
||||
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
|
||||
<div class="bars">
|
||||
|
|
|
@ -31,15 +31,13 @@ export class CategoryMonthComponent implements OnInit {
|
|||
weekEssential3: number = 0;
|
||||
weekEssential4: number = 0;
|
||||
|
||||
categoryList: number[] = [];
|
||||
categoryList: any;
|
||||
dayList: any[] = [];
|
||||
valueList: number[] = [];
|
||||
myWeek1: any;
|
||||
myWeek2: any;
|
||||
myWeek3: any;
|
||||
myWeek4: any;
|
||||
categoryIdList: number[] = [];
|
||||
categoryNameList: string[] = [];
|
||||
categoryLimit1: number = 6;
|
||||
categoryLimit2: number = 6;
|
||||
categoryLimit3: number = 6;
|
||||
|
@ -51,7 +49,8 @@ export class CategoryMonthComponent implements OnInit {
|
|||
this.setDate();
|
||||
this.api.categoryList().subscribe(
|
||||
result => {
|
||||
this.setCategoryList(result.categories);
|
||||
this.categoryList = result.categories;
|
||||
console.log('Category List received');
|
||||
},
|
||||
error => {
|
||||
console.log('Retrieval Error');
|
||||
|
@ -72,11 +71,6 @@ export class CategoryMonthComponent implements OnInit {
|
|||
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 () {
|
||||
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
|
||||
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -55,9 +55,7 @@ export class FeedbackComponent implements OnInit {
|
|||
result => {
|
||||
if ( result.success === true ) {
|
||||
console.log('Successful Upload');
|
||||
console.log(result);
|
||||
this.feedbackFormStatus = 'success';
|
||||
console.log(this.feedbackFormStatus);
|
||||
this.feedbackForm.patchValue({
|
||||
feedbacktext: '',
|
||||
});
|
||||
|
@ -65,22 +63,16 @@ export class FeedbackComponent implements OnInit {
|
|||
console.log('Upload Error');
|
||||
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
|
||||
this.feedbackFormStatus = 'send_failed';
|
||||
console.log(this.feedbackFormStatus);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('Upload Error');
|
||||
console.log(error);
|
||||
try {
|
||||
console.log(error.error);
|
||||
const jsonError = error.json();
|
||||
console.log('boop');
|
||||
this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
|
||||
this.feedbackFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
|
||||
} catch (e) {
|
||||
this.feedbackFormStatusError = 'There was a server error, please try again later.';
|
||||
}
|
||||
this.feedbackFormStatus = 'send_failed';
|
||||
console.log(this.feedbackFormStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
@ -51,7 +51,6 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
|
|||
}
|
||||
|
||||
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
|
||||
console.log(clickedMarker);
|
||||
this.clickedMarker = clickedMarker;
|
||||
this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png';
|
||||
this.openModal(template);
|
||||
|
|
|
@ -44,6 +44,102 @@
|
|||
No Transactions available.
|
||||
</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">×</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>
|
||||
|
|
|
@ -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 { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
|
||||
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
||||
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 'rxjs/add/operator/map';
|
||||
|
||||
|
@ -13,11 +11,24 @@ 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: any;
|
||||
categoryList: any;
|
||||
categoryNameList: string[] = [];
|
||||
transactionFormStatus: string;
|
||||
transactionFormStatusSuccess: string;
|
||||
transactionFormStatusError = 'Error received, please try again.';
|
||||
updatedTime: string;
|
||||
|
||||
public paginateConfig: PaginationInstance = {
|
||||
id: 'transpaginate',
|
||||
|
@ -28,31 +39,27 @@ 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.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);
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
loadTransactions(logPage: number) {
|
||||
console.log(logPage);
|
||||
this.api.transList(logPage).subscribe(
|
||||
result => {
|
||||
if (result.transactions.length > 0) {
|
||||
|
@ -66,6 +73,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 +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';
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
public payrollList(data) {
|
||||
|
|
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()">{{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
40
src/app/shared/recur-result.component.ts
Normal 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
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 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
30
src/app/shared/recur-table.component.ts
Normal 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 );
|
||||
}
|
||||
}
|
Reference in a new issue