skouter/components/new/details.vue

<template>
<section class="form inputs">
<h3>Loan</h3>
<label>Name</label>
<input :value="loans[sel].title" required
@input="(e) => $emit('update:name', stripLetters(e))">
<button @click="() => $emit('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) => $emit('update:borrowers', stripInt(e))">
<label>Credit Score</label>
<input :value="estimate.creditScore"
@input="(e) => $emit('update:creditScore', stripInt(e))">
<label>Monthly Income ($)</label>
<input :value="estimate.mIncome"
@input="(e) => $emit('update:mIncome', strip(e))">

</section>

<section class="radios form">
<h3>Transaction Type</h3>
<input selected type="radio" name="transaction_type" value="0"
:value="estimate.transaction"
@input="() => $emit('update:transaction', 0)"
>
<label>Purchase</label>
<input type="radio" name="transaction_type" value="1"
:value="estimate.transaction"
@input="() => $emit('update:transaction', 1)"
>
<label>Refinance</label>
</section>

<section class="form inputs">
<h3>Property Details</h3>
<label>Price ($)</label>
<input :value="estimate.price" @input="(e) => $emit('update:price', strip(e))">
<label>Type</label>
<select id="" name=""
    :value="estimate.property"
    @change="(e) => $emit('update:property', e.target.value)">
	<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"
    @change="(e) => $emit('update:loanType', e.target.value)"
>
<label>Conventional</label>
<input type="radio"
    name="loan_type"
    value="fha"
    :checked="loans[sel].type == 'fha'"
    @change="(e) => $emit('update:loanType', e.target.value)">
<label>FHA</label>
<input type="radio"
    name="loan_type"
    value="va"
    :checked="loans[sel].type == 'va'"
    @change="(e) => $emit('update:loanType', e.target.value)">
<label>VA</label>
<input type="radio"
    name="loan_type"
    value="usda"
    :checked="loans[sel].type == 'usda'"
    @change="(e) => $emit('update:loanType', e.target.value)">
<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 inputs">
<h3>Fees</h3>
<div v-for="(fee, indx) in estimate.loans[sel].fees"
:key="fee.name + indx" class="fee"
>
	<label>
	${{fee.amount}}{{ fee.perc ? ` ${fee.perc}%` : ''}} - {{fee.name}}<br>
	{{fee.type}}
	</label>
	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
	@click="() => estimate.loans[sel].fees.splice(indx, 1)">
</div>
<button @click="resetFees">Reset</button>
<button @click="createFee">New</button>
</section>

<fee-dialog v-if="newFee"
	:heading="'New Fee'"
	:initial="{}"
	:price="estimate.price"
	@close="() => newFee = null"
	@save="addFee"
/>

<section class="form radios">
<h3>Mortgage Insurance</h3>

</section>

<section class="form inputs">

	<button @click="generate">Generate</button>

	<ul class="errors">
	<li v-for="e in errors">{{e}}</li>
	</ul>

</section>

</template>

<script>
import FeeDialog from "../fee-dialog.vue"
import { stripLetters, strip, stripInt, stripPerc } from "../../helpers.js" 

const newFee = {
	name: '', type: '', amount: 0, perc: 0
 }

// Setup this.newFee for the creation dialog
function createFee() {
	this.newFee = Object.assign({}, newFee)
}

// If valid, add the current this.newFee to the array of fees and reset
// this.newFee to null
function addFee(fee, isDebit) {

	if (!isDebit) fee.amount = fee.amount * -1
	this.estimate.loans[this.sel].fees.push(fee)
	this.newFee = null
}


// 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)
}

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
}

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.")
	}
	
	estimate.loans.forEach(l => {
	    if (errors.length) return

	    if (!l.amount) {
	        errors.push("Loan amount cannot be zero")
	    } else if (!l.interest) {
	        errors.push("Interest rate cannot be zero")
	    } else if (!l.term) {
	        errors.push("Loan term cannot be zero")
	    }
	})
}

export default {
	components: { FeeDialog },
	methods: {
		setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
		stripLetters, stripPerc, createFee, addFee, validate
	},
	props: ['estimate', 'loans', 'sel'],
	// Loan updates assume the currently selected loan is being modified, and
	// $emit has no need to clarify.
	emits: [
	    'del',
	    'update:name',
	    'update:borrowers',
	    'update:creditScore',
	    'update:mIncome',
	    'update:transaction', 
	    'update:price',
	    'update:propertyType',
	    
	    'update:loanType',
	    'update:loanTerm',
	    'update:loanProgram',
	    'update:ltv',
	],
	data() {
		return {
				newFee: null,
				errors: [],
				hash: window.location.hash
			}
	},
	created() {
	}
}
</script>