fixed category viewing and editing on several pages
This commit is contained in:
parent
f36ef00478
commit
3e8767e481
10 changed files with 37 additions and 40 deletions
|
@ -75,13 +75,13 @@
|
||||||
<label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
|
<label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
|
||||||
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
|
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
|
||||||
</label>
|
</label>
|
||||||
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category.id">
|
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
|
||||||
<input [value]="category.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category.name }}
|
<input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 btn-group-vertical">
|
<div class="col-md-6 btn-group-vertical">
|
||||||
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2.id">
|
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
|
||||||
<input [value]="category2.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category2.name }}
|
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -40,6 +40,8 @@ export class AddDataComponent implements OnInit {
|
||||||
transactionFormInvalid = true;
|
transactionFormInvalid = true;
|
||||||
myDate: any;
|
myDate: any;
|
||||||
minDate: any;
|
minDate: any;
|
||||||
|
categoryList: any;
|
||||||
|
categoryIdList: any;
|
||||||
leftCategoryList: number[] = [];
|
leftCategoryList: number[] = [];
|
||||||
rightCategoryList: string[] = [];
|
rightCategoryList: string[] = [];
|
||||||
categoryId: number;
|
categoryId: number;
|
||||||
|
@ -72,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');
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
<small>Select a Recurring Transaction below to edit it.</small>
|
<small>Select a Recurring Transaction below to edit it.</small>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!noRecurringList" class="card-block">
|
<div *ngIf="!noRecurringList" class="card-block">
|
||||||
<recur-table [recurList]="recurringTransactionList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
|
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
|
||||||
<ng-template #template>
|
<ng-template #template>
|
||||||
<div class="modal-header d-flex justify-content-between">
|
<div class="modal-header d-flex justify-content-between">
|
||||||
<h4 class="modal-title">Edit Recurring Transaction</h4>
|
<h4 class="modal-title">Edit Recurring Transaction</h4>
|
||||||
|
@ -105,9 +105,9 @@
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
|
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
|
||||||
<option value="Uncategorised">Uncategorised</option>
|
<option value="0">Uncategorised</option>
|
||||||
<option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category">
|
<option *ngFor="let category of categoryIdList" [ngValue]="category">
|
||||||
{{ category.name }}
|
{{ categoryList[category] }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,6 +23,7 @@ export class TransactionLogComponent implements OnInit {
|
||||||
public updatedDate: string;
|
public updatedDate: string;
|
||||||
public startTime: string;
|
public startTime: string;
|
||||||
categoryIdList: number[] = [];
|
categoryIdList: number[] = [];
|
||||||
|
categoryList: any;
|
||||||
categoryNameList: string[] = [];
|
categoryNameList: string[] = [];
|
||||||
|
|
||||||
public paginateConfig: PaginationInstance = {
|
public paginateConfig: PaginationInstance = {
|
||||||
|
@ -39,8 +40,8 @@ export class TransactionLogComponent implements OnInit {
|
||||||
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
||||||
this.api.categoryList().subscribe(
|
this.api.categoryList().subscribe(
|
||||||
result => {
|
result => {
|
||||||
//this.setCategoryList(result.categories);
|
this.categoryList = result.categories;
|
||||||
this.categoryIdList = result.categories;
|
this.categoryIdList = Object.keys(this.categoryList);
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log('Retrieval Error');
|
console.log('Retrieval Error');
|
||||||
|
@ -54,11 +55,6 @@ export class TransactionLogComponent implements OnInit {
|
||||||
this.loadTransactions(1);
|
this.loadTransactions(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
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) {
|
byId(c1: ItemModel, c2: ItemModel) {
|
||||||
return c1 && c2 ? c1.id === c2.id : c1 === c2;
|
return c1 && c2 ? c1.id === c2.id : c1 === c2;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<td (click)="recurClick()">{{recur.seller}}</td>
|
<td (click)="recurClick()">{{recur.seller}}</td>
|
||||||
<td (click)="recurClick()">{{recur.category}}</td>
|
<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
|
||||||
<td (click)="recurClick()">{{recur.essential}}</td>
|
<td (click)="recurClick()">{{recur.essential}}</td>
|
||||||
<td (click)="recurClick()">{{updatedDate}}</td>
|
<td (click)="recurClick()">{{updatedDate}}</td>
|
||||||
<td (click)="recurClick()">{{recur.recurring_period}}</td>
|
<td (click)="recurClick()">{{recur.recurring_period}}</td>
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||||
import * as moment from 'moment';
|
import * as moment from 'moment';
|
||||||
|
|
||||||
interface RecurData {
|
interface RecurData {
|
||||||
category: string;
|
category: number;
|
||||||
essential: number;
|
essential: number;
|
||||||
id: number;
|
id: number;
|
||||||
last_updated: string;
|
last_updated: string;
|
||||||
|
@ -20,6 +20,7 @@ interface RecurData {
|
||||||
export class RecurResultComponent {
|
export class RecurResultComponent {
|
||||||
@Input() public recur: RecurData;
|
@Input() public recur: RecurData;
|
||||||
@Output() public onClick = new EventEmitter();
|
@Output() public onClick = new EventEmitter();
|
||||||
|
@Input() public categories: any;
|
||||||
public updatedDate: string;
|
public updatedDate: string;
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
|
<tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,6 +20,8 @@ interface RecurData {
|
||||||
export class RecurTableComponent {
|
export class RecurTableComponent {
|
||||||
@Input() public recurList: Array<RecurData>;
|
@Input() public recurList: Array<RecurData>;
|
||||||
@Output() public onClick = new EventEmitter();
|
@Output() public onClick = new EventEmitter();
|
||||||
|
@Input() public categories: any;
|
||||||
|
|
||||||
|
|
||||||
public recurClick(event: any): void {
|
public recurClick(event: any): void {
|
||||||
this.onClick.emit( event );
|
this.onClick.emit( event );
|
||||||
|
|
Reference in a new issue