Replace standard JavaScript confirm with Dolibarr-style modal for unvalidation

- Replaced onclick='return confirm()' with onclick='confirmUnvalidation()'
- Added confirmUnvalidation() JavaScript function with Dolibarr-style modal
- Added closeUnvalidationModal() and proceedUnvalidation() functions
- Modal has red warning styling to indicate destructive action
- Added UnvalidationConfirmationMessage and YesUnvalidate translations
- Modal includes escape key handler and proper styling
- Consistent with validation modal design and behavior
This commit is contained in:
Frank Cools 2025-10-06 17:56:47 +02:00
parent c1aa501898
commit ef40e60d6e
3 changed files with 76 additions and 1 deletions

View File

@ -479,7 +479,7 @@ if ($declarationtva->status == 'draft') {
} elseif ($declarationtva->status == 'validated') {
print '<a href="' . $_SERVER['PHP_SELF'] . '?id=' . $id . '&action=submit" class="butAction">' . $langs->trans("Submit") . '</a> ';
// Add unvalidate button for testing
print '<a href="' . $_SERVER['PHP_SELF'] . '?id=' . $id . '&action=unvalidate&token=' . newToken() . '" class="butAction" style="background-color: #dc3545;" onclick="return confirm(\'' . $langs->trans("ConfirmUnvalidate") . '\')">' . $langs->trans("Unvalidate") . '</a> ';
print '<a href="#" onclick="confirmUnvalidation(' . $id . '); return false;" class="butAction" style="background-color: #dc3545;">' . $langs->trans("Unvalidate") . '</a> ';
}
print '<a href="declarationtvaindex.php" class="butAction">' . $langs->trans("BackToList") . '</a>';
@ -651,6 +651,77 @@ function proceedValidation(declarationId) {
// Redirect to validation action
window.location.href = "' . $_SERVER['PHP_SELF'] . '?id=" + declarationId + "&action=validate&token=' . newToken() . '";
}
function confirmUnvalidation(declarationId) {
// Create a proper Dolibarr-style modal dialog for unvalidation
var dialog = document.createElement("div");
dialog.id = "unvalidationModal";
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; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 500px; width: 90%; max-height: 90%; overflow: hidden;";
// 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("ConfirmUnvalidate") . '</h3>
</div>
<button onclick="closeUnvalidationModal()" 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: #f8d7da; border: 1px solid #f5c6cb; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
<span style="color: #721c24; 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("UnvalidationConfirmationMessage") . '</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="closeUnvalidationModal()" 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="proceedUnvalidation(' . $id . ')" style="background: #dc3545; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500;">
' . $langs->trans("YesUnvalidate") . '
</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") {
closeUnvalidationModal();
}
});
}
function closeUnvalidationModal() {
var modal = document.getElementById("unvalidationModal");
if (modal) {
modal.remove();
}
}
function proceedUnvalidation(declarationId) {
// Redirect to unvalidation action
window.location.href = "' . $_SERVER['PHP_SELF'] . '?id=" + declarationId + "&action=unvalidate&token=' . newToken() . '";
}
</script>';
// Print footer

View File

@ -513,3 +513,5 @@ DraftDeclaration = Draft Declaration
ValidatedPDFAvailable = Validated PDF Available
NoDocument = No Document
DownloadPDF = Download PDF
UnvalidationConfirmationMessage = Are you sure you want to unvalidate this declaration? This action will revert the declaration to draft status and remove the generated PDF.
YesUnvalidate = Yes, unvalidate

View File

@ -485,3 +485,5 @@ DraftDeclaration = Déclaration brouillon
ValidatedPDFAvailable = PDF validé disponible
NoDocument = Aucun document
DownloadPDF = Télécharger le PDF
UnvalidationConfirmationMessage = Êtes-vous sûr de vouloir annuler la validation de cette déclaration ? Cette action remettra la déclaration en mode brouillon et supprimera le PDF généré.
YesUnvalidate = Oui, annuler la validation