added recurring purchase inputs

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

@@ -33,30 +33,69 @@
               <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">
+                    <label>Daily</label>
+                  </div>
+                  <div>
+                    <input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType">
+                    <label>Weekly</label>
+                  </div>
+                  <div>
+                    <input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType">
+                    <label>Fortnightly</label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                <div>
+                    <input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType">
+                    <label>Monthly</label>
+                  </div>
+                  <div>
+                    <input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType">
+                    <label>Monthly</label>
+                  </div>
+                  <div>
+                    <input value="quarterly" type="radio" name="quarterly" [(ngModel)]="recurringType">
+                    <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 === 0) {
           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.recurringPurchase,
         };
         break;
       case 2:
@@ -204,6 +209,7 @@ export class AddDataComponent implements OnInit {
           purchase_time     : purchaseTime,
           organisation_id   : this.organisationId,
           essential         : this.essentialPurchase,
+          recurring         : this.recurringPurchase,
         };
         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.recurringPurchase,
         };
         break;
     }