Seperate general and loan specific properties

assets/main.css

@@ -22,6 +22,12 @@ label {
 	font-size: 16px;
 }
 
+input, select {
+	border: 2px solid var(--outline);
+	border-radius: 3px;
+}
+
+
 section.form label {
 	display: flex;
 	align-items: center;
@@ -191,11 +197,6 @@ section.loans-list {
 	color: black;
 }
 
-section.form input, section.form select {
-	border: 2px solid var(--outline);
-	border-radius: 3px;
-}
-
 section.radios {
 	display: grid;
 	grid-template-columns: 50px 1fr;

components/new.vue

@@ -13,10 +13,10 @@
 </h3>
 
 <div class="add">
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
-0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0
-0 1 8 4z"/> </svg>
+<svg @click="create"
+xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
+0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> </svg>
 </div>
 </section>
 
@@ -40,35 +40,35 @@ fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
 
 <h3>Borrower</h3>
 <label>Number of Borrowers</label>
-<input :value="loans[sel].borrowers"
-@input="(e) => loans.forEach(l => l.borrowers = strip(e))">
+<input :value="estimate.borrowers"
+@input="(e) => estimate.borrowers = strip(e)">
 <label>Credit Score</label>
-<input :value="loans[sel].creditScore"
-@input="(e) => loans.forEach(l => l.creditScore = strip(e))">
+<input :value="estimate.creditScore"
+@input="(e) => estimate.creditScore = strip(e)">
 <label>Monthly Income ($)</label>
-<input :value="loans[sel].mIncome"
-@input="(e) => loans.forEach(l => l.mIncome = strip(e))">
+<input :value="estimate.mIncome"
+@input="(e) => estimate.mIncome = strip(e)">
 
 </section>
 
 <section class="radios form">
 <h3>Transaction Type</h3>
 <input type="radio" name="transaction_type" value="transaction"
-@input="e => loans[sel].transaction = 0"
-selected="loans[sel].transaction == 0">
+@input="e => estimate.transaction = 0"
+selected="estimate.transaction == 0">
 <label>Purchase</label>
 <input type="radio" name="transaction_type" value="refinance"
-@input="e => loans[sel].transaction = 1"
-selected="loans[sel].transaction == 1">
+@input="e => estimate.transaction = 1"
+selected="estimate.transaction == 1">
 <label>Refinance</label>
 </section>
 
 <section class="form inputs">
 <h3>Property Details</h3>
 <label>Price ($)</label>
-<input :value="loans[sel].price" @input="setPrice">
+<input :value="estimate.price" @input="setPrice">
 <label>Type</label>
-<select id="" name="" v-model="loans[sel].property">
+<select id="" name="" v-model="estimate.property">
 	<option value="attched">Single Family Attached</option>
 	<option value="detached">Single Family Detached</option>
 	<option value="lorise">Lo-rise (4 stories or less)</option>
@@ -115,9 +115,53 @@ selected="loans[sel].transaction == 1">
 </template>
 
 <script>
+const loans = [
+	{
+		title: "Loan Example",
+		type: "",
+		term: 0,
+		ltv: 0,
+		dti: 0,
+		housingDti: 0,
+		amount: 0,
+		program: "",
+		pud: false,
+		zip: ''
+	},
+	{
+		title: "Another One",
+		type: "",
+		term: 0,
+		ltv: 0,
+		dti: 0,
+		housingDti: 0,
+		amount: 0,
+		program: "",
+		pud: true,
+		zip: ''
+	}
+]
+
+const estimate = {
+	property: "",
+	transaction: 0,
+	price: 0,
+	borrowers: 0,
+	creditScore: 0,
+	mIncome: 0,
+	loans: loans
+}
+
+// Clone loan from initial example as a new loan
+function create() {
+	this.estimate.loans.push(Object.assign({}, loans[0]))
+}
+
 // Strips non-digits from an input box event and returns it's rounded integer
 function strip(e) {
-	return parseInt(e.target.value.replace(/\D/g, '') || 0)
+	let value = parseInt(e.target.value.replace(/\D/g, '') || 0)
+	e.target.value = value
+	return value
 }
 
 function stripLetters(e) {
@@ -137,38 +181,33 @@ function del() {
 function setLtv(e) {
 	let ltv = strip(e)
 	let loan = this.loans[this.sel]
-	if (!loan.price) return
+	if (!this.estimate.price) return
 
 	if (ltv > 100) ltv = 100
 	if (ltv < 0) ltv = 0
 
 	loan.ltv = ltv
 	e.target.value = ltv
-	loan.amount = Math.round(ltv / 100 * loan.price)
+	loan.amount = Math.round(ltv / 100 * this.estimate.price)
 }
 
 function setAmount(e) {
 	let amount = strip(e)
 	let loan = this.loans[this.sel]
-	if (!loan.price) return
+	if (!this.estimate.price) return
 
 	if (amount > loan.price) amount = loan.price
 	if (amount < 0) amount = 0
 
 	loan.amount = amount
 	e.target.value = amount
-	loan.ltv = Math.round(amount / loan.price * 100)
+	loan.ltv = Math.round(amount / this.estimate.price * 100)
 }
 
 // Updates the property price for all loans
 function setPrice(e) {
 	let value = strip(e)
-
-	this.loans.forEach(l => {
-		l.price = value
-		l.amount = Math.round(l.ltv / 100 * value)
-	})
-
+	this.estimate.price = value
 	e.target.value = value
 }
 
@@ -196,53 +235,17 @@ function setHousingDti(e) {
 	loan.housingDti = housingDti
 }
 
-const loans = [
-	{
-		title: "Loan Example",
-		property: "",
-		transaction: 0,
-		type: "",
-		price: 0,
-		term: 0,
-		ltv: 0,
-		borrowers: 0,
-		creditScore: 0,
-		mIncome: 0,
-		dti: 0,
-		housingDti: 0,
-		amount: 0,
-		program: "",
-		pud: false,
-		zip: ''
-	},
-	{
-		title: "Another One",
-		property: "",
-		transaction: 0,
-		type: "",
-		price: 0,
-		term: 0,
-		ltv: 0,
-		borrowers: 0,
-		creditScore: 0,
-		mIncome: 0,
-		dti: 0,
-		housingDti: 0,
-		program: "",
-		pud: true,
-		zip: ''
-	}
-]
-
 export default {
 	methods: {
 		setPrice, setLtv, setAmount, setDti, setHousingDti,
-		strip, stripLetters, del
+		strip, stripLetters, del, create
 	},
 	props: ['user'],
 	data() {
 		return {
-				loans: loans, sel: 0, loan: loans[0],
+				estimate: estimate,
+				loans: estimate.loans,
+				sel: 0,
 			}
 	}
 }