54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<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>
|