From c8caed27ac02cca093ee4fd482a6aa5d692f8beb Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka <immanuel@onyeka.ca> Date: Thu, 29 Jun 2023 17:17:08 -0400 Subject: [PATCH] Display summary pane before generation --- components/new/new.vue | 10 ++++++--- components/new/summary.vue | 46 +++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/components/new/new.vue b/components/new/new.vue index 141c660..fa89345 100644 --- a/components/new/new.vue +++ b/components/new/new.vue @@ -50,7 +50,10 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 @update:tax="(t) => loans[sel].tax = t" @continue="generate" /> -<summary v-if="hash == '#new/summary'"/> +<loan-summary v-if="hash == '#new/summary'" + :estimate="estimate" + :loans="estimate.loans" + :sel="sel" /> </div> </template> @@ -58,7 +61,7 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 <script> import { stripLetters, strip, stripInt, stripPerc } from "../../helpers.js" import LoanDetails from "./details.vue" -import Summary from "./summary.vue" +import LoanSummary from "./summary.vue" // The default values of a new estimate const example = { @@ -130,6 +133,7 @@ function setPrice(value) { this.estimate.loans[this.sel].fees.forEach(fee => { if (fee.perc) fee.amount = (fee.perc / 100 * value).toFixed(2) }) + this.estimate.loans.forEach(l => {l.ltv = 0; l.amount = 0}) } @@ -190,7 +194,7 @@ function generate() { // Percentage values of fees always takek precedent over amounts. The conversion // happens in setPrice() export default { - components: { Summary, LoanDetails }, + components: { LoanSummary, LoanDetails }, methods: { generate, createFees, del, create, setPrice, setLtv, setAmount, setDti, setHousingDti diff --git a/components/new/summary.vue b/components/new/summary.vue index 17a6529..a5a9d5d 100644 --- a/components/new/summary.vue +++ b/components/new/summary.vue @@ -1,5 +1,49 @@ <template> +<div> + +<section class="form inputs"> +<h3>Monthly Payment - ${{totalMonthly}}</h3> +<label>Loan payment: ${{loanPayment}}</label> +<label>Mortgage insurance: $0</label> +<label>Property taxes: ${{loan.tax}}</label> +</section> + +<section class="form inputs"> +<h3>Cash to Close - ${{totalMonthly}}</h3> +<label>Closing costs: ${{fees}}</label> +<label>Credits: ${{credits}}</label> +<label>Downpayment: ${{downpayment}}</label> +</section> + +<section class="form inputs"> +<button>Save Estimate</button> +<button>Generage PDF</button> +</section> + +</div> </template> -<script> +<script setup> +import { ref } from 'vue' +const props = defineProps(['estimate', 'loans', 'sel']) + +const loan = props.loans[props.sel] +const rate = loan.interest / 100 / 12 +const term = loan.term*12 +const loanPayment = loan.amount * + rate*(1+rate)**(term) / + ((1+rate)**(term) - 1) + +const totalMonthly = (loanPayment + loan.tax + loan.hoa + loan.hazard).toFixed(2) + +// Closing costs +const downpayment = (props.estimate.price - loan.amount).toFixed(2) +const fees = loan.fees.reduce((total, x) => { + return x.amount > 0 ? total + x.amount : 0 + }, 0 +).toFixed(2) +const credits = loan.fees.reduce((total, x) => { + return x.amount < 0 ? total + x.amount : 0 + }, 0 +).toFixed(2) </script>