125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-container>
|
|
<v-text-field
|
|
v-model="search"
|
|
label="Search contacts"
|
|
prepend-inner-icon="mdi-magnify"
|
|
variant="outlined"
|
|
class="mb-4"
|
|
clearable
|
|
></v-text-field>
|
|
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="filteredInterests"
|
|
:search="search"
|
|
:sort-by="[{ key: 'Full Name', order: 'asc' }]"
|
|
must-sort
|
|
hover
|
|
:loading="loading"
|
|
loading-text="Loading... Please wait"
|
|
:items-per-page="50"
|
|
:items-per-page-options="[10, 20, 50, 100]"
|
|
>
|
|
<template #item="{ item }">
|
|
<tr @click="handleRowClick(item)" class="cursor-pointer">
|
|
<td>{{ item["Full Name"] }}</td>
|
|
<td>{{ item["Yacht Name"] }}</td>
|
|
<td>{{ item.Length }}</td>
|
|
<td>{{ item.Width }}</td>
|
|
<td>{{ item.Depth }}</td>
|
|
<td>{{ item["Berth Number"] }}</td>
|
|
<td>
|
|
<InterestSalesBadge
|
|
:salesProcessLevel="item['Sales Process Level']"
|
|
/>
|
|
</td>
|
|
<td>{{ item["Phone Number"] }}</td>
|
|
<td>{{ item["Email Address"] }}</td>
|
|
<td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
|
|
<td>
|
|
<v-tooltip bottom>
|
|
<template #activator="{ props }">
|
|
<v-icon v-if="item['Extra Comments']" v-bind="props"
|
|
>mdi-comment</v-icon
|
|
>
|
|
</template>
|
|
<span>{{ item["Extra Comments"] }}</span>
|
|
</v-tooltip>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import LeadCategoryBadge from "~/components/LeadCategoryBadge.vue";
|
|
import InterestSalesBadge from "~/components/InterestSalesBadge.vue";
|
|
import { useFetch } from "#app";
|
|
import { ref, computed } from "vue";
|
|
|
|
useHead({
|
|
title: "Interest List",
|
|
});
|
|
|
|
const user = useDirectusUser();
|
|
const router = useRouter();
|
|
const loading = ref(true);
|
|
|
|
const { data: interests } = useFetch<InterestsResponse>("/api/get-interests", {
|
|
headers: {
|
|
"x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
|
|
},
|
|
onResponse() {
|
|
loading.value = false;
|
|
},
|
|
onResponseError() {
|
|
loading.value = false;
|
|
},
|
|
});
|
|
|
|
const search = ref("");
|
|
|
|
const handleRowClick = (interest: Interest) => {
|
|
router.push(`/dashboard/interest-list/${interest.Id}`);
|
|
};
|
|
|
|
const headers = [
|
|
{ title: "Full Name", key: "Full Name", sortable: true },
|
|
{ title: "Yacht Name", key: "Yacht Name", sortable: true },
|
|
{ title: "Length", key: "Length", sortable: true },
|
|
{ title: "Width", key: "Width", sortable: true },
|
|
{ title: "Depth", key: "Depth", sortable: true },
|
|
{ title: "Berth Number", key: "Berth Number", sortable: true },
|
|
{ title: "Sales Process Level", key: "Sales Process Level", sortable: true },
|
|
{ title: "Phone", key: "Phone Number", sortable: false },
|
|
{ title: "Email", key: "Email Address", sortable: false },
|
|
{ title: "Lead Category", key: "Lead Category", sortable: true },
|
|
{ title: "Comments", key: "Extra Comments", sortable: false }, // New column for comments
|
|
];
|
|
|
|
const filteredInterests = computed(() => {
|
|
if (!interests.value?.list) return [];
|
|
|
|
return interests.value.list.filter((item) => {
|
|
const searchLower = search.value?.toLowerCase() || "";
|
|
return Object.values(item).some((value) =>
|
|
String(value).toLowerCase().includes(searchLower)
|
|
);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|