Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

329 line
8.4 KiB

  1. <template>
  2. <div>
  3. <section class="form inputs">
  4. <h3>Loan</h3>
  5. <label>Name</label>
  6. <input :value="loan.title" required
  7. @input="(e) => $emit('update:name', stripLetters(e))">
  8. <button @click="() => $emit('del')">Delete</button>
  9. </section>
  10. <section class="form inputs">
  11. <div class="hint">
  12. <img class="icon" src="/assets/image/icon/question-circle.svg" alt="">
  13. <div class="tooltip">
  14. <p>Assumes borrower is not self employed, not bankrupt in the past 7
  15. years, a citizen, and intends to occupy the property.</p>
  16. </div>
  17. </div>
  18. <h3>Borrower</h3>
  19. <label>Number of Borrowers</label>
  20. <input :value="estimate.borrowers"
  21. @input="(e) => $emit('update:borrowers', stripInt(e))">
  22. <label>Credit Score</label>
  23. <input :value="estimate.creditScore"
  24. @input="(e) => $emit('update:creditScore', stripInt(e))">
  25. <label>Monthly Income ($)</label>
  26. <input :value="estimate.mIncome"
  27. @input="(e) => $emit('update:mIncome', strip(e))">
  28. </section>
  29. <section class="radios form">
  30. <h3>Transaction Type</h3>
  31. <input selected type="radio" name="transaction_type" value="0"
  32. :value="estimate.transaction"
  33. @input="() => $emit('update:transaction', 0)"
  34. >
  35. <label>Purchase</label>
  36. <input type="radio" name="transaction_type" value="1"
  37. :value="estimate.transaction"
  38. @input="() => $emit('update:transaction', 1)"
  39. >
  40. <label>Refinance</label>
  41. </section>
  42. <section class="form inputs">
  43. <h3>Property Details</h3>
  44. <label>Price ($)</label>
  45. <input :value="estimate.price" @input="(e) => $emit('update:price', strip(e))">
  46. <label>Type</label>
  47. <select id="" name=""
  48. :value="estimate.property"
  49. @change="(e) => $emit('update:property', e.target.value)">
  50. <option value="attched">Single Family Attached</option>
  51. <option value="detached">Single Family Detached</option>
  52. <option value="lorise">Lo-rise (4 stories or less)</option>
  53. <option value="hirise">Hi-rise (over 4 stories)</option>
  54. </select>
  55. </section>
  56. <section class="radios form">
  57. <h3>Loan Type</h3>
  58. <input type="radio"
  59. name="loan_type"
  60. value="conv"
  61. @change="(e) => $emit('update:loanType', e.target.value)"
  62. >
  63. <label>Conventional</label>
  64. <input type="radio"
  65. name="loan_type"
  66. value="fha"
  67. :checked="loan.type == 'fha'"
  68. @change="(e) => $emit('update:loanType', e.target.value)">
  69. <label>FHA</label>
  70. <input type="radio"
  71. name="loan_type"
  72. value="va"
  73. :checked="loan.type == 'va'"
  74. @change="(e) => $emit('update:loanType', e.target.value)">
  75. <label>VA</label>
  76. <input type="radio"
  77. name="loan_type"
  78. value="usda"
  79. :checked="loan.type == 'usda'"
  80. @change="(e) => $emit('update:loanType', e.target.value)">
  81. <label>USDA</label>
  82. </section>
  83. <section class="form inputs">
  84. <h3>Loan Details</h3>
  85. <label>Loan Term (years)</label>
  86. <input :value="loan.term"
  87. @input="(e) => $emit('update:term', stripInt(e))">
  88. <label>Loan Program</label>
  89. <select id="" name=""
  90. :value="loan.program"
  91. @change="(e) => $emit('update:program', e.target.value)">
  92. <option value="none">None</option>
  93. </select>
  94. <label>Loan to Value (%)</label>
  95. <input :value="loan.ltv" @input="(e) => $emit('update:ltv', e)">
  96. <label>Loan Amount ($)</label>
  97. <input :value="loan.amount"
  98. @input="(e) => $emit('update:amount', e)">
  99. <label>Housing Expense DTI (%) - Optional</label>
  100. <input :value="loan.housingDti"
  101. @input="(e) => $emit('update:housingDti', e)">
  102. <label>Total DTI (%) - Optional</label>
  103. <input :value="loan.dti" @input="(e) => $emit('update:dti', e)">
  104. <label>Home Owner's Association ($/month)</label>
  105. <input :value="loan.hoa"
  106. @input="(e) => { $emit('update:hoa', strip(e)) }">
  107. <label>Interest Rate (%)</label>
  108. <input :value="loan.interest"
  109. @input="(e) => { $emit('update:interest', stripPerc(e)) }">
  110. <label>Days of Interest</label>
  111. <input :value="loan.interestDays"
  112. @input="(e) => $emit('update:interestDays', stripInt(e))">
  113. <label>Hazard Insurance Escrow (months)</label>
  114. <input :value="loan.hazardEscrow"
  115. @input="(e) => { $emit('update:hazardEscrow', stripInt(e)) }">
  116. <label>Hazard Insurance ($/month)</label>
  117. <input :value="loan.hazard"
  118. @input="(e) => $emit('update:hazard', strip(e))">
  119. <label>Real Estate Tax Escrow (months)</label>
  120. <input :value="loan.taxEscrow"
  121. @input="e => $emit('update:taxEscrow', stripInt(e))">
  122. <label>Real Estate Tax ($/month)</label>
  123. <input :value="loan.tax"
  124. @input="(e) => $emit('update:tax', strip(e))">
  125. </section>
  126. <section class="form inputs">
  127. <h3>Fees</h3>
  128. <div v-for="(fee, indx) in loan.fees"
  129. :key="fee.name + indx" class="fee"
  130. >
  131. <label>
  132. ${{fee.amount}}{{ fee.perc ? ` ${fee.perc}%` : ''}} - {{fee.name}}<br>
  133. {{fee.type}}
  134. </label>
  135. <img width="21" height="21" src="/assets/image/icon/x-red.svg"
  136. @click="() => loan.fees.splice(indx, 1)">
  137. </div>
  138. <button @click="resetFees">Reset</button>
  139. <button @click="createFee">New</button>
  140. </section>
  141. <fee-dialog v-if="newFee"
  142. :heading="'New Fee'"
  143. :initial="{}"
  144. :price="estimate.price"
  145. @close="() => newFee = null"
  146. @save="addFee"
  147. />
  148. <section class="form inputs mi">
  149. <h3>Mortgage Insurance</h3>
  150. <div class="row">
  151. <input checked type="radio" name="mi"/><label>Manual %</label>
  152. <input type="checkbox" :checked="loan.mi.monthly"
  153. @change="e => $emit('toggle:manualMIMonthly')" />
  154. <label>monthly</label>
  155. </div>
  156. <div class="row">
  157. <input :value="loan.mi.rate" @input="e => $emit('update:manualMI', stripPerc(e))" />
  158. </div>
  159. </section>
  160. <section class="form inputs">
  161. <button @click="validate">Continue</button>
  162. <ul class="errors">
  163. <li v-for="e in errors">{{e}}</li>
  164. </ul>
  165. </section>
  166. </div>
  167. </template>
  168. <script>
  169. import FeeDialog from "../fee-dialog.vue"
  170. import { stripLetters, strip, stripInt, stripPerc } from "../../helpers.js"
  171. const newFee = {
  172. name: '', type: '', amount: 0, perc: 0
  173. }
  174. // Setup this.newFee for the creation dialog
  175. function createFee() {
  176. this.newFee = Object.assign({}, newFee)
  177. }
  178. // If valid, add the current this.newFee to the array of fees and reset
  179. // this.newFee to null
  180. function addFee(fee, isDebit) {
  181. if (!isDebit) fee.amount = fee.amount * -1
  182. this.loan.fees.push(fee)
  183. this.newFee = null
  184. }
  185. function validate() {
  186. fetch(`/api/estimate/validate`,
  187. {method: 'POST',
  188. body: JSON.stringify(this.estimate),
  189. headers: {
  190. "Accept": "application/json",
  191. "Authorization": `Bearer ${this.token}`,
  192. },
  193. }).then(response => {
  194. if (response.ok) { return response.json() }
  195. response.text().then(t => this.errors = [t])
  196. }).then(result => {
  197. if (result) this.$emit('continue', result)
  198. })
  199. /*
  200. let errors = []
  201. const estimate = this.estimate
  202. // Alternative attribute names for error messages
  203. const names = {
  204. term: "loan term",
  205. ltv: "loan to value",
  206. hazard: "hazard insurance",
  207. hazardEscrow: "hazard insurance escrow",
  208. }
  209. if (!estimate.property) {
  210. errors.push("Missing property type.")
  211. } else if (!estimate.price) {
  212. errors.push("Missing property price.")
  213. } else if (!estimate.borrowers) {
  214. errors.push("Missing number of borrowers.")
  215. } else if (!estimate.creditScore) {
  216. errors.push("Missing credit score.")
  217. } else if (!estimate.mIncome) {
  218. errors.push("Missing monthly income.")
  219. }
  220. estimate.loans.forEach(l => {
  221. if (errors.length) return
  222. if (!l.amount) {
  223. errors.push(`${l.title} Loan amount cannot be zero`)
  224. } else if (!l.interest) {
  225. errors.push(`${l.title} Interest rate cannot be zero`)
  226. } else if (!l.term) {
  227. errors.push(`${l.title} Loan term cannot be zero`)
  228. }
  229. })
  230. if (errors.length) {
  231. this.errors = errors
  232. return false
  233. }
  234. return true
  235. */
  236. }
  237. function generate() {
  238. const errors = this.validate()
  239. if (errors.length) {
  240. this.errors = errors
  241. return
  242. }
  243. }
  244. export default {
  245. components: { FeeDialog },
  246. methods: {
  247. strip, stripInt, stripLetters, stripPerc, createFee, addFee, validate,
  248. generate
  249. },
  250. props: ['estimate', 'loan', 'token'],
  251. // Loan updates assume the currently selected loan is being modified, and
  252. // $emit has no need to clarify.
  253. emits: [
  254. 'del',
  255. 'update:name',
  256. 'update:borrowers',
  257. 'update:creditScore',
  258. 'update:mIncome',
  259. 'update:transaction',
  260. 'update:price',
  261. 'update:property',
  262. // Loan specific emits
  263. 'update:loanType',
  264. 'update:term',
  265. 'update:program',
  266. 'update:ltv',
  267. 'update:amount',
  268. 'update:housingDti',
  269. 'update:dti',
  270. 'update:hoa',
  271. 'update:interest',
  272. 'update:interestDays',
  273. 'update:hazardEscrow',
  274. 'update:hazard',
  275. 'update:taxEscrow',
  276. 'update:tax',
  277. 'update:manualMI',
  278. 'toggle:manualMIMonthly',
  279. 'continue'
  280. ],
  281. data() {
  282. return {
  283. newFee: null,
  284. errors: [],
  285. hash: window.location.hash
  286. }
  287. },
  288. created() {
  289. }
  290. }
  291. </script>