skouter/components/new.vue

<template>
<div id="new" class="page">

<h2>New Loan</h2>

<section class="loans-list">

<h3 v-for="(l, indx) in loans"
:class="sel == indx ? 'sel' : ''"
@click="() => sel = indx"
>
{{l.title}}
</h3>

<div class="add">
<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>

<section class="form inputs">
<h3>Loan</h3>
<label>Name</label>
<input :value="loans[sel].title"
@input="(e) => loans[sel].title = stripLetters(e)">
<button @click="del">Delete</button>
</section>

<section class="form inputs">

<div class="hint">
	<img class="icon" src="/assets/image/icon/question-circle.svg" alt="">
	<div class="tooltip">
		<p>Assumes borrower is not self employed, not bankrupt in the past 7
		years, a citizen, and intends to occupy the property.</p>
	</div>
</div>

<h3>Borrower</h3>
<label>Number of Borrowers</label>
<input :value="estimate.borrowers"
@input="(e) => estimate.borrowers = stripInt(e)">
<label>Credit Score</label>
<input :value="estimate.creditScore"
@input="(e) => estimate.creditScore = stripInt(e)">
<label>Monthly Income ($)</label>
<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="estimate.transaction"
@input="e => estimate.transaction = 0"
selected="estimate.transaction == 0">
<label>Purchase</label>
<input type="radio" name="transaction_type" value="estimate.refinance"
@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="estimate.price" @input="setPrice">
<label>Type</label>
<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>
	<option value="hirise">Hi-rise (over 4 stories)</option>
</select>
</section>

<section class="radios form">
<h3>Loan Type</h3>
<input type="radio" name="loan_type" value="conv" v-model="loans[sel].type"
>
<label>Conventional</label>
<input type="radio" name="loan_type" value="fha" v-model="loans[sel].type">
<label>FHA</label>
<input type="radio" name="loan_type" value="va" v-model="loans[sel].type">
<label>VA</label>
<input type="radio" name="loan_type" value="usda" v-model="loans[sel].type">
<label>USDA</label>
</section>

<section class="form inputs">
<h3>Loan Details</h3>
<label>Loan Term (years)</label>
<input :value="loans[sel].term"
@input="(e) => loans[sel].term = strip(e)">

<label>Loan Program</label>
<select id="" name="" v-model="loans[sel].program">
	<option value="none">None</option>
</select>

<label>Loan to Value (%)</label>
<input :value="loans[sel].ltv" @input="setLtv">
<label>Loan Amount ($)</label>
<input :value="loans[sel].amount"
@input="setAmount">
<label>Housing Expense DTI (%) - Optional</label>
<input :value="loans[sel].housingDti" @input="setHousingDti">
<label>Total DTI (%) - Optional</label>
<input :value="loans[sel].dti" @input="setDti">
<label>Home Owner's Association ($/month)</label>
<input :value="loans[sel].hoa"
@input="(e) => { loans[sel].hoa = strip(e) }">

<label>Interest Rate (%)</label>
<input :value="loans[sel].interest"
@input="(e) => { loans[sel].interest = stripPerc(e) }">
<label>Days of Interest</label>
<input :value="loans[sel].interestDays"
@input="(e) => {loans[sel].interestDays = stripInt(e)}">

<label>Hazard Insurance Escrow (months)</label>
<input :value="loans[sel].hazardEscrow"
@input="(e) => {loans[sel].hazardEscrow = stripInt(e)}">
<label>Hazard Insurance ($/month)</label>
<input :value="loans[sel].hazard"
@input="(e) => {loans[sel].hazard = strip(e)}">

<label>Real Estate Tax Escrow (months)</label>
<input :value="loans[sel].taxEscrow"
@input="e => {loans[sel].taxEscrow = stripInt(e)}">
<label>Real Estate Tax ($/month)</label>
<input :value="loans[sel].tax"
@input="(e) => {loans[sel].tax = strip(e)}">
</section>

<section class="form radios">
<h3>Mortgage Insurance</h3>
<input type="radio" name="transaction_type" value="transaction"
@input="e => estimate.transaction = 0"
selected="estimate.transaction == 0">
<label>National MI</label>
<input type="radio" name="transaction_type" value="refinance"
@input="e => estimate.transaction = 1"
selected="estimate.transaction == 1">
<label>MGIC</label>
</section>

</div>
</template>

<script>
const example = {
		title: "Example",
		type: "",
		term: 0,
		ltv: 0, // Loan to home value ratio
		dti: 0,
		housingDti: 0,
		amount: 0,
		interest: 0,
		interestDays: 0,
		hazard: 0, // Hazard insurance monthly payment
		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
		program: "",
		pud: true, // Property under development
		zip: ''
}

const loans = [
	Object.assign({}, example),
	Object.assign(Object.assign({}, example), {title: "Another One"})
]

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.
// It also preserves current valid entry (.)
function strip(e) {
	let valid = e.target.value.match(/\d+\.?\d?\d?/)?.[0] ?? ""
	e.target.value = valid
	return Number(valid || 0)
}

function stripInt(e) {
	let value = parseInt(e.target.value.replace(/\D/g, '') || 0)
	e.target.value = value
	return value
}

function stripPerc(e) {
	let num = strip(e)

	if (num > 100) {
		num = 100
		e.target.value = num
	}

	if (num < 0) {
		num = 0
		e.target.value = num
	}

	return num
}

function stripLetters(e) {
	let value = (e.target.value.replace(/[^\w\s]/g, '').slice(0, 20) || '')
	e.target.value = value
	return value
}

function del() {
	if (this.loans.length > 1) {
		let x = this.sel
		this.sel = 0
		this.loans.splice(x, 1)
	}
}

// Changes loan.ltv's <input> and data() values, then syncs with data.amount
function setLtv(e) {
	let ltv = strip(e)
	let loan = this.loans[this.sel]
	if (!this.estimate.price) return

	if (ltv > 100) ltv = 100
	if (ltv < 0) ltv = 0

	loan.ltv = ltv
	loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
}

// Changes loan.amount's <input> and data() values, then syncs with data.ltv
function setAmount(e) {
	let amount = strip(e)
	let loan = this.loans[this.sel]
	if (!this.estimate.price) return

	if (amount > loan.price) amount = loan.price
	if (amount < 0) amount = 0

	loan.amount = amount
	loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
}

// Updates the property price for all loans
function setPrice(e) {
	let value = strip(e)
	this.estimate.price = value
}

function setDti(e) {
	let dti = strip(e)
	let loan = this.loans[this.sel]
	if (!loan.price) return

	if (dti > 100) dti = 100
	if (dti < 0) dti = 0

	e.target.value = dti
	loan.dti = dti
}

function setHousingDti(e) {
	let housingDti = strip(e)
	let loan = this.loans[this.sel]
	if (!loan.price) return

	if (housingDti > 100) housingDti = 100
	if (housingDti < 0) housingDti = 0

	e.target.value = housingDti
	loan.housingDti = housingDti
}

export default {
	methods: {
		setPrice, setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
		stripLetters, stripPerc, del, create
	},
	props: ['user'],
	data() {
		return {
				estimate: estimate,
				loans: estimate.loans,
				sel: 0,
			}
	}
}
</script>