Generate and display fee entries

assets/image/icon/x-grey.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="#1D262E" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+</svg>

assets/image/icon/x-red.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="#922724" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+</svg>

assets/main.css

@@ -279,3 +279,11 @@ div.hint .tooltip {
 div.hint:hover .tooltip {
 	visibility: visible;
 }
+
+section.form .fee {
+	display: flex;
+}
+
+section.form .fee img {
+	margin-left: auto;
+}

components/new.vue

@@ -135,22 +135,53 @@ selected="estimate.transaction == 1">
 @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.name}}<br>
+	{{fee.type}}
+	</label>
+	<img width="21" height="21" src="/assets/image/icon/x-red.svg" alt=""
+	@click="() => estimate.loans[sel].fees.splice(indx, 1)">
+</div>
+</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>
+<label>1.43% - National MI</label>
 <input type="radio" name="transaction_type" value="refinance"
 @input="e => estimate.transaction = 1"
 selected="estimate.transaction == 1">
-<label>MGIC</label>
+<label>0.73% - MGIC</label>
+</section>
+
+<section class="form inputs">
+	<button>Generate</button>
 </section>
 
 </div>
 </template>
 
 <script>
+const fees = [
+	{ name: 'Processing fee', type: 'Lender Fees', amount: 500 },
+	{ name: 'Underwriting fee', type: 'Lender Fees', amount: 500 },
+	{ name: 'Credit Report', type: 'Services Required by Lender',
+	amount: 52.50 },
+	{ name: 'Appraisal', type: 'Services Required by Lender', amount: 52.50 },
+	{ name: 'Title Services', type: 'Title Company', amount: 1000 },
+	{ name: 'Lender\'s Title Insurance', type: 'Title Company', amount: 1599 },
+	{ name: 'Owner\'s Title Insurance', type: 'Title Company', amount: 451.00 },
+	{ name: 'Recording Charges', type: 'Government', amount: 99.00 },
+	{ name: 'State Tax', type: 'Government', amount: 2411.00 },
+]
+
 const example = {
 		title: "Example",
 		type: "",
@@ -168,12 +199,16 @@ const example = {
 		hoa: 0, // Home owner's association monthly fee
 		program: "",
 		pud: true, // Property under development
-		zip: ''
+		zip: '',
+		fees: fees,
 }
 
 const loans = [
-	Object.assign({}, example),
+	Object.assign({}, example, {fees: createFees()}),
-	Object.assign(Object.assign({}, example), {title: "Another One"})
+	Object.assign(
+		Object.assign({}, example),
+		{title: "Another One", fees: createFees()}
+	),
 ]
 
 const estimate = {
@@ -183,12 +218,18 @@ const estimate = {
 	borrowers: 0,
 	creditScore: 0,
 	mIncome: 0,
-	loans: loans
+	loans: loans,
 }
 
 // Clone loan from initial example as a new loan
 function create() {
-	this.estimate.loans.push(Object.assign({}, loans[0]))
+	this.estimate.loans.push(
+		Object.assign({}, loans[0], {fees: createFees()})
+	)
+}
+
+function createFees() {
+	return fees.map(f => Object.assign({}, f))
 }
 
 // Strips non-digits from an input box event and returns it's rounded integer.
@@ -294,7 +335,7 @@ function setHousingDti(e) {
 export default {
 	methods: {
 		setPrice, setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
-		stripLetters, stripPerc, del, create
+		stripLetters, stripPerc, del, create,
 	},
 	props: ['user'],
 	data() {
@@ -302,7 +343,8 @@ export default {
 				estimate: estimate,
 				loans: estimate.loans,
 				sel: 0,
+				fees: loans.fees
 			}
-	}
+	},
 }
 </script>