fixed category viewing and editing on several pages

This commit is contained in:
piratefinn 2018-03-19 17:52:54 +00:00
parent f36ef00478
commit 3e8767e481
10 changed files with 37 additions and 40 deletions

View file

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

View file

@ -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');

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">

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');

View file

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

View file

@ -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;
} }

View file

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

View file

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

View file

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

View file

@ -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 );