Setup estimates view

components/app.vue

@@ -9,7 +9,8 @@
 </div>
 
 <home :user="user" v-else-if="active == 1" />
-<new-estimate :user="user" v-else-if="active == 2" />
+<new-estimate :user="user" :fees="fees" v-else-if="active == 2" />
+<estimates :user="user" :fees="fees" v-else-if="active == 3" />
 
 </div>
 </template>
@@ -19,6 +20,7 @@ import SideBar from "./sidebar.vue"
 import Spinner from "./spinner.vue"
 import Home from "./home.vue"
 import NewEstimate from "./new.vue"
+import Estimates from "./estimates.vue"
 
 const user = {
  	firstName: "test",
@@ -27,6 +29,20 @@ const user = {
 	status: 1,
  }
 
+// The default fees of a new loan
+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 },
+]
+
 // Used to check the current section of the app generally without a regex match
 // each time.
 function active() {
@@ -46,11 +62,12 @@ function active() {
 }
 
 export default {
-	components: { SideBar, Spinner, Home, NewEstimate },
+	components: { SideBar, Spinner, Home, NewEstimate, Estimates },
 	computed: { active },
 	data() {
 		return {
-			loading: false, user: user, hash: window.location.hash
+			loading: false, user: user, hash: window.location.hash,
+			fees: fees
 		}
 	},
 	created() {

components/estimates.vue

@@ -0,0 +1,58 @@
+<template>
+<div class="page">
+<h2>Estimates</h2>
+
+<section class="form inputs">
+<h3>Default Fees</h3>
+<div v-for="(fee, indx) in fees"
+:key="fee.name + indx" class="fee"
+>
+	<label @click="() => edit = fee">
+	${{fee.amount ?? fee.perc + "%"}} - {{fee.name}}<br>
+	{{fee.type}}
+	</label>
+	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
+	@click="() => remove(indx, 1)">
+</div>
+<button @click="newFee">New Fee</button>
+</section>
+
+<Dialog v-if="edit" @close="() => edit = null">
+<h3>hi</h3>
+</Dialog>
+
+<section class="inputs">
+<h3>Saved Estimates</h3>
+
+</section>
+
+</div>
+</template>
+
+<script>
+import Dialog from "./dialog.vue"
+
+function newFee() {
+
+}
+
+function newType() {
+
+}
+
+function remove() {
+
+}
+
+	export default {
+		props: [ 'user', 'fees' ],
+		emits: [ 'deleteFee', 'update' ],
+		components: { Dialog },
+		methods: { newFee, newType, remove }, 
+		data() {
+			return {
+				edit: null
+			}
+		},
+	}
+</script>

components/new.vue

@@ -164,11 +164,11 @@ type=""
 @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>
+	<option value="Title Company">Title Company</option>
+	<option value="Government">Government</option>
+	<option value="Lender">Lender</option>
+	<option value="Services Required by Lender">Required by Lender</option>
+	<option value="Other">Other</option>
 </select>
 
 <button :disabled="!validFee" @click="addFee(true)">Debit</button>
@@ -203,20 +203,6 @@ selected="estimate.transaction == 1">
 <script>
 import Dialog from "./dialog.vue"
 
-// The default fees of a new loan
-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 },
-]
-
 // The default values of a new estimate
 const example = {
 		title: "Example",
@@ -236,15 +222,15 @@ const example = {
 		program: "",
 		pud: true, // Property under development
 		zip: '',
-		fees: fees,
+		fees: [],
 }
 
 // The default loans on a new estimate
 const loans = [
-	Object.assign({}, example, {fees: createFees()}),
+	Object.assign({}, example,),
 	Object.assign(
 		Object.assign({}, example),
-		{title: "Another One", fees: createFees()}
+		{title: "Another One",}
 	),
 ]
 
@@ -271,7 +257,7 @@ function create() {
 }
 
 function createFees() {
-	return fees.map(f => Object.assign({}, f))
+	return this.fees.map(f => Object.assign({}, f))
 }
 
 // Setup this.newFee for the creation dialog
@@ -280,7 +266,7 @@ function createFee() {
 }
 
 function resetFees() {
-	this.estimate.loans[this.sel].fees = createFees()
+	this.estimate.loans[this.sel].fees = this.createFees()
 }
 
 // If valid, add the current this.newFee to the array of fees and reset
@@ -446,7 +432,7 @@ export default {
 	computed: {
 		validFee,
 	},
-	props: ['user'],
+	props: ['user', 'fees'],
 	data() {
 		return {
 				estimate: estimate,
@@ -456,5 +442,8 @@ export default {
 				errors: [],
 			}
 	},
+	created() {
+		this.estimate.loans.forEach(l => l.fees = this.createFees())
+	}
 }
 </script>