www/caddy: general.volt - Improve Save and Apply buttons (#3957)

* Update general.volt - Fix Apply button when validation errors happen

Because the Apply button triggers "saveFormToEndpoint" to save the form before continuing, the "callback_fail" has to trigger when the validation fails to reject the deferred object. Otherwise, the apply button can get stuck indefinitely.

Also, the "disable_dialog" has been set to false, in order to show the validation dialog. Since there are multiple tabs, the validation result could be hidden to the user otherwise.

* Update general.volt - Improve "Save" button

Give the "Save" button the same treatment as the "Apply" button, using SimpleActionButton for better User Feedback, and also displaying the error dialog when the validation failed.
This commit is contained in:
Monviech
2024-05-06 16:11:41 +02:00
committed by GitHub
parent b3a6eca348
commit 71e78ac011
@@ -60,31 +60,35 @@
onPreAction: function() {
const dfObj = $.Deferred();
// Save the form before continue
saveFormToEndpoint("/api/caddy/general/set", 'frm_GeneralSettings', function() {
// After successful save, proceed with validation
$.ajax({
url: "/api/caddy/service/validate",
type: "GET",
dataType: "json",
success: function(data) {
if (data && data['status'].toLowerCase() === 'ok') {
dfObj.resolve(); // Configuration is valid
} else {
showAlert(data['message'], "Validation Error");
dfObj.reject(); // Configuration is invalid
// Save the form before continuing
saveFormToEndpoint("/api/caddy/general/set", 'frm_GeneralSettings',
function() { // callback_ok: What to do when save is successful
// After successful save, proceed with validation
$.ajax({
url: "/api/caddy/service/validate",
type: "GET",
dataType: "json",
success: function(data) {
if (data && data['status'].toLowerCase() === 'ok') {
dfObj.resolve(); // Configuration is valid
} else {
showAlert(data['message'], "Validation Error");
dfObj.reject(); // Configuration is invalid
}
},
error: function(xhr, status, error) {
showAlert("Validation request failed: " + error, "Validation Error");
dfObj.reject(); // AJAX request failed
}
},
error: function(xhr, status, error) {
showAlert("Validation request failed: " + error, "Validation Error");
dfObj.reject(); // AJAX request failed
}
});
}, function() {
// If save fails, reject the deferred object to stop the reconfigure action
showAlert("Failed to save configuration.", "Error");
dfObj.reject();
});
});
},
false, // disable_dialog: Show the dialog with the validation error
function(errorData) { // callback_fail: What to do when save fails
// Handle failure due to validation errors or other issues
showAlert("Configuration save failed: " + (errorData.message || "Validation Error"), "Error");
dfObj.reject(); // Reject the deferred object to stop the reconfigure action
}
);
return dfObj.promise();
},
@@ -100,15 +104,25 @@
}
});
// Adding Save functionality, so saving can be done independantly from applying
$("#saveSettings").click(function() {
saveFormToEndpoint("/api/caddy/general/set", 'frm_GeneralSettings', function() {
// Callback function on successful save, optional
showAlert("Configuration saved successfully. Please don't forget to apply the configuration.", "Save Successful");
}, function() {
// Callback function on save failure
showAlert("Failed to save configuration.", "Error");
});
$("#saveSettings").SimpleActionButton({
onAction: function() {
const dfObj = $.Deferred();
// Save the form before continuing
saveFormToEndpoint("/api/caddy/general/set", 'frm_GeneralSettings',
function() { // callback_ok: What to do when save is successful
showAlert("Configuration saved successfully. Please don't forget to apply the configuration.", "Save Successful");
dfObj.resolve();
},
false, // disable_dialog: Show the dialog with the validation error
function(errorData) { // callback_fail: What to do when save fails
showAlert("Configuration save failed: " + (errorData.message || "Validation Error"), "Error");
dfObj.reject();
}
);
return dfObj.promise();
},
});
// Initialize the service control UI for 'caddy'