From ff85abd4015c108cfc36b19bf4b6a270f2ee7c5d Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Sat, 5 Nov 2022 22:38:20 -0400
Subject: [PATCH] Seperate general and loan specific properties
---
assets/main.css | 11 ++--
components/new.vue | 137 +++++++++++++++++++++++----------------------
2 files changed, 76 insertions(+), 72 deletions(-)
diff --git a/assets/main.css b/assets/main.css
index f66c311..83e09ed 100644
--- a/assets/main.css
+++ b/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;
diff --git a/components/new.vue b/components/new.vue
index 19a6ee6..2acba3b 100644
--- a/components/new.vue
+++ b/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,
}
}
}