143 lines
4.0 KiB
Vue
143 lines
4.0 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-row class="overflow-x-auto flex-nowrap">
|
|
<v-col
|
|
v-for="level in InterestSalesProcessLevelFlow"
|
|
:key="level"
|
|
class="v-col-auto"
|
|
>
|
|
<v-card v-if="groupedInterests[level].length" color="grey-lighten-5">
|
|
<v-card-title>
|
|
<InterestSalesBadge
|
|
:sales-process-level="(level as InterestSalesProcessLevel)"
|
|
/>
|
|
</v-card-title>
|
|
<v-card-text class="overflow-y-auto" style="max-height: 90vh">
|
|
<v-card
|
|
v-for="interest in groupedInterests[level]"
|
|
:key="interest.Id"
|
|
class="mx-3 my-6"
|
|
variant="flat"
|
|
@click="handleInterestClick(interest.Id)"
|
|
style="cursor: pointer"
|
|
>
|
|
<v-card-title>{{ interest["Full Name"] }}</v-card-title>
|
|
<v-card-text>
|
|
<v-list bg-color="transparent">
|
|
<v-list-item>
|
|
<v-list-item-title>Yacht Name</v-list-item-title>
|
|
<v-list-item-subtitle>{{
|
|
interest["Yacht Name"] || "-"
|
|
}}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Email Address</v-list-item-title>
|
|
<v-list-item-subtitle>{{
|
|
interest["Email Address"] || "-"
|
|
}}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Berth Number</v-list-item-title>
|
|
<v-list-item-subtitle>{{
|
|
interest["Berth Number"] || "-"
|
|
}}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Phone Number</v-list-item-title>
|
|
<v-list-item-subtitle>{{
|
|
interest["Phone Number"] || "-"
|
|
}}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Berth Size Desired</v-list-item-title>
|
|
<v-list-item-subtitle>{{
|
|
interest["Berth Size Desired"] || "-"
|
|
}}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useFetch } from "#app";
|
|
import { ref, computed } from "vue";
|
|
import { useRouter } from "#app";
|
|
|
|
const router = useRouter();
|
|
|
|
useHead({
|
|
title: "Interest Status",
|
|
});
|
|
|
|
const loading = ref(true);
|
|
|
|
const { data: interests } = useFetch<InterestsResponse>("/api/get-interests", {
|
|
onResponse() {
|
|
loading.value = false;
|
|
},
|
|
onResponseError() {
|
|
loading.value = false;
|
|
},
|
|
});
|
|
|
|
const groupedInterests = computed(() => {
|
|
const groups: Record<string, Interest[]> = {};
|
|
|
|
InterestSalesProcessLevelFlow.forEach((level) => {
|
|
groups[level] = [];
|
|
});
|
|
|
|
interests.value?.list.forEach((interest) => {
|
|
const level = interest["Sales Process Level"];
|
|
if (groups[level]) {
|
|
groups[level].push(interest);
|
|
}
|
|
});
|
|
|
|
// Sort each group by "Full Name"
|
|
for (const level in groups) {
|
|
groups[level].sort((a, b) => {
|
|
if (a["Full Name"] < b["Full Name"]) return -1;
|
|
if (a["Full Name"] > b["Full Name"]) return 1;
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
return groups;
|
|
});
|
|
|
|
const handleInterestClick = (id: number) => {
|
|
router.push(`/dashboard/interest-list/${id}`);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.v-card-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.v-list-item {
|
|
padding: 0;
|
|
}
|
|
|
|
.v-list-item-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.v-list-item-subtitle {
|
|
white-space: normal;
|
|
}
|
|
</style>
|