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 changed files with 110 additions and 149 deletions
|
|
@ -1,163 +1,124 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
<!-- Form Mode (new=true or edit mode) -->
|
<template v-if="!editMode">
|
||||||
<template v-if="isNew || editMode">
|
<Button
|
||||||
<ClientInformationForm
|
@click="toggleEditMode"
|
||||||
ref="clientInfoRef"
|
icon="pi pi-pencil"
|
||||||
v-model:form-data="formData"
|
label="Edit Information"
|
||||||
:is-submitting="isSubmitting"
|
size="small"
|
||||||
:is-edit-mode="editMode"
|
severity="secondary"
|
||||||
@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>
|
</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) -->
|
<ContactInformationForm
|
||||||
<template v-else>
|
ref="contactInfoRef"
|
||||||
<!-- Client Basic Info Card -->
|
v-model:form-data="formData"
|
||||||
<div class="info-card">
|
:is-submitting="isSubmitting"
|
||||||
<div class="card-header">
|
:is-edit-mode="editMode"
|
||||||
<h3>Client Information</h3>
|
:is-new-client-locked="isNewClientMode"
|
||||||
<Button
|
:available-contacts="availableContacts"
|
||||||
@click="toggleEditMode"
|
@new-contact-toggle="handleNewContactToggle"
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- Address Info Card -->
|
<AddressInformationForm
|
||||||
<div class="info-card" v-if="selectedAddressData">
|
v-model:form-data="formData"
|
||||||
<h3>Address Information</h3>
|
:is-submitting="isSubmitting"
|
||||||
<div class="info-grid">
|
:is-edit-mode="editMode"
|
||||||
<div class="info-item full-width">
|
/>
|
||||||
<label>Address Title:</label>
|
</template>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Contact Info Card -->
|
<!-- Display Mode (existing client view) -->
|
||||||
<div class="info-card" v-if="selectedAddressData">
|
<template v-else>
|
||||||
<h3>Contact Information</h3>
|
<!-- Address Info Card -->
|
||||||
<template v-if="contactsForAddress.length > 0">
|
<div class="info-card" v-if="selectedAddressData">
|
||||||
<div v-if="contactsForAddress.length > 1" class="contact-selector">
|
<h3>General Information</h3>
|
||||||
<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-grid">
|
||||||
<div class="info-item">
|
<div class="info-item full-width">
|
||||||
<label>Contact Name:</label>
|
<label>Address Title:</label>
|
||||||
<span>{{ contactFullName }}</span>
|
<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item full-width">
|
||||||
<label>Phone:</label>
|
<label>Full Address:</label>
|
||||||
<span>{{ primaryContactPhone }}</span>
|
<span>{{ fullAddress }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item full-width">
|
||||||
<label>Email:</label>
|
<label>City:</label>
|
||||||
<span>{{ primaryContactEmail }}</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template v-else>
|
|
||||||
<p>No contacts available for this address.</p>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- Status Cards (only for existing clients) -->
|
<!-- Client Basic Info Card -->
|
||||||
<div class="status-cards" v-if="!isNew && !editMode && selectedAddressData">
|
<div class="info-card">
|
||||||
<div class="status-card">
|
<h3>Contact Information</h3>
|
||||||
<h4>On-Site Meeting</h4>
|
<template v-if="contactsForAddress.length > 0">
|
||||||
<Button
|
<div class="info-grid">
|
||||||
:label="selectedAddressData.customOnsiteMeetingScheduled || 'Not Started'"
|
<div class="info-item">
|
||||||
:severity="getStatusSeverity(selectedAddressData.customOnsiteMeetingScheduled)"
|
<label>Customer Name:</label>
|
||||||
@click="handleStatusClick('onsite')"
|
<span>{{ clientData?.customerName || "N/A" }}</span>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div class="info-item">
|
||||||
<div class="status-card">
|
<label>Customer Type:</label>
|
||||||
<h4>Estimate Sent</h4>
|
<span>{{ clientData?.customerType || "N/A" }}</span>
|
||||||
<Button
|
</div>
|
||||||
:label="selectedAddressData.customEstimateSentStatus || 'Not Started'"
|
<div v-if="contactsForAddress.length > 1" class="contact-selector">
|
||||||
:severity="getStatusSeverity(selectedAddressData.customEstimateSentStatus)"
|
<Dropdown
|
||||||
@click="handleStatusClick('estimate')"
|
v-model="selectedContactIndex"
|
||||||
/>
|
:options="contactOptions"
|
||||||
</div>
|
option-label="label"
|
||||||
<div class="status-card">
|
option-value="value"
|
||||||
<h4>Job Status</h4>
|
placeholder="Select Contact"
|
||||||
<Button
|
class="w-full"
|
||||||
:label="selectedAddressData.customJobStatus || 'Not Started'"
|
/>
|
||||||
:severity="getStatusSeverity(selectedAddressData.customJobStatus)"
|
</div>
|
||||||
@click="handleStatusClick('job')"
|
<div class="info-grid">
|
||||||
/>
|
<div class="info-item">
|
||||||
</div>
|
<label>Contact Name:</label>
|
||||||
<div class="status-card">
|
<span>{{ contactFullName }}</span>
|
||||||
<h4>Payment Received</h4>
|
</div>
|
||||||
<Button
|
<div class="info-item">
|
||||||
:label="selectedAddressData.customPaymentReceivedStatus || 'Not Started'"
|
<label>Phone:</label>
|
||||||
:severity="getStatusSeverity(selectedAddressData.customPaymentReceivedStatus)"
|
<span>{{ primaryContactPhone }}</span>
|
||||||
@click="handleStatusClick('payment')"
|
</div>
|
||||||
/>
|
<div class="info-item">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Form Actions -->
|
<!-- Form Actions -->
|
||||||
|
|
@ -408,7 +369,7 @@ const isFormValid = computed(() => {
|
||||||
const hasCity = formData.value.city?.trim();
|
const hasCity = formData.value.city?.trim();
|
||||||
const hasState = formData.value.state?.trim();
|
const hasState = formData.value.state?.trim();
|
||||||
const hasContacts = formData.value.contacts && formData.value.contacts.length > 0;
|
const hasContacts = formData.value.contacts && formData.value.contacts.length > 0;
|
||||||
|
|
||||||
// Check that all contacts have required fields
|
// Check that all contacts have required fields
|
||||||
const allContactsValid = formData.value.contacts?.every((contact) => {
|
const allContactsValid = formData.value.contacts?.every((contact) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -684,7 +645,7 @@ const handleCancel = () => {
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue