Lesstime/frontend/layouts/default.vue

<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <aside
                class="flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-all duration-300"
                :class="ui.sidebarCollapsed ? 'w-16' : 'w-64'"
            >
                <div class="flex items-center justify-center overflow-hidden" :class="ui.sidebarCollapsed ? 'p-2' : ''">
                    <img
                        v-if="!ui.sidebarCollapsed"
                        src="/malio.png"
                        alt="Logo"
                        class="w-auto"
                    />
                    <img
                        v-else
                        src="/malio.png"
                        alt="Logo"
                        class="h-8 w-8 object-cover object-left"
                    />
                </div>
                <nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
                    <SidebarLink
                        to="/"
                        icon="mdi:question-mark"
                        label="Tableau de bord"
                        :collapsed="ui.sidebarCollapsed"
                        :class="ui.sidebarCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
                    />
                    <SidebarLink
                        to="/projects"
                        icon="mdi:folder-outline"
                        label="Projets"
                        :collapsed="ui.sidebarCollapsed"
                    />
                    <template v-if="currentProjectId">
                        <SidebarLink
                            :to="`/projects/${currentProjectId}`"
                            icon="mdi:view-column-outline"
                            label="Kanban"
                            :collapsed="ui.sidebarCollapsed"
                            sub
                            exact
                        />
                        <SidebarLink
                            :to="`/projects/${currentProjectId}/groups`"
                            icon="mdi:tag-multiple-outline"
                            label="Groupes"
                            :collapsed="ui.sidebarCollapsed"
                            sub
                        />

                    </template>
                    <SidebarLink
                        to="/time-tracking"
                        icon="mdi:clock-outline"
                        label="Suivi de temps"
                        :collapsed="ui.sidebarCollapsed"
                    />
                    <SidebarLink
                        to="/admin"
                        icon="mdi:cog-outline"
                        label="Administration"
                        :collapsed="ui.sidebarCollapsed"
                    />
                </nav>

                <div class="px-4 py-3">
                    <SidebarTimer :collapsed="ui.sidebarCollapsed" />
                </div>

                <div class="flex flex-col gap-2 items-center p-4">
                    <p v-if="!ui.sidebarCollapsed" class="font-bold">v {{ version }}</p>
                    <button
                        class="flex items-center justify-center rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors"
                        :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
                        @click="ui.toggleSidebar()"
                    >
                        <Icon
                            :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
                            size="20"
                        />
                    </button>
                </div>
            </aside>

            <div class="h-full flex-1 overflow-hidden flex flex-col">
                <AppTopNav :user="auth.user" />
                <div class="relative flex-1 overflow-hidden bg-white">
                    <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 z-30 h-12 bg-white" />
                    <main class="h-full overflow-y-auto px-16 pt-12 pb-24">
                        <slot/>
                    </main>
                </div>
            </div>
        </div>

        <TimeEntryDrawer
            v-model="completeDrawerOpen"
            :entry="timerStore.pendingCompleteEntry"
            :users="refData.users"
            :projects="refData.projects"
            :types="refData.types"
            @saved="onCompleteSaved"
        />
    </div>
</template>

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

const auth = useAuthStore()
const ui = useUiStore()
const {version} = useAppVersion()
const route = useRoute()

const currentProjectId = computed(() => {
    const match = route.path.match(/^\/projects\/(\d+)/)
    return match ? match[1] : null
})

const timerStore = useTimerStore()

const baseTitle = ref('Lesstime')

useHead({
    titleTemplate: (title) => {
        baseTitle.value = title || 'Lesstime'
        return title || 'Lesstime'
    },
})

watch(
    [() => timerStore.elapsedFormatted, () => timerStore.isRunning, () => timerStore.activeEntry?.title],
    ([elapsed, running, label]) => {
        if (import.meta.server) return
        const base = baseTitle.value
        if (running) {
            document.title = label ? `${base} | ${elapsed} · ${label}` : `${base} | ${elapsed}`
        } else {
            document.title = base
        }
    },
)

onMounted(() => {
    timerStore.fetchActive()
})

const completeDrawerOpen = ref(false)
const refData = reactive({
    users: [] as UserData[],
    projects: [] as Project[],
    types: [] as TaskType[],
    loaded: false,
})

async function loadRefData() {
    if (refData.loaded) return
    const api = useApi()
    const [usersData, projectsData, typesData] = await Promise.all([
        api.get<any>('/users'),
        api.get<any>('/projects'),
        api.get<any>('/task_types'),
    ])
    refData.users = extractHydraMembers(usersData)
    refData.projects = extractHydraMembers(projectsData)
    refData.types = extractHydraMembers(typesData)
    refData.loaded = true
}

watch(() => timerStore.pendingCompleteEntry, async (entry) => {
    if (entry) {
        await loadRefData()
        completeDrawerOpen.value = true
    }
})

watch(completeDrawerOpen, (open) => {
    if (!open) {
        nextTick(() => {
            timerStore.clearPendingEntry()
        })
    }
})

function onCompleteSaved() {
    completeDrawerOpen.value = false
    nextTick(() => {
        timerStore.clearPendingEntry()
    })
}

const handleLogout = async () => {
    await auth.logout()
    await navigateTo('/login')
}
</script>