danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add select all checkbox to watchlist modal for bulk removal

Browse source
This commit is contained in:
Broque Thomas 2026-03-14 12:25:58 -07:00
parent 16a474ac0d
commit 761052145f
2 changed files with 53 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
webui/static/script.js
View file

@ -32320,12 +32320,17 @@ async function showWatchlistModal() {
oninput="filterWatchlistArtists()"> oninput="filterWatchlistArtists()">
</div> </div>
<!-- Batch action bar (hidden until selection) --> <!-- Batch action bar -->
<div class="watchlist-batch-bar" id="watchlist-batch-bar" style="display: none;"> <div class="watchlist-batch-bar" id="watchlist-batch-bar">
<span class="watchlist-batch-count" id="watchlist-batch-count">0 selected</span> <label class="watchlist-select-all-label" onclick="event.stopPropagation();">
<input type="checkbox" id="watchlist-select-all-cb" onchange="toggleWatchlistSelectAll(this.checked)">
<span>Select All</span>
</label>
<span class="watchlist-batch-count" id="watchlist-batch-count"></span>
<button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-batch-remove-btn" <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-batch-remove-btn"
id="watchlist-batch-remove-btn" id="watchlist-batch-remove-btn"
onclick="batchRemoveFromWatchlist()"> onclick="batchRemoveFromWatchlist()"
style="display: none;">
Remove Selected Remove Selected
</button> </button>
</div> </div>
@ -33622,15 +33627,38 @@ function getVisibleCheckedWatchlist() {
*/ */
function updateWatchlistBatchBar() { function updateWatchlistBatchBar() {
const checked = getVisibleCheckedWatchlist(); const checked = getVisibleCheckedWatchlist();
const bar = document.getElementById('watchlist-batch-bar');
const countEl = document.getElementById('watchlist-batch-count'); const countEl = document.getElementById('watchlist-batch-count');
const removeBtn = document.getElementById('watchlist-batch-remove-btn');
const selectAllCb = document.getElementById('watchlist-select-all-cb');
if (checked.length > 0) { if (checked.length > 0) {
bar.style.display = 'flex';
countEl.textContent = `${checked.length} selected`; countEl.textContent = `${checked.length} selected`;
removeBtn.style.display = '';
} else { } else {
bar.style.display = 'none'; countEl.textContent = '';
removeBtn.style.display = 'none';
} }
// Update select-all checkbox state
if (selectAllCb) {
const visible = Array.from(document.querySelectorAll('.watchlist-select-cb')).filter(cb => {
const card = cb.closest('.watchlist-artist-card');
return card && card.style.display !== 'none';
});
selectAllCb.checked = visible.length > 0 && checked.length === visible.length;
selectAllCb.indeterminate = checked.length > 0 && checked.length < visible.length;
}
}
function toggleWatchlistSelectAll(checked) {
const checkboxes = document.querySelectorAll('.watchlist-select-cb');
checkboxes.forEach(cb => {
const card = cb.closest('.watchlist-artist-card');
if (card && card.style.display !== 'none') {
cb.checked = checked;
}
});
updateWatchlistBatchBar();
} }
/** /**

23
webui/static/style.css
View file

@ -12151,13 +12151,26 @@ body {
.wishlist-batch-bar { .wishlist-batch-bar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 12px;
padding: 10px 20px; padding: 8px 20px;
margin: 0 32px 12px; margin: 0 32px 12px;
background: rgba(255, 59, 48, 0.1); background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 59, 48, 0.25); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px; border-radius: 10px;
animation: batchBarSlideIn 0.2s ease-out; }
.watchlist-select-all-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
user-select: none;
}
.watchlist-select-all-label input[type="checkbox"] {
cursor: pointer;
} }
@keyframes batchBarSlideIn { @keyframes batchBarSlideIn {