feat: standardize admin form limits and guidance

This commit is contained in:
Tống Thành Đạt
2026-04-10 15:55:15 +07:00
parent 7ce5921fe0
commit 51c6303437
34 changed files with 1692 additions and 361 deletions

View File

@@ -107,7 +107,7 @@
<div class="col-md-6">
<label class="form-label fw-medium">Country Icon (Flag)</label>
<div class="input-group mb-2">
<input type="text" name="icon" id="icon_input" class="form-control" placeholder="/uploads/visa/flag.png" required />
<input type="text" name="icon" id="icon_input" class="form-control" placeholder="/uploads/visa/flag.png" maxlength="255" data-maxlength="255" data-admin-upload-guidance="Displayed as a small country flag or icon.|Prefer SVG; otherwise use a square image at 96x96px or larger." required />
<button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileFlagInput').click()">
<i class="fas fa-upload"></i>
</button>
@@ -146,7 +146,7 @@
<div class="col-md-12">
<label class="form-label fw-medium">Main Image</label>
<div class="input-group mb-2">
<input type="text" id="mainImage_detail" name="mainImage" class="form-control" placeholder="/uploads/visa/details-1.jpg" required />
<input type="text" id="mainImage_detail" name="mainImage" class="form-control" placeholder="/uploads/visa/details-1.jpg" maxlength="255" data-maxlength="255" data-admin-upload-guidance="Used in visa detail content blocks.|Recommended upload: at least 1000x750px for primary imagery." required />
<button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileDetailMainInput').click()">
<i class="fas fa-upload"></i>
</button>
@@ -236,7 +236,7 @@
<div class="col-md-12">
<label class="form-label fw-medium">Gallery Image <%= i %></label>
<div class="input-group mb-2">
<input type="text" class="form-control" id="bannerImageGallery<%= i %>" name="bannerImageGallery" placeholder="https://example.com/image.jpg" required />
<input type="text" class="form-control" id="bannerImageGallery<%= i %>" name="bannerImageGallery" placeholder="https://example.com/image.jpg" maxlength="255" data-maxlength="255" data-admin-upload-guidance="Gallery image used in visa detail content.|Recommended upload: at least 1000x750px." required />
<button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileGalleryInput<%= i %>').click()">
<i class="fas fa-upload"></i>
</button>
@@ -330,7 +330,7 @@
<div class="col-md-5">
<label class="form-label fw-medium small">Icon</label>
<div class="input-group input-group-sm">
<input type="text" name="related_icon[]" id="related_url_<%= i %>" class="form-control form-control-sm" placeholder="/uploads/visa/icon.png" required />
<input type="text" name="related_icon[]" id="related_url_<%= i %>" class="form-control form-control-sm" placeholder="/uploads/visa/icon.png" maxlength="255" data-maxlength="255" data-admin-upload-guidance="Supporting service image.|Recommended upload: at least 800x600px." required />
<input type="file" id="related_file_<%= i %>" class="d-none" accept="image/*">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="document.getElementById('related_file_<%= i %>').click()">
<i class="fas fa-upload"></i>
@@ -365,7 +365,7 @@
<div class="col-md-12">
<label class="form-label fw-medium">Image Contact</label>
<div class="input-group mb-2">
<input type="text" id="contact_image_input" name="contact_image" class="form-control" placeholder="/uploads/visa/contact-image.jpg" required />
<input type="text" id="contact_image_input" name="contact_image" class="form-control" placeholder="/uploads/visa/contact-image.jpg" maxlength="255" data-maxlength="255" data-admin-upload-guidance="Contact-side supporting image.|Recommended upload: at least 800x600px." required />
<button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileContactImageInput').click()">
<i class="fas fa-upload"></i>
</button>
@@ -599,17 +599,75 @@
setupImageUploadHandlers();
});
function showListView() {
document.getElementById("tableContainer").style.display = "block";
document.getElementById("formContainer").style.display = "none";
document.getElementById("viewContainer").style.display = "none";
}
function showFormView() {
document.getElementById("tableContainer").style.display = "none";
document.getElementById("formContainer").style.display = "block";
document.getElementById("viewContainer").style.display = "none";
}
function showListView() {
document.getElementById("tableContainer").style.display = "block";
document.getElementById("formContainer").style.display = "none";
document.getElementById("viewContainer").style.display = "none";
}
function refreshVisaAdminHelpers() {
if (!window.AdminFormHelpers) {
return;
}
const formContainer = document.getElementById("formContainer");
window.AdminFormHelpers.refresh(formContainer);
const guidanceTargets = [
{
selector: "#icon_input",
lines: [
"Displayed as a small country flag or icon.",
"Prefer SVG; otherwise use a square image at 96x96px or larger."
]
},
{
selector: "#mainImage_detail",
lines: [
"Used in visa detail content blocks.",
"Recommended upload: at least 1000x750px for primary imagery."
]
},
{
selector: "input[name='bannerImageGallery']",
lines: [
"Gallery image used in visa detail content.",
"Recommended upload: at least 1000x750px."
]
},
{
selector: "input[name='related_icon[]']",
lines: [
"Supporting service image.",
"Recommended upload: at least 800x600px."
]
},
{
selector: "#contact_image_input",
lines: [
"Contact-side supporting image.",
"Recommended upload: at least 800x600px."
]
}
];
guidanceTargets.forEach(({ selector, lines }) => {
document.querySelectorAll(selector).forEach((input) => {
window.AdminFormHelpers.renderUploadGuidance(input, {
for: input.id || input.name || "",
title: "Upload guidance",
lines
});
});
});
}
function showFormView() {
document.getElementById("tableContainer").style.display = "none";
document.getElementById("formContainer").style.display = "block";
document.getElementById("viewContainer").style.display = "none";
refreshVisaAdminHelpers();
}
function showViewView() {
document.getElementById("tableContainer").style.display = "none";
@@ -795,12 +853,13 @@
}
}
showFormView();
} catch (error) {
console.error("Error:", error);
showNotification('Cannot connect to server. Please try again.', 'error');
showFormView();
refreshVisaAdminHelpers();
} catch (error) {
console.error("Error:", error);
showNotification('Cannot connect to server. Please try again.', 'error');
}
}
@@ -892,9 +951,10 @@
if (field) field.value = "";
});
showFormView();
});
showFormView();
refreshVisaAdminHelpers();
});
document.getElementById("btnBackToList").addEventListener("click", showListView);
document.getElementById("btnBackFromView").addEventListener("click", showListView);
@@ -1031,4 +1091,4 @@
btnSave.innerHTML = '<i class="fas fa-save me-2"></i>Save';
}
});
</script>
</script>