<template>
	<div>
		<h2>Jobs</h2>
		<DataTable :data="tableData" :columns="columns" />
	</div>
</template>
<script setup>
import DataTable from "../DataTable.vue";
import { ref, onMounted } from "vue";
import Api from "../../api";

const tableData = ref([]);
const columns = [
	{ label: "Job ID", fieldName: "jobId", type: "text", sortable: true },
	{ label: "Address", fieldName: "address", type: "text", sortable: true },
	{ label: "Customer", fieldName: "customer", type: "text", sortable: true },
	{ label: "Overall Status", fieldName: "overAllStatus", type: "status", sortable: true },
	{ label: "Progress", fieldName: "stepProgress", type: "text", sortable: true },
];

onMounted(async () => {
	if (tableData.value.length > 0) {
		return;
	}
	let data = await Api.getJobDetails();
	tableData.value = data;
});
</script>
<style lang=""></style>
