Styling changes to the CRM page. More in-line with LMN. Removed Status Buttons, moved some information around to be more cohesive.
This commit is contained in:
rocketdebris
parent
e508f265a1
commit
b86d9a8861
@ -1,163 +1,124 @@
|
||||
<template>
|
||||
<div class="overview-container">
|
||||
<!-- Form Mode (new=true or edit mode) -->
|
||||
<template v-if="isNew || editMode">
|
||||
<ClientInformationForm
|
||||
ref="clientInfoRef"
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
@new-client-toggle="handleNewClientToggle"
|
||||
@customer-selected="handleCustomerSelected"
|
||||
/>
|
||||
|
||||
<ContactInformationForm
|
||||
ref="contactInfoRef"
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
:is-new-client-locked="isNewClientMode"
|
||||
:available-contacts="availableContacts"
|
||||
@new-contact-toggle="handleNewContactToggle"
|
||||
/>
|
||||
|
||||
<AddressInformationForm
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
<template v-if="!editMode">
|
||||
<Button
|
||||
@click="toggleEditMode"
|
||||
icon="pi pi-pencil"
|
||||
label="Edit Information"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
/>
|
||||
</template>
|
||||
<div class="status-cards">
|
||||
<!-- Form Mode (new=true or edit mode) -->
|
||||
<template v-if="isNew || editMode">
|
||||
<ClientInformationForm
|
||||
ref="clientInfoRef"
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
@new-client-toggle="handleNewClientToggle"
|
||||
@customer-selected="handleCustomerSelected"
|
||||
/>
|
||||
|
||||
<!-- Display Mode (existing client view) -->
|
||||
<template v-else>
|
||||
<!-- Client Basic Info Card -->
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<h3>Client Information</h3>
|
||||
<Button
|
||||
@click="toggleEditMode"
|
||||
icon="pi pi-pencil"
|
||||
label="Edit"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
/>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Customer Name:</label>
|
||||
<span>{{ clientData?.customerName || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Customer Type:</label>
|
||||
<span>{{ clientData?.customerType || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Customer Group:</label>
|
||||
<span>{{ clientData?.customerGroup || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Territory:</label>
|
||||
<span>{{ clientData?.territory || "N/A" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactInformationForm
|
||||
ref="contactInfoRef"
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
:is-new-client-locked="isNewClientMode"
|
||||
:available-contacts="availableContacts"
|
||||
@new-contact-toggle="handleNewContactToggle"
|
||||
/>
|
||||
|
||||
<!-- Address Info Card -->
|
||||
<div class="info-card" v-if="selectedAddressData">
|
||||
<h3>Address Information</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item full-width">
|
||||
<label>Address Title:</label>
|
||||
<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item full-width">
|
||||
<label>Full Address:</label>
|
||||
<span>{{ fullAddress }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>City:</label>
|
||||
<span>{{ selectedAddressData.city || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>State:</label>
|
||||
<span>{{ selectedAddressData.state || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Zip Code:</label>
|
||||
<span>{{ selectedAddressData.pincode || "N/A" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AddressInformationForm
|
||||
v-model:form-data="formData"
|
||||
:is-submitting="isSubmitting"
|
||||
:is-edit-mode="editMode"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Contact Info Card -->
|
||||
<div class="info-card" v-if="selectedAddressData">
|
||||
<h3>Contact Information</h3>
|
||||
<template v-if="contactsForAddress.length > 0">
|
||||
<div v-if="contactsForAddress.length > 1" class="contact-selector">
|
||||
<Dropdown
|
||||
v-model="selectedContactIndex"
|
||||
:options="contactOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Select Contact"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- Display Mode (existing client view) -->
|
||||
<template v-else>
|
||||
<!-- Address Info Card -->
|
||||
<div class="info-card" v-if="selectedAddressData">
|
||||
<h3>General Information</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Contact Name:</label>
|
||||
<span>{{ contactFullName }}</span>
|
||||
<div class="info-item full-width">
|
||||
<label>Address Title:</label>
|
||||
<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Phone:</label>
|
||||
<span>{{ primaryContactPhone }}</span>
|
||||
<div class="info-item full-width">
|
||||
<label>Full Address:</label>
|
||||
<span>{{ fullAddress }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Email:</label>
|
||||
<span>{{ primaryContactEmail }}</span>
|
||||
<div class="info-item full-width">
|
||||
<label>City:</label>
|
||||
<span>{{ selectedAddressData.city || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item full-width">
|
||||
<label>State:</label>
|
||||
<span>{{ selectedAddressData.state || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item full-width">
|
||||
<label>Zip Code:</label>
|
||||
<span>{{ selectedAddressData.pincode || "N/A" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>No contacts available for this address.</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Status Cards (only for existing clients) -->
|
||||
<div class="status-cards" v-if="!isNew && !editMode && selectedAddressData">
|
||||
<div class="status-card">
|
||||
<h4>On-Site Meeting</h4>
|
||||
<Button
|
||||
:label="selectedAddressData.customOnsiteMeetingScheduled || 'Not Started'"
|
||||
:severity="getStatusSeverity(selectedAddressData.customOnsiteMeetingScheduled)"
|
||||
@click="handleStatusClick('onsite')"
|
||||
/>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h4>Estimate Sent</h4>
|
||||
<Button
|
||||
:label="selectedAddressData.customEstimateSentStatus || 'Not Started'"
|
||||
:severity="getStatusSeverity(selectedAddressData.customEstimateSentStatus)"
|
||||
@click="handleStatusClick('estimate')"
|
||||
/>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h4>Job Status</h4>
|
||||
<Button
|
||||
:label="selectedAddressData.customJobStatus || 'Not Started'"
|
||||
:severity="getStatusSeverity(selectedAddressData.customJobStatus)"
|
||||
@click="handleStatusClick('job')"
|
||||
/>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h4>Payment Received</h4>
|
||||
<Button
|
||||
:label="selectedAddressData.customPaymentReceivedStatus || 'Not Started'"
|
||||
:severity="getStatusSeverity(selectedAddressData.customPaymentReceivedStatus)"
|
||||
@click="handleStatusClick('payment')"
|
||||
/>
|
||||
</div>
|
||||
<!-- Client Basic Info Card -->
|
||||
<div class="info-card">
|
||||
<h3>Contact Information</h3>
|
||||
<template v-if="contactsForAddress.length > 0">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Customer Name:</label>
|
||||
<span>{{ clientData?.customerName || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Customer Type:</label>
|
||||
<span>{{ clientData?.customerType || "N/A" }}</span>
|
||||
</div>
|
||||
<div v-if="contactsForAddress.length > 1" class="contact-selector">
|
||||
<Dropdown
|
||||
v-model="selectedContactIndex"
|
||||
:options="contactOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Select Contact"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Contact Name:</label>
|
||||
<span>{{ contactFullName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Phone:</label>
|
||||
<span>{{ primaryContactPhone }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Email:</label>
|
||||
<span>{{ primaryContactEmail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Customer Group:</label>
|
||||
<span>{{ clientData?.customerGroup || "N/A" }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>Territory:</label>
|
||||
<span>{{ clientData?.territory || "N/A" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>No contacts available for this address.</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
@ -408,7 +369,7 @@ const isFormValid = computed(() => {
|
||||
const hasCity = formData.value.city?.trim();
|
||||
const hasState = formData.value.state?.trim();
|
||||
const hasContacts = formData.value.contacts && formData.value.contacts.length > 0;
|
||||
|
||||
|
||||
// Check that all contacts have required fields
|
||||
const allContactsValid = formData.value.contacts?.every((contact) => {
|
||||
return (
|
||||
@ -684,7 +645,7 @@ const handleCancel = () => {
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user