<template>
	<div>
		<H2>Client Contact List</H2>
		<div id="filter-container" class="filter-container">
			<button @click="onClick" id="add-customer-button" class="interaction-button">
				Add
			</button>
		</div>
		<DataTable :data="tableData" :columns="columns" :filters="filters" tableName="clients" />
	</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";

const tableData = ref([]);

const onClick = () => {
	frappe.new_doc("Customer");
};

const filters = {
	fullName: { value: null, matchMode: FilterMatchMode.CONTAINS },
};

const columns = [
	{
		label: "Name",
		fieldName: "fullName",
		type: "text",
		sortable: true,
		filterable: true,
	},
	{
		label: "Appt. Scheduled",
		fieldName: "appointmentScheduled",
		type: "status",
		sortable: true,
	},
	{ label: "Estimate Sent", fieldName: "estimateSent", type: "status", sortable: true },
	{ label: "Payment Received", fieldName: "paymentReceived", type: "status", sortable: true },
	{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
];
onMounted(async () => {
	if (tableData.value.length > 0) {
		return;
	}
	let data = await Api.getClientDetails();
	tableData.value = data;
});
</script>
<style lang="css"></style>
