Enhance ExamSearchSelectMultipleWidget: improve button styling and add functionality for adding multiple exams

This commit is contained in:
Ross
2025-12-08 12:54:52 +00:00
parent 012c86340d
commit d39879bbca
+26 -8
View File
@@ -484,7 +484,7 @@ class ExamSearchSelectMultipleWidget:
{selected_html}
</ul>
<div class="mt-2 text-end">
<button type="button" id="exam_remove_all_{self.name}" class="btn btn-sm btn-outline-danger exam-remove-all-btn d-none" data-field="{self.name}">Remove all</button>
<button type="button" id="exam_remove_all_{self.name}" class="btn btn-sm btn-outline-danger exam-remove-all-btn d-none py-0 px-1 small" data-field="{self.name}">Remove all</button>
</div>
</div>
@@ -568,16 +568,25 @@ class ExamSearchSelectMultipleWidget:
}});
}}
// Delegate add clicks from results
// Delegate clicks from results: add single or add-all (works for dynamically inserted content)
results.addEventListener('click', function(e) {{
const btn = e.target.closest('.exam-add-btn');
if (!btn) return;
const id = btn.getAttribute('data-exam-id');
const text = btn.getAttribute('data-exam-text') || btn.textContent.trim();
addExamToField(widgetFieldName, id, text);
const addBtn = e.target.closest('.exam-add-btn');
if (addBtn) {{
const id = addBtn.getAttribute('data-exam-id');
const text = addBtn.getAttribute('data-exam-text') || addBtn.textContent.trim();
addExamToField(widgetFieldName, id, text);
return;
}}
const addAllBtnDynamic = e.target.closest('.exam-add-all-btn');
if (addAllBtnDynamic) {{
e.preventDefault();
addAllExamsFromResults(widgetFieldName);
return;
}}
}});
// Wire up "Add all results" button if present
// Wire up "Add all results" static button if present (fallback)
const addAllBtn = results.parentElement.querySelector('.exam-add-all-btn');
if (addAllBtn) {{
addAllBtn.addEventListener('click', function(e) {{
@@ -586,6 +595,15 @@ class ExamSearchSelectMultipleWidget:
}});
}}
// Initialize remove-all visibility based on any pre-populated selections
try {{
var initList = document.getElementById('selected_exams_' + widgetFieldName);
var remBtnInit = document.getElementById('exam_remove_all_' + widgetFieldName);
if (remBtnInit && initList) {{
remBtnInit.classList.toggle('d-none', initList.querySelectorAll('li').length < 2);
}}
}} catch (e) {{ /* ignore in older browsers */ }}
// Wire up "Remove all" button for this widget instance
const removeAllBtn = document.getElementById('exam_remove_all_' + widgetFieldName);
if (removeAllBtn) {{