From c566ddb99171b5d9461994e7dec19bc162aff59a Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka <immanuel@onyeka.ca> Date: Sun, 16 Jul 2023 20:40:25 -0400 Subject: [PATCH] Correctly represent fee types in estimates vue --- components/estimates.vue | 40 +++++++++++++++++++++++++------------- components/fee-dialog.vue | 18 ++++++++++------- components/new/summary.vue | 4 ++-- 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/components/estimates.vue b/components/estimates.vue index ba6b927..94e443d 100644 --- a/components/estimates.vue +++ b/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 { - props: [ 'user', 'fees' ], - emits: [ 'deleteFee', 'update' ], - components: { FeeDialog }, - methods: { newFee, newType, remove }, - data() { - return { - edit: null - } - }, - } +function getEstimates() { + const token = getCookie("skouter") + + return fetch(`/api/estimates`, + {method: 'GET', + headers: { + "Accept": "application/json", + "Authorization": `Bearer ${token}`, + }, + }).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> diff --git a/components/fee-dialog.vue b/components/fee-dialog.vue index 1d08972..94fb87f 100644 --- a/components/fee-dialog.vue +++ b/components/fee-dialog.vue @@ -11,21 +11,20 @@ <label>Amount</label> <input type="" -:value="fee.amount" -@input="(e) => {fee.perc = 0; fee.amount = strip(e)}"> +:value="fee.amount / 100 || ''" +@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); -fee.amount = stripPerc(e)/100*price }"> +@input="changePerc"> <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, diff --git a/components/new/summary.vue b/components/new/summary.vue index e6fa032..d9670e7 100644 --- a/components/new/summary.vue +++ b/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) {