build

frontend/src/components/pages/Clients.vue

@@ -0,0 +1,40 @@
+<template>
+	<div>
+		<H2>Client Contact List</H2>
+		<div id="filter-container" class="filter-container">
+			<input placeholder="Type to Search" />
+			<p>Type:</p>
+			<select id="type-selector"></select>
+			<button @click="onClick" id="add-customer-button" class="interaction-button">
+				Add
+			</button>
+		</div>
+		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
+	</div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import DataTable from "../DataTable.vue";
+
+const tableData = ref([]);
+
+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" },
+];
+onMounted(async () => {
+	let data = await frappe.db.get_list("Contact", searchFields);
+	console.log(data);
+	tableData.value = data;
+});
+</script>
+<style lang=""></style>