feat(time-tracking) : add calendar page, timer sidebar, and all UI components
- SidebarTimer widget with play/stop button - TimeEntryBlock with drag-to-move and resize - TimeEntryDrawer for create/edit entries - TimeEntryContextMenu for copy/paste/delete - TimeTrackingCalendar grid with week/day view - Time tracking page with filters and navigation - Sidebar link and timer integration in layout - TaskCard play button connected to timer store Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
250
frontend/pages/time-tracking.vue
Normal file
250
frontend/pages/time-tracking.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-neutral-900">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="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'] 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' : 'Jour' }}
|
||||
</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>
|
||||
|
||||
<select
|
||||
v-model="selectedUserId"
|
||||
class="rounded-md border border-neutral-200 px-3 py-1.5 text-sm"
|
||||
@change="loadEntries"
|
||||
>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">{{ u.username }}</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
v-model="selectedTypeId"
|
||||
class="rounded-md border border-neutral-200 px-3 py-1.5 text-sm"
|
||||
@change="loadEntries"
|
||||
>
|
||||
<option :value="null">Type</option>
|
||||
<option v-for="t in types" :key="t.id" :value="t.id">{{ t.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<TimeTrackingCalendar
|
||||
: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'>('week')
|
||||
const startDate = ref(getMonday(new Date()))
|
||||
const selectedUserId = ref<number | null>(authStore.user?.id ?? null)
|
||||
const selectedTypeId = 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 filteredEntries = computed(() => {
|
||||
if (!selectedTypeId.value) return entries.value
|
||||
return entries.value.filter((e) =>
|
||||
e.types.some((t) => t.id === selectedTypeId.value)
|
||||
)
|
||||
})
|
||||
|
||||
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 === 'week' ? 7 : 1))
|
||||
startDate.value = viewMode.value === 'week' ? getMonday(d) : d
|
||||
loadEntries()
|
||||
}
|
||||
|
||||
function navigateNext() {
|
||||
const d = new Date(startDate.value)
|
||||
d.setDate(d.getDate() + (viewMode.value === 'week' ? 7 : 1))
|
||||
startDate.value = viewMode.value === 'week' ? getMonday(d) : 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) {
|
||||
await timeEntryService.update(entry.id, { startedAt: newStartedAt, stoppedAt: newStoppedAt })
|
||||
await loadEntries()
|
||||
}
|
||||
|
||||
async function onResizeEntry(entry: TimeEntry, newStoppedAt: string) {
|
||||
await timeEntryService.update(entry.id, { stoppedAt: newStoppedAt })
|
||||
await loadEntries()
|
||||
}
|
||||
|
||||
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 === 'week' ? 7 : 1))
|
||||
|
||||
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 === 'week' ? getMonday(startDate.value) : startDate.value
|
||||
loadEntries()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user