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>