evilspins/app/components/Bucket.vue

<template>
  <div class="bucket" ref="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
    <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="handleDragStart" @end="handleDragEnd"
      :touch-start-threshold="50" :component-data="{
        tag: 'div',
        type: 'transition-group',
        name: 'list'
      }">
      <template #item="{ element: track }">
        <div class="bucket-card-wrapper">
          <card :track="track" tabindex="0" is-face-up class="bucket-card"
            @card-click="playerStore.playPlaylistTrack(track)" />
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, onMounted } from 'vue'
import draggable from 'vuedraggable'
import { useCardStore } from '~/store/card'
import { usePlayerStore } from '~/store/player'


const emit = defineEmits<{
  (e: 'card-dropped', track: any): void
  (e: 'update:modelValue', value: any[]): void
}>()

const props = defineProps<{
  modelValue?: any[]
  boxId?: string
}>()

const cardStore = useCardStore()
const playerStore = usePlayerStore()
const isDragOver = ref(false)
const drag = ref(false)
const bucket = ref()

// Utilisation du bucket du store comme source de vérité
const tracks = computed({
  get: () => cardStore.bucket,
  set: (value) => {
    // Update the store when the order changes
    cardStore.updateBucketOrder(value)
  }
})

// Charger les données du localStorage au montage
onMounted(() => {
  cardStore.loadBucketFromLocalStorage()
})

// Gestion du drag and drop desktop
const handleDragStart = (event: { item: HTMLElement }) => {
  drag.value = true
  // Émettre un événement personnalisé pour indiquer qu'un glisser a commencé depuis le bucket
  document.dispatchEvent(new CustomEvent('bucket-drag-start'))
}

const handleDragEnd = (event: { item: HTMLElement; newIndex: number; oldIndex: number }) => {
  drag.value = false
  isDragOver.value = false
  // Update the store with the new order if the position changed
  if (event.newIndex !== event.oldIndex) {
    // The store will handle the reordering automatically through the v-model binding
  }
}

const onDragEnter = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragOver = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragLeave = () => {
  isDragOver.value = false
}

const onDrop = (e: DragEvent) => {
  isDragOver.value = false
  const cardData = e.dataTransfer?.getData('application/json')
  if (cardData) {
    try {
      const track = JSON.parse(cardData)
      cardStore.addToBucket(track)
    } catch (e) {
      console.error('Erreur lors du traitement de la carte déposée', e)
    }
  }
}

onMounted(() => {
  // Écouter aussi les événements tactiles personnalisés
  bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
    emit('card-dropped', e.detail)
  })
})
</script>

<style>
.bucket {
  min-height: 200px;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  touch-action: none;
}

.bucket.drag-over {
  border-color: #4CAF50;
  background-color: rgba(76, 175, 80, 0.1);
}

.bucket-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
  font-style: italic;
}

.bucket-cards {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bucket-card {
  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;
}

.bucket-card-wrapper {
  width: 70px;
  transition: width 0.3s ease;
}

.bucket:hover,
.card-dragging {
  border: 2px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.4);

  .bucket-card-wrapper {
    width: 280px;
  }
}
</style>