frank/DeclarationTVA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace JavaScript popup with professional Dolibarr-style modal

Browse Source 
- Replaced basic JavaScript popup with professional modal dialog
- Added proper header with title and close button
- Added warning icon and better visual hierarchy
- Improved styling with Dolibarr color scheme
- Added escape key support for better UX
- Better button styling and layout
- More professional appearance matching Dolibarr interface
- Enhanced user experience with proper modal behavior
This commit is contained in:
Frank Cools 2025-10-06 17:11:58 +02:00
parent a95e0782b6
commit 7b5aedee81
1 changed files with 54 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
declarationtva_view.php
View File

@ -560,30 +560,69 @@ function loadLineDetails(line) {
}
function confirmValidation(declarationId) {
// Create confirmation dialog
// Create a proper Dolibarr-style modal dialog
var dialog = document.createElement("div");
dialog.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center;";
dialog.id = "validationModal";
dialog.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif;";
var dialogContent = document.createElement("div");
dialogContent.style.cssText = "background: white; padding: 20px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 500px; text-align: center;";
dialogContent.style.cssText = "background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 500px; width: 90%; max-height: 90%; overflow: hidden;";
dialogContent.innerHTML = `
<h3>' . $langs->trans("ConfirmValidation") . '</h3>
<p>' . $langs->trans("ValidationConfirmationMessage") . '</p>
<div style="margin-top: 20px;">
<button onclick="proceedValidation(' . $id . '); this.parentElement.parentElement.parentElement.remove();"
style="background: #28a745; color: white; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 3px; cursor: pointer;">
' . $langs->trans("YesValidate") . '
</button>
<button onclick="this.parentElement.parentElement.parentElement.remove();"
style="background: #6c757d; color: white; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 3px; cursor: pointer;">
' . $langs->trans("Cancel") . '
</button>
// Header
var header = document.createElement("div");
header.style.cssText = "background: #f8f9fa; padding: 20px; border-bottom: 1px solid #dee2e6; display: flex; align-items: center;";
header.innerHTML = `
<div style="flex: 1;">
<h3 style="margin: 0; color: #495057; font-size: 18px; font-weight: 600;">' . $langs->trans("ConfirmValidation") . '</h3>
</div>
<button onclick="closeValidationModal()" style="background: none; border: none; font-size: 24px; color: #6c757d; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">&times;</button>
`;
// Body
var body = document.createElement("div");
body.style.cssText = "padding: 20px;";
body.innerHTML = `
<div style="display: flex; align-items: flex-start; margin-bottom: 20px;">
<div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
<span style="color: #856404; font-size: 18px; font-weight: bold;">!</span>
</div>
<div style="flex: 1;">
<p style="margin: 0; color: #495057; line-height: 1.5; font-size: 14px;">' . $langs->trans("ValidationConfirmationMessage") . '</p>
</div>
</div>
`;
// Footer
var footer = document.createElement("div");
footer.style.cssText = "background: #f8f9fa; padding: 15px 20px; border-top: 1px solid #dee2e6; display: flex; justify-content: flex-end; gap: 10px;";
footer.innerHTML = `
<button onclick="closeValidationModal()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500;">
' . $langs->trans("Cancel") . '
</button>
<button onclick="proceedValidation(' . $id . ')" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500;">
' . $langs->trans("YesValidate") . '
</button>
`;
dialogContent.appendChild(header);
dialogContent.appendChild(body);
dialogContent.appendChild(footer);
dialog.appendChild(dialogContent);
document.body.appendChild(dialog);
// Add escape key handler
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") {
closeValidationModal();
}
});
}
function closeValidationModal() {
var modal = document.getElementById("validationModal");
if (modal) {
modal.remove();
}
}
function proceedValidation(declarationId) {