fixed category viewing and editing on several pages

src/app/dashboard/add-data.component.html

@@ -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">
+                  <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>
                 </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">
+                  <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>
                 </div>
               </div>

src/app/dashboard/add-data.component.ts

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

src/app/dashboard/category-month.component.html

@@ -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">
+                <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="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">
+                <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="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">
+                <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="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">
+                <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="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">

src/app/dashboard/category-month.component.ts

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

src/app/dashboard/transaction-log.component.html

@@ -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 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>
                     </select>
                   </div>

src/app/dashboard/transaction-log.component.ts

@@ -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.categoryList = result.categories;
-        this.categoryIdList = 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;
   }

src/app/shared/recur-result.component.html

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

src/app/shared/recur-result.component.ts

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

src/app/shared/recur-table.component.html

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

src/app/shared/recur-table.component.ts

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