297 lines
9.0 KiB
Vue
297 lines
9.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-container>
|
|
<v-btn @click="router.back()" variant="text">
|
|
<v-icon icon="mdi-arrow-left"></v-icon>
|
|
Back to Contacts
|
|
</v-btn>
|
|
|
|
<v-card flat>
|
|
<v-card-text>
|
|
<v-stepper
|
|
v-model="currentStep"
|
|
class="mb-6"
|
|
variant="flat"
|
|
alt-labels
|
|
>
|
|
<v-stepper-header>
|
|
<template
|
|
v-for="(level, index) in InterestSalesProcessLevelFlow"
|
|
:key="index"
|
|
>
|
|
<v-stepper-item
|
|
:step="index"
|
|
:complete="currentStep + 1 > index"
|
|
:title="level"
|
|
/>
|
|
<v-divider
|
|
v-if="index < InterestSalesProcessLevelFlow.length - 1"
|
|
></v-divider>
|
|
</template>
|
|
</v-stepper-header>
|
|
</v-stepper>
|
|
|
|
<v-form v-if="interest" @submit.prevent="saveInterest">
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Full Name']"
|
|
label="Full Name"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Yacht Name']"
|
|
label="Yacht Name"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest.Length"
|
|
label="Length"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest.Address"
|
|
label="Address"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Email Address']"
|
|
label="Email Address"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="interest['Sales Process Level']"
|
|
label="Sales Process Level"
|
|
variant="outlined"
|
|
:items="InterestSalesProcessLevelFlow"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Phone Number']"
|
|
label="Phone Number"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Extra Comments']"
|
|
label="Extra Comments"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Berth Size Desired']"
|
|
label="Berth Size Desired"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Berth Recommendations']"
|
|
label="Berth Recommendations"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Date Added']"
|
|
label="Date Added"
|
|
variant="outlined"
|
|
readonly
|
|
disabled
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest.Width"
|
|
label="Width"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest.Depth"
|
|
label="Depth"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Created At']"
|
|
label="Created At"
|
|
variant="outlined"
|
|
readonly
|
|
disabled
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest.Source"
|
|
label="Source"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Place of Residence']"
|
|
label="Place of Residence"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="interest['Contact Method Preferred']"
|
|
label="Contact Method Preferred"
|
|
variant="outlined"
|
|
:items="ContactMethodPreferredFlow"
|
|
></v-select>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Request Form Sent']"
|
|
label="Request Form Sent"
|
|
variant="outlined"
|
|
readonly
|
|
disabled
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Berth Number']"
|
|
label="Berth Number"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['EOI Time Sent']"
|
|
label="EOI Time Sent"
|
|
variant="outlined"
|
|
readonly
|
|
disabled
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="interest['Lead Category']"
|
|
label="Lead Category"
|
|
variant="outlined"
|
|
:items="InterestLeadCategoryFlow"
|
|
></v-select>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="interest['Time LOI Sent']"
|
|
label="Time LOI Sent"
|
|
variant="outlined"
|
|
readonly
|
|
disabled
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" class="d-flex">
|
|
<v-btn @click="requestMoreInfoToSales" class="mr-2"
|
|
>Request More Info - To Sales</v-btn
|
|
>
|
|
<v-btn @click="requestMoreInformation" class="mr-2"
|
|
>Request More Information</v-btn
|
|
>
|
|
<v-btn @click="eoiSendToSales">EOI Send to Sales</v-btn>
|
|
<v-spacer />
|
|
<v-btn type="submit" color="primary" class="mr-2">Save</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useRoute, useRouter } from "#app";
|
|
import { ref, computed, onMounted } from "vue";
|
|
import {
|
|
InterestSalesProcessLevelFlow,
|
|
InterestLeadCategoryFlow,
|
|
ContactMethodPreferredFlow,
|
|
} from "@/utils/types";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const { data: interest } = useFetch<Interest>("/api/get-interest-by-id", {
|
|
params: {
|
|
id: route.params.id,
|
|
},
|
|
});
|
|
|
|
const currentStep = computed(() => {
|
|
return InterestSalesProcessLevelFlow.indexOf(
|
|
interest.value?.["Sales Process Level"] || ""
|
|
);
|
|
});
|
|
|
|
const fetchInterest = async () => {
|
|
try {
|
|
} catch (error) {
|
|
console.error("Failed to fetch interest:", error);
|
|
}
|
|
};
|
|
|
|
const saveInterest = async () => {
|
|
if (interest.value) {
|
|
try {
|
|
alert("Interest saved successfully!");
|
|
} catch (error) {
|
|
console.error("Failed to save interest:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const requestMoreInfoToSales = () => {
|
|
alert("Request More Info - To Sales");
|
|
};
|
|
|
|
const requestMoreInformation = () => {
|
|
alert("Request More Information");
|
|
};
|
|
|
|
const eoiSendToSales = () => {
|
|
alert("EOI Send to Sales");
|
|
};
|
|
</script>
|