652 lines
23 KiB
Vue
652 lines
23 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">
|
|
<IconLucideMenu class="w-5 h-5" aria-hidden="true" />
|
|
</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
|
|
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"
|
|
@click="openDisplaySettings"
|
|
>
|
|
<IconLucideSettings class="w-4 h-4" aria-hidden="true" />
|
|
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'
|
|
"
|
|
>
|
|
Vue d'ensemble
|
|
</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'
|
|
"
|
|
>
|
|
Parc Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/machine-skeleton"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/machine-skeleton')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Squelettes de machine
|
|
</NuxtLink>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'pieces-mobile' }"
|
|
@mouseenter="setDropdown('pieces-mobile')"
|
|
@mouseleave="scheduleDropdownClose('pieces-mobile')"
|
|
@focusin="setDropdown('pieces-mobile')"
|
|
@focusout="scheduleDropdownClose('pieces-mobile')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
|
|
:class="
|
|
isActive('/pieces-catalog') || isActive('/piece-category')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Pièces
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/piece-category"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/piece-category')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catégorie de pièce
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/pieces-catalog"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/pieces-catalog')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catalogue de pièce
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'component-mobile' }"
|
|
@mouseenter="setDropdown('component-mobile')"
|
|
@mouseleave="scheduleDropdownClose('component-mobile')"
|
|
@focusin="setDropdown('component-mobile')"
|
|
@focusout="scheduleDropdownClose('component-mobile')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
|
|
:class="
|
|
isActive('/component-catalog') ||
|
|
isActive('/component-category')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Composant
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/component-category"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/component-category')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catégorie de composant
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/component-catalog"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/component-catalog')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catalogue de composant
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'resources-mobile' }"
|
|
@mouseenter="setDropdown('resources-mobile')"
|
|
@mouseleave="scheduleDropdownClose('resources-mobile')"
|
|
@focusin="setDropdown('resources-mobile')"
|
|
@focusout="scheduleDropdownClose('resources-mobile')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
|
|
:class="
|
|
isActive('/sites') ||
|
|
isActive('/documents') ||
|
|
isActive('/constructeurs')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Ressources liées
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/sites"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/sites')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Sites
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/documents"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/documents')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: '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/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Constructeurs
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</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 grid place-items-center"
|
|
>
|
|
<IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
|
|
</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'
|
|
"
|
|
>
|
|
Vue d'ensemble
|
|
</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'
|
|
"
|
|
>
|
|
Parc Machines
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/machine-skeleton"
|
|
class="transition-colors px-3 py-2 rounded-md"
|
|
:class="
|
|
isActive('/machine-skeleton')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Squelettes de machine
|
|
</NuxtLink>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'pieces-desktop' }"
|
|
@mouseenter="setDropdown('pieces-desktop')"
|
|
@mouseleave="scheduleDropdownClose('pieces-desktop')"
|
|
@focusin="setDropdown('pieces-desktop')"
|
|
@focusout="scheduleDropdownClose('pieces-desktop')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
|
|
:class="
|
|
isActive('/pieces-catalog') || isActive('/piece-category')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Pièces
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/piece-category"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/piece-category')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catégorie de pièce
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/pieces-catalog"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/pieces-catalog')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catalogue de pièce
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'component-desktop' }"
|
|
@mouseenter="setDropdown('component-desktop')"
|
|
@mouseleave="scheduleDropdownClose('component-desktop')"
|
|
@focusin="setDropdown('component-desktop')"
|
|
@focusout="scheduleDropdownClose('component-desktop')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
|
|
:class="
|
|
isActive('/component-category') ||
|
|
isActive('/component-catalog')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Composant
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/component-category"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/component-category')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catégorie de composant
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/component-catalog"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/component-catalog')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Catalogue de composant
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li
|
|
class="dropdown dropdown-hover"
|
|
:class="{ 'dropdown-open': openDropdown === 'resources-desktop' }"
|
|
@mouseenter="setDropdown('resources-desktop')"
|
|
@mouseleave="scheduleDropdownClose('resources-desktop')"
|
|
@focusin="setDropdown('resources-desktop')"
|
|
@focusout="scheduleDropdownClose('resources-desktop')"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
|
|
:class="
|
|
isActive('/sites') ||
|
|
isActive('/documents') ||
|
|
isActive('/constructeurs')
|
|
? 'bg-primary text-primary-content font-semibold shadow-sm'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Ressources liées
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
|
|
>
|
|
<li>
|
|
<NuxtLink
|
|
to="/sites"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/sites')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Sites
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/documents"
|
|
class="rounded-md px-2 py-1 transition-colors"
|
|
:class="
|
|
isActive('/documents')
|
|
? 'bg-primary/10 text-primary font-semibold'
|
|
: '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/10 text-primary font-semibold'
|
|
: 'text-base-content hover:bg-primary/10 hover:text-primary'
|
|
"
|
|
>
|
|
Constructeurs
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="flex items-center gap-2">
|
|
<!-- Bouton paramètres d'affichage -->
|
|
<button
|
|
class="btn btn-ghost btn-circle hidden lg:inline-flex"
|
|
title="Paramètres d'affichage"
|
|
@click="openDisplaySettings"
|
|
>
|
|
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
|
|
</button>
|
|
|
|
<ClientOnly>
|
|
<div v-if="activeProfile" class="dropdown dropdown-end">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="btn btn-ghost btn-circle avatar placeholder"
|
|
>
|
|
<div
|
|
class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
|
|
>
|
|
<span
|
|
class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
|
|
>
|
|
{{ 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>
|
|
<NuxtLink to="/profiles/manage" class="justify-between">
|
|
Gestion des profils
|
|
<IconLucideChevronRight
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
/>
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="text-error justify-between"
|
|
@click="handleLogout"
|
|
>
|
|
Déconnexion
|
|
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
|
|
</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, onUnmounted } from "vue";
|
|
import { useRoute, navigateTo } from "#imports";
|
|
import { useProfileSession } from "~/composables/useProfileSession";
|
|
import IconLucideMenu from "~icons/lucide/menu";
|
|
import IconLucideSettings from "~icons/lucide/settings";
|
|
import IconLucideBoxes from "~icons/lucide/boxes";
|
|
import IconLucidePlus from "~icons/lucide/plus";
|
|
import IconLucideCpu from "~icons/lucide/cpu";
|
|
import IconLucideFilePlus from "~icons/lucide/file-plus";
|
|
import IconLucideMapPin from "~icons/lucide/map-pin";
|
|
import IconLucideChevronRight from "~icons/lucide/chevron-right";
|
|
import IconLucideLogOut from "~icons/lucide/log-out";
|
|
|
|
// É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 openDropdown = ref(null);
|
|
let dropdownCloseTimer = null;
|
|
|
|
const setDropdown = (name) => {
|
|
if (dropdownCloseTimer) {
|
|
clearTimeout(dropdownCloseTimer);
|
|
dropdownCloseTimer = null;
|
|
}
|
|
if (openDropdown.value !== name) {
|
|
openDropdown.value = name;
|
|
}
|
|
};
|
|
|
|
const scheduleDropdownClose = (name) => {
|
|
if (dropdownCloseTimer) {
|
|
clearTimeout(dropdownCloseTimer);
|
|
}
|
|
dropdownCloseTimer = setTimeout(() => {
|
|
if (openDropdown.value === name) {
|
|
openDropdown.value = null;
|
|
}
|
|
dropdownCloseTimer = null;
|
|
}, 200);
|
|
};
|
|
|
|
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();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (dropdownCloseTimer) {
|
|
clearTimeout(dropdownCloseTimer);
|
|
dropdownCloseTimer = null;
|
|
}
|
|
});
|
|
</script>
|