Added initial recurring variable viewing

src/app/dashboard/dashboard.module.ts

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

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

@@ -47,21 +47,75 @@
       <div class="card">
         <div class="card-header">
           <strong>Recurring Transactions</strong>
-          <small>Here you can control your recurring transactions.</small>
+          <small>Select a Recurring Transaction below to edit it.</small>
         </div>
         <div *ngIf="!noRecurringList" class="card-block">
-          <table class="table table-striped table-hover">
-            <thead>
-              <tr>
-                <th>Seller</th>
-                <th>Value</th>
-                <th>Purchase Time</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
-            </tbody>
-          </table>
+          <recur-table [recurList]="recurringTransactionList" (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">&times;</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" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
+                      <option value="Uncategorised">Uncategorised</option>
+                      <option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category">
+                        {{ category.name }}
+                      </option>
+                    </select>
+                  </div>
+                  <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
+                </div>
+              </div>
+            </div>
+          </ng-template>
         </div>
         <div *ngIf="noRecurringList" class="card-block">
           No Recurring Transactions.

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

@@ -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 {PaginationInstance} from 'ngx-pagination';
-// import { PaginationControlsComponent } from 'ngx-pagination';
-// import { PaginationControlsDirective } from 'ngx-pagination';
-// import { TransactionResultComponent } from '../shared/transaction-result.component';
+import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import { PaginationInstance } from 'ngx-pagination';
 import * as moment from 'moment';
 import 'rxjs/add/operator/map';
 
@@ -13,12 +11,19 @@ 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: number[] = [];
+  categoryNameList: string[] = [];
 
   public paginateConfig: PaginationInstance = {
         id: 'transpaginate',
@@ -29,27 +34,33 @@ 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.setCategoryList(result.categories);
+        this.categoryIdList = result.categories;
+      },
+      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');
-    }
+  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;
   }
 
   loadTransactions(logPage: number) {
@@ -66,6 +77,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 +91,65 @@ export class TransactionLogComponent implements OnInit {
     );
   }
 
+  recurringTransactionDetails(clicked, template: TemplateRef<any>) {
+    this.clickedRecur = clicked;
+    console.log(this.clickedRecur);
+    this.updatedTime = moment(this.clickedRecur.last_updated).format('YYYY-MM-DD[T]HH:mm');
+    this.startTime = moment(this.clickedRecur.start_time).format('YYYY-MM-DD[T]HH:mm');
+    this.openModal(template);
+  }
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template);
+  }
+
+  editRecurringTransaction() {
+    let updatedDateSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
+    let startTimeSubmit = moment(this.startTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
+    let myParams = {
+      category: this.clickedRecur.category,
+      essential: this.clickedRecur.essential,
+      id: this.clickedRecur.id,
+      last_updated: this.updatedDate,
+      recurring_period: this.updatedDateSubmit,
+      seller: this.clickedRecur.seller,
+      start_time: this.startTimeSubmit,
+      value: this.clickedRecur.value,
+    };
+    /******************************/
+
+    this.api
+    .upload(myParams)
+    .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;
+        } catch (e) {
+          this.transactionFormStatusError = 'There was a server error, please try again later.';
+        }
+        this.transactionFormStatus = 'send_failed';
+        console.log(this.transactionFormStatus);
+      }
+    );
+  }
+
 }

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

@@ -0,0 +1,6 @@
+<td (click)="recurClick()">{{recur.seller}}</td>
+<td (click)="recurClick()">{{recur.category}}</td>
+<td (click)="recurClick()">{{recur.essential}}</td>
+<td (click)="recurClick()">{{updatedDate}}</td>
+<td (click)="recurClick()">{{recur.recurring_period}}</td>
+<td (click)="recurClick()">{{recur.value}}</td>

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

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+interface RecurData {
+  category: string;
+  essential: number;
+  id: number;
+  last_updated: string;
+  recurring_period: string;
+  seller: string;
+  start_time: string;
+  value: number;
+}
+
+@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();
+  public updatedDate: string;
+
+  ngOnInit(): void {
+    if (this.recur.last_updated) {
+      this.updatedDate = moment(this.recur.last_updated).format('llll');
+    } else {
+      this.updatedDate = moment(this.recur.start_time).format('llll');
+    }
+  }
+
+  public recurClick(): void {
+    this.onClick.emit(
+      this.recur
+    );
+  }
+}

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

@@ -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 Updated</th>
+        <th>Recurring Period</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,27 @@
+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;
+}
+
+@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();
+
+  public recurClick(event: any): void {
+    this.onClick.emit( event );
+  }
+}