skouter/components/new/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>

<loan-details v-if="hash == '#new'"
  :estimate="estimate"
  :loans="estimate.loans"
  :sel="sel"
  
  @update:name="(name) => loans[sel].title = name"
  @del="del"
/>
<summary v-if="hash == '#new/summary'"/>

</div>
</template>

<script>
import LoanDetails from "./details.vue"
import Summary from "./summary.vue"

// The default values of a new estimate
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: 100, // Home owner's association monthly fee
		program: "",
		pud: true, // Property under development
		zip: '',
		fees: [],
		mi: {}
}

// The default loans on a new estimate
const loans = [
	Object.assign({}, example,),
	Object.assign(
		Object.assign({}, example),
		{title: "Another One",}
	),
]

// Default estimate fields
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({}, example, {fees: this.createFees()})
	)
}


function createFees() {
	return this.fees.map(f => Object.assign({}, f))
}


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

// Updates the property price for all loans and their fee amounts.
function setPrice(value) {
	this.estimate.price = value
	this.estimate.loans[this.sel].fees.forEach(fee => {
		if (fee.perc) fee.amount = (fee.perc / 100 * value).toFixed(2)
	})
}

function generate() {
	this.errors = this.validate()
	if (this.errors.length) return
	
	 fetch(`/api/estimate`,
		{
		    method: 'POST',
		    body: JSON.stringify( this.estimate ),
		    headers: {
			    "Accept": "application/json",
		        "Authorization": `Bearer ${token}`,
        	},
    	}
    )

	return errors
}
  
// Percentage values of fees always takek precedent over amounts. The conversion
// happens in setPrice()
export default {
	components: { Summary, LoanDetails },
	methods: {
		generate, createFees, del, create, setPrice
	},
	props: ['user', 'fees'],
	data() {
		return {
				estimate: estimate,
				loans: estimate.loans,
				sel: 0,
				errors: [],
				hash: window.location.hash
			}
	},
	created() {
		this.estimate.loans.forEach(l => l.fees = this.createFees())
		window.addEventListener("hashchange", () => this.hash = window.location.hash)
	}
}
</script>