Add bulk selection for filtered set questions

This commit is contained in:
Wojtek
2026-10-16 21:08:28 +02:00
parent 9af456989a
commit 344c1b42a2
5 changed files with 36 additions and 4 deletions
@@ -96,6 +96,7 @@ HTMLHelper::_('behavior.formvalidator');
<div class="mb-3">
<label for="set-question-category" class="form-label"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_CATEGORY_FILTER'); ?></label>
<select id="set-question-category" class="form-select">
<option value="__choose" selected><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_CHOOSE_CATEGORY'); ?></option>
<option value=""><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_ALL_CATEGORIES'); ?></option>
<?php foreach ($this->categories as $category) : ?>
<option value="<?php echo (int) $category->id; ?>"><?php echo $this->escape($category->title); ?></option>
@@ -106,6 +107,10 @@ HTMLHelper::_('behavior.formvalidator');
<label for="set-question-ids" class="form-label"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_ID_FILTER'); ?></label>
<input type="text" id="set-question-ids" class="form-control" placeholder="<?php echo $this->escape(\Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_ID_FILTER_HINT')); ?>" inputmode="numeric">
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="set-question-select-visible">
<label class="form-check-label" for="set-question-select-visible"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SET_SELECT_ALL_VISIBLE'); ?></label>
</div>
<div id="set-available-question-list" class="border rounded p-3">
<?php foreach ($this->questions as $question) : ?>
<?php if (in_array((int) $question->id, array_map('intval', (array) $this->item->question_ids), true)) continue; ?>
@@ -186,12 +191,25 @@ document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function () {
const filter = document.getElementById('set-question-category');
const idFilter = document.getElementById('set-question-ids');
const selectVisible = document.getElementById('set-question-select-visible');
const rows = document.querySelectorAll('.set-available-question-row');
if (!filter || !idFilter) {
if (!filter || !idFilter || !selectVisible) {
return;
}
const visibleRows = function () {
return Array.from(rows).filter(function (row) { return !row.classList.contains('d-none'); });
};
const updateSelectVisible = function () {
const checkboxes = visibleRows().map(function (row) { return row.querySelector('input[type="checkbox"]'); });
const checkedCount = checkboxes.filter(function (checkbox) { return checkbox.checked; }).length;
selectVisible.checked = checkboxes.length > 0 && checkedCount === checkboxes.length;
selectVisible.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
selectVisible.disabled = checkboxes.length === 0;
};
const applyFilters = function () {
const requestedIds = idFilter.value
.split(',')
@@ -199,14 +217,25 @@ document.addEventListener('DOMContentLoaded', function () {
.filter(function (value) { return value !== ''; });
rows.forEach(function (row) {
const matchesCategory = filter.value === '' || row.dataset.category === filter.value;
const matchesCategory = filter.value !== '__choose' && (filter.value === '' || row.dataset.category === filter.value);
const matchesId = requestedIds.length === 0 || requestedIds.includes(row.dataset.id);
row.classList.toggle('d-none', !matchesCategory || !matchesId);
});
updateSelectVisible();
};
filter.addEventListener('change', applyFilters);
idFilter.addEventListener('input', applyFilters);
selectVisible.addEventListener('change', function () {
visibleRows().forEach(function (row) {
row.querySelector('input[type="checkbox"]').checked = selectVisible.checked;
});
updateSelectVisible();
});
rows.forEach(function (row) {
row.querySelector('input[type="checkbox"]').addEventListener('change', updateSelectVisible);
});
applyFilters();
});
</script>
<script>