fix: multi-sélection — Set() remplacé par {} pour réactivité Alpine.js
FlowDeck CI / test (push) Failing after 3s
FlowDeck CI / docker (push) Has been skipped

Cause: Alpine.js ne détecte pas les mutations de Set() → les checkboxes
et la bulk bar ne se mettaient jamais à jour.

Fix: selectedIds devenu un objet {} (clés = IDs, valeurs = true).
selectedIdsCount (number) remplace .size pour la réactivité.
toggleSelect: Object.assign({}, selectedIds) force la réactivité.
bulkDelete: Object.keys(selectedIds) au lieu de Array.from(Set).
selectAll + Clear: boucles for..in au lieu de .clear().

Alpine détecte les changements sur les objets simples,
contrairement aux objets Set().
This commit is contained in:
2026-07-11 22:04:37 -04:00
parent a43dcfcb9f
commit d8a2cebdd6
+21 -20
View File
@@ -277,10 +277,10 @@
</div>
<!-- Bulk actions bar -->
<div class="bulk-bar" x-show="selectedIds.size > 0" x-transition>
<span x-text="selectedIds.size + ' selected'"></span>
<div class="bulk-bar" x-show="selectedIdsCount > 0" x-transition>
<span x-text="selectedIdsCount + ' selected'"></span>
<button class="btn btn-danger" @click="bulkDelete()">🗑 Delete</button>
<button class="btn btn-secondary" @click="selectedIds.clear(); selectedIds=new Set()">✕ Clear</button>
<button class="btn btn-secondary" @click="for(var k in selectedIds) delete selectedIds[k]; selectedIdsCount=0">✕ Clear</button>
</div>
<!-- Tree -->
@@ -317,9 +317,9 @@
:data-folder-id="node.is_folder ? node.id : null"
@dragstart="onInternalDragStart($event, node.id)"
@dragend="draggedItemId = null; $el.style.opacity = ''"
:class="{ selected: selectedIds.has(node.id) }">
:class="{ selected: !!selectedIds[node.id] }">
<input type="checkbox" class="item-checkbox"
:checked="selectedIds.has(node.id)"
:checked="!!selectedIds[node.id]"
@click.stop="toggleSelect(node, $event)"
title="Select item">
<!-- chevron -->
@@ -384,8 +384,8 @@
</tr></thead>
<tbody>
<template x-for="node in flatTree" :key="'t'+node.id">
<tr :class="{ selected: selectedIds.has(node.id) }">
<td><input type="checkbox" :checked="selectedIds.has(node.id)" @click.stop="toggleSelect(node, $event)"></td>
<tr :class="{ selected: !!selectedIds[node.id] }">
<td><input type="checkbox" :checked="!!selectedIds[node.id]" @click.stop="toggleSelect(node, $event)"></td>
<td>
<span class="table-icon" x-text="_fileIcon(node.name, node.is_folder, node.content_format)"></span>
<span class="table-name" @click="node.is_folder ? navigateToFolder(node.id) : openPage(node.id)" x-text="node.name"></span>
@@ -504,7 +504,8 @@ document.addEventListener('alpine:init', function() {
viewMode: 'tree',
// Multi-select
selectedIds: new Set(),
selectedIds: {},
selectedIdsCount: 0,
lastSelectedId: null,
// Undo
@@ -604,20 +605,20 @@ document.addEventListener('alpine:init', function() {
var end = allIds.indexOf(node.id);
if (start !== -1 && end !== -1) {
var from = Math.min(start, end), to = Math.max(start, end);
for (var i = from; i <= to; i++) this.selectedIds.add(allIds[i]);
for (var i = from; i <= to; i++) this.selectedIds[allIds[i]] = true;
}
} else if (ev.ctrlKey || ev.metaKey) {
// Toggle single
if (this.selectedIds.has(node.id)) this.selectedIds.delete(node.id);
else this.selectedIds.add(node.id);
if (!!this.selectedIds[node.id]) delete this.selectedIds[node.id];
else this.selectedIds[node.id] = true;
} else {
// Replace selection
this.selectedIds.clear();
this.selectedIds.add(node.id);
for (var k in this.selectedIds) delete this.selectedIds[k];
this.selectedIds[node.id] = true;
}
this.lastSelectedId = node.id;
// Force reactivity
this.selectedIds = new Set(this.selectedIds);
this.selectedIds = Object.assign({}, this.selectedIds); this.selectedIdsCount = Object.keys(this.selectedIds).length;
},
_collectVisibleIds(nodes) {
var ids = [];
@@ -628,25 +629,25 @@ document.addEventListener('alpine:init', function() {
return ids;
},
async bulkDelete() {
var ids = Array.from(this.selectedIds);
var ids = Object.keys(this.selectedIds);
if (ids.length === 0) return;
if (!confirm('Delete ' + ids.length + ' selected items?')) return;
var self = this;
for (var i=0; i<ids.length; i++) {
await fetch('/api/local-workspace/items/' + ids[i], { method: 'DELETE' });
}
this.selectedIds.clear();
this.selectedIds = new Set();
for (var k in this.selectedIds) delete this.selectedIds[k];
this.selectedIdsCount = 0;
this._reloadAfterAction();
},
selectAll(ev) {
if (ev.target.checked) {
var all = this._collectVisibleIds(this.displayTree);
for (var i=0; i<all.length; i++) this.selectedIds.add(all[i]);
for (var i=0; i<all.length; i++) this.selectedIds[all[i]] = true;
} else {
this.selectedIds.clear();
for (var k in this.selectedIds) delete this.selectedIds[k];
}
this.selectedIds = new Set(this.selectedIds);
this.selectedIds = Object.assign({}, this.selectedIds); this.selectedIdsCount = Object.keys(this.selectedIds).length;
},
// ── Table view data ──