122 lines
3.1 KiB
JavaScript
122 lines
3.1 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["select", "phoneField", "birthYearField", "firstNameField", "surnameField", "newCustomerFields"]
|
|
|
|
connect() {
|
|
this.selectInstance = new TomSelect(this.selectTarget, {
|
|
valueField: 'id',
|
|
labelField: 'label',
|
|
searchField: ['label'],
|
|
maxItems: 1,
|
|
create: true,
|
|
createOnBlur: true,
|
|
placeholder: 'Type to search customers...',
|
|
|
|
create: function(input) {
|
|
return {
|
|
id: `${input}__new`,
|
|
label: `${input} (New Customer)`
|
|
};
|
|
},
|
|
|
|
options: [],
|
|
|
|
load: async (query, callback) => {
|
|
if (!query.length) return callback();
|
|
|
|
try {
|
|
const response = await fetch(`/customers/search?q=${encodeURIComponent(query)}`, {
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
});
|
|
const data = await response.json();
|
|
callback(data);
|
|
} catch (error) {
|
|
console.error('Error loading customers:', error);
|
|
callback();
|
|
}
|
|
},
|
|
|
|
shouldLoad: function(query) {
|
|
return query.length >= 2;
|
|
},
|
|
|
|
render: {
|
|
no_results: (data, escape) => {
|
|
return '<div class="no-results">No customers found. Fill in the details below.</div>';
|
|
},
|
|
option: function(item) {
|
|
return `<div>${item.label}</div>`;
|
|
}
|
|
},
|
|
|
|
// Events
|
|
onLoad: (data) => {
|
|
if (!data || data.length === 0) {
|
|
this.showNewCustomerFields();
|
|
}
|
|
},
|
|
|
|
onChange: (value) => {
|
|
if (value === null) {
|
|
this.showNewCustomerFields();
|
|
}
|
|
},
|
|
|
|
onItemAdd: (value) => {
|
|
this.customerSelected(value);
|
|
},
|
|
|
|
onDropdownClose: (dropdown) => {
|
|
if (!this.selectInstance.getValue()) {
|
|
this.showNewCustomerFields();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
customerSelected(value) {
|
|
if (value.endsWith('__new')) {
|
|
const firstName = value.replace('__new', '');
|
|
this.firstNameFieldTarget.value = firstName;
|
|
this.showNewCustomerFields();
|
|
return;
|
|
}
|
|
|
|
const [firstName, surname, phone] = value.split('_');
|
|
|
|
if (firstName && surname && phone) {
|
|
const customerData = this.selectInstance.options[value];
|
|
|
|
this.phoneFieldTarget.value = phone;
|
|
this.firstNameFieldTarget.value = firstName;
|
|
this.surnameFieldTarget.value = surname;
|
|
|
|
if (customerData && customerData.birthyear) {
|
|
this.birthYearFieldTarget.value = customerData.birthyear;
|
|
}
|
|
|
|
this.newCustomerFieldsTarget.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
showNewCustomerFields() {
|
|
this.newCustomerFieldsTarget.classList.remove('hidden');
|
|
}
|
|
|
|
clearFields() {
|
|
this.phoneFieldTarget.value = '';
|
|
this.firstNameFieldTarget.value = '';
|
|
this.surnameFieldTarget.value = '';
|
|
this.birthYearFieldTarget.value = '';
|
|
}
|
|
|
|
disconnect() {
|
|
if (this.selectInstance) {
|
|
this.selectInstance.destroy();
|
|
}
|
|
}
|
|
}
|