build datatable

frontend/src/components/DataTable.vue

@@ -1,4 +1,4 @@
-<template lang="">
+<template lang="html">
 	<div id="paging-controls">
 		<p>Show rows:</p>
 		<button class="page-num-button">25</button>
@@ -7,11 +7,35 @@
 		<button class="page-turn-button">Prev</button>
 		<button class="page-turn-button">Next</button>
 	</div>
-	<div ref="dataTableContainer"></div>
+	<div>
+		<DataTable :value="data">
+			<Column
+				v-for="col in columns"
+				:key="col.fieldName"
+				:field="col.fieldName"
+				:header="col.label"
+			>
+				<template #body="slotProps">
+					<template v-if="col.type === 'status'">
+						<Badge
+							:value="slotProps.data[col.fieldName]"
+							:severity="getBadgeColor(slotProps.data[col.fieldName])"
+							:size="large"
+						/>
+					</template>
+					<template v-else>
+						{{ slotProps.data[col.fieldName] }}
+					</template>
+				</template>
+			</Column>
+		</DataTable>
+	</div>
 </template>
 <script setup>
-import { defineProps, ref, onMounted } from "vue";
-const dataTableContainer = ref(null);
+import { defineProps } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Badge from "primevue/badge";
 const props = defineProps({
 	columns: {
 		type: Array,
@@ -22,22 +46,30 @@ const props = defineProps({
 		required: true,
 	},
 });
-
-onMounted(() => {
-	console.log(dataTableContainer);
-	if (!dataTableContainer.value) {
-		console.error("Datatable container not found!");
-		return;
+const getBadgeColor = (status) => {
+	console.log("DEBUG: - getBadgeColor status", status);
+	switch (status?.toLowerCase()) {
+		case "completed":
+			return "success"; // green
+		case "in progress":
+		case "warn":
+			return "warning"; // yellow
+		case "not started":
+			return "danger"; // red
+		default:
+			return "info"; // blue fallback
 	}
+};
+console.log("DEBUG: - DataTable props.columns", props.columns);
+console.log("DEBUG: - DataTable props.data", props.data);
 
-	const columnsList = props.columns.map((col) => col.label);
-	const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
+// const columnsList = props.columns.map((col) => col.label);
+// const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
 
-	// Pass the actual DOM element
-	new frappe.DataTable(dataTableContainer.value, {
-		columns: columnsList,
-		data: dataList,
-	});
-});
+// Pass the actual DOM element
+// new frappe.DataTable(dataTableContainer.value, {
+// 	columns: columnsList,
+// 	data: dataList,
+// });
 </script>
 <style lang=""></style>

frontend/src/components/pages/Clients.vue

@@ -9,7 +9,7 @@
 				Add
 			</button>
 		</div>
-		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
+		<DataTable :data="tableData" :columns="columns" />
 	</div>
 </template>
 <script setup>
@@ -23,20 +23,25 @@ const onClick = () => {
 	frappe.new_doc("Customer");
 };
 
-const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
 const columns = [
-	{ label: "Name", fieldName: "full_name" },
-	{ label: "Location", fieldName: "address" },
-	{ label: "Type", fieldName: "contact_type" },
-	{ label: "Contact", fieldName: "full_name" },
-	{ label: "Email", fieldName: "email_id" },
-	{ label: "Phone", fieldName: "phone" },
+	{ label: "Name", fieldName: "fullName", type: "text" },
+	{ label: "Appt. Scheduled", fieldName: "appointmentScheduled", type: "status" },
+	{ label: "Estimate Sent", fieldName: "estimateSent", type: "status" },
+	{ label: "Payment Received", fieldName: "paymentReceived", type: "status" },
+	{ label: "Job Status", fieldName: "jobStatus", type: "status" },
 ];
 onMounted(async () => {
+	if (tableData.value.length > 0) {
+		return;
+	}
 	let data = await Api.getClientDetails();
-
-	console.log(data);
-	console.log(tableData.value);
+	// data = data.map((item) => [
+	// 	item.customer["customer_name"] || "",
+	// 	item.address["appointment_scheduled"] || "",
+	// 	item.address["estimate_sent"] || "",
+	// 	item.address["payment_received"] || "",
+	// 	item.address["job_status"] || "",
+	// ]);
 	tableData.value = data;
 });
 </script>