bucket cards management

app/components/deck/Playlist.vue

@@ -10,7 +10,8 @@
     <SelectCardRank @change="onRankChange" />
     <SelectCardSuit @change="onSuitChange" />
   </div>
-  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }"
+    @dragover.prevent @drop.prevent="handleGlobalDrop">
     <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
       @card-click="playerStore.playPlaylistTrack(track)" :is-face-up="isCardRevealed(track.id)"
       @click-card-symbol="openCardSharer()" />
@@ -18,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -48,7 +49,82 @@ const uiStore = useUiStore()
 
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
-const filteredTracks = ref(tracks.value)
+
+// Suivre si un glisser est en cours depuis le bucket
+const isDraggingFromBucket = ref(false)
+
+// Gérer le dépôt d'une carte en dehors du bucket
+const handleGlobalDrop = (e: DragEvent) => {
+  if (isDraggingFromBucket.value) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Récupérer les données de la carte glissée
+    const cardData = e.dataTransfer?.getData('application/json')
+    if (cardData) {
+      try {
+        const track = JSON.parse(cardData)
+        // Retirer la carte du panier
+        cardStore.removeFromBucket(track.id)
+        // La carte réapparaîtra automatiquement dans la playlist
+        // grâce à la computed property filteredTracks
+      } catch (e) {
+        console.error('Erreur lors du traitement de la carte glissée', e)
+      }
+    }
+  }
+  isDraggingFromBucket.value = false
+}
+
+// Gérer le début du glisser depuis le bucket
+const handleBucketDragStart = () => {
+  isDraggingFromBucket.value = true
+}
+
+// Configurer les écouteurs d'événements
+onMounted(() => {
+  document.addEventListener('drop', handleGlobalDrop)
+  document.addEventListener('dragover', (e) => e.preventDefault()) // Nécessaire pour permettre le drop
+  document.addEventListener('bucket-drag-start', handleBucketDragStart)
+})
+
+// Nettoyer les écouteurs d'événements
+onUnmounted(() => {
+  document.removeEventListener('drop', handleGlobalDrop)
+  document.removeEventListener('dragover', (e) => e.preventDefault())
+  document.removeEventListener('bucket-drag-start', handleBucketDragStart)
+})
+
+// Utiliser une computed property pour filteredTracks qui réagit aux changements
+const filteredTracks = computed(() => {
+  let result = [...tracks.value]
+
+  // Exclure les pistes déjà dans le panier
+  result = result.filter(track => !cardStore.isInBucket(track.id))
+
+  // Appliquer les autres filtres
+  if (selectedSuit.value) {
+    result = result.filter(track => track.card?.suit === selectedSuit.value)
+  }
+
+  if (selectedRank.value) {
+    result = result.filter(track => track.card?.rank === selectedRank.value)
+  }
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(track => {
+      const artistName = typeof track.artist === 'object' ? track.artist?.name : String(track.artist || '')
+      return (
+        track.title?.toLowerCase().includes(query) ||
+        artistName.toLowerCase().includes(query) ||
+        String(track.year || '').includes(query)
+      )
+    })
+  }
+
+  return result
+})
 
 // Variables réactives pour les filtres
 const selectedSuit = ref('')
@@ -86,35 +162,11 @@ const onSearch = (query: string) => {
 }
 
 // Applique tous les filtres (couleur, rang et recherche)
+// La computed property filteredTracks se mettra automatiquement à jour
+// car elle dépend des mêmes réactifs que cette fonction
 const applyFilters = () => {
-  let result = [...tracks.value]
-
-  // Filtre par couleur
-  if (selectedSuit.value) {
-    result = result.filter(track => track.card?.suit === selectedSuit.value)
-  }
-
-  // Filtre par rang
-  if (selectedRank.value) {
-    result = result.filter(track => track.card?.rank === selectedRank.value)
-  }
-
-  // Filtre par recherche textuelle
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase()
-    result = result.filter(track => {
-      // Gestion du nom d'artiste (peut être un objet ou une chaîne)
-      const artistName = typeof track.artist === 'object' ? track.artist?.name : String(track.artist || '')
-      // Recherche dans le titre, l'artiste et l'année
-      return (
-        track.title?.toLowerCase().includes(query) ||
-        artistName.toLowerCase().includes(query) ||
-        String(track.year || '').includes(query)
-      )
-    })
-  }
-
-  filteredTracks.value = result
+  // Cette fonction ne fait plus que déclencher la réévaluation des dépendances
+  // La computed property filteredTracks fera le reste
 }
 </script>