MALIO-DEV/Inventory
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Rename dashboard

Browse Source
This commit is contained in:
Matthieu
2025-09-25 16:22:14 +02:00
parent d1ce074c6d
commit b7caa4f552
2 changed files with 580 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
app/app.vue
View File

@@ -7,7 +7,10 @@
<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">
<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"
@@ -21,16 +24,24 @@
<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'"
:class="
isActive('/')
? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Dashboard
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'"
: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>
@@ -39,7 +50,11 @@
<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'"
: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>
@@ -56,16 +71,27 @@
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'"
: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">
<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'"
: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>
@@ -74,7 +100,11 @@
<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'"
: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>
@@ -93,16 +123,28 @@
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'"
: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">
<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'"
: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>
@@ -111,7 +153,11 @@
<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'"
: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>
@@ -130,16 +176,29 @@
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'"
: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">
<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'"
:class="
isActive('/sites')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Sites
</NuxtLink>
@@ -148,7 +207,11 @@
<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'"
:class="
isActive('/documents')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Documents
</NuxtLink>
@@ -157,7 +220,11 @@
<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'"
:class="
isActive('/constructeurs')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Constructeurs
</NuxtLink>
@@ -168,11 +235,15 @@
</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">
<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>
<NuxtLink to="/" class="btn btn-ghost text-xl"
>Inventaire Pro</NuxtLink
>
</div>
</div>
<div class="navbar-center hidden lg:flex">
@@ -181,16 +252,24 @@
<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'"
:class="
isActive('/')
? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Dashboard
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'"
: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>
@@ -199,7 +278,11 @@
<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'"
: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>
@@ -216,16 +299,27 @@
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'"
: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">
<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'"
: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>
@@ -234,7 +328,11 @@
<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'"
: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>
@@ -253,16 +351,28 @@
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'"
: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">
<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'"
: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>
@@ -271,7 +381,11 @@
<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'"
: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>
@@ -290,16 +404,29 @@
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'"
: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">
<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'"
:class="
isActive('/sites')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Sites
</NuxtLink>
@@ -308,7 +435,11 @@
<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'"
:class="
isActive('/documents')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Documents
</NuxtLink>
@@ -317,7 +448,11 @@
<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'"
:class="
isActive('/constructeurs')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Constructeurs
</NuxtLink>
@@ -329,23 +464,29 @@
<div class="navbar-end">
<div class="flex items-center gap-2">
<!-- Bouton paramètres d'affichage -->
<button
@click="openDisplaySettings"
<button
@click="openDisplaySettings"
class="btn btn-ghost btn-circle hidden lg:inline-flex"
title="Paramètres d'affichage"
>
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
</button>
<!-- Menu Nouveau -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-primary">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Nouveau
</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<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">
<NuxtLink
to="/machines?add=true"
class="flex items-center gap-2"
>
<IconLucideCpu class="w-4 h-4" aria-hidden="true" />
Nouvelle Machine
</NuxtLink>
@@ -367,8 +508,14 @@
<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 h-10 grid place-items-center">
<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"
>
@@ -376,20 +523,32 @@
</span>
</div>
</div>
<ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64">
<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>
<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
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
<IconLucideChevronRight
class="w-4 h-4"
aria-hidden="true"
/>
</NuxtLink>
</li>
<li>
<button type="button" class="text-error justify-between" @click="handleLogout">
<button
type="button"
class="text-error justify-between"
@click="handleLogout"
>
Déconnexion
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
</button>
@@ -408,8 +567,8 @@
<ToastContainer />
<!-- Paramètres d'affichage -->
<DisplaySettings
:is-open="displaySettingsOpen"
<DisplaySettings
:is-open="displaySettingsOpen"
@close="closeDisplaySettings"
@update-settings="handleSettingsUpdate"
/>
@@ -424,96 +583,99 @@
</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'
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()
const displaySettingsOpen = ref(false);
const { activeProfile, ensureSession, logout } = useProfileSession();
// Route active pour souligner l'onglet sélectionné dans la navbar
const route = useRoute()
const route = useRoute();
const isActive = (path) => {
if (path === '/') {
return route.path === '/'
if (path === "/") {
return route.path === "/";
}
return route.path.startsWith(path)
}
return route.path.startsWith(path);
};
// Ouvrir les paramètres d'affichage
const openDisplaySettings = () => {
displaySettingsOpen.value = true
}
displaySettingsOpen.value = true;
};
// Fermer les paramètres d'affichage
const closeDisplaySettings = () => {
displaySettingsOpen.value = false
}
displaySettingsOpen.value = false;
};
// Gérer les mises à jour des paramètres
const handleSettingsUpdate = (settings) => {
console.log('Paramètres d\'affichage mis à jour:', settings)
}
console.log("Paramètres d'affichage mis à jour:", settings);
};
const handleLogout = async () => {
await logout()
await navigateTo('/profiles')
}
await logout();
await navigateTo("/profiles");
};
const openDropdown = ref(null)
let dropdownCloseTimer = null
const openDropdown = ref(null);
let dropdownCloseTimer = null;
const setDropdown = (name) => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
dropdownCloseTimer = null
clearTimeout(dropdownCloseTimer);
dropdownCloseTimer = null;
}
if (openDropdown.value !== name) {
openDropdown.value = name
openDropdown.value = name;
}
}
};
const scheduleDropdownClose = (name) => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
clearTimeout(dropdownCloseTimer);
}
dropdownCloseTimer = setTimeout(() => {
if (openDropdown.value === name) {
openDropdown.value = null
openDropdown.value = null;
}
dropdownCloseTimer = null
}, 200)
}
dropdownCloseTimer = null;
}, 200);
};
const activeProfileLabel = computed(() => {
if (!activeProfile.value) return 'Profil inconnu'
return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
})
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() || '??'
})
if (!activeProfile.value) return "??";
const { firstName = "", lastName = "" } = activeProfile.value;
return (
`${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
"??"
);
});
onMounted(async () => {
await ensureSession()
})
await ensureSession();
});
onUnmounted(() => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
dropdownCloseTimer = null
clearTimeout(dropdownCloseTimer);
dropdownCloseTimer = null;
}
})
});
</script>

514
app/pages/index.vue
View File

@@ -1,12 +1,11 @@
<template>
<main class="container mx-auto px-6 py-8">
<!-- Hierarchical View -->
<div class="my-8">
<!-- Header with Stats -->
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Vue Hiérarchique</h2>
<h2 class="text-2xl font-bold text-gray-800">Vue d'ensemble</h2>
<p class="text-gray-600">Machines organisées par site</p>
</div>
<div class="stats shadow">
@@ -29,10 +28,10 @@
<label class="label">
<span class="label-text">Rechercher</span>
</label>
<input
v-model="searchTerm"
type="text"
placeholder="Nom de machine ou site..."
<input
v-model="searchTerm"
type="text"
placeholder="Nom de machine ou site..."
class="input input-bordered"
/>
</div>
@@ -42,7 +41,11 @@
</label>
<select v-model="selectedType" class="select select-bordered">
<option value="">Tous les types</option>
<option v-for="type in machineTypes" :key="type.id" :value="type.id">
<option
v-for="type in machineTypes"
:key="type.id"
:value="type.id"
>
{{ type.name }}
</option>
</select>
@@ -53,7 +56,11 @@
</label>
<select v-model="selectedCategory" class="select select-bordered">
<option value="">Toutes les catégories</option>
<option v-for="category in categories" :key="category" :value="category">
<option
v-for="category in categories"
:key="category"
:value="category"
>
{{ category }}
</option>
</select>
@@ -70,14 +77,24 @@
<!-- Hierarchical Machines View -->
<div v-else-if="filteredSites.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
<p class="text-gray-500 mb-4">Commencez par ajouter des sites et des machines.</p>
<IconLucideFactory
class="w-16 h-16 mx-auto text-gray-400 mb-4"
aria-hidden="true"
/>
<h3 class="text-lg font-medium text-gray-900 mb-2">
Aucune machine trouvée
</h3>
<p class="text-gray-500 mb-4">
Commencez par ajouter des sites et des machines.
</p>
<div class="flex gap-2 justify-center">
<button @click="showAddSiteModal = true" class="btn btn-primary">
Ajouter un site
</button>
<button @click="showAddMachineModal = true" class="btn btn-secondary">
<button
@click="showAddMachineModal = true"
class="btn btn-secondary"
>
Ajouter une machine
</button>
</div>
@@ -85,8 +102,8 @@
</div>
<div v-else class="space-y-6">
<div
v-for="site in filteredSites"
<div
v-for="site in filteredSites"
:key="site.id"
class="card bg-base-100 shadow-lg"
>
@@ -95,7 +112,9 @@
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center">
<div
class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
>
<IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
</div>
</div>
@@ -103,15 +122,24 @@
<h3 class="text-xl font-bold">{{ site.name }}</h3>
<div class="text-sm text-gray-600 space-y-1">
<div class="flex items-center gap-2">
<IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
<IconLucideUser
class="w-4 h-4 text-primary"
aria-hidden="true"
/>
<span class="font-medium">{{ site.contactName }}</span>
</div>
<div class="flex items-center gap-2">
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
<IconLucidePhone
class="w-4 h-4 text-secondary"
aria-hidden="true"
/>
<span>{{ site.contactPhone }}</span>
</div>
<div class="flex items-start gap-2">
<IconLucideMapPinned class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
<IconLucideMapPinned
class="w-4 h-4 text-accent mt-1"
aria-hidden="true"
/>
<span>
{{ site.contactAddress }}<br />
{{ site.contactPostalCode }} {{ site.contactCity }}
@@ -121,11 +149,18 @@
</div>
</div>
<div class="flex items-center gap-2">
<div class="badge badge-primary badge-lg">{{ site.machines?.length || 0 }} machines</div>
<button @click="toggleSiteCollapse(site.id)" class="btn btn-ghost btn-sm">
<div class="badge badge-primary badge-lg">
{{ site.machines?.length || 0 }} machines
</div>
<button
@click="toggleSiteCollapse(site.id)"
class="btn btn-ghost btn-sm"
>
<IconLucideChevronDown
class="w-5 h-5 transition-transform"
:class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
:class="
collapsedSites.includes(site.id) ? 'rotate-180' : ''
"
aria-hidden="true"
/>
</button>
@@ -133,11 +168,18 @@
</div>
<!-- Machines List -->
<div v-if="!collapsedSites.includes(site.id) && site.machines && site.machines.length > 0" class="space-y-3">
<div
v-if="
!collapsedSites.includes(site.id) &&
site.machines &&
site.machines.length > 0
"
class="space-y-3"
>
<div class="divider"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="machine in site.machines"
<div
v-for="machine in site.machines"
:key="machine.id"
class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
@click="viewMachineDetails(machine)"
@@ -145,32 +187,53 @@
<div class="card-body p-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-semibold text-sm">{{ machine.name }}</h4>
<div class="badge badge-sm" :class="getCategoryBadgeClass(machine.typeMachine?.category)">
{{ machine.typeMachine?.category || 'N/A' }}
<div
class="badge badge-sm"
:class="
getCategoryBadgeClass(machine.typeMachine?.category)
"
>
{{ machine.typeMachine?.category || "N/A" }}
</div>
</div>
<div class="space-y-1 text-xs text-gray-600">
<div class="flex items-center gap-1">
<IconLucideSettings2 class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
<IconLucideSettings2
class="w-3 h-3"
aria-hidden="true"
/>
<span>{{
machine.typeMachine?.name || "Type inconnu"
}}</span>
</div>
<div v-if="machine.reference" class="flex items-center gap-1">
<div
v-if="machine.reference"
class="flex items-center gap-1"
>
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
<span>{{ machine.reference }}</span>
</div>
</div>
<div class="card-actions justify-end mt-3">
<button class="btn btn-xs btn-outline" @click.stop="editMachine(machine)">
<button
class="btn btn-xs btn-outline"
@click.stop="editMachine(machine)"
>
Modifier
</button>
<button class="btn btn-xs btn-error" @click.stop="confirmDeleteMachine(machine)">
<button
class="btn btn-xs btn-error"
@click.stop="confirmDeleteMachine(machine)"
>
Supprimer
</button>
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-xs btn-primary">
<NuxtLink
:to="`/machine/${machine.id}`"
class="btn btn-xs btn-primary"
>
Détails
</NuxtLink>
</div>
@@ -180,12 +243,23 @@
</div>
<!-- Empty Site State -->
<div v-else-if="!collapsedSites.includes(site.id) && (!site.machines || site.machines.length === 0)" class="text-center py-6">
<div
v-else-if="
!collapsedSites.includes(site.id) &&
(!site.machines || site.machines.length === 0)
"
class="text-center py-6"
>
<div class="text-gray-400 mb-2">
<IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
</div>
<p class="text-sm text-gray-500 mb-3">Aucune machine dans ce site</p>
<button @click="addMachineToSite(site)" class="btn btn-sm btn-primary">
<p class="text-sm text-gray-500 mb-3">
Aucune machine dans ce site
</p>
<button
@click="addMachineToSite(site)"
class="btn btn-sm btn-primary"
>
Ajouter une machine
</button>
</div>
@@ -203,11 +277,11 @@
<label class="label">
<span class="label-text">Nom du site</span>
</label>
<input
v-model="newSite.name"
type="text"
placeholder="Ex: Usine de production"
class="input input-bordered"
<input
v-model="newSite.name"
type="text"
placeholder="Ex: Usine de production"
class="input input-bordered"
required
/>
</div>
@@ -215,12 +289,14 @@
<SiteContactFormFields :form="newSite" />
<div class="modal-action">
<button type="button" @click="showAddSiteModal = false" class="btn btn-outline">
<button
type="button"
@click="showAddSiteModal = false"
class="btn btn-outline"
>
Annuler
</button>
<button type="submit" class="btn btn-primary">
Créer le site
</button>
<button type="submit" class="btn btn-primary">Créer le site</button>
</div>
</form>
</div>
@@ -236,20 +312,24 @@
<label class="label">
<span class="label-text">Nom de la machine</span>
</label>
<input
v-model="newMachine.name"
type="text"
placeholder="Ex: Presse hydraulique #1"
class="input input-bordered"
<input
v-model="newMachine.name"
type="text"
placeholder="Ex: Presse hydraulique #1"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Site</span>
</label>
<select v-model="newMachine.siteId" class="select select-bordered" required>
<select
v-model="newMachine.siteId"
class="select select-bordered"
required
>
<option value="">Sélectionner un site</option>
<option v-for="site in sites" :key="site.id" :value="site.id">
{{ site.name }}
@@ -263,9 +343,17 @@
<label class="label">
<span class="label-text">Type de machine</span>
</label>
<select v-model="newMachine.typeMachineId" class="select select-bordered" required>
<select
v-model="newMachine.typeMachineId"
class="select select-bordered"
required
>
<option value="">Sélectionner un type</option>
<option v-for="type in machineTypes" :key="type.id" :value="type.id">
<option
v-for="type in machineTypes"
:key="type.id"
:value="type.id"
>
{{ type.name }} ({{ type.category }})
</option>
</select>
@@ -275,36 +363,51 @@
<label class="label">
<span class="label-text">Référence</span>
</label>
<input
v-model="newMachine.reference"
type="text"
placeholder="Ex: PRESS-001"
<input
v-model="newMachine.reference"
type="text"
placeholder="Ex: PRESS-001"
class="input input-bordered"
/>
</div>
</div>
<!-- Type Preview -->
<div v-if="selectedMachineType" class="mb-4 p-4 bg-gray-50 rounded-lg">
<h4 class="font-semibold text-sm mb-2">Structure du type sélectionné :</h4>
<div
v-if="selectedMachineType"
class="mb-4 p-4 bg-gray-50 rounded-lg"
>
<h4 class="font-semibold text-sm mb-2">
Structure du type sélectionné :
</h4>
<div class="text-xs space-y-1">
<div class="flex items-center gap-2">
<span class="font-medium">Familles de composants :</span>
<span class="badge badge-sm">{{ selectedMachineType.componentRequirements?.length || 0 }}</span>
<span class="badge badge-sm">{{
selectedMachineType.componentRequirements?.length || 0
}}</span>
</div>
<div class="flex items-center gap-2">
<span class="font-medium">Groupes de pièces :</span>
<span class="badge badge-sm">{{ selectedMachineType.pieceRequirements?.length || 0 }}</span>
<span class="badge badge-sm">{{
selectedMachineType.pieceRequirements?.length || 0
}}</span>
</div>
<div class="flex items-center gap-2">
<span class="font-medium">Catégorie :</span>
<span class="badge badge-outline badge-sm">{{ selectedMachineType.category }}</span>
<span class="badge badge-outline badge-sm">{{
selectedMachineType.category
}}</span>
</div>
</div>
</div>
<div class="modal-action">
<button type="button" @click="showAddMachineModal = false" class="btn btn-outline">
<button
type="button"
@click="showAddMachineModal = false"
class="btn btn-outline"
>
Annuler
</button>
<button type="submit" class="btn btn-primary">
@@ -318,116 +421,129 @@
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
import { useSites } from '~/composables/useSites'
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
import { useMachines } from '~/composables/useMachines'
import { useToast } from '~/composables/useToast'
import IconLucideFactory from '~icons/lucide/factory'
import IconLucideMapPin from '~icons/lucide/map-pin'
import IconLucideUser from '~icons/lucide/user'
import IconLucidePhone from '~icons/lucide/phone'
import IconLucideMapPinned from '~icons/lucide/map-pinned'
import IconLucideChevronDown from '~icons/lucide/chevron-down'
import IconLucideSettings2 from '~icons/lucide/settings-2'
import IconLucideTag from '~icons/lucide/tag'
import { ref, reactive, onMounted, computed } from "vue";
import SiteContactFormFields from "~/components/sites/SiteContactFormFields.vue";
import { useSites } from "~/composables/useSites";
import { useMachineTypesApi } from "~/composables/useMachineTypesApi";
import { useMachines } from "~/composables/useMachines";
import { useToast } from "~/composables/useToast";
import IconLucideFactory from "~icons/lucide/factory";
import IconLucideMapPin from "~icons/lucide/map-pin";
import IconLucideUser from "~icons/lucide/user";
import IconLucidePhone from "~icons/lucide/phone";
import IconLucideMapPinned from "~icons/lucide/map-pinned";
import IconLucideChevronDown from "~icons/lucide/chevron-down";
import IconLucideSettings2 from "~icons/lucide/settings-2";
import IconLucideTag from "~icons/lucide/tag";
const { sites, loading, loadSites, createSite } = useSites()
const { machineTypes, loadMachineTypes } = useMachineTypesApi()
const { createMachineFromType, deleteMachine } = useMachines()
const { sites, loading, loadSites, createSite } = useSites();
const { machineTypes, loadMachineTypes } = useMachineTypesApi();
const { createMachineFromType, deleteMachine } = useMachines();
// Data
const showAddSiteModal = ref(false)
const showAddMachineModal = ref(false)
const searchTerm = ref('')
const selectedType = ref('')
const selectedCategory = ref('')
const collapsedSites = ref([])
const showAddSiteModal = ref(false);
const showAddMachineModal = ref(false);
const searchTerm = ref("");
const selectedType = ref("");
const selectedCategory = ref("");
const collapsedSites = ref([]);
const newSite = reactive({
name: '',
contactName: '',
contactPhone: '',
contactAddress: '',
contactPostalCode: '',
contactCity: ''
})
name: "",
contactName: "",
contactPhone: "",
contactAddress: "",
contactPostalCode: "",
contactCity: "",
});
const newMachine = reactive({
name: '',
siteId: '',
typeMachineId: '',
reference: ''
})
name: "",
siteId: "",
typeMachineId: "",
reference: "",
});
// Computed
const selectedMachineType = computed(() => {
if (!newMachine.typeMachineId) return null
return machineTypes.value.find(type => type.id === newMachine.typeMachineId)
})
if (!newMachine.typeMachineId) return null;
return machineTypes.value.find(
(type) => type.id === newMachine.typeMachineId
);
});
const categories = computed(() => {
const cats = new Set()
machineTypes.value.forEach(type => {
if (type.category) cats.add(type.category)
})
return Array.from(cats)
})
const cats = new Set();
machineTypes.value.forEach((type) => {
if (type.category) cats.add(type.category);
});
return Array.from(cats);
});
const totalMachines = computed(() => {
return sites.value.reduce((total, site) => {
return total + (site.machines?.length || 0)
}, 0)
})
return total + (site.machines?.length || 0);
}, 0);
});
const filteredSites = computed(() => {
let filtered = sites.value
let filtered = sites.value;
// Filtrer par terme de recherche
if (searchTerm.value) {
filtered = filtered.filter(site => {
const lowerTerm = searchTerm.value.toLowerCase()
filtered = filtered.filter((site) => {
const lowerTerm = searchTerm.value.toLowerCase();
const siteMatches = [
site.name,
site.contactName,
site.contactPhone,
site.contactAddress,
site.contactPostalCode,
site.contactCity
].some(field => {
if (!field) return false
return field.toLowerCase().includes(lowerTerm)
})
const machineMatches = site.machines?.some(machine =>
machine.name.toLowerCase().includes(lowerTerm) ||
machine.reference?.toLowerCase().includes(lowerTerm)
)
return siteMatches || machineMatches
})
site.contactCity,
].some((field) => {
if (!field) return false;
return field.toLowerCase().includes(lowerTerm);
});
const machineMatches = site.machines?.some(
(machine) =>
machine.name.toLowerCase().includes(lowerTerm) ||
machine.reference?.toLowerCase().includes(lowerTerm)
);
return siteMatches || machineMatches;
});
}
// Filtrer par type de machine
if (selectedType.value) {
filtered = filtered.map(site => ({
...site,
machines: site.machines?.filter(machine => machine.typeMachineId === selectedType.value) || []
})).filter(site => site.machines.length > 0)
filtered = filtered
.map((site) => ({
...site,
machines:
site.machines?.filter(
(machine) => machine.typeMachineId === selectedType.value
) || [],
}))
.filter((site) => site.machines.length > 0);
}
// Filtrer par catégorie
if (selectedCategory.value) {
filtered = filtered.map(site => ({
...site,
machines: site.machines?.filter(machine => machine.typeMachine?.category === selectedCategory.value) || []
})).filter(site => site.machines.length > 0)
filtered = filtered
.map((site) => ({
...site,
machines:
site.machines?.filter(
(machine) =>
machine.typeMachine?.category === selectedCategory.value
) || [],
}))
.filter((site) => site.machines.length > 0);
}
return filtered
})
return filtered;
});
// Methods
const handleCreateSite = async () => {
@@ -437,102 +553,106 @@ const handleCreateSite = async () => {
contactPhone: newSite.contactPhone,
contactAddress: newSite.contactAddress,
contactPostalCode: newSite.contactPostalCode,
contactCity: newSite.contactCity
})
contactCity: newSite.contactCity,
});
if (result.success) {
showAddSiteModal.value = false
showAddSiteModal.value = false;
// Reset form
newSite.name = ''
newSite.contactName = ''
newSite.contactPhone = ''
newSite.contactAddress = ''
newSite.contactPostalCode = ''
newSite.contactCity = ''
newSite.name = "";
newSite.contactName = "";
newSite.contactPhone = "";
newSite.contactAddress = "";
newSite.contactPostalCode = "";
newSite.contactCity = "";
}
}
};
const handleCreateMachine = async () => {
if (!selectedMachineType.value) {
console.error('Aucun type de machine sélectionné')
return
console.error("Aucun type de machine sélectionné");
return;
}
const machineData = {
name: newMachine.name,
siteId: newMachine.siteId,
reference: newMachine.reference
}
reference: newMachine.reference,
};
const result = await createMachineFromType(
machineData,
selectedMachineType.value
);
const result = await createMachineFromType(machineData, selectedMachineType.value)
if (result.success) {
// Reset form
newMachine.name = ''
newMachine.siteId = ''
newMachine.typeMachineId = ''
newMachine.reference = ''
showAddMachineModal.value = false
newMachine.name = "";
newMachine.siteId = "";
newMachine.typeMachineId = "";
newMachine.reference = "";
showAddMachineModal.value = false;
}
}
};
const toggleSiteCollapse = (siteId) => {
const index = collapsedSites.value.indexOf(siteId)
const index = collapsedSites.value.indexOf(siteId);
if (index > -1) {
collapsedSites.value.splice(index, 1)
collapsedSites.value.splice(index, 1);
} else {
collapsedSites.value.push(siteId)
collapsedSites.value.push(siteId);
}
}
};
const viewMachineDetails = (machine) => {
// Navigation vers la page de détails de la machine
navigateTo(`/machine/${machine.id}`)
}
navigateTo(`/machine/${machine.id}`);
};
const editMachine = (machine) => {
// Rediriger vers la page d'édition de la machine
navigateTo(`/machine/${machine.id}?edit=true`)
}
navigateTo(`/machine/${machine.id}?edit=true`);
};
const confirmDeleteMachine = async (machine) => {
const { showError, showSuccess } = useToast()
if (confirm(`Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`)) {
const { showError, showSuccess } = useToast();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`
)
) {
try {
const result = await deleteMachine(machine.id)
const result = await deleteMachine(machine.id);
if (result.success) {
showSuccess(`Machine "${machine.name}" supprimée avec succès`)
showSuccess(`Machine "${machine.name}" supprimée avec succès`);
} else {
showError(`Erreur lors de la suppression: ${result.error}`)
showError(`Erreur lors de la suppression: ${result.error}`);
}
} catch (error) {
showError(`Erreur lors de la suppression: ${error.message}`)
showError(`Erreur lors de la suppression: ${error.message}`);
}
}
}
};
const addMachineToSite = (site) => {
newMachine.siteId = site.id
showAddMachineModal.value = true
}
newMachine.siteId = site.id;
showAddMachineModal.value = true;
};
const getCategoryBadgeClass = (category) => {
const classes = {
'Production': 'badge-primary',
'Transformation': 'badge-secondary',
'Manutention': 'badge-accent',
'Traitement': 'badge-info',
'Contrôle': 'badge-warning'
}
return classes[category] || 'badge-neutral'
}
Production: "badge-primary",
Transformation: "badge-secondary",
Manutention: "badge-accent",
Traitement: "badge-info",
Contrôle: "badge-warning",
};
return classes[category] || "badge-neutral";
};
// Lifecycle
onMounted(async () => {
await Promise.all([
loadSites(),
loadMachineTypes()
])
})
</script>
await Promise.all([loadSites(), loadMachineTypes()]);
});
</script>