149 lines
3.2 KiB
Vue
149 lines
3.2 KiB
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="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, defineEmits, onMounted } from 'vue'
|
|
import draggable from 'vuedraggable'
|
|
import { useDataStore } from '~/store/data'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'card-dropped', track: any): void
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
modelValue?: any[]
|
|
boxId?: string
|
|
}>()
|
|
|
|
const dataStore = useDataStore()
|
|
const isDragOver = ref(false)
|
|
const drag = ref(false)
|
|
const tracks = ref<any[]>(props.modelValue || [])
|
|
const bucket = ref()
|
|
|
|
watch(() => props.modelValue, (newValue) => {
|
|
if (newValue) {
|
|
tracks.value = [...newValue]
|
|
}
|
|
})
|
|
|
|
if (props.boxId) {
|
|
onMounted(async () => {
|
|
await dataStore.loadData()
|
|
if (props.boxId) {
|
|
tracks.value = dataStore.getTracksByboxId(props.boxId)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Gestion du drag and drop desktop
|
|
const onDragEnter = (e: DragEvent) => {
|
|
e.preventDefault()
|
|
isDragOver.value = true
|
|
}
|
|
|
|
const onDragOver = (e: DragEvent) => {
|
|
e.preventDefault()
|
|
isDragOver.value = true
|
|
}
|
|
|
|
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
|
|
const cardData = e.dataTransfer?.getData('application/json')
|
|
if (cardData) {
|
|
try {
|
|
const track = JSON.parse(cardData)
|
|
if (!tracks.value.some(t => t.id === track.id)) {
|
|
tracks.value.push(track)
|
|
}
|
|
} catch (e) {
|
|
console.error('Erreur lors du traitement de la carte déposée', e)
|
|
}
|
|
}
|
|
}
|
|
|
|
const flipCard = (track: any) => {
|
|
track.isFaceUp = !track.isFaceUp
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Écouter aussi les événements tactiles personnalisés
|
|
bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
|
|
emit('card-dropped', e.detail)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bucket {
|
|
min-height: 200px;
|
|
border: 2px dashed #ccc;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
transition: all 0.3s ease;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
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: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
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;
|
|
}
|
|
</style>
|