Merge pull request #67 from Pear-Trading/finn/recurring

fixed views and added recurring purchase input

package-lock.json

@@ -498,7 +498,7 @@
       "resolved": "https://registry.npmjs.org/@types/moment/-/moment-2.13.0.tgz",
       "integrity": "sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=",
       "requires": {
-        "moment": "2.19.2"
+        "moment": "2.21.0"
       }
     },
     "@types/node": {
@@ -1020,11 +1020,11 @@
     },
     "block-stream": {
       "version": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
       "dev": true,
       "optional": true,
       "requires": {
-        "inherits": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
+        "inherits": "2.0.3"
       }
     },
     "blocking-proxy": {
@@ -4837,7 +4837,8 @@
       }
     },
     "inherits": {
-      "version": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
       "dev": true,
       "optional": true
@@ -6113,9 +6114,9 @@
       }
     },
     "moment": {
-      "version": "2.19.2",
+      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.2.tgz",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.21.0.tgz",
-      "integrity": "sha512-Rf6jiHPEfxp9+dlzxPTmRHbvoFXsh2L/U8hOupUMpnuecHQmI6cF6lUbJl3QqKPko1u6ujO+FxtcajLVfLpAtA=="
+      "integrity": "sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -6184,7 +6185,7 @@
           "integrity": "sha1-MI+aSwv+1aFUwU9d6x2UcNIqvnE=",
           "requires": {
             "chartjs-color": "2.1.0",
-            "moment": "2.19.2"
+            "moment": "2.21.0"
           }
         }
       }

package.json

@@ -32,7 +32,7 @@
     "chart.js": "2.7.1",
     "core-js": "2.5.1",
     "js-marker-clusterer": "1.0.0",
-    "moment": "^2.19.2",
+    "moment": "^2.21.0",
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "2.0.0-beta.8",

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

@@ -33,30 +33,65 @@
               <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">Recurring Purchase</label>
+            <div class="col-md-9">
+              <div class="input-group">
+                <input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
+              </div>
+              <span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
+            </div>
+          </div>
+          <div *ngIf="recurringPurchase" 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="row">
+                <div class="col-md-6">
+                  <div>
+                    <input value="daily" type="radio" name="daily" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
+                    <label>Daily</label>
+                  </div>
+                  <div>
+                    <input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
+                    <label>Weekly</label>
+                  </div>
+                  <div>
+                    <input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
+                    <label>Fortnightly</label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                <div>
+                    <input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
+                    <label>Monthly</label>
+                  </div>
+                  <div>
+                    <input value="quarterly" type="radio" name="quarterly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
+                    <label>Quarterly</label>
+                  </div>
+                </div>
+              </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="row">
                 <div class="col-md-6">
                   <div>
-                    <label>
                     <input value="" type="radio" name="radios" [(ngModel)]="categoryId">
-                      Uncategorised
+                    <label>Uncategorised</label>
-                    </label>
                   </div>
                   <div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
-                    <label>
                     <input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
-                      {{ categoryNameList[i] }}
+                    <label>{{ categoryNameList[i] }}</label>
-                    </label>
                   </div>
                 </div>
                 <div class="col-md-6">
                   <div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
-                    <label>
                     <input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
-                      {{ categoryNameList[category2 - 1] }}
+                    <label>{{ categoryNameList[category2 - 1] }}</label>
-                    </label>
                   </div>
                 </div>
               </div>

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

@@ -33,6 +33,8 @@ export class AddDataComponent implements OnInit {
   // Assumes Groceries is 1st category
   categoryId: number = 1;
   essentialPurchase = false;
+  recurringPurchase = false;
+  recurringType: string;
   transactionAdditionType = 1;
   storeList = [];
   showAddStore = false;
@@ -174,7 +176,9 @@ export class AddDataComponent implements OnInit {
   transactionFormValidate() {
     if (this.submitOrg.name.length === 0 ||
         this.submitOrg.town.length === 0 ||
-        this.amount === 0 ) {
+        this.amount === 0 ||
+        this.recurringPurchase &&
+        !this.recurringType) {
           this.transactionFormInvalid = true;
         } else {
           this.transactionFormInvalid = false;
@@ -195,6 +199,7 @@ export class AddDataComponent implements OnInit {
           organisation_id   : this.organisationId,
           category          : this.categoryId,
           essential         : this.essentialPurchase,
+          recurring         : this.recurringType,
         };
         break;
       case 2:
@@ -204,6 +209,7 @@ export class AddDataComponent implements OnInit {
           purchase_time     : purchaseTime,
           organisation_id   : this.organisationId,
           essential         : this.essentialPurchase,
+          recurring         : this.recurringType,
         };
         break;
       case 3:
@@ -216,6 +222,7 @@ export class AddDataComponent implements OnInit {
           town              : this.submitOrg.town,
           postcode          : this.submitOrg.postcode,
           essential         : this.essentialPurchase,
+          recurring         : this.recurringType,
         };
         break;
     }
@@ -266,6 +273,9 @@ export class AddDataComponent implements OnInit {
     this.amount = null;
     this.transactionFormInvalid = true;
     this.showAddStore = false;
+    this.essentialPurchase = false;
+    this.recurringPurchase = false;
+    this.recurringType = null;
   }
 
   onSubmitPayroll() {

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

@@ -9,8 +9,8 @@
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
-            <ul class="horizontal-bars type-2">
+            <ul *ngIf="weekList1" class="horizontal-bars type-2">
-              <li *ngIf="weekList1 !== undefined">
+              <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>
@@ -32,7 +32,7 @@
                   </div>
                 </div>
               </li>
-              <div *ngIf="weekList1 !== undefined">
+              <div *ngIf="weekList1">
                 <li *ngIf="weekList1.length > categoryLimit1 && disableCategoryButton1 == false" class="divider text-center">
                   <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore1()"><i class="icon-options"></i></button>
                 </li>
@@ -51,8 +51,8 @@
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
-            <ul class="horizontal-bars type-2">
+            <ul *ngIf="weekList2" class="horizontal-bars type-2">
-              <li *ngIf="weekList2 !== undefined">
+              <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>
@@ -74,7 +74,7 @@
                   </div>
                 </div>
               </li>
-              <div *ngIf="!weekList2 == null">
+              <div *ngIf="weekList2">
                 <li *ngIf="weekList2.length > categoryLimit2 && disableCategoryButtonFirst == false" class="divider text-center">
                   <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore2()"><i class="icon-options"></i></button>
                 </li>
@@ -93,8 +93,8 @@
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
-            <ul class="horizontal-bars type-2">
+            <ul *ngIf="weekList3" class="horizontal-bars type-2">
-              <li *ngIf="weekList3 !== undefined">
+              <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>
@@ -116,7 +116,7 @@
                   </div>
                 </div>
               </li>
-              <div *ngIf="weekList3 !== undefined">
+              <div *ngIf="weekList3">
                 <li *ngIf="weekList3.length > categoryLimit3 && disableCategoryButtonFirst == false" class="divider text-center">
                   <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore3()"><i class="icon-options"></i></button>
                 </li>
@@ -135,8 +135,8 @@
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
-            <ul class="horizontal-bars type-2">
+            <ul *ngIf="weekList4" class="horizontal-bars type-2">
-              <li *ngIf="weekList4 !== undefined">
+              <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>
@@ -158,7 +158,7 @@
                   </div>
                 </div>
               </li>
-              <div *ngIf="!weekList4 == null">
+              <div *ngIf="weekList4">
                 <li *ngIf="weekList4.length > categoryLimit4 && disableCategoryButtonFirst == false" class="divider text-center">
                   <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore4()"><i class="icon-options"></i></button>
                 </li>

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

@@ -94,7 +94,6 @@ export class CategoryMonthComponent implements OnInit {
     this.weekList4 = prop(data.data.categories, this.myWeek4);
     this.getMaxValue(this.weekList1, this.weekList2, this.weekList3, this.weekList4);
     this.weekEssential1 = prop(data.data.essentials, this.myWeek1);
-    console.log(this.weekEssential1);
     this.weekEssential2 = prop(data.data.essentials, this.myWeek2);
     this.weekEssential3 = prop(data.data.essentials, this.myWeek3);
     this.weekEssential4 = prop(data.data.essentials, this.myWeek4);