From 4b8f85e68dc95585d96a4cbad219ad068cbc8acf Mon Sep 17 00:00:00 2001 From: Luc SORIGNET Date: Sat, 1 Mar 2025 14:54:25 +0100 Subject: [PATCH] refactor: adaptation mobile --- Front-End/src/app/[locale]/admin/layout.js | 140 ++++++++++++------- Front-End/src/app/[locale]/parents/layout.js | 27 ++-- Front-End/src/app/[locale]/parents/page.js | 78 ++++++++--- Front-End/src/components/Footer.js | 17 +++ Front-End/src/components/Sidebar.js | 2 +- README.md | 62 ++++++++ 6 files changed, 237 insertions(+), 89 deletions(-) create mode 100644 Front-End/src/components/Footer.js diff --git a/Front-End/src/app/[locale]/admin/layout.js b/Front-End/src/app/[locale]/admin/layout.js index f664d9e..55bff65 100644 --- a/Front-End/src/app/[locale]/admin/layout.js +++ b/Front-End/src/app/[locale]/admin/layout.js @@ -12,10 +12,12 @@ import { Calendar, Settings, FileText, - LogOut + LogOut, + Menu, + X } from 'lucide-react'; import DropdownMenu from '@/components/DropdownMenu'; -import Logo from '@/components/Logo'; + import Popup from '@/components/Popup'; import { FE_ADMIN_HOME_URL, @@ -31,11 +33,13 @@ import { useSession } from 'next-auth/react'; import { fetchEstablishment } from '@/app/actions/schoolAction'; import ProtectedRoute from '@/components/ProtectedRoute'; import { getGravatarUrl } from '@/utils/gravatar'; +import Footer from '@/components/Footer'; export default function Layout({ children, }) { - const t = useTranslations('sidebar'); + const t = useTranslations('sidebar'); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); const sidebarItems = { "admin": { "id": "admin", "name": t('dashboard'), "url": FE_ADMIN_HOME_URL, "icon": Home }, @@ -50,7 +54,7 @@ export default function Layout({ const [isLoading, setIsLoading] = useState(false); const [isPopupVisible, setIsPopupVisible] = useState(false); const [user, setUser] = useState(null); - const { data: session } = useSession(); + const { data: session } = useSession(); const pathname = usePathname(); const currentPage = pathname.split('/').pop(); @@ -58,7 +62,7 @@ export default function Layout({ const headerTitle = sidebarItems[currentPage]?.name || t('dashboard'); const softwareName = "N3WT School"; - const softwareVersion = `v${process.env.NEXT_PUBLIC_APP_VERSION}`; + const softwareVersion = `${process.env.NEXT_PUBLIC_APP_VERSION}`; const handleDisconnect = () => { setIsPopupVisible(true); @@ -77,6 +81,15 @@ export default function Layout({ }, ]; + const toggleSidebar = () => { + setIsSidebarOpen(!isSidebarOpen); + }; + + useEffect(() => { + // Fermer la sidebar quand on change de page sur mobile + setIsSidebarOpen(false); + }, [pathname]); + useEffect(() => { setIsLoading(true); fetchEstablishment() @@ -85,7 +98,7 @@ export default function Layout({ }) .catch(error => console.error('Error fetching establishment : ', error)) .finally(() => setIsLoading(false)); - }, []); + }, []); useEffect(() => { const fetchUser = async () => { @@ -99,54 +112,79 @@ export default function Layout({ }, [session]); return ( - - {!isLoading && ( -
- -
- {/* Header - h-16 = 64px */} -
-
{headerTitle}
- - } - items={dropdownItems} - buttonClassName="" - menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded shadow-lg" - /> -
- {/* Main Content */} -
- {/* Content avec scroll si nécessaire */} -
- {children} -
- {/* Footer - h-16 = 64px */} -
-
- © {new Date().getFullYear()} N3WT-INNOV Tous droits réservés. -
{softwareName} - {softwareVersion}
-
- -
+ + {!isLoading && ( +
+ {/* Sidebar avec hauteur forcée */} +
+ +
+ + {/* Overlay pour fermer la sidebar en cliquant à l'extérieur sur mobile */} + {isSidebarOpen && ( +
+ )} + +
+ {/* Header responsive */} +
+
+ +
{headerTitle}
+ + } + items={dropdownItems} + buttonClassName="" + menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded shadow-lg" + /> +
+ {/* Main Content */} +
+ {/* Content avec scroll si nécessaire */} +
+ {children} +
+ {/* Footer responsive */} +
- )} - setIsPopupVisible(false)} - /> - +
+ )} + setIsPopupVisible(false)} + /> + ); } diff --git a/Front-End/src/app/[locale]/parents/layout.js b/Front-End/src/app/[locale]/parents/layout.js index c05f118..3b7b1b8 100644 --- a/Front-End/src/app/[locale]/parents/layout.js +++ b/Front-End/src/app/[locale]/parents/layout.js @@ -66,48 +66,45 @@ export default function Layout({
{/* Entête */} -
+
- {/* Utilisation du composant Logo */} + {/* Utilisation du composant Logo */} -
Accueil
+
Accueil
-
+
-
{messages.length > 0 && ( )}
} + buttonContent={} items={[ { label: 'Se déconnecter', icon: LogOut, onClick: handleDisconnect }, { label: 'Settings', icon: Settings , onClick: () => { router.push(FE_PARENTS_SETTINGS_URL); } } ]} - buttonClassName="p-2 rounded-full hover:bg-gray-200" - menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg" - + buttonClassName="p-1 md:p-2 rounded-full hover:bg-gray-200" + menuClassName="absolute right-0 mt-2 w-36 md:w-48 bg-white border border-gray-200 rounded-md shadow-lg" />
{/* Content */} -
{/* Ajout de flex-1 pour utiliser toute la hauteur disponible */} +
{/* Ajout de flex-1 pour utiliser toute la hauteur disponible */} {children}
diff --git a/Front-End/src/app/[locale]/parents/page.js b/Front-End/src/app/[locale]/parents/page.js index c104b4c..ca17147 100644 --- a/Front-End/src/app/[locale]/parents/page.js +++ b/Front-End/src/app/[locale]/parents/page.js @@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import Table from '@/components/Table'; -import { Edit } from 'lucide-react'; -import StatusLabel from '@/components/StatusLabel'; +import { Edit, Users } from 'lucide-react'; +import StatusLabel from '@/components/StatusLabel'; import { FE_PARENTS_EDIT_INSCRIPTION_URL } from '@/utils/Url'; import { fetchChildren } from '@/app/actions/subscriptionAction'; import logger from '@/utils/logger'; @@ -11,10 +11,11 @@ import { useSession } from 'next-auth/react'; import { FE_USERS_LOGIN_URL } from '@/utils/Url'; export default function ParentHomePage() { - const [actions, setActions] = useState([]); + const [children, setChildren] = useState([]); const { data: session, status } = useSession(); const [userId, setUserId] = useState(null); + const [currentPage, setCurrentPage] = useState(1); const router = useRouter(); @@ -61,29 +62,62 @@ export default function ParentHomePage() { } }; - return ( -
-
-

Dernières actions à effectuer

- - + // Définir les colonnes du tableau + const childrenColumns = [ + { name: 'Nom', transform: (row) => `${row.student.last_name} ${row.student.first_name}` }, + { + name: 'Statut', + transform: (row) => ( +
+ +
+ ) + }, + { + name: 'Actions', + transform: (row) => ( +
+ +
+ ) + } + ]; + const itemsPerPage = 5; + const totalPages = Math.ceil(children.length / itemsPerPage) || 1; + + const handlePageChange = (newPage) => { + setCurrentPage(newPage); + }; + + return ( +
-

Enfants

-
- {children.map((child) => ( -
-
-

{child.student.last_name} {child.student.first_name}

- handleEdit(child.student.id)} /> -
- -
- ))} +

+ + Enfants +

+
+
); - - } diff --git a/Front-End/src/components/Footer.js b/Front-End/src/components/Footer.js new file mode 100644 index 0000000..6754650 --- /dev/null +++ b/Front-End/src/components/Footer.js @@ -0,0 +1,17 @@ +import Logo from '@/components/Logo'; + +export default function Footer ({softwareName, softwareVersion}) { + +return ( +
+
+ © {new Date().getFullYear()} N3WT-INNOV Tous droits réservés. +
+
+
{softwareName} - {softwareVersion}
+ +
+
+) +} + diff --git a/Front-End/src/components/Sidebar.js b/Front-End/src/components/Sidebar.js index 8140f76..528fdba 100644 --- a/Front-End/src/components/Sidebar.js +++ b/Front-End/src/components/Sidebar.js @@ -29,7 +29,7 @@ function Sidebar({ establishment, currentPage, items }) { return <> {/* Sidebar */} -
+
{establishment?.name}
diff --git a/README.md b/README.md index e69de29..41f5e2e 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,62 @@ +# N3wt School + +Logiciel de gestion d'école + + +## Maquette + +Maquette figma : https://www.figma.com/design/1BtWHIQlJDTeue2oYblefV/Maquette-Logiciel-de-gestion-Ecole?node-id=42-296&t=AdaSQYWkLLf1o5OI-0 + +## Installation + +### Installation de docker +Lien de téléchargement : https://www.docker.com/get-started/ + +# Lancement de monteschool + +```sh +docker compose up -d +``` + +Lancement du front end +```sh +npm run dev +``` + +se connecter à localhost:8080 + +# Installation et développement en local + +* [Installation Manuelle](./docs/Installation_Manuelle.md) +* [Convention de codage](./docs/CODING_GUIDELINES.md) + +# Installer la vérification de commit (dans le projet principal) + +``` +npm i +npm run prepare +``` + +# Faire une livraison Mise en Production + +```sh +# Faire la première release (1.0.0) +npm run release -- --first-release + +# Faire une prerelease (RC,alpha,beta) +npm run release -- --prerelease + + +# Faire une release +npm run release + +# Forcer la release sur un mode particulier (majeur, mineur ou patch) +# npm run script +npm run release -- --release-as minor +# Or +npm run release -- --release-as 1.1.0 + +# ignorer les hooks de commit lors de la release +npm run release -- --no-verify +``` +