create estimate
This commit is contained in:
parent
2ea20a86e3
commit
afa161a0cf
15 changed files with 1234 additions and 435 deletions
|
|
@ -2,111 +2,102 @@
|
|||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<h3>Contact Information</h3>
|
||||
<div class="toggle-container" v-if="!isEditMode">
|
||||
<label for="new-contact-toggle" class="toggle-label">New Contact</label>
|
||||
<ToggleSwitch
|
||||
v-model="isNewContact"
|
||||
inputId="new-contact-toggle"
|
||||
:disabled="isNewClientLocked"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<!-- Select existing contact mode -->
|
||||
<template v-if="!isNewContact">
|
||||
<div class="form-field full-width">
|
||||
<label for="contact-select"> Contact <span class="required">*</span> </label>
|
||||
<Select
|
||||
id="contact-select"
|
||||
v-model="selectedContact"
|
||||
:options="contactOptions"
|
||||
optionLabel="label"
|
||||
:disabled="isSubmitting || contactOptions.length === 0"
|
||||
placeholder="Select a contact"
|
||||
class="w-full"
|
||||
@change="handleContactSelect"
|
||||
/>
|
||||
<small v-if="contactOptions.length === 0" class="helper-text">
|
||||
No contacts available. Toggle "New Contact" to add one.
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="contact-phone">Phone</label>
|
||||
<InputText
|
||||
id="contact-phone"
|
||||
v-model="localFormData.phoneNumber"
|
||||
disabled
|
||||
class="w-full"
|
||||
<div
|
||||
v-for="(contact, index) in localFormData.contacts"
|
||||
:key="index"
|
||||
class="contact-item"
|
||||
>
|
||||
<div class="contact-header">
|
||||
<h4>Contact {{ index + 1 }}</h4>
|
||||
<Button
|
||||
v-if="localFormData.contacts.length > 1"
|
||||
@click="removeContact(index)"
|
||||
size="small"
|
||||
severity="danger"
|
||||
label="Delete"
|
||||
class="remove-btn"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="contact-email">Email</label>
|
||||
<InputText
|
||||
id="contact-email"
|
||||
v-model="localFormData.email"
|
||||
disabled
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- New contact mode -->
|
||||
<template v-else>
|
||||
<div class="form-field full-width">
|
||||
<div class="checkbox-container">
|
||||
<Checkbox
|
||||
v-model="sameAsClientName"
|
||||
inputId="same-as-client"
|
||||
:binary="true"
|
||||
:disabled="isSubmitting || isEditMode || !isNewClientLocked"
|
||||
/>
|
||||
<label for="same-as-client" class="checkbox-label">
|
||||
Same as Client Name
|
||||
</label>
|
||||
<div class="form-rows">
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label :for="`first-name-${index}`">
|
||||
First Name <span class="required">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="`first-name-${index}`"
|
||||
v-model="contact.firstName"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="Enter first name"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label :for="`last-name-${index}`">
|
||||
Last Name <span class="required">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
:id="`last-name-${index}`"
|
||||
v-model="contact.lastName"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="Enter last name"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label :for="`contact-role-${index}`">Role</label>
|
||||
<Select
|
||||
:id="`contact-role-${index}`"
|
||||
v-model="contact.contactRole"
|
||||
:options="roleOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="Select a role"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label :for="`email-${index}`">Email</label>
|
||||
<InputText
|
||||
:id="`email-${index}`"
|
||||
v-model="contact.email"
|
||||
:disabled="isSubmitting"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label :for="`phone-number-${index}`">Phone</label>
|
||||
<InputText
|
||||
:id="`phone-number-${index}`"
|
||||
v-model="contact.phoneNumber"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="(555) 123-4567"
|
||||
class="w-full"
|
||||
@input="formatPhone(index, $event)"
|
||||
@keydown="handlePhoneKeydown($event, index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<v-checkbox
|
||||
v-model="contact.isPrimary"
|
||||
label="Primary Contact"
|
||||
:disabled="isSubmitting"
|
||||
@change="setPrimary(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="first-name"> First Name <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="first-name"
|
||||
v-model="localFormData.firstName"
|
||||
:disabled="isSubmitting || sameAsClientName"
|
||||
placeholder="Enter first name"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="last-name"> Last Name <span class="required">*</span> </label>
|
||||
<InputText
|
||||
id="last-name"
|
||||
v-model="localFormData.lastName"
|
||||
:disabled="isSubmitting || sameAsClientName"
|
||||
placeholder="Enter last name"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="phone-number">Phone</label>
|
||||
<InputText
|
||||
id="phone-number"
|
||||
v-model="localFormData.phoneNumber"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="(555) 123-4567"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="email">Email</label>
|
||||
<InputText
|
||||
id="email"
|
||||
v-model="localFormData.email"
|
||||
:disabled="isSubmitting"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="form-field full-width">
|
||||
<Button label="Add another contact" @click="addContact" :disabled="isSubmitting" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -115,8 +106,7 @@
|
|||
import { ref, watch, computed, onMounted } from "vue";
|
||||
import InputText from "primevue/inputtext";
|
||||
import Select from "primevue/select";
|
||||
import ToggleSwitch from "primevue/toggleswitch";
|
||||
import Checkbox from "primevue/checkbox";
|
||||
import Button from "primevue/button";
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
|
|
@ -135,131 +125,137 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
availableContacts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:formData", "newContactToggle"]);
|
||||
const emit = defineEmits(["update:formData"]);
|
||||
|
||||
const localFormData = computed({
|
||||
get: () => props.formData,
|
||||
get: () => {
|
||||
if (!props.formData.contacts || props.formData.contacts.length === 0) {
|
||||
props.formData.contacts = [
|
||||
{
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
phoneNumber: "",
|
||||
email: "",
|
||||
contactRole: "",
|
||||
isPrimary: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
return props.formData;
|
||||
},
|
||||
set: (value) => emit("update:formData", value),
|
||||
});
|
||||
|
||||
// Default to true for new-client flows; if editing keep it off
|
||||
const isNewContact = ref(!props.isEditMode);
|
||||
const selectedContact = ref(null);
|
||||
const sameAsClientName = ref(false);
|
||||
const roleOptions = ref([
|
||||
{ label: "Owner", value: "Owner" },
|
||||
{ label: "Property Manager", value: "Property Manager" },
|
||||
{ label: "Tenant", value: "Tenant" },
|
||||
{ label: "Builder", value: "Builder" },
|
||||
{ label: "Neighbor", value: "Neighbor" },
|
||||
{ label: "Family Member", value: "Family Member" },
|
||||
{ label: "Realtor", value: "Realtor" },
|
||||
{ label: "Other", value: "Other" },
|
||||
]);
|
||||
|
||||
// Compute contact options from available contacts
|
||||
const contactOptions = computed(() => {
|
||||
if (!props.availableContacts || props.availableContacts.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return props.availableContacts.map((contact) => ({
|
||||
label: `${contact.firstName} ${contact.lastName}`,
|
||||
value: contact,
|
||||
}));
|
||||
});
|
||||
|
||||
// Ensure New Contact is ON and locked when New Client is ON
|
||||
watch(
|
||||
() => props.isNewClientLocked,
|
||||
(locked) => {
|
||||
if (locked) {
|
||||
isNewContact.value = true;
|
||||
} else {
|
||||
isNewContact.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// On mount, set isNewContact to true if isNewClientLocked is true
|
||||
// Ensure at least one contact
|
||||
onMounted(() => {
|
||||
if (props.isNewClientLocked) {
|
||||
isNewContact.value = true;
|
||||
if (!localFormData.value.contacts || localFormData.value.contacts.length === 0) {
|
||||
localFormData.value.contacts = [
|
||||
{
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
phoneNumber: "",
|
||||
email: "",
|
||||
contactRole: "",
|
||||
isPrimary: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-check "Same as Client Name" when customer type is Individual
|
||||
watch(
|
||||
() => props.formData.customerType,
|
||||
(customerType) => {
|
||||
if (customerType === "Individual" && props.isNewClientLocked && !props.isEditMode) {
|
||||
sameAsClientName.value = true;
|
||||
const addContact = () => {
|
||||
localFormData.value.contacts.push({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
phoneNumber: "",
|
||||
email: "",
|
||||
contactRole: "",
|
||||
isPrimary: false,
|
||||
});
|
||||
};
|
||||
|
||||
const removeContact = (index) => {
|
||||
if (localFormData.value.contacts.length > 1) {
|
||||
const wasPrimary = localFormData.value.contacts[index].isPrimary;
|
||||
localFormData.value.contacts.splice(index, 1);
|
||||
if (wasPrimary && localFormData.value.contacts.length > 0) {
|
||||
localFormData.value.contacts[0].isPrimary = true;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// Reset "Same as Client Name" when editing or using existing customer
|
||||
watch([() => props.isEditMode, () => props.isNewClientLocked], ([editMode, newClientLocked]) => {
|
||||
if (editMode || !newClientLocked) {
|
||||
sameAsClientName.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-fill name fields when "Same as Client Name" is checked
|
||||
watch(sameAsClientName, (checked) => {
|
||||
if (checked && props.formData.customerName) {
|
||||
const nameParts = props.formData.customerName.trim().split(" ");
|
||||
if (nameParts.length === 1) {
|
||||
localFormData.value.firstName = nameParts[0];
|
||||
localFormData.value.lastName = "";
|
||||
} else if (nameParts.length >= 2) {
|
||||
localFormData.value.firstName = nameParts[0];
|
||||
localFormData.value.lastName = nameParts.slice(1).join(" ");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Watch for customer name changes when "Same as Client Name" is checked
|
||||
watch(
|
||||
() => props.formData.customerName,
|
||||
(newName) => {
|
||||
if (sameAsClientName.value && newName) {
|
||||
const nameParts = newName.trim().split(" ");
|
||||
if (nameParts.length === 1) {
|
||||
localFormData.value.firstName = nameParts[0];
|
||||
localFormData.value.lastName = "";
|
||||
} else if (nameParts.length >= 2) {
|
||||
localFormData.value.firstName = nameParts[0];
|
||||
localFormData.value.lastName = nameParts.slice(1).join(" ");
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Watch for toggle changes
|
||||
watch(isNewContact, (newValue) => {
|
||||
if (newValue) {
|
||||
// Clear contact selection when switching to new contact mode
|
||||
selectedContact.value = null;
|
||||
localFormData.value.firstName = "";
|
||||
localFormData.value.lastName = "";
|
||||
localFormData.value.phoneNumber = "";
|
||||
localFormData.value.email = "";
|
||||
}
|
||||
emit("newContactToggle", newValue);
|
||||
});
|
||||
|
||||
const handleContactSelect = () => {
|
||||
if (selectedContact.value && selectedContact.value.value) {
|
||||
const contact = selectedContact.value.value;
|
||||
localFormData.value.firstName = contact.firstName;
|
||||
localFormData.value.lastName = contact.lastName;
|
||||
localFormData.value.phoneNumber = contact.phone || "";
|
||||
localFormData.value.email = contact.email || "";
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
isNewContact,
|
||||
});
|
||||
const setPrimary = (index) => {
|
||||
localFormData.value.contacts.forEach((contact, i) => {
|
||||
contact.isPrimary = i === index;
|
||||
});
|
||||
};
|
||||
|
||||
const formatPhoneNumber = (value) => {
|
||||
const digits = value.replace(/\D/g, "").slice(0, 10);
|
||||
if (digits.length <= 3) return digits;
|
||||
if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
|
||||
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
|
||||
};
|
||||
|
||||
const formatPhone = (index, event) => {
|
||||
const value = event.target.value;
|
||||
const formatted = formatPhoneNumber(value);
|
||||
localFormData.value.contacts[index].phoneNumber = formatted;
|
||||
};
|
||||
|
||||
const handlePhoneKeydown = (event, index) => {
|
||||
const allowedKeys = [
|
||||
"Backspace",
|
||||
"Delete",
|
||||
"Tab",
|
||||
"Escape",
|
||||
"Enter",
|
||||
"ArrowLeft",
|
||||
"ArrowRight",
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"Home",
|
||||
"End",
|
||||
];
|
||||
|
||||
if (allowedKeys.includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Allow Ctrl+A, Ctrl+C, Ctrl+V, etc.
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it's a digit
|
||||
if (!/\d/.test(event.key)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check current digit count
|
||||
const currentDigits = localFormData.value.contacts[index].phoneNumber.replace(
|
||||
/\D/g,
|
||||
"",
|
||||
).length;
|
||||
if (currentDigits >= 10) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -285,23 +281,47 @@ defineExpose({
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
.contact-item {
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--surface-section);
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.contact-header h4 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
.remove-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.contact-item .form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -325,25 +345,6 @@ defineExpose({
|
|||
color: var(--red-500);
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
color: var(--text-color-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue