Lesstime/frontend/components/task/TaskCard.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">
            <div class="min-w-0">
                <div class="flex items-center gap-1">
                    <span
                        v-if="task.project && task.number"
                        class="text-xs font-semibold"
                        :class="showProjectColor ? '' : 'text-neutral-400'"
                        :style="showProjectColor && task.project.color ? { color: task.project.color } : {}"
                    >{{ task.project.code }}{{ task.number }}</span>
                    <Icon
                        v-if="task.priority?.label === 'Haute'"
                        name="mdi:flag-variant"
                        class="h-3.5 w-3.5 text-red-600"
                    />
                    <Icon
                        v-if="task.clientTicket"
                        name="heroicons:user-circle"
                        class="h-4 w-4 text-blue-400"
                        :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
                    />
                </div>
                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
            </div>
            <MalioButtonIcon
                :icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
                :aria-label="isTimerOnTask ? 'Arrêter le timer' : 'Démarrer le timer'"
                variant="ghost"
                icon-size="20"
                :button-class="isTimerOnTask ? 'shrink-0 text-[#F18619] hover:text-[#d97314]' : 'shrink-0 text-neutral-400 hover:text-primary-500'"
                @click.stop="isTimerOnTask ? timerStore.stop() : onPlay()"
            />
        </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="tag in task.tags"
                :key="tag.id"
                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                :style="{ backgroundColor: tag.color }"
            >
                {{ tag.label }}
            </span>
            <!-- Deadline badge -->
            <span
                v-if="task.deadline"
                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                :style="{ backgroundColor: deadlineColor }"
                :title="task.deadline"
            >
                {{ formatDeadline(task.deadline) }}
            </span>
            <!-- Calendar sync icon -->
            <Icon
                v-if="task.syncToCalendar"
                :name="task.calendarSyncError ? 'mdi:alert-circle' : 'mdi:calendar-check'"
                :class="task.calendarSyncError ? 'text-red-500' : 'text-green-500'"
                size="14"
            />
            <!-- Recurrence icon -->
            <Icon
                v-if="task.recurrence"
                name="mdi:repeat"
                class="text-blue-500"
                size="14"
            />
            <Icon
                v-if="task.collaborators?.length"
                name="mdi:account-group"
                class="ml-auto h-4 w-4 text-neutral-400"
                :title="task.collaborators.map(c => c.username).join(', ')"
            />
            <UserAvatar
                v-if="task.assignee"
                :user="task.assignee"
                size="xs"
                :class="task.collaborators?.length ? '' : 'ml-auto'"
            />
            <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 = withDefaults(defineProps<{
    task: Task
    showProjectColor?: boolean
}>(), {
    showProjectColor: false,
})

const emit = defineEmits<{
    (e: 'click'): void
}>()

const timerStore = useTimerStore()

const isTimerOnTask = computed(() => {
    const entry = timerStore.activeEntry
    if (!entry?.task) return false
    const entryTaskId = typeof entry.task === 'string'
        ? entry.task
        : (entry.task['@id'] ?? entry.task.id)
    const taskId = props.task['@id'] ?? props.task.id
    return entryTaskId === taskId || entryTaskId === `/api/tasks/${props.task.id}`
})

function onPlay() {
    timerStore.startFromTask(props.task)
}

const deadlineColor = computed(() => {
    if (!props.task.deadline) return ''
    const daysLeft = (new Date(props.task.deadline).getTime() - Date.now()) / 86400000
    if (daysLeft < 0) return '#DC2626'
    if (daysLeft < 2) return '#F59E0B'
    return '#9CA3AF'
})

function formatDeadline(d: string): string {
    return new Date(d).toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })
}

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>