623 lines
14 KiB
Vue
623 lines
14 KiB
Vue
<template>
|
|
<div class="property-details">
|
|
<h3>Property Details</h3>
|
|
|
|
<div class="details-grid">
|
|
<!-- Address Information -->
|
|
<div class="detail-section">
|
|
<div class="section-header">
|
|
<i class="pi pi-map-marker"></i>
|
|
<h4>Address</h4>
|
|
</div>
|
|
<div class="address-info">
|
|
<p class="full-address">{{ fullAddress }}</p>
|
|
<div class="address-badges">
|
|
<Badge
|
|
v-if="addressData.isPrimaryAddress && !addressData.isServiceAddress"
|
|
value="Billing Only"
|
|
severity="info"
|
|
/>
|
|
<Badge
|
|
v-if="addressData.isPrimaryAddress && addressData.isServiceAddress"
|
|
value="Billing & Service"
|
|
severity="success"
|
|
/>
|
|
<Badge
|
|
v-if="!addressData.isPrimaryAddress && addressData.isServiceAddress"
|
|
value="Service Address"
|
|
severity="secondary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Associated Companies -->
|
|
<div class="detail-section">
|
|
<div class="section-header">
|
|
<i class="pi pi-building"></i>
|
|
<h4>Companies</h4>
|
|
</div>
|
|
<div v-if="associatedCompanies.length > 0" class="companies-list">
|
|
<div
|
|
v-for="company in associatedCompanies"
|
|
:key="company"
|
|
class="company-item"
|
|
>
|
|
<i class="pi pi-building"></i>
|
|
<span>{{ company }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state">
|
|
<i class="pi pi-building"></i>
|
|
<p>No companies associated</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Primary Contact -->
|
|
<div class="detail-section">
|
|
<div class="section-header">
|
|
<i class="pi pi-user"></i>
|
|
<h4>Primary Contact</h4>
|
|
</div>
|
|
<div v-if="primaryContact" class="contact-card primary">
|
|
<div class="contact-badge">
|
|
<Badge value="Primary" severity="success" />
|
|
</div>
|
|
<div class="contact-info">
|
|
<h5>{{ primaryContactName }}</h5>
|
|
<div class="contact-details">
|
|
<div class="contact-detail">
|
|
<i class="pi pi-envelope"></i>
|
|
<span>{{ primaryContactEmail }}</span>
|
|
</div>
|
|
<div class="contact-detail">
|
|
<i class="pi pi-phone"></i>
|
|
<span>{{ primaryContactPhone }}</span>
|
|
</div>
|
|
<div v-if="primaryContact.role" class="contact-detail">
|
|
<i class="pi pi-briefcase"></i>
|
|
<span>{{ primaryContact.role }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state">
|
|
<i class="pi pi-user-minus"></i>
|
|
<p>No primary contact</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other Contacts -->
|
|
<div class="detail-section">
|
|
<div class="section-header">
|
|
<i class="pi pi-users"></i>
|
|
<h4>Other Contacts</h4>
|
|
</div>
|
|
<div v-if="otherContacts.length > 0" class="contacts-grid">
|
|
<div
|
|
v-for="contact in otherContacts"
|
|
:key="contact.name"
|
|
class="contact-card small"
|
|
>
|
|
<div class="contact-info-compact">
|
|
<span class="contact-name">{{ getContactName(contact) }}</span>
|
|
<span class="contact-email">{{ getContactEmail(contact) }}</span>
|
|
<span class="contact-phone">{{ getContactPhone(contact) }}</span>
|
|
<span v-if="contact.role" class="contact-role">{{ contact.role }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state">
|
|
<i class="pi pi-user-minus"></i>
|
|
<p>No other contacts</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Mode -->
|
|
<div v-if="editMode" class="detail-section full-width">
|
|
<div class="section-header">
|
|
<i class="pi pi-pencil"></i>
|
|
<h4>Edit Contacts</h4>
|
|
</div>
|
|
<div class="contacts-edit">
|
|
<div class="edit-instructions">
|
|
<i class="pi pi-info-circle"></i>
|
|
<span>Select contacts to associate with this address. One must be marked as primary.</span>
|
|
</div>
|
|
|
|
<div class="contacts-list">
|
|
<div
|
|
v-for="contact in allContacts"
|
|
:key="contact.name"
|
|
class="contact-checkbox-item"
|
|
:class="{ 'is-selected': isContactSelected(contact) }"
|
|
>
|
|
<Checkbox
|
|
:model-value="isContactSelected(contact)"
|
|
:binary="true"
|
|
@update:model-value="toggleContact(contact)"
|
|
:input-id="`contact-${contact.name}`"
|
|
/>
|
|
<label :for="`contact-${contact.name}`" class="contact-label">
|
|
<div class="contact-info-inline">
|
|
<span class="contact-name">{{ getContactName(contact) }}</span>
|
|
<span class="contact-email">{{ getContactEmail(contact) }}</span>
|
|
<span class="contact-phone">{{ getContactPhone(contact) }}</span>
|
|
</div>
|
|
</label>
|
|
<div v-if="isContactSelected(contact)" class="primary-checkbox">
|
|
<Checkbox
|
|
:model-value="isPrimaryContact(contact)"
|
|
:binary="true"
|
|
@update:model-value="setPrimaryContact(contact)"
|
|
:input-id="`primary-${contact.name}`"
|
|
/>
|
|
<label :for="`primary-${contact.name}`">Primary</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Section -->
|
|
<div class="detail-section full-width">
|
|
<div class="section-header">
|
|
<i class="pi pi-map"></i>
|
|
<h4>Location</h4>
|
|
</div>
|
|
<LeafletMap
|
|
:latitude="latitude"
|
|
:longitude="longitude"
|
|
:address-title="addressData.addressTitle || 'Property Location'"
|
|
map-height="350px"
|
|
:zoom-level="16"
|
|
/>
|
|
<div v-if="latitude && longitude" class="coordinates-info">
|
|
<small>
|
|
<strong>Coordinates:</strong>
|
|
{{ parseFloat(latitude).toFixed(6) }}, {{ parseFloat(longitude).toFixed(6) }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from "vue";
|
|
import Badge from "primevue/badge";
|
|
import Checkbox from "primevue/checkbox";
|
|
import LeafletMap from "../common/LeafletMap.vue";
|
|
import DataUtils from "../../utils";
|
|
|
|
const props = defineProps({
|
|
addressData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
allContacts: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
editMode: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:addressContacts", "update:primaryContact"]);
|
|
|
|
// Local state for editing
|
|
const selectedContactNames = ref([]);
|
|
const selectedPrimaryContactName = ref(null);
|
|
|
|
// Initialize from props when edit mode is enabled
|
|
watch(() => props.editMode, (isEditMode) => {
|
|
if (isEditMode) {
|
|
// Initialize selected contacts from address
|
|
selectedContactNames.value = (props.addressData.contacts || [])
|
|
.map(c => c.contact)
|
|
.filter(Boolean);
|
|
selectedPrimaryContactName.value = props.addressData.primaryContact || null;
|
|
}
|
|
});
|
|
|
|
// Full address
|
|
const fullAddress = computed(() => {
|
|
return DataUtils.calculateFullAddress(props.addressData);
|
|
});
|
|
|
|
// Get contacts associated with this address
|
|
const addressContacts = computed(() => {
|
|
if (!props.addressData.contacts || !props.allContacts) return [];
|
|
|
|
const addressContactNames = props.addressData.contacts.map(c => c.contact);
|
|
return props.allContacts.filter(c => addressContactNames.includes(c.name));
|
|
});
|
|
|
|
// Primary contact
|
|
const primaryContact = computed(() => {
|
|
if (!props.addressData.primaryContact || !props.allContacts) return null;
|
|
return props.allContacts.find(c => c.name === props.addressData.primaryContact);
|
|
});
|
|
|
|
const primaryContactName = computed(() => {
|
|
if (!primaryContact.value) return "N/A";
|
|
return primaryContact.value.fullName || primaryContact.value.name || "N/A";
|
|
});
|
|
|
|
const primaryContactEmail = computed(() => {
|
|
if (!primaryContact.value) return "N/A";
|
|
return primaryContact.value.emailId || primaryContact.value.customEmail || "N/A";
|
|
});
|
|
|
|
const primaryContactPhone = computed(() => {
|
|
if (!primaryContact.value) return "N/A";
|
|
return primaryContact.value.phone || primaryContact.value.mobileNo || "N/A";
|
|
});
|
|
|
|
// Other contacts (non-primary)
|
|
const otherContacts = computed(() => {
|
|
return addressContacts.value.filter(c => c.name !== props.addressData.primaryContact);
|
|
});
|
|
|
|
// Map coordinates
|
|
const latitude = computed(() => {
|
|
return props.addressData.customLatitude || props.addressData.latitude || null;
|
|
});
|
|
|
|
const longitude = computed(() => {
|
|
return props.addressData.customLongitude || props.addressData.longitude || null;
|
|
});
|
|
|
|
// Associated companies
|
|
const associatedCompanies = computed(() => {
|
|
if (!props.addressData.companies) return [];
|
|
return props.addressData.companies.map(company => company.company).filter(Boolean);
|
|
});
|
|
|
|
// Helper functions for contact display
|
|
const getContactName = (contact) => {
|
|
return contact.fullName || contact.name || "N/A";
|
|
};
|
|
|
|
const getContactEmail = (contact) => {
|
|
return contact.emailId || contact.customEmail || "N/A";
|
|
};
|
|
|
|
const getContactPhone = (contact) => {
|
|
return contact.phone || contact.mobileNo || "N/A";
|
|
};
|
|
|
|
// Edit mode functions
|
|
const isContactSelected = (contact) => {
|
|
return selectedContactNames.value.includes(contact.name);
|
|
};
|
|
|
|
const isPrimaryContact = (contact) => {
|
|
return selectedPrimaryContactName.value === contact.name;
|
|
};
|
|
|
|
const toggleContact = (contact) => {
|
|
const index = selectedContactNames.value.indexOf(contact.name);
|
|
if (index > -1) {
|
|
// Removing contact
|
|
selectedContactNames.value.splice(index, 1);
|
|
// If this was the primary contact, clear it
|
|
if (selectedPrimaryContactName.value === contact.name) {
|
|
selectedPrimaryContactName.value = null;
|
|
}
|
|
} else {
|
|
// Adding contact
|
|
selectedContactNames.value.push(contact.name);
|
|
}
|
|
emitChanges();
|
|
};
|
|
|
|
const setPrimaryContact = (contact) => {
|
|
if (isContactSelected(contact)) {
|
|
selectedPrimaryContactName.value = contact.name;
|
|
emitChanges();
|
|
}
|
|
};
|
|
|
|
const emitChanges = () => {
|
|
emit("update:addressContacts", selectedContactNames.value);
|
|
emit("update:primaryContact", selectedPrimaryContactName.value);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.property-details {
|
|
background: var(--surface-card);
|
|
border-radius: 12px;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--surface-border);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.property-details > h3 {
|
|
margin: 0 0 0.75rem 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.details-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.detail-section {
|
|
background: var(--surface-ground);
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.detail-section.full-width {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--surface-border);
|
|
}
|
|
|
|
.section-header i {
|
|
font-size: 1rem;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.section-header h4 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.address-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.full-address {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
}
|
|
|
|
.address-badges {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Contacts Display Mode */
|
|
.contacts-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.contact-card {
|
|
background: var(--surface-card);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--surface-border);
|
|
}
|
|
|
|
.contact-card.primary {
|
|
border: 2px solid var(--green-500);
|
|
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.contact-badge {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.contact-info h5 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.contact-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.contact-detail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.contact-detail i {
|
|
font-size: 0.9rem;
|
|
color: var(--primary-color);
|
|
min-width: 18px;
|
|
}
|
|
|
|
.contact-detail span {
|
|
font-size: 0.9rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Other Contacts */
|
|
.other-contacts h6 {
|
|
margin: 0 0 0.75rem 0;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-color-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.contacts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.contact-card.small {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.contact-info-compact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.contact-info-compact .contact-name {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.contact-info-compact .contact-email,
|
|
.contact-info-compact .contact-phone,
|
|
.contact-info-compact .contact-role {
|
|
font-size: 0.85rem;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
/* Contacts Edit Mode */
|
|
.contacts-edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.edit-instructions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
background: var(--blue-50);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--blue-200);
|
|
}
|
|
|
|
.edit-instructions i {
|
|
font-size: 1.25rem;
|
|
color: var(--blue-500);
|
|
}
|
|
|
|
.edit-instructions span {
|
|
font-size: 0.9rem;
|
|
color: var(--blue-700);
|
|
}
|
|
|
|
.contacts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.contact-checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: var(--surface-card);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--surface-border);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.contact-checkbox-item.is-selected {
|
|
border-color: var(--primary-color);
|
|
background: var(--primary-50);
|
|
}
|
|
|
|
.contact-label {
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact-info-inline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.contact-info-inline .contact-name {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.contact-info-inline .contact-email,
|
|
.contact-info-inline .contact-phone {
|
|
font-size: 0.875rem;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.primary-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--green-50);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--green-200);
|
|
}
|
|
|
|
.primary-checkbox label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--green-700);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Companies */
|
|
.companies-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.company-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--surface-card);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--surface-border);
|
|
}
|
|
|
|
.company-item i {
|
|
font-size: 0.9rem;
|
|
color: var(--primary-color);
|
|
min-width: 18px;
|
|
}
|
|
|
|
.company-item span {
|
|
font-size: 0.9rem;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Map */
|
|
.coordinates-info {
|
|
margin-top: 0.75rem;
|
|
text-align: center;
|
|
color: var(--text-color-secondary);
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--surface-border);
|
|
}
|
|
</style>
|