Matthieu
278 lines
11 KiB
Vue
278 lines
11 KiB
Vue
<template>
|
|
<div class="h-screen overflow-hidden">
|
|
<div class="flex h-full">
|
|
<!-- Mobile sidebar overlay -->
|
|
<Transition name="sidebar-overlay">
|
|
<div
|
|
v-if="ui.sidebarOpen"
|
|
class="fixed inset-0 z-40 bg-black/50 lg:hidden"
|
|
@click="ui.closeMobileSidebar()"
|
|
/>
|
|
</Transition>
|
|
|
|
<aside
|
|
class="fixed inset-y-0 left-0 z-50 flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
|
|
:class="[
|
|
ui.sidebarCollapsed ? 'lg:w-16' : 'lg:w-64',
|
|
ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
|
|
]"
|
|
>
|
|
<div class="flex items-center overflow-hidden" :class="sidebarIsCollapsed ? 'justify-center p-3' : 'justify-between'">
|
|
<img
|
|
v-if="!sidebarIsCollapsed"
|
|
src="/malio.png"
|
|
alt="Logo"
|
|
class="w-auto"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="/LOGO_CARRE.png"
|
|
alt="Logo"
|
|
class="w-[46px] h-[55px]"
|
|
/>
|
|
<button
|
|
class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
|
|
@click="ui.closeMobileSidebar()"
|
|
>
|
|
<Icon name="mdi:close" size="20" />
|
|
</button>
|
|
</div>
|
|
<nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
|
|
<!-- Sections dynamiques (/api/sidebar) : navigation globale + sections gated par rôle -->
|
|
<template v-for="(section, sIndex) in translatedSections" :key="section.label">
|
|
<p v-if="!sidebarIsCollapsed" class="px-4 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
|
|
{{ section.label }}
|
|
</p>
|
|
<div v-else class="mx-2 my-3 border-t border-secondary-500" />
|
|
<SidebarLink
|
|
v-for="item in section.items"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
:icon="item.icon"
|
|
:label="item.label"
|
|
:collapsed="sidebarIsCollapsed"
|
|
@click="ui.closeMobileSidebar()"
|
|
/>
|
|
|
|
<!-- Items conservés côté client, insérés après la 1re section (cf. décision 3) -->
|
|
<template v-if="sIndex === 0">
|
|
<!-- Contextuel projet -->
|
|
<template v-if="currentProjectId">
|
|
<SidebarLink :to="`/projects/${currentProjectId}`" icon="mdi:view-column-outline" label="Kanban" :collapsed="sidebarIsCollapsed" sub exact @click="ui.closeMobileSidebar()" />
|
|
<SidebarLink :to="`/projects/${currentProjectId}/groups`" icon="mdi:tag-multiple-outline" label="Groupes" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
|
|
<SidebarLink :to="`/projects/${currentProjectId}/archives`" icon="mdi:archive-outline" label="Archives" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
|
|
</template>
|
|
<!-- Feature-flag : Documents -->
|
|
<SidebarLink v-if="isDocumentsVisible" to="/documents" icon="mdi:folder-network-outline" :label="$t('sharedFiles.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
|
|
<!-- Feature-flag : Mail + badge -->
|
|
<div v-if="isMailVisible" class="relative">
|
|
<SidebarLink to="/mail" icon="mdi:email-outline" :label="$t('mail.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
|
|
<span
|
|
v-if="mailStore.globalUnreadCount > 0"
|
|
class="pointer-events-none absolute right-3 top-1/2 flex h-5 min-w-5 -translate-y-1/2 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
|
|
:class="{ 'right-1 top-1 translate-y-0': sidebarIsCollapsed }"
|
|
:aria-label="`${mailStore.globalUnreadCount} messages non lus`"
|
|
>
|
|
{{ mailStore.globalUnreadCount > 99 ? '99+' : mailStore.globalUnreadCount }}
|
|
</span>
|
|
</div>
|
|
<!-- User-flag : Mes absences (isEmployee — non couvert par le gate rôle) -->
|
|
<SidebarLink v-if="isEmployee" to="/absences" icon="mdi:umbrella-beach-outline" label="Mes absences" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
|
|
</template>
|
|
</template>
|
|
</nav>
|
|
|
|
<div class="px-4 py-3">
|
|
<SidebarTimer :collapsed="sidebarIsCollapsed" />
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center p-4">
|
|
<p v-if="!sidebarIsCollapsed" class="font-bold">v {{ version }}</p>
|
|
</div>
|
|
|
|
<!-- Collapse toggle button centered vertically on the sidebar edge -->
|
|
<button
|
|
class="absolute top-1/2 -right-4 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-400 shadow-sm hover:text-neutral-700 transition-colors lg:flex"
|
|
:title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
|
|
@click="ui.toggleSidebar()"
|
|
>
|
|
<Icon
|
|
:name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
|
|
size="18"
|
|
/>
|
|
</button>
|
|
</aside>
|
|
|
|
<div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
|
|
<AppTopNav :user="auth.user" />
|
|
<main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
|
|
<div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
|
|
<slot/>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<TimeEntryDrawer
|
|
v-model="completeDrawerOpen"
|
|
:entry="timerStore.pendingCompleteEntry"
|
|
:users="refData.users"
|
|
:projects="refData.projects"
|
|
:tags="refData.tags"
|
|
@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 { TaskTag } from '~/services/dto/task-tag'
|
|
import { useAppVersion } from '~/composables/useAppVersion'
|
|
import type { HydraCollection } from '~/utils/api'
|
|
import { extractHydraMembers } from '~/utils/api'
|
|
|
|
const auth = useAuthStore()
|
|
const ui = useUiStore()
|
|
const mailStore = useMailStore()
|
|
const {version} = useAppVersion()
|
|
const route = useRoute()
|
|
const { t } = useI18n()
|
|
const { sections } = useSidebar()
|
|
|
|
const translatedSections = computed(() =>
|
|
sections.value.map((section) => ({
|
|
label: t(section.label),
|
|
icon: section.icon,
|
|
items: section.items.map((item) => ({
|
|
label: t(item.label),
|
|
to: item.to,
|
|
icon: item.icon,
|
|
})),
|
|
})),
|
|
)
|
|
|
|
const isEmployee = computed(() => Boolean(auth.user?.isEmployee))
|
|
|
|
const isMailVisible = computed(() => {
|
|
const roles: string[] = auth.user?.roles ?? []
|
|
return roles.includes('ROLE_USER') || roles.includes('ROLE_ADMIN')
|
|
})
|
|
|
|
const { enabled: shareEnabled, ensureLoaded: ensureShareStatus } = useShareStatus()
|
|
const isDocumentsVisible = computed(() => shareEnabled.value === true)
|
|
|
|
// On mobile, sidebar is always expanded (not collapsed icon mode)
|
|
const sidebarIsCollapsed = computed(() => {
|
|
if (ui.sidebarOpen) return false
|
|
return ui.sidebarCollapsed
|
|
})
|
|
|
|
// Close mobile sidebar on route change
|
|
watch(() => route.path, () => {
|
|
ui.closeMobileSidebar()
|
|
})
|
|
|
|
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()
|
|
if (isMailVisible.value) {
|
|
mailStore.startPolling()
|
|
}
|
|
ensureShareStatus()
|
|
})
|
|
|
|
watch(() => auth.user, (user) => {
|
|
if (!user) {
|
|
mailStore.stopPolling()
|
|
} else {
|
|
if (isMailVisible.value) {
|
|
mailStore.startPolling()
|
|
}
|
|
ensureShareStatus()
|
|
}
|
|
})
|
|
|
|
const completeDrawerOpen = ref(false)
|
|
const refData = reactive({
|
|
users: [] as UserData[],
|
|
projects: [] as Project[],
|
|
tags: [] as TaskTag[],
|
|
loaded: false,
|
|
})
|
|
|
|
async function loadRefData() {
|
|
if (refData.loaded) return
|
|
const api = useApi()
|
|
const [usersData, projectsData, typesData] = await Promise.all([
|
|
api.get<HydraCollection<UserData>>('/users'),
|
|
api.get<HydraCollection<Project>>('/projects'),
|
|
api.get<HydraCollection<TaskTag>>('/task_tags'),
|
|
])
|
|
refData.users = extractHydraMembers(usersData)
|
|
refData.projects = extractHydraMembers(projectsData)
|
|
refData.tags = 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()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar-overlay-enter-active,
|
|
.sidebar-overlay-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.sidebar-overlay-enter-from,
|
|
.sidebar-overlay-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|