Add Select all/Deselect all button to filter bar for mobile
This commit is contained in:
@@ -70,6 +70,7 @@
|
|||||||
</select>
|
</select>
|
||||||
<input type="text" id="filter-text" oninput="applyFilters()" placeholder="Search…"
|
<input type="text" id="filter-text" oninput="applyFilters()" placeholder="Search…"
|
||||||
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;width:140px;">
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;width:140px;">
|
||||||
|
<button type="button" id="select-all-btn" onclick="mobileSelectAll()" class="btn btn-sm btn-secondary" style="display:none;">Select all</button>
|
||||||
<button type="button" onclick="resetFilters()" class="btn btn-sm btn-secondary" id="filter-reset" style="display:none;">✕ Reset</button>
|
<button type="button" onclick="resetFilters()" class="btn btn-sm btn-secondary" id="filter-reset" style="display:none;">✕ Reset</button>
|
||||||
<span id="filter-count" style="font-size:0.8rem;color:#64748b;"></span>
|
<span id="filter-count" style="font-size:0.8rem;color:#64748b;"></span>
|
||||||
</div>
|
</div>
|
||||||
@@ -224,6 +225,7 @@
|
|||||||
var selectAll = document.getElementById('select-all');
|
var selectAll = document.getElementById('select-all');
|
||||||
var toolbar = document.getElementById('bulk-toolbar');
|
var toolbar = document.getElementById('bulk-toolbar');
|
||||||
var countEl = document.getElementById('selected-count');
|
var countEl = document.getElementById('selected-count');
|
||||||
|
var selectAllBtn = document.getElementById('select-all-btn');
|
||||||
|
|
||||||
function visibleCbs() {
|
function visibleCbs() {
|
||||||
return Array.prototype.filter.call(
|
return Array.prototype.filter.call(
|
||||||
@@ -241,6 +243,18 @@ function updateToolbar() {
|
|||||||
var visChecked = vis.filter(function(cb) { return cb.checked; });
|
var visChecked = vis.filter(function(cb) { return cb.checked; });
|
||||||
selectAll.indeterminate = visChecked.length > 0 && visChecked.length < vis.length;
|
selectAll.indeterminate = visChecked.length > 0 && visChecked.length < vis.length;
|
||||||
selectAll.checked = vis.length > 0 && visChecked.length === vis.length;
|
selectAll.checked = vis.length > 0 && visChecked.length === vis.length;
|
||||||
|
if (selectAllBtn) {
|
||||||
|
selectAllBtn.style.display = vis.length > 0 ? '' : 'none';
|
||||||
|
selectAllBtn.textContent = (vis.length > 0 && visChecked.length === vis.length)
|
||||||
|
? 'Deselect all' : 'Select all';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mobileSelectAll() {
|
||||||
|
var vis = visibleCbs();
|
||||||
|
var allChecked = vis.length > 0 && vis.every(function(cb) { return cb.checked; });
|
||||||
|
vis.forEach(function(cb) { cb.checked = !allChecked; });
|
||||||
|
updateToolbar();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('.row-cb').forEach(function(cb) {
|
document.querySelectorAll('.row-cb').forEach(function(cb) {
|
||||||
@@ -340,6 +354,7 @@ function updateBulkField(sel) {
|
|||||||
}
|
}
|
||||||
// initialise disabled state on page load
|
// initialise disabled state on page load
|
||||||
document.getElementById('bulk-field-value-brand').disabled = true;
|
document.getElementById('bulk-field-value-brand').disabled = true;
|
||||||
|
updateToolbar();
|
||||||
|
|
||||||
// Column picker
|
// Column picker
|
||||||
var COL_KEY = 'battery_cols';
|
var COL_KEY = 'battery_cols';
|
||||||
|
|||||||
Reference in New Issue
Block a user