From 065aa80e9854e68803018678f4dd0810f005d2e0 Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Tue, 13 Mar 2018 12:49:30 +0000
Subject: [PATCH] Amended purchase validation and submission

---
 CHANGELOG.md                                  |  3 ++
 src/app/dashboard/add-data.component.html     | 47 ++++++++-----------
 src/app/dashboard/add-data.component.ts       | 15 +++---
 .../dashboard/transaction-log.component.ts    |  1 -
 4 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f3c39a..636040e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@
 # v0.1.5
 
 * Fixed category viewing on purchase
+* Changed category view from radio buttons to full label buttons
+* Amended local validation of submit
+* Changed recurring purchase selection view
 
 # v0.1.4
 
diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index 6d57253..2f6ca73 100644
--- a/src/app/dashboard/add-data.component.html
+++ b/src/app/dashboard/add-data.component.html
@@ -46,29 +46,22 @@
             <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 class="col-md-6 btn-group-vertical">
+                  <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
+                    <input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId" (ngModelChange)="transactionFormValidate()">Daily
+                  </label>
+                  <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
+                    <input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId" (ngModelChange)="transactionFormValidate()">Weekly
+                  </label>
+                  <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
+                    <input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId" (ngModelChange)="transactionFormValidate()">Fortnightly
+                  </label>
+                  <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
+                    <input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId" (ngModelChange)="transactionFormValidate()">Monthly
+                  </label>
+                  <label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
+                    <input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId" (ngModelChange)="transactionFormValidate()">Quarterly
+                  </label>
                 </div>
               </div>
               <span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
@@ -86,7 +79,7 @@
                     <input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ leftCategoryNameList[i] }}
                   </label>
                 </div>
-                <div class="col-md-6 btn-group-vertical"> 
+                <div class="col-md-6 btn-group-vertical">
                   <label *ngFor="let category2 of rightCategoryIdList, let i=index" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
                     <input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ rightCategoryNameList[i] }}
                   </label>
@@ -105,21 +98,21 @@
           <org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
           <div *ngIf="showAddStore">
             <div class="form-group row">
-              <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>
+              <label class="col-md-3 form-control-label" for="text-input">Organisation Street Name</label>
               <div class="col-md-9">
                 <input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Enter the street name where the organisation is located at.</span>
               </div>
             </div>
             <div class="form-group row">
-              <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label>
+              <label class="col-md-3 form-control-label" for="text-input">Organisation Town</label>
               <div class="col-md-9">
                 <input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Enter the name of the town where the organisation is located at.</span>
               </div>
             </div>
             <div class="form-group row">
-              <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label>
+              <label class="col-md-3 form-control-label" for="text-input">Organisation Postcode</label>
               <div class="col-md-9">
                 <input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Enter the postcode where the organisation is located at.</span>
diff --git a/src/app/dashboard/add-data.component.ts b/src/app/dashboard/add-data.component.ts
index 99a1df4..4b7b838 100644
--- a/src/app/dashboard/add-data.component.ts
+++ b/src/app/dashboard/add-data.component.ts
@@ -177,14 +177,15 @@ export class AddDataComponent implements OnInit {
   }
 
   transactionFormValidate() {
-    if (this.submitOrg.name.length === 0 ||
-        this.submitOrg.town.length === 0 ||
-        this.amount === 0 ||
-        this.recurringPurchase &&
-        !this.recurringType) {
-          this.transactionFormInvalid = true;
-        } else {
+    if (this.submitOrg.name.length &&
+        this.amount &&
+        (this.recurringPurchase &&
+        this.recurringType ||
+        !this.recurringPurchase &&
+        !this.recurringType)) {
           this.transactionFormInvalid = false;
+        } else {
+          this.transactionFormInvalid = true;
         }
   }
 
diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts
index 92f4822..03bcd9e 100644
--- a/src/app/dashboard/transaction-log.component.ts
+++ b/src/app/dashboard/transaction-log.component.ts
@@ -53,7 +53,6 @@ export class TransactionLogComponent implements OnInit {
   }
 
   loadTransactions(logPage: number) {
-    console.log(logPage);
     this.api.transList(logPage).subscribe(
       result => {
         if (result.transactions.length > 0) {