Matthieu
1b652ef680
Companion to the backend module migration (LST-64). The Nuxt layer is auto-detected from frontend/modules/* — no nuxt.config change needed. - Move page, timer store, time-entries service + DTO and the 6 time-tracking components into frontend/modules/time-tracking/. - Rewrite explicit service/DTO imports to ~/modules/time-tracking/* (store and components stay auto-imported); update the dashboard (index.vue) consumer. - Route /time-tracking preserved; i18n keys kept in the global locale file. nuxt build passes; /time-tracking routed.
107 lines
4.1 KiB
Vue
107 lines
4.1 KiB
Vue
<template>
|
||
<div class="space-y-2">
|
||
<div v-if="entries.length === 0" class="rounded-lg border border-neutral-200 bg-neutral-50 py-12 text-center text-sm text-neutral-400">
|
||
{{ $t('timeEntries.noEntries') }}
|
||
</div>
|
||
|
||
<div
|
||
v-for="entry in sortedEntries"
|
||
:key="entry.id"
|
||
class="group flex items-center gap-2 sm:gap-4 rounded-lg border border-neutral-200 bg-white px-3 sm:px-4 py-3 cursor-pointer transition hover:border-neutral-300 hover:shadow-sm"
|
||
@click="emit('editEntry', entry)"
|
||
>
|
||
<!-- Color bar -->
|
||
<div
|
||
class="h-10 w-1 shrink-0 rounded-full"
|
||
:style="{ backgroundColor: entry.project?.color ?? '#94a3b8' }"
|
||
/>
|
||
|
||
<!-- Main info -->
|
||
<div class="min-w-0 flex-1">
|
||
<div class="truncate text-sm font-semibold text-neutral-900">
|
||
{{ entry.title || $t('common.untitled') }}
|
||
</div>
|
||
<div v-if="entry.tags.length" class="mt-1 flex flex-wrap gap-1">
|
||
<span
|
||
v-for="tag in entry.tags"
|
||
:key="tag.id"
|
||
class="rounded-full px-2 py-0.5 text-[10px] font-semibold text-white"
|
||
:style="{ backgroundColor: tag.color }"
|
||
>
|
||
{{ tag.label }}
|
||
</span>
|
||
</div>
|
||
<div class="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
|
||
<span v-if="entry.project">{{ entry.project.name }}</span>
|
||
<span v-if="entry.project && stripRichText(entry.description)" class="text-neutral-300">·</span>
|
||
<span v-if="stripRichText(entry.description)" class="truncate">{{ stripRichText(entry.description) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Time info -->
|
||
<div class="shrink-0 text-right">
|
||
<div class="text-sm font-semibold tabular-nums text-neutral-900">
|
||
{{ formatDuration(entry) }}
|
||
</div>
|
||
<div class="text-xs tabular-nums text-neutral-400">
|
||
{{ formatTime(entry.startedAt) }} – {{ entry.stoppedAt ? formatTime(entry.stoppedAt) : '...' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Date -->
|
||
<div class="hidden shrink-0 text-xs text-neutral-400 sm:block">
|
||
{{ formatDate(entry.startedAt) }}
|
||
</div>
|
||
|
||
<!-- Delete action -->
|
||
<MalioButtonIcon
|
||
icon="mdi:delete-outline"
|
||
:aria-label="$t('common.delete')"
|
||
variant="ghost"
|
||
icon-size="18"
|
||
button-class="shrink-0 text-neutral-300 opacity-0 hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
|
||
@click.stop="emit('deleteEntry', entry)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { TimeEntry } from '~/modules/time-tracking/services/dto/time-entry'
|
||
import { stripRichText } from '~/utils/format'
|
||
|
||
const props = defineProps<{
|
||
entries: TimeEntry[]
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'editEntry', entry: TimeEntry): void
|
||
(e: 'deleteEntry', entry: TimeEntry): void
|
||
}>()
|
||
|
||
const sortedEntries = computed(() => {
|
||
return [...props.entries].sort((a, b) => {
|
||
return new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
|
||
})
|
||
})
|
||
|
||
function formatDuration(entry: TimeEntry): string {
|
||
const start = new Date(entry.startedAt).getTime()
|
||
const end = entry.stoppedAt ? new Date(entry.stoppedAt).getTime() : Date.now()
|
||
const diff = end - start
|
||
const h = Math.floor(diff / 3600000)
|
||
const m = Math.floor((diff % 3600000) / 60000)
|
||
return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
|
||
}
|
||
|
||
function formatTime(iso: string): string {
|
||
const d = new Date(iso)
|
||
return d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
|
||
}
|
||
|
||
function formatDate(iso: string): string {
|
||
const d = new Date(iso)
|
||
return d.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric', month: 'short' })
|
||
}
|
||
</script>
|