330 lines
15 KiB
Vue
330 lines
15 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<!-- Navbar -->
|
|
<div class="navbar bg-base-100 shadow-lg">
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li class="pt-1 pb-2 lg:hidden">
|
|
<button
|
|
@click="openDisplaySettings"
|
|
class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
Paramètres d'affichage
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Dashboard
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/machines"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/types"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Types de Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/sites"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Sites
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/generator"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Générateur
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/documents"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Documents
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/constructeurs"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Constructeurs
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<div class="avatar placeholder">
|
|
<div class="bg-primary text-primary-content rounded-lg w-10">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<NuxtLink to="/" class="btn btn-ghost text-xl">Inventaire Pro</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-center hidden lg:flex">
|
|
<ul class="menu menu-horizontal px-1">
|
|
<li>
|
|
<NuxtLink
|
|
to="/"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Dashboard
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/machines"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/types"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Types de Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/sites"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Sites
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/generator"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Générateur
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/documents"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Documents
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/constructeurs"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
|
|
>
|
|
Constructeurs
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="flex items-center gap-2">
|
|
<!-- Bouton paramètres d'affichage -->
|
|
<button
|
|
@click="openDisplaySettings"
|
|
class="btn btn-ghost btn-circle hidden lg:inline-flex"
|
|
title="Paramètres d'affichage"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Menu Nouveau -->
|
|
<div class="dropdown dropdown-end">
|
|
<div tabindex="0" role="button" class="btn btn-primary">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
Nouveau
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li>
|
|
<NuxtLink to="/machines?add=true" class="flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
Nouvelle Machine
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/generator" class="flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
Nouveau Type
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/sites?add=true" class="flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
Nouveau Site
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ClientOnly>
|
|
<div class="dropdown dropdown-end" v-if="activeProfile">
|
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar placeholder">
|
|
<div class="bg-secondary text-secondary-content rounded-full w-10">
|
|
<span class="text-sm font-semibold">{{ activeProfileInitials }}</span>
|
|
</div>
|
|
</div>
|
|
<ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64">
|
|
<li class="px-2 py-1 text-sm text-base-content/70">
|
|
Connecté en tant que<br />
|
|
<span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
|
|
</li>
|
|
<li><hr class="my-1" /></li>
|
|
<li>
|
|
<NuxtLink to="/profiles/manage" class="justify-between">
|
|
Gestion des profils
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="text-error justify-between" @click="handleLogout">
|
|
Déconnexion
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1" />
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Content -->
|
|
<NuxtPage />
|
|
|
|
<!-- Toast Notifications -->
|
|
<ToastContainer />
|
|
|
|
<!-- Paramètres d'affichage -->
|
|
<DisplaySettings
|
|
:is-open="displaySettingsOpen"
|
|
@close="closeDisplaySettings"
|
|
@update-settings="handleSettingsUpdate"
|
|
/>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer p-4 bg-neutral text-neutral-content">
|
|
<div class="items-center grid-flow-col">
|
|
<p>@Malio 2025</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoute, navigateTo } from '#imports'
|
|
import { useProfileSession } from '~/composables/useProfileSession'
|
|
|
|
// État du modal des paramètres d'affichage
|
|
const displaySettingsOpen = ref(false)
|
|
const { activeProfile, ensureSession, logout } = useProfileSession()
|
|
|
|
// Route active pour souligner l'onglet sélectionné dans la navbar
|
|
const route = useRoute()
|
|
const isActive = (path) => {
|
|
if (path === '/') {
|
|
return route.path === '/'
|
|
}
|
|
return route.path.startsWith(path)
|
|
}
|
|
|
|
// Ouvrir les paramètres d'affichage
|
|
const openDisplaySettings = () => {
|
|
displaySettingsOpen.value = true
|
|
}
|
|
|
|
// Fermer les paramètres d'affichage
|
|
const closeDisplaySettings = () => {
|
|
displaySettingsOpen.value = false
|
|
}
|
|
|
|
// Gérer les mises à jour des paramètres
|
|
const handleSettingsUpdate = (settings) => {
|
|
console.log('Paramètres d\'affichage mis à jour:', settings)
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
await navigateTo('/profiles')
|
|
}
|
|
|
|
const activeProfileLabel = computed(() => {
|
|
if (!activeProfile.value) return 'Profil inconnu'
|
|
return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
|
|
})
|
|
|
|
const activeProfileInitials = computed(() => {
|
|
if (!activeProfile.value) return '??'
|
|
const { firstName = '', lastName = '' } = activeProfile.value
|
|
return `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() || '??'
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await ensureSession()
|
|
})
|
|
</script>
|