Lesstime/frontend/pages/time-tracking.vue

<template>
    <div>
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-primary-500">Suivi des temps</h1>
            <button
                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
                @click="openCreateDrawer()"
            >
                + Ajouter une Activité
            </button>
        </div>

        <div class="relative z-30 mt-4 flex items-center gap-4">
            <h2 class="text-lg font-bold text-orange-500">
                {{ currentMonthLabel }}
            </h2>

            <div class="flex items-center gap-1 rounded-md border border-neutral-200">
                <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigatePrev">
                    <Icon name="mdi:chevron-left" size="20" />
                </button>
                <button
                    v-for="mode in (['week', 'day', 'list'] as const)"
                    :key="mode"
                    class="px-3 py-1 text-sm font-semibold transition"
                    :class="viewMode === mode ? 'bg-primary-500 text-white rounded' : 'text-neutral-500 hover:text-neutral-700'"
                    @click="viewMode = mode"
                >
                    {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
                </button>
                <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigateNext">
                    <Icon name="mdi:chevron-right" size="20" />
                </button>
            </div>

            <MalioSelect
                v-model="selectedUserId"
                :options="userOptions"
                min-width="!w-40"
                text-field="text-sm"
                text-value="text-sm"
                label="User"
                empty-option-label="User"
            />

            <MalioSelect
                v-model="selectedProjectId"
                :options="projectOptions"
                empty-option-label="Tous"
                label="Projet"
                min-width="!w-40"
                text-field="text-sm"
                text-value="text-sm"
            />

            <MalioSelect
                v-model="selectedTypeId"
                :options="typeOptions"
                empty-option-label="Tous"
                label="Type"
                min-width="!w-40"
                text-field="text-sm"
                text-value="text-sm"
            />
        </div>

        <div class="mt-4">
            <TimeEntryList
                v-if="viewMode === 'list'"
                :entries="filteredEntries"
                @edit-entry="openEditDrawer"
                @delete-entry="onDelete"
            />
            <TimeTrackingCalendar
                v-else
                :entries="filteredEntries"
                :start-date="startDate"
                :view-mode="viewMode"
                @edit-entry="openEditDrawer"
                @create-entry="openCreateDrawer"
                @move-entry="onMoveEntry"
                @resize-entry="onResizeEntry"
                @contextmenu="onContextMenu"
            />
        </div>

        <TimeEntryDrawer
            v-model="drawerOpen"
            :entry="editingEntry"
            :prefill-started-at="prefillStartedAt"
            :users="users"
            :projects="projects"
            :types="types"
            @saved="loadEntries"
        />

        <TimeEntryContextMenu
            :visible="contextMenu.visible"
            :x="contextMenu.x"
            :y="contextMenu.y"
            :entry="contextMenu.entry"
            :can-paste="!!clipboard"
            @close="contextMenu.visible = false"
            @copy="onCopy"
            @paste="onPaste"
            @delete="onDelete"
        />
    </div>
</template>

<script setup lang="ts">
import type { TimeEntry } from '~/services/dto/time-entry'
import type { UserData } from '~/services/dto/user-data'
import type { Project } from '~/services/dto/project'
import type { TaskType } from '~/services/dto/task-type'
import { useTimeEntryService } from '~/services/time-entries'
import { extractHydraMembers } from '~/utils/api'

useHead({ title: 'Suivi des temps' })

const authStore = useAuthStore()
const timeEntryService = useTimeEntryService()

const viewMode = ref<'week' | 'day' | 'list'>('week')
const startDate = ref(getMonday(new Date()))
const selectedUserId = ref<number | null>(authStore.user?.id ?? null)
const selectedTypeId = ref<number | null>(null)
const selectedProjectId = ref<number | null>(null)

const entries = ref<TimeEntry[]>([])
const users = ref<UserData[]>([])
const projects = ref<Project[]>([])
const types = ref<TaskType[]>([])

const drawerOpen = ref(false)
const editingEntry = ref<TimeEntry | null>(null)
const prefillStartedAt = ref<string | null>(null)
const clipboard = ref<TimeEntry | null>(null)

const contextMenu = reactive({
    visible: false,
    x: 0,
    y: 0,
    entry: null as TimeEntry | null,
    targetDate: null as string | null,
})

const currentMonthLabel = computed(() => {
    const d = startDate.value
    const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
    return `${months[d.getMonth()]} ${d.getFullYear()}`
})

const userOptions = computed(() =>
    users.value.map(u => ({ label: u.username, value: u.id }))
)

const projectOptions = computed(() =>
    projects.value.map(p => ({ label: p.name, value: p.id }))
)

const typeOptions = computed(() =>
    types.value.map(t => ({ label: t.label, value: t.id }))
)

const filteredEntries = computed(() => {
    let result = entries.value
    if (selectedProjectId.value) {
        result = result.filter((e) => e.project?.id === selectedProjectId.value)
    }
    if (selectedTypeId.value) {
        result = result.filter((e) => e.types.some((t) => t.id === selectedTypeId.value))
    }
    return result
})

function getMonday(d: Date): Date {
    const date = new Date(d)
    const day = date.getDay()
    const diff = date.getDate() - day + (day === 0 ? -6 : 1)
    date.setDate(diff)
    date.setHours(0, 0, 0, 0)
    return date
}

function navigatePrev() {
    const d = new Date(startDate.value)
    d.setDate(d.getDate() - (viewMode.value === 'day' ? 1 : 7))
    startDate.value = viewMode.value === 'day' ? d : getMonday(d)
    loadEntries()
}

function navigateNext() {
    const d = new Date(startDate.value)
    d.setDate(d.getDate() + (viewMode.value === 'day' ? 1 : 7))
    startDate.value = viewMode.value === 'day' ? d : getMonday(d)
    loadEntries()
}

function openCreateDrawer(startedAt?: string) {
    editingEntry.value = null
    prefillStartedAt.value = startedAt ?? null
    drawerOpen.value = true
}

function openEditDrawer(entry: TimeEntry) {
    editingEntry.value = entry
    prefillStartedAt.value = null
    drawerOpen.value = true
}

async function onMoveEntry(entry: TimeEntry, newStartedAt: string, newStoppedAt: string) {
    // Optimistic update — instant visual feedback
    const idx = entries.value.findIndex((e) => e.id === entry.id)
    if (idx === -1) return
    const original = entries.value[idx]!
    entries.value[idx] = { ...original, startedAt: newStartedAt, stoppedAt: newStoppedAt }

    try {
        await timeEntryService.update(entry.id, { startedAt: newStartedAt, stoppedAt: newStoppedAt })
    } catch {
        entries.value[idx] = original
    }
}

async function onResizeEntry(entry: TimeEntry, newStartedAt: string, newStoppedAt: string) {
    // Optimistic update — instant visual feedback
    const idx = entries.value.findIndex((e) => e.id === entry.id)
    if (idx === -1) return
    const original = entries.value[idx]!
    entries.value[idx] = { ...original, startedAt: newStartedAt, stoppedAt: newStoppedAt }

    try {
        await timeEntryService.update(entry.id, { startedAt: newStartedAt, stoppedAt: newStoppedAt })
    } catch {
        entries.value[idx] = original
    }
}

function onContextMenu(event: MouseEvent, entry: TimeEntry | null) {
    contextMenu.visible = true
    contextMenu.x = event.clientX
    contextMenu.y = event.clientY
    contextMenu.entry = entry
}

function onCopy(entry: TimeEntry) {
    clipboard.value = entry
}

async function onPaste() {
    if (!clipboard.value) return
    const { create } = useTimeEntryService()
    await create({
        title: clipboard.value.title ?? undefined,
        description: clipboard.value.description ?? undefined,
        startedAt: clipboard.value.startedAt,
        stoppedAt: clipboard.value.stoppedAt ?? undefined,
        user: `/api/users/${selectedUserId.value}`,
        project: clipboard.value.project ? `/api/projects/${clipboard.value.project.id}` : null,
        types: clipboard.value.types.map((t) => `/api/task_types/${t.id}`),
    })
    await loadEntries()
}

async function onDelete(entry: TimeEntry) {
    await timeEntryService.remove(entry.id)
    await loadEntries()
}

async function loadEntries() {
    const end = new Date(startDate.value)
    end.setDate(end.getDate() + (viewMode.value === 'day' ? 1 : 7))

    entries.value = await timeEntryService.getByDateRange({
        after: startDate.value.toISOString(),
        before: end.toISOString(),
        user: selectedUserId.value ?? undefined,
    })
}

async function loadReferenceData() {
    const api = useApi()

    const [usersData, projectsData, typesData] = await Promise.all([
        api.get<any>('/users'),
        api.get<any>('/projects'),
        api.get<any>('/task_types'),
    ])

    users.value = extractHydraMembers(usersData)
    projects.value = extractHydraMembers(projectsData)
    types.value = extractHydraMembers(typesData)
}

onMounted(async () => {
    await loadReferenceData()
    await loadEntries()
})

watch(viewMode, () => {
    startDate.value = viewMode.value === 'day' ? startDate.value : getMonday(startDate.value)
    loadEntries()
})

watch(selectedUserId, () => {
    loadEntries()
})
</script>