294 lines
9.9 KiB
JavaScript
294 lines
9.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Find all forms with class 'disable-on-submit' or target a specific form
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
forms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
// Find the submit button within this form
|
|
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
|
|
|
if (submitButton) {
|
|
// Disable the button
|
|
submitButton.disabled = true;
|
|
|
|
// Optional: Add a loading class for styling
|
|
submitButton.classList.add('loading');
|
|
|
|
// Re-enable the button if the form submission fails
|
|
// This ensures the button doesn't stay disabled if there's an error
|
|
window.addEventListener('unload', function() {
|
|
submitButton.disabled = false;
|
|
submitButton.classList.remove('loading');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let cookie of cookies) {
|
|
cookie = cookie.trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
|
|
const getDataTableInit = () => {
|
|
const togglePaginationButtonDisable = (button, disabled) => {
|
|
button.disabled = disabled;
|
|
button.classList[disabled ? 'add' : 'remove']('disabled');
|
|
};
|
|
// Selectors
|
|
const table = document.getElementById('inventoryTable');
|
|
|
|
if (table) {
|
|
const options = {
|
|
page: 10,
|
|
pagination: {
|
|
item: "<li><button class='page' type='button'></button></li>"
|
|
},
|
|
item: values => {
|
|
const {
|
|
orderId,
|
|
id,
|
|
customer,
|
|
date,
|
|
address,
|
|
deliveryType,
|
|
status,
|
|
badge,
|
|
amount
|
|
} = values;
|
|
return `
|
|
<tr class="btn-reveal-trigger">
|
|
<td class="order py-2 ps-3 align-middle white-space-nowrap">
|
|
<a class="fw-semibold" href="https://prium.github.io/phoenix/v1.12.0/apps/e-commerce/admin/order-details.html">
|
|
${orderId}
|
|
</a>
|
|
</td>
|
|
<td class="py-2 align-middle fw-bold">
|
|
<a class="fw-semibold text-body" href="#!">
|
|
${customer}
|
|
</a>
|
|
</td>
|
|
<td class="py-2 align-middle">
|
|
${date}
|
|
</td>
|
|
<td class="py-2 align-middle white-space-nowrap">
|
|
${address}
|
|
</td>
|
|
<td class="py-2 align-middle white-space-nowrap">
|
|
<p class="mb-0">${deliveryType}</p>
|
|
</td>
|
|
<td class="py-2 align-middle text-center fs-8 white-space-nowrap">
|
|
<span class="badge fs-10 badge-phoenix badge-phoenix-${badge.type}">
|
|
${status}
|
|
<span class="ms-1 ${badge.icon}" data-fa-transform="shrink-2"></span>
|
|
</span>
|
|
</td>
|
|
<td class="py-2 align-middle text-end fs-8 fw-medium">
|
|
${amount}
|
|
</td>
|
|
<td class="py-2 align-middle white-space-nowrap text-end">
|
|
<div class="dropstart position-static d-inline-block">
|
|
<button class="btn btn-link text-body btn-sm dropdown-toggle btn-reveal" type='button' id="order-dropdown-${id}" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent">
|
|
<span class="fas fa-ellipsis-h fs-9"></span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="order-dropdown-${id}">
|
|
<a href="#!" class="dropdown-item">View</a>
|
|
<a href="#!" class="dropdown-item">Edit</a>
|
|
<div class"dropdown-divider"></div>
|
|
<a href="#!" class="dropdown-item text-warning">Archive</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
};
|
|
const paginationButtonNext = table.querySelector(
|
|
'[data-list-pagination="next"]'
|
|
);
|
|
const paginationButtonPrev = table.querySelector(
|
|
'[data-list-pagination="prev"]'
|
|
);
|
|
const viewAll = table.querySelector('[data-list-view="*"]');
|
|
const viewLess = table.querySelector('[data-list-view="less"]');
|
|
const listInfo = table.querySelector('[data-list-info]');
|
|
const listFilter = document.querySelector('[data-list-filter]');
|
|
|
|
const orderList = new window.List(table, options, orders);
|
|
|
|
// Fallback
|
|
orderList.on('updated', item => {
|
|
const fallback =
|
|
table.querySelector('.fallback') ||
|
|
document.getElementById(options.fallback);
|
|
|
|
if (fallback) {
|
|
if (item.matchingItems.length === 0) {
|
|
fallback.classList.remove('d-none');
|
|
} else {
|
|
fallback.classList.add('d-none');
|
|
}
|
|
}
|
|
});
|
|
|
|
const totalItem = orderList.items.length;
|
|
const itemsPerPage = orderList.page;
|
|
const btnDropdownClose =
|
|
orderList.listContainer.querySelector('.btn-close');
|
|
let pageQuantity = Math.ceil(totalItem / itemsPerPage);
|
|
let numberOfcurrentItems = orderList.visibleItems.length;
|
|
let pageCount = 1;
|
|
|
|
btnDropdownClose &&
|
|
btnDropdownClose.addEventListener('search.close', () =>
|
|
orderList.fuzzySearch('')
|
|
);
|
|
|
|
const updateListControls = () => {
|
|
listInfo &&
|
|
(listInfo.innerHTML = `${orderList.i} to ${numberOfcurrentItems} of ${totalItem}`);
|
|
paginationButtonPrev &&
|
|
togglePaginationButtonDisable(paginationButtonPrev, pageCount === 1);
|
|
paginationButtonNext &&
|
|
togglePaginationButtonDisable(
|
|
paginationButtonNext,
|
|
pageCount === pageQuantity
|
|
);
|
|
|
|
if (pageCount > 1 && pageCount < pageQuantity) {
|
|
togglePaginationButtonDisable(paginationButtonNext, false);
|
|
togglePaginationButtonDisable(paginationButtonPrev, false);
|
|
}
|
|
};
|
|
updateListControls();
|
|
|
|
if (paginationButtonNext) {
|
|
paginationButtonNext.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
pageCount += 1;
|
|
|
|
const nextInitialIndex = orderList.i + itemsPerPage;
|
|
nextInitialIndex <= orderList.size() &&
|
|
orderList.show(nextInitialIndex, itemsPerPage);
|
|
numberOfcurrentItems += orderList.visibleItems.length;
|
|
updateListControls();
|
|
});
|
|
}
|
|
|
|
if (paginationButtonPrev) {
|
|
paginationButtonPrev.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
pageCount -= 1;
|
|
|
|
numberOfcurrentItems -= orderList.visibleItems.length;
|
|
const prevItem = orderList.i - itemsPerPage;
|
|
prevItem > 0 && orderList.show(prevItem, itemsPerPage);
|
|
updateListControls();
|
|
});
|
|
}
|
|
|
|
const toggleViewBtn = () => {
|
|
viewLess.classList.toggle('d-none');
|
|
viewAll.classList.toggle('d-none');
|
|
};
|
|
|
|
if (viewAll) {
|
|
viewAll.addEventListener('click', () => {
|
|
orderList.show(1, totalItem);
|
|
pageQuantity = 1;
|
|
pageCount = 1;
|
|
numberOfcurrentItems = totalItem;
|
|
updateListControls();
|
|
toggleViewBtn();
|
|
});
|
|
}
|
|
if (viewLess) {
|
|
viewLess.addEventListener('click', () => {
|
|
orderList.show(1, itemsPerPage);
|
|
pageQuantity = Math.ceil(totalItem / itemsPerPage);
|
|
pageCount = 1;
|
|
numberOfcurrentItems = orderList.visibleItems.length;
|
|
updateListControls();
|
|
toggleViewBtn();
|
|
});
|
|
}
|
|
if (options.pagination) {
|
|
table.querySelector('.pagination').addEventListener('click', e => {
|
|
if (e.target.classList[0] === 'page') {
|
|
pageCount = Number(e.target.innerText);
|
|
updateListControls();
|
|
}
|
|
});
|
|
}
|
|
if (options.filter) {
|
|
const { key } = options.filter;
|
|
listFilter.addEventListener('change', e => {
|
|
orderList.filter(item => {
|
|
if (e.target.value === '') {
|
|
return true;
|
|
}
|
|
return item
|
|
.values()
|
|
[key].toLowerCase()
|
|
.includes(e.target.value.toLowerCase());
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
// Register delete modal initializer
|
|
htmxInitializer.register(function initDeleteModals() {
|
|
const deleteModal = document.getElementById("deleteModal");
|
|
const confirmDeleteBtn = document.getElementById("deleteModalConfirm");
|
|
const deleteModalMessage = document.getElementById("deleteModalText");
|
|
|
|
// Clean up old listeners
|
|
document.querySelectorAll(".delete-btn").forEach(btn => {
|
|
btn.removeEventListener("click", handleDeleteClick);
|
|
});
|
|
|
|
// Add new listeners
|
|
document.querySelectorAll(".delete-btn").forEach(button => {
|
|
button.addEventListener("click", handleDeleteClick);
|
|
});
|
|
|
|
function handleDeleteClick() {
|
|
if (!deleteModal || !confirmDeleteBtn || !deleteModalMessage) return;
|
|
|
|
const deleteUrl = this.getAttribute("data-url");
|
|
const deleteMessage = this.getAttribute("data-message") || "Are you sure?";
|
|
|
|
confirmDeleteBtn.setAttribute("href", deleteUrl);
|
|
deleteModalMessage.textContent = deleteMessage;
|
|
|
|
if (typeof htmx !== 'undefined') htmx.process(confirmDeleteBtn);
|
|
if (typeof bootstrap !== 'undefined') new bootstrap.Modal(deleteModal).show();
|
|
}
|
|
}, "delete_modals");
|
|
|
|
// Register custom selects initializer
|
|
htmxInitializer.register(function initCustomSelects() {
|
|
// Your custom select initialization code
|
|
}, "custom_selects");
|
|
|
|
// Register form submission initializer
|
|
htmxInitializer.register(function initForms() {
|
|
// Your form handling code
|
|
}, "forms");
|
|
*/ |