Correctly represent fee types in estimates vue

components/estimates.vue

@@ -10,7 +10,7 @@
 	:key="fee.name + indx" class="fee"
 >
 	<label @click="() => edit = fee">
-	${{fee.amount}}{{ fee.perc ? ` ${fee.perc}%` : ''}} - {{fee.name}}<br>
+	${{fee.amount/100}}{{ fee.perc ? ` ${fee.perc}%` : ''}} - {{fee.name}}<br>
 	{{fee.type}}
 	</label>
 	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
@@ -37,9 +37,13 @@
 </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
 import FeeDialog from "./fee-dialog.vue"
 
+const props = defineProps(['user', 'fees'])
+let edit = ref(null)
+
 function newFee(fee, isDebit) {
 	this.edit = null
 }
@@ -52,15 +56,25 @@ function remove() {
 
 }
 
-	export default {
+function getEstimates() {
-		props: [ 'user', 'fees' ],
+	const token = getCookie("skouter")
-		emits: [ 'deleteFee', 'update' ],
+	return fetch(`/api/estimates`,
-		components: { FeeDialog },
+		{method: 'GET',
-		methods: { newFee, newType, remove }, 
+    		headers: {
-		data() {
+        	"Accept": "application/json",
-			return {
+        	"Authorization": `Bearer ${token}`,
-				edit: null
+    		},
-			}
+	}).then(response => {
-		},
+		if (response.ok) { return response.json() }
-	}
+	}).then (result => {
+		if (!result || !result.length) return // Exit if token is invalid or no fees are saved
+		this.fees = result
+	})
+
+}
+
+onMounted(() => {
+    // getEstimates()
+})
 </script>

components/fee-dialog.vue

@@ -11,21 +11,20 @@
 <label>Amount</label>
 <input
 type=""
-:value="fee.amount"
+:value="fee.amount / 100 || ''"
-@input="(e) => {fee.perc = 0; fee.amount = strip(e)}">
+@input="(e) => {fee.perc = 0; fee.amount = Math.round(strip(e) * 100)}">
 
 <label>Percentage of price</label>
 <input
 type=""
 :value="fee.perc"
-@input="(e) => { fee.perc = stripPerc(e);
+@input="changePerc">
-fee.amount = stripPerc(e)/100*price }">
 
 <select id="" name="" v-model="fee.type">
-	<option value="Title Company">Title Company</option>
+	<option value="Title">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="Required">Required by Lender</option>
 	<option value="Other">Other</option>
 </select>
 
@@ -53,10 +52,15 @@ function validFee() {
 	return true
 }
 
+function changePerc(e){
+    this.fee.perc = stripPerc(e)
+    this.fee.amount = stripPerc(e)/100*this.price 
+}
+
 export default {
 	components: { Dialog },
 	methods: {
-		stripLetters, strip, stripInt, stripPerc
+		stripLetters, strip, stripInt, stripPerc, changePerc
 	},
 	computed: {
 		validFee,

components/new/summary.vue

@@ -25,7 +25,7 @@
 </section>
 
 <section class="form inputs">
-<button @click="create">Save Estimate</button>
+<button :disabled="saved" @click="create">Save Estimate</button>
 <button>Generate PDF</button>
 </section>
 
@@ -35,7 +35,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 let valid = ref(false)
-let saved = ref(true)
+let saved = ref(false)
 const props = defineProps(['downpayment', 'loan', 'token', 'estimate'])
 
 function amortize(principle, rate, periods) {