Add and reset fees from a modal

assets/main.css

@@ -8,6 +8,7 @@
 	--outline: #DFE3E8;
 	--brand: #0f6b4b;
 	--shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+	--shadow-md: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }
 
 body {
@@ -222,6 +223,9 @@ section.radios h3 {
 	grid-column: 1 / 3;
 }
 
+.form button {
+}
+
 .form.radios input {
 	height: 20px;
 }
@@ -287,3 +291,30 @@ section.form .fee {
 section.form .fee img {
 	margin-left: auto;
 }
+
+div.modal {
+	position: fixed;
+	z-index: 5;
+	width: 100vw;
+	width: 100vw;
+	height: 100vh;
+	top: 0;
+	left: 0;
+}
+
+div.modal .form {
+	z-index: 5;
+	margin: auto auto;
+	margin-top: 20%;
+	width: 100%;
+	max-width: 300px;
+	padding: 20px 10px;
+	background: white;
+	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+	border-radius: 3px;
+}
+
+div.modal .form img.close-btn {
+	right: 10px;
+	position: absolute;
+}

components/dialog.vue

@@ -0,0 +1,21 @@
+<template>
+<div class="modal">
+
+<section class="form inputs">
+	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
+	@click="$emit('close')" class="close-btn"/>
+
+	<slot/>
+
+</section>
+
+
+</div>
+</template>
+
+<script>
+
+export default {
+	emits: ['close']
+}
+</script>

components/new.vue

@@ -144,11 +144,39 @@ selected="estimate.transaction == 1">
 	${{fee.amount}} - {{fee.name}}<br>
 	{{fee.type}}
 	</label>
-	<img width="21" height="21" src="/assets/image/icon/x-red.svg" alt=""
+	<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>
 
+<Dialog v-if="newFee" @close="() => newFee = null">
+<h3>New Fee</h3>
+
+<label>Name</label>
+<input type=""
+:value="newFee.name"
+@input="(e) => newFee.name = stripLetters(e)">
+
+<label>Amount</label>
+<input
+type=""
+:value="newFee.amount"
+@input="(e) => newFee.amount = strip(e)">
+
+<select id="" name="" v-model="newFee.type">
+	<option value="title">Title Company</option>
+	<option value="gov">Government</option>
+	<option value="lender">Lender</option>
+	<option value="lender_required">Required by Lender</option>
+	<option value="other">Other</option>
+</select>
+
+<button :disabled="!validFee" @click="addFee(true)">Debit</button>
+<button :disabled="!validFee" @click="addFee(false)">Credit</button>
+</Dialog>
+
 <section class="form radios">
 <h3>Mortgage Insurance</h3>
 <input type="radio" name="transaction_type" value="transaction"
@@ -169,6 +197,8 @@ selected="estimate.transaction == 1">
 </template>
 
 <script>
+import Dialog from "./dialog.vue"
+
 const fees = [
 	{ name: 'Processing fee', type: 'Lender Fees', amount: 500 },
 	{ name: 'Underwriting fee', type: 'Lender Fees', amount: 500 },
@@ -221,6 +251,10 @@ const estimate = {
 	loans: loans,
 }
 
+const newFee = {
+ 	name: '', type: '', amount: 0
+ }
+
 // Clone loan from initial example as a new loan
 function create() {
 	this.estimate.loans.push(
@@ -232,6 +266,37 @@ function createFees() {
 	return fees.map(f => Object.assign({}, f))
 }
 
+// Setup this.newFee for the creation dialog
+function createFee() {
+	this.newFee = Object.assign({}, newFee)
+}
+
+function resetFees() {
+	this.estimate.loans[this.sel].fees = createFees()
+}
+
+// If valid, add the current this.newFee to the array of fees and reset
+// this.newFee to null
+function addFee(isDebit) {
+	const fee = this.newFee
+	if (!this.validFee) {
+		return
+	}
+
+	if (!isDebit) fee.amount = fee.amount * -1
+	this.estimate.loans[this.sel].fees.push(fee)
+	this.newFee = null
+}
+
+function validFee() {
+	const fee = this.newFee
+	if (!fee.name || !fee.type || !fee.amount) {
+		return false
+	}
+	
+	return true
+}
+
 // Strips non-digits from an input box event and returns it's rounded integer.
 // It also preserves current valid entry (.)
 function strip(e) {
@@ -333,9 +398,14 @@ function setHousingDti(e) {
 }
 
 export default {
+	components: { Dialog },
 	methods: {
 		setPrice, setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
-		stripLetters, stripPerc, del, create,
+		stripLetters, stripPerc, del, create, createFees, createFee, resetFees,
+		addFee
+	},
+	computed: {
+		validFee,
 	},
 	props: ['user'],
 	data() {
@@ -343,7 +413,7 @@ export default {
 				estimate: estimate,
 				loans: estimate.loans,
 				sel: 0,
-				fees: loans.fees
+				newFee: null,
 			}
 	},
 }