compose elt v0.1

app/components/Bucket.vue

@@ -1,36 +1,49 @@
 <template>
   <div class="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
     @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
-    <div class="bucket-content">
-      <div v-if="cards.length === 0" class="bucket-empty">
-        Drop cards here
-      </div>
-      <div v-else class="bucket-cards">
-        <Card v-for="(card, index) in cards" :key="index" :track="card" class="bucket-card" isFaceUp />
-      </div>
+    <div v-if="tracks.length === 0" class="bucket-empty">
+      Drop cards here
     </div>
+    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="onDragStart" @end="onDragEnd"
+      :touch-start-threshold="50">
+      <template #item="{ element: track }">
+        <card :track="track" tabindex="0" is-face-up class="bucket-card" @click="flipCard(track)" />
+      </template>
+    </draggable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import draggable from 'vuedraggable'
+import { useDataStore } from '~/store/data'
 
 const props = defineProps<{
   modelValue?: any[]
+  boxId?: string
 }>()
 
-const emit = defineEmits(['update:modelValue', 'card-dropped'])
-
+const dataStore = useDataStore()
 const isDragOver = ref(false)
-const cards = ref<any[]>(props.modelValue || [])
+const drag = ref(false)
+const tracks = ref<any[]>(props.modelValue || [])
+const touchedCard = ref<any>(null)
+const touchStartPos = ref<{ x: number, y: number } | null>(null)
 
-// Mettre à jour les cartes quand la prop change
 watch(() => props.modelValue, (newValue) => {
   if (newValue) {
-    cards.value = [...newValue]
+    tracks.value = [...newValue]
   }
 })
 
+if (props.boxId) {
+  onMounted(async () => {
+    await dataStore.loadData()
+    tracks.value = dataStore.getTracksByboxId(props.boxId)
+  })
+}
+
+// Gestion du drag and drop desktop
 const onDragEnter = (e: DragEvent) => {
   e.preventDefault()
   isDragOver.value = true
@@ -45,76 +58,79 @@ const onDragLeave = () => {
   isDragOver.value = false
 }
 
+const onDragStart = () => {
+  drag.value = true
+}
+
+const onDragEnd = () => {
+  drag.value = false
+  isDragOver.value = false
+}
+
 const onDrop = (e: DragEvent) => {
   isDragOver.value = false
-
-  // Récupérer les données de la carte depuis l'événement de glisser
   const cardData = e.dataTransfer?.getData('application/json')
   if (cardData) {
     try {
-      const card = JSON.parse(cardData)
-      cards.value = [...cards.value, card]
-      emit('update:modelValue', cards.value)
-      emit('card-dropped', card)
+      const track = JSON.parse(cardData)
+      if (!tracks.value.some(t => t.id === track.id)) {
+        tracks.value.push(track)
+      }
     } catch (e) {
-      console.error('Invalid card data', e)
+      console.error('Erreur lors du traitement de la carte déposée', e)
     }
   }
 }
+
+const flipCard = (track: any) => {
+  track.isFaceUp = !track.isFaceUp
+}
 </script>
 
 <style scoped>
 .bucket {
-  width: 120px;
-  min-height: 160px;
+  min-height: 200px;
   border: 2px dashed #ccc;
   border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f9f9f9;
-  transition: all 0.2s ease;
   padding: 1rem;
-  position: relative;
-  overflow: hidden;
+  transition: all 0.3s ease;
+  background-color: rgba(255, 255, 255, 0.1);
+  touch-action: none;
 }
 
 .bucket.drag-over {
-  border-color: #4f46e5;
-  background-color: #eef2ff;
-  transform: scale(1.02);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.bucket-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  border-color: #4CAF50;
+  background-color: rgba(76, 175, 80, 0.1);
 }
 
 .bucket-empty {
-  color: #9ca3af;
-  text-align: center;
-  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #666;
+  font-style: italic;
 }
 
 .bucket-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
   width: 100%;
 }
 
 .bucket-card {
-  background: white;
-  border-radius: 4px;
-  padding: 0.5rem;
-  font-size: 0.8rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: transform 0.2s;
+  cursor: move;
+  touch-action: none;
+  /* Important pour le touch */
+}
+
+.bucket-card:hover {
+  transform: translateY(-4px);
+}
+
+.bucket-card:active {
+  opacity: 0.7;
 }
 </style>