437 lines
10 KiB
Vue
437 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<div class="form-section">
|
|
<div class="section-header">
|
|
<i class="pi pi-user" style="color: var(--primary-color); font-size: 1.2rem;"></i>
|
|
<h3>Client Information</h3>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="customer-type"><i class="pi pi-building" style="font-size: 0.75rem; margin-right: 0.25rem;"></i>Customer Type <span class="required">*</span></label>
|
|
<Select
|
|
id="customer-type"
|
|
v-model="localFormData.customerType"
|
|
:options="customerTypeOptions"
|
|
:disabled="isSubmitting || (!isNewClient && !isEditMode)"
|
|
placeholder="Select customer type"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="customer-name"><i class="pi pi-id-card" style="font-size: 0.75rem; margin-right: 0.25rem;"></i>Customer Name <span class="required">*</span></label>
|
|
<div class="input-with-button">
|
|
<InputText
|
|
id="customer-name"
|
|
v-model="localFormData.customerName"
|
|
:disabled="isSubmitting || isEditMode || localFormData.customerType !== 'Company'"
|
|
placeholder="Enter customer name"
|
|
class="w-full"
|
|
/>
|
|
<Button
|
|
label="Check"
|
|
size="small"
|
|
icon="pi pi-check-circle"
|
|
class="check-btn"
|
|
@click="checkCustomerExists"
|
|
:disabled="isSubmitting"
|
|
/>
|
|
<Button
|
|
v-if="!isNewClient && !isEditMode"
|
|
@click="searchCustomers"
|
|
:disabled="isSubmitting || !localFormData.customerName.trim()"
|
|
size="small"
|
|
icon="pi pi-search"
|
|
class="search-btn"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Search Results Modal -->
|
|
<Dialog
|
|
:visible="showCustomerSearchModal"
|
|
@update:visible="showCustomerSearchModal = $event"
|
|
header="Select Customer"
|
|
:modal="true"
|
|
class="search-dialog"
|
|
>
|
|
<div class="search-results">
|
|
<div v-if="customerSearchResults.length === 0" class="no-results">
|
|
<i class="pi pi-info-circle"></i>
|
|
<p>No customers found matching your search.</p>
|
|
</div>
|
|
<div v-else class="results-list">
|
|
<div
|
|
v-for="(customerName, index) in customerSearchResults"
|
|
:key="index"
|
|
class="result-item"
|
|
@click="selectCustomer(customerName)"
|
|
>
|
|
<strong>{{ customerName }}</strong>
|
|
<i class="pi pi-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" @click="showCustomerSearchModal = false" />
|
|
</template>
|
|
</Dialog>
|
|
</div>
|
|
</template><script setup>
|
|
import { ref, watch, computed } from "vue";
|
|
import InputText from "primevue/inputtext";
|
|
import Select from "primevue/select";
|
|
import Dialog from "primevue/dialog";
|
|
import Api from "../../api";
|
|
import { useNotificationStore } from "../../stores/notifications-primevue";
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
isSubmitting: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isEditMode: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:formData", "newClientToggle", "customerSelected"]);
|
|
|
|
const notificationStore = useNotificationStore();
|
|
|
|
const localFormData = computed({
|
|
get: () => props.formData,
|
|
set: (value) => emit("update:formData", value),
|
|
});
|
|
|
|
const isNewClient = ref(true);
|
|
const showCustomerSearchModal = ref(false);
|
|
const customerSearchResults = ref([]);
|
|
const customerTypeOptions = ["Individual", "Partnership", "Company"];
|
|
|
|
const mapContactsFromClient = (contacts = []) => {
|
|
if (!Array.isArray(contacts) || contacts.length === 0) {
|
|
return [
|
|
{
|
|
firstName: "",
|
|
lastName: "",
|
|
phoneNumber: "",
|
|
email: "",
|
|
contactRole: "",
|
|
isPrimary: true,
|
|
},
|
|
];
|
|
}
|
|
|
|
return contacts.map((contact, index) => ({
|
|
firstName: contact.firstName || "",
|
|
lastName: contact.lastName || "",
|
|
phoneNumber: contact.phoneNumber || contact.phone || contact.mobileNo || "",
|
|
email: contact.email || contact.emailId || contact.customEmail || "",
|
|
contactRole: contact.contactRole || contact.role || "",
|
|
isPrimary: contact.isPrimary ?? contact.isPrimaryContact ?? index === 0,
|
|
}));
|
|
};
|
|
|
|
// Watch for toggle changes
|
|
watch(isNewClient, (newValue) => {
|
|
emit("newClientToggle", newValue);
|
|
});
|
|
|
|
// Watch for changes that affect customer name
|
|
watch(
|
|
() => localFormData.value,
|
|
(newData) => {
|
|
if (newData.customerType === "Individual" && newData.contacts && newData.contacts.length > 0) {
|
|
const primary = newData.contacts.find((c) => c.isPrimary) || newData.contacts[0];
|
|
const firstName = primary.firstName || "";
|
|
const lastName = primary.lastName || "";
|
|
const fullName = `${firstName} ${lastName}`.trim();
|
|
if (fullName !== newData.customerName) {
|
|
newData.customerName = fullName;
|
|
}
|
|
}
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
const searchCustomers = async () => {
|
|
const searchTerm = localFormData.value.customerName.trim();
|
|
if (!searchTerm) return;
|
|
|
|
try {
|
|
// Get all customers and filter by search term
|
|
const allCustomers = await Api.getClientNames(searchTerm);
|
|
const matchingNames = allCustomers.filter((name) =>
|
|
name.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
);
|
|
|
|
if (matchingNames.length === 0) {
|
|
notificationStore.addWarning("No customers found matching your search criteria.");
|
|
} else {
|
|
// Store just the names for display
|
|
customerSearchResults.value = matchingNames;
|
|
showCustomerSearchModal.value = true;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error searching customers:", error);
|
|
notificationStore.addError("Failed to search customers. Please try again.");
|
|
}
|
|
};
|
|
|
|
const checkCustomerExists = async () => {
|
|
const searchTerm = (localFormData.value.customerName || "").trim();
|
|
if (!searchTerm) {
|
|
notificationStore.addWarning("Please ensure a customer name is entered before checking.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const client = await Api.getClient(searchTerm);
|
|
|
|
if (!client) {
|
|
notificationStore.addInfo("Customer is not in our system yet.");
|
|
return;
|
|
}
|
|
|
|
localFormData.value.customerName = client.customerName || searchTerm;
|
|
localFormData.value.customerType = client.customerType || localFormData.value.customerType;
|
|
localFormData.value.contacts = mapContactsFromClient(client.contacts);
|
|
|
|
isNewClient.value = false;
|
|
showCustomerSearchModal.value = false;
|
|
|
|
emit("customerSelected", client);
|
|
notificationStore.addSuccess(
|
|
`Customer ${localFormData.value.customerName} found and loaded from system.`,
|
|
);
|
|
} catch (error) {
|
|
console.error("Error checking customer:", error);
|
|
const message =
|
|
typeof error?.message === "string" &&
|
|
error.message.toLowerCase().includes("not found")
|
|
? "Customer is not in our system yet."
|
|
: "Failed to check customer. Please try again.";
|
|
|
|
if (message.includes("not in our system")) {
|
|
notificationStore.addInfo(message);
|
|
} else {
|
|
notificationStore.addError(message);
|
|
}
|
|
}
|
|
};
|
|
|
|
const selectCustomer = async (customerName) => {
|
|
try {
|
|
// Fetch full customer data
|
|
const clientData = await Api.getClient(customerName);
|
|
|
|
localFormData.value.customerName = clientData.customerName;
|
|
localFormData.value.customerType = clientData.customerType;
|
|
localFormData.value.contacts = mapContactsFromClient(clientData.contacts);
|
|
showCustomerSearchModal.value = false;
|
|
|
|
// Pass the full client data including contacts
|
|
emit("customerSelected", clientData);
|
|
} catch (error) {
|
|
console.error(`Error fetching client ${customerName}:`, error);
|
|
notificationStore.addError("Failed to load customer details. Please try again.");
|
|
}
|
|
};
|
|
|
|
defineExpose({
|
|
isNewClient,
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-section {
|
|
background: var(--surface-card);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--surface-border);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.form-section:hover {
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--surface-border);
|
|
}
|
|
|
|
.section-header h3 {
|
|
margin: 0;
|
|
color: var(--text-color);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.toggle-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.toggle-label {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--text-color-secondary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.form-field label {
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
font-size: 0.85rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.required {
|
|
color: var(--red-500);
|
|
}
|
|
|
|
.input-with-button {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.w-full {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.search-dialog {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.search-results {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.no-results i {
|
|
font-size: 2em;
|
|
color: var(--orange-500);
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.results-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.result-item {
|
|
padding: 1rem;
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.result-item:hover {
|
|
background-color: var(--surface-hover);
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.customer-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.customer-type {
|
|
font-size: 0.85rem;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.iconoir-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.iconoir-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.iconoir-btn:hover:not(:disabled) {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.check-btn {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.search-btn {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|