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} {selected_html}
</ul> </ul>
<div class="mt-2 text-end"> <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>
</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) {{ results.addEventListener('click', function(e) {{
const btn = e.target.closest('.exam-add-btn'); const addBtn = e.target.closest('.exam-add-btn');
if (!btn) return; if (addBtn) {{
const id = btn.getAttribute('data-exam-id'); const id = addBtn.getAttribute('data-exam-id');
const text = btn.getAttribute('data-exam-text') || btn.textContent.trim(); const text = addBtn.getAttribute('data-exam-text') || addBtn.textContent.trim();
addExamToField(widgetFieldName, id, text); 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'); const addAllBtn = results.parentElement.querySelector('.exam-add-all-btn');
if (addAllBtn) {{ if (addAllBtn) {{
addAllBtn.addEventListener('click', function(e) {{ 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 // Wire up "Remove all" button for this widget instance
const removeAllBtn = document.getElementById('exam_remove_all_' + widgetFieldName); const removeAllBtn = document.getElementById('exam_remove_all_' + widgetFieldName);
if (removeAllBtn) {{ if (removeAllBtn) {{