matthieu
ac11690ad4
Add kanban board with drag-and-drop, backlog section, task/group drawers, DTOs, services, and i18n translations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
|
|
draggable="true"
|
|
@dragstart="onDragStart"
|
|
@dragend="onDragEnd"
|
|
@click="emit('click')"
|
|
>
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
|
|
<button
|
|
class="shrink-0 text-neutral-400 hover:text-primary-500"
|
|
@click.stop
|
|
>
|
|
<Icon name="mdi:play-circle-outline" size="20" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-2 flex items-center gap-1.5">
|
|
<span
|
|
v-if="task.priority"
|
|
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
|
:style="{ backgroundColor: task.priority.color }"
|
|
>
|
|
{{ task.priority.label }}
|
|
</span>
|
|
<span
|
|
v-for="type in task.types"
|
|
:key="type.id"
|
|
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
|
:style="{ backgroundColor: type.color }"
|
|
>
|
|
{{ type.label }}
|
|
</span>
|
|
<span
|
|
v-if="task.assignee"
|
|
class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
|
|
:title="task.assignee.username"
|
|
>
|
|
{{ task.assignee.username.substring(0, 2).toUpperCase() }}
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
|
|
>
|
|
<Icon name="mdi:account-outline" size="14" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Task } from '~/services/dto/task'
|
|
|
|
const props = defineProps<{
|
|
task: Task
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click'): void
|
|
}>()
|
|
|
|
function onDragStart(event: DragEvent) {
|
|
event.dataTransfer!.effectAllowed = 'move'
|
|
event.dataTransfer!.setData('text/plain', String(props.task.id))
|
|
;(event.target as HTMLElement).classList.add('opacity-50')
|
|
}
|
|
|
|
function onDragEnd(event: DragEvent) {
|
|
;(event.target as HTMLElement).classList.remove('opacity-50')
|
|
}
|
|
</script>
|