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()">
</div>
<!-- Batch action bar (hidden until selection) -->
<div class="watchlist-batch-bar" id="watchlist-batch-bar" style="display: none;">
<span class="watchlist-batch-count" id="watchlist-batch-count">0 selected</span>
<!-- Batch action bar -->
<div class="watchlist-batch-bar" id="watchlist-batch-bar">
<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"
id="watchlist-batch-remove-btn"
onclick="batchRemoveFromWatchlist()">
onclick="batchRemoveFromWatchlist()"
style="display: none;">
Remove Selected
</button>
</div>
@ -33622,15 +33627,38 @@ function getVisibleCheckedWatchlist() {
*/
function updateWatchlistBatchBar() {
const checked = getVisibleCheckedWatchlist();
const bar = document.getElementById('watchlist-batch-bar');
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) {
bar.style.display = 'flex';
countEl.textContent = `${checked.length} selected`;
removeBtn.style.display = '';
} 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 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
gap: 12px;
padding: 8px 20px;
margin: 0 32px 12px;
background: rgba(255, 59, 48, 0.1);
border: 1px solid rgba(255, 59, 48, 0.25);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
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 {