Check and display common errors

assets/main.css

@@ -5,6 +5,7 @@
 	--text-light: #1D262E;
 	--text-lighter: #28323B;
 	--text-lightest: #A1A7AD;
+	--text-important: #922724;
 	--outline: #DFE3E8;
 	--brand: #0f6b4b;
 	--shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
@@ -63,6 +64,12 @@ menu.sidebar {
 	gap: 20px;
 }
 
+div.errors {
+	color: var(--text-important);
+	margin: 20px 0;
+	min-height: 40px 0;
+}
+
 menu.sidebar a {
 	color: var(--text);
 	display: flex;
@@ -190,6 +197,8 @@ section.loans-list {
 .loans-list h3 {
 	cursor: pointer;
 	width: fit-content;
+	min-height: 20px;
+	min-width: 20px;
 }
 
 .loans-list .add svg {

components/new.vue

@@ -23,7 +23,7 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
 <section class="form inputs">
 <h3>Loan</h3>
 <label>Name</label>
-<input :value="loans[sel].title"
+<input :value="loans[sel].title" required
 @input="(e) => loans[sel].title = stripLetters(e)">
 <button @click="del">Delete</button>
 </section>
@@ -53,13 +53,11 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
 
 <section class="radios form">
 <h3>Transaction Type</h3>
-<input type="radio" name="transaction_type" value="estimate.transaction"
-@input="e => estimate.transaction = 0"
-selected="estimate.transaction == 0">
+<input selected type="radio" name="transaction_type" value="0"
+v-model="estimate.transaction" >
 <label>Purchase</label>
-<input type="radio" name="transaction_type" value="estimate.refinance"
-@input="e => estimate.transaction = 1"
-selected="estimate.transaction == 1">
+<input type="radio" name="transaction_type" value="1"
+v-model="estimate.transaction">
 <label>Refinance</label>
 </section>
 
@@ -190,7 +188,13 @@ selected="estimate.transaction == 1">
 </section>
 
 <section class="form inputs">
-	<button>Generate</button>
+
+	<button @click="generate">Generate</button>
+
+	<div class="errors">
+	<span v-for="e in errors">{{e}}</span>
+	</div>
+
 </section>
 
 </div>
@@ -199,6 +203,7 @@ selected="estimate.transaction == 1">
 <script>
 import Dialog from "./dialog.vue"
 
+// The default fees of a new loan
 const fees = [
 	{ name: 'Processing fee', type: 'Lender Fees', amount: 500 },
 	{ name: 'Underwriting fee', type: 'Lender Fees', amount: 500 },
@@ -212,6 +217,7 @@ const fees = [
 	{ name: 'State Tax', type: 'Government', amount: 2411.00 },
 ]
 
+// The default values of a new estimate
 const example = {
 		title: "Example",
 		type: "",
@@ -226,13 +232,14 @@ const example = {
 		hazardEscrow: 0, // Hazard insurance escrow in months (0 is none)
 		tax: 0, // Real Estate taxes monthly payment
 		taxEscrow: 0, // Months to escrow (0 is none)
-		hoa: 0, // Home owner's association monthly fee
+		hoa: 100, // Home owner's association monthly fee
 		program: "",
 		pud: true, // Property under development
 		zip: '',
 		fees: fees,
 }
 
+// The default loans on a new estimate
 const loans = [
 	Object.assign({}, example, {fees: createFees()}),
 	Object.assign(
@@ -241,6 +248,7 @@ const loans = [
 	),
 ]
 
+// Default estimate fields
 const estimate = {
 	property: "",
 	transaction: 0,
@@ -258,7 +266,7 @@ const newFee = {
 // Clone loan from initial example as a new loan
 function create() {
 	this.estimate.loans.push(
-		Object.assign({}, loans[0], {fees: createFees()})
+		Object.assign({}, example, {fees: createFees()})
 	)
 }
 
@@ -397,12 +405,43 @@ function setHousingDti(e) {
 	loan.housingDti = housingDti
 }
 
+function generate() {
+	this.errors = this.validate()
+}
+
+function validate() {
+	let errors = []
+	const estimate = this.estimate
+
+	// Alternative attribute names for error messages
+	const names = {
+		term: "loan term",
+		ltv: "loan to value",
+		hazard: "hazard insurance",
+		hazardEscrow: "hazard insurance escrow",
+	}
+
+	if (!estimate.property) {
+		errors.push("Missing property type.")
+	} else if (!estimate.price) {
+		errors.push("Missing property price.")
+	} else if (!estimate.borrowers) {
+		errors.push("Missing number of borrowers.")
+	} else if (!estimate.creditScore) {
+		errors.push("Missing credit score.")
+	} else if (!estimate.mIncome) {
+		errors.push("Missing monthly income.")
+	}
+
+	return errors
+}
+
 export default {
 	components: { Dialog },
 	methods: {
 		setPrice, setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
 		stripLetters, stripPerc, del, create, createFees, createFee, resetFees,
-		addFee
+		addFee, generate, validate
 	},
 	computed: {
 		validFee,
@@ -414,6 +453,7 @@ export default {
 				loans: estimate.loans,
 				sel: 0,
 				newFee: null,
+				errors: [],
 			}
 	},
 }