1<template>
2 <div class="flex flex-col">
3 <LayoutHeader>
4 <template #left-header>
5 <div class="text-lg-medium text-ink-gray-9">
6 {{ __("Customers") }}
7 </div>
8 </template>
9 <template #right-header>
10 <Button
11 :label="__('Create')"
12 theme="gray"
13 variant="solid"
14 class="rtl:flex-row-reverse"
15 @click="isDialogVisible = !isDialogVisible"
16 >
17 <template #prefix>
18 <LucidePlus class="h-4 w-4" />
19 </template>
20 </Button>
21 </template>
22 </LayoutHeader>
23 <ListViewBuilder ref="listViewRef" :options="options" />
24 <NewCustomerDialog v-model="isDialogVisible" />
25 </div>
26</template>
27
28<script setup lang="ts">
29import LayoutHeader from "@/components/LayoutHeader.vue";
30import ListViewBuilder from "@/components/ListViewBuilder.vue";
31import NewCustomerDialog from "@/components/customer/NewCustomerDialog.vue";
32import { OrganizationsIcon, PhoneIcon } from "@/components/icons";
33import { __ } from "@/translation";
34import { Avatar, usePageMeta } from "frappe-ui";
35import { computed, h, ref } from "vue";
36
37const isDialogVisible = ref(false);
38const listViewRef = ref(null);
39
40// const emptyMessage = "No Customers Found";
41
42const hasActiveFilters = computed(
43 () => Object.keys(listViewRef.value?.list?.params?.filters || {}).length > 0
44);
45
46const options = computed(() => {
47 return {
48 doctype: "OD Customer",
49 selectable: true,
50 showSelectBanner: true,
51 columnConfig: {
52 name: {
53 prefix: ({ row }) => {
54 return h(Avatar, {
55 shape: "circle",
56 image: row.image,
57 label: row.name,
58 size: "sm",
59 });
60 },
61 },
62 mobile_no: {
63 prefix: ({ row }) => (row.mobile_no ? h(PhoneIcon) : null),
64 },
65 },
66 emptyState: {
67 title: "No customers found",
68 description: hasActiveFilters.value
69 ? __(
70 "No customers found for the applied filters. Try adjusting or clearing your filters."
71 )
72 : undefined,
73 icon: h(OrganizationsIcon, {
74 class: "h-10 w-10",
75 }),
76 },
77 rowRoute: {
78 name: "Customer",
79 prop: "id",
80 },
81 };
82});
83
84usePageMeta(() => {
85 return {
86 title: "Customers",
87 };
88});
89</script>
90