112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
// CMC Sales Application JavaScript
|
|
|
|
// Initialize HTMX events
|
|
document.body.addEventListener('htmx:configRequest', (event) => {
|
|
// Add CSRF token if needed in the future
|
|
});
|
|
|
|
// Handle HTMX errors
|
|
document.body.addEventListener('htmx:responseError', (event) => {
|
|
console.error('HTMX request failed:', event.detail);
|
|
showNotification('An error occurred. Please try again.', 'danger');
|
|
});
|
|
|
|
// Handle form validation
|
|
document.body.addEventListener('htmx:validation:validate', (event) => {
|
|
const element = event.detail.elt;
|
|
if (element.tagName === 'FORM') {
|
|
// Clear previous errors
|
|
element.querySelectorAll('.is-danger').forEach(el => {
|
|
el.classList.remove('is-danger');
|
|
});
|
|
element.querySelectorAll('.help.is-danger').forEach(el => {
|
|
el.remove();
|
|
});
|
|
|
|
// Validate required fields
|
|
let isValid = true;
|
|
element.querySelectorAll('[required]').forEach(input => {
|
|
if (!input.value.trim()) {
|
|
input.classList.add('is-danger');
|
|
const help = document.createElement('p');
|
|
help.className = 'help is-danger';
|
|
help.textContent = 'This field is required';
|
|
input.parentElement.appendChild(help);
|
|
isValid = false;
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Show notification
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification is-${type}`;
|
|
notification.innerHTML = `
|
|
<button class="delete"></button>
|
|
${message}
|
|
`;
|
|
|
|
// Insert at the top of the main content
|
|
const container = document.querySelector('.section .container');
|
|
container.insertBefore(notification, container.firstChild);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 5000);
|
|
|
|
// Handle delete button
|
|
notification.querySelector('.delete').addEventListener('click', () => {
|
|
notification.remove();
|
|
});
|
|
}
|
|
|
|
// Handle delete confirmations
|
|
document.body.addEventListener('htmx:confirm', (event) => {
|
|
if (event.detail.question === 'Are you sure you want to delete this customer?') {
|
|
event.preventDefault();
|
|
|
|
// Use Bulma modal or native confirm
|
|
if (confirm(event.detail.question)) {
|
|
event.detail.issueRequest();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Handle successful deletes
|
|
document.body.addEventListener('htmx:afterRequest', (event) => {
|
|
if (event.detail.xhr.status === 204 && event.detail.verb === 'delete') {
|
|
showNotification('Item deleted successfully', 'success');
|
|
}
|
|
});
|
|
|
|
// Format dates
|
|
function formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-AU', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
|
|
// Initialize tooltips if using Bulma extensions
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Add any initialization code here
|
|
});
|
|
|
|
// Handle search clear button
|
|
document.addEventListener('click', (event) => {
|
|
if (event.target.matches('[data-clear-search]')) {
|
|
const searchInput = document.querySelector('#customer-search');
|
|
if (searchInput) {
|
|
searchInput.value = '';
|
|
searchInput.dispatchEvent(new Event('keyup'));
|
|
}
|
|
}
|
|
}); |