skouter/components/estimates.vue

<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/100}}{{ fee.perc ? ` ${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="() => edit = {}">New Fee</button>
</section>

<fee-dialog v-if="edit"
	:heading="'Fee'"
	:initial="edit"
	:price="0"
	@close="() => edit = null"
	@save="newFee"
/>



<section class="inputs">
<h3>Saved Estimates</h3>

</section>

</div>
</template>

<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
}

function newType() {

}

function remove() {

}

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>