Continue to summary view after form validation

components/new/details.vue

@@ -1,4 +1,5 @@
 <template>
+<div>
 <section class="form inputs">
 <h3>Loan</h3>
 <label>Name</label>
@@ -107,9 +108,9 @@
 @input="(e) => $emit('update:amount', e)">
 <label>Housing Expense DTI (%) - Optional</label>
 <input :value="loans[sel].housingDti"
-@input="(e) => $emit('update:houstingDti', e)">
+@input="(e) => $emit('update:housingDti', e)">
 <label>Total DTI (%) - Optional</label>
-<input :value="loans[sel].dti" @input="(e) => $emit('update:dti', strip(e))">
+<input :value="loans[sel].dti" @input="(e) => $emit('update:dti', e)">
 <label>Home Owner's Association ($/month)</label>
 <input :value="loans[sel].hoa"
 @input="(e) => { $emit('update:hoa', strip(e)) }">
@@ -162,12 +163,12 @@
 
 <section class="form radios">
 <h3>Mortgage Insurance</h3>
-
+<p>N/A</p>
 </section>
 
 <section class="form inputs">
 
-	<button @click="generate">Generate</button>
+	<button @click="() => validate() && $emit('continue')">Continue</button>
 
 	<ul class="errors">
 	<li v-for="e in errors">{{e}}</li>
@@ -175,6 +176,7 @@
 
 </section>
 
+</div>
 </template>
 
 <script>
@@ -228,19 +230,37 @@ function validate() {
 	    if (errors.length) return
 
 	    if (!l.amount) {
-	        errors.push("Loan amount cannot be zero")
+	        errors.push(`${l.title} Loan amount cannot be zero`)
 	    } else if (!l.interest) {
-	        errors.push("Interest rate cannot be zero")
+	        errors.push(`${l.title} Interest rate cannot be zero`)
 	    } else if (!l.term) {
-	        errors.push("Loan term cannot be zero")
+	        errors.push(`${l.title} Loan term cannot be zero`)
 	    }
 	})
+	
+	if (errors.length) {
+	    this.errors = errors
+	    return false
+	}
+	
+	return true
+}
+
+function generate() {
+    const errors = this.validate()
+    if (errors.length) {
+        this.errors = errors
+        return
+    }
+    
+    window.location.hash = 'new/summary'
 }
 
 export default {
 	components: { FeeDialog },
 	methods: {
-		strip, stripInt, stripLetters, stripPerc, createFee, addFee, validate
+		strip, stripInt, stripLetters, stripPerc, createFee, addFee, validate,
+		generate
 	},
 	props: ['estimate', 'loans', 'sel'],
 	// Loan updates assume the currently selected loan is being modified, and
@@ -270,6 +290,8 @@ export default {
 	    'update:hazard',
 	    'update:taxEscrow',
 	    'update:tax',
+	    
+	    'continue'
 	],
 	data() {
 		return {

components/new/new.vue

@@ -48,6 +48,7 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
   @update:hazard="(h) => loans[sel].hazard = h"
   @update:taxEscrow="(t) => loans[sel].taxEscrow = t"
   @update:tax="(t) => loans[sel].tax = t"
+  @continue="generate"
 />
 <summary v-if="hash == '#new/summary'"/>
 
@@ -183,21 +184,7 @@ function setHousingDti(e) {
 }
 
 function generate() {
-	this.errors = this.validate()
-	if (this.errors.length) return
-	
-	 fetch(`/api/estimate`,
-		{
-		    method: 'POST',
-		    body: JSON.stringify( this.estimate ),
-		    headers: {
-			    "Accept": "application/json",
-		        "Authorization": `Bearer ${token}`,
-        	},
-    	}
-    )
-
-	return errors
+	window.location.hash = 'new/summary'
 }
   
 // Percentage values of fees always takek precedent over amounts. The conversion