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 == ''">
|
||||
<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.id">
|
||||
<input [value]="category.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category.name }}
|
||||
<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.id">
|
||||
<input [value]="category2.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category2.name }}
|
||||
<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>
|
||||
|
|
|
@ -40,6 +40,8 @@ export class AddDataComponent implements OnInit {
|
|||
transactionFormInvalid = true;
|
||||
myDate: any;
|
||||
minDate: any;
|
||||
categoryList: any;
|
||||
categoryIdList: any;
|
||||
leftCategoryList: number[] = [];
|
||||
rightCategoryList: string[] = [];
|
||||
categoryId: number;
|
||||
|
@ -72,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');
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
<small>Select a Recurring Transaction below to edit it.</small>
|
||||
</div>
|
||||
<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>
|
||||
<div class="modal-header d-flex justify-content-between">
|
||||
<h4 class="modal-title">Edit Recurring Transaction</h4>
|
||||
|
@ -105,9 +105,9 @@
|
|||
<div class="col-md-9">
|
||||
<div class="input-group">
|
||||
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
|
||||
<option value="Uncategorised">Uncategorised</option>
|
||||
<option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category">
|
||||
{{ category.name }}
|
||||
<option value="0">Uncategorised</option>
|
||||
<option *ngFor="let category of categoryIdList" [ngValue]="category">
|
||||
{{ categoryList[category] }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
@ -23,6 +23,7 @@ export class TransactionLogComponent implements OnInit {
|
|||
public updatedDate: string;
|
||||
public startTime: string;
|
||||
categoryIdList: number[] = [];
|
||||
categoryList: any;
|
||||
categoryNameList: string[] = [];
|
||||
|
||||
public paginateConfig: PaginationInstance = {
|
||||
|
@ -39,8 +40,8 @@ export class TransactionLogComponent implements OnInit {
|
|||
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
|
||||
this.api.categoryList().subscribe(
|
||||
result => {
|
||||
//this.setCategoryList(result.categories);
|
||||
this.categoryIdList = result.categories;
|
||||
this.categoryList = result.categories;
|
||||
this.categoryIdList = Object.keys(this.categoryList);
|
||||
},
|
||||
error => {
|
||||
console.log('Retrieval Error');
|
||||
|
@ -54,11 +55,6 @@ export class TransactionLogComponent implements OnInit {
|
|||
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) {
|
||||
return c1 && c2 ? c1.id === c2.id : c1 === c2;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<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()">{{updatedDate}}</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';
|
||||
|
||||
interface RecurData {
|
||||
category: string;
|
||||
category: number;
|
||||
essential: number;
|
||||
id: number;
|
||||
last_updated: string;
|
||||
|
@ -20,6 +20,7 @@ interface RecurData {
|
|||
export class RecurResultComponent {
|
||||
@Input() public recur: RecurData;
|
||||
@Output() public onClick = new EventEmitter();
|
||||
@Input() public categories: any;
|
||||
public updatedDate: string;
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<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>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
@ -20,6 +20,8 @@ interface RecurData {
|
|||
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