feat: Ajout du logo de l'école

Front-End/next.config.mjs

@@ -18,6 +18,11 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'www.gravatar.com',
       },
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '8080',
+      },
     ],
   },
   env: {

Front-End/src/components/ProfileSelector.js

@@ -9,6 +9,9 @@ import { usePopup } from '@/context/PopupContext';
 import { getRightStr } from '@/utils/rights';
 import { ChevronDown } from 'lucide-react'; // Import de l'icône
 import Image from 'next/image'; // Import du composant Image
+import {
+  BASE_URL,
+} from '@/utils/Url';
 
 const ProfileSelector = ({ onRoleChange, className = '' }) => {
   const {
@@ -20,6 +23,8 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     user,
     setSelectedEstablishmentEvaluationFrequency,
     setSelectedEstablishmentTotalCapacity,
+    selectedEstablishmentLogo,
+    setSelectedEstablishmentLogo
   } = useEstablishment();
   const { isConnected, connectionStatus } = useChatConnection();
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -33,12 +38,15 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
       user.roles[roleId].establishment__evaluation_frequency;
     const establishmentTotalCapacity =
       user.roles[roleId].establishment__total_capacity;
+    const establishmentLogo =
+      user.roles[roleId].establishment__logo;
     setProfileRole(role);
     setSelectedEstablishmentId(establishmentId);
     setSelectedEstablishmentEvaluationFrequency(
       establishmentEvaluationFrequency
     );
     setSelectedEstablishmentTotalCapacity(establishmentTotalCapacity);
+    setSelectedEstablishmentLogo(establishmentLogo);
     setSelectedRoleId(roleId);
     if (onRoleChange) {
       onRoleChange(roleId);
@@ -99,14 +107,14 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     <div className={`relative ${className}`}>
       <DropdownMenu
         buttonContent={
-          <div className="h-16 flex items-center gap-2 cursor-pointer px-4 bg-white">
+          <div className="h-16 flex items-center gap-2 cursor-pointer px-4 bg-white h-24">
             <div className="relative">
               <Image
-                src={getGravatarUrl(user?.email)}
+                src={selectedEstablishmentLogo ? `${BASE_URL}${selectedEstablishmentLogo}` : getGravatarUrl(user?.email)}
                 alt="Profile"
-                className="w-10 h-10 rounded-full object-cover shadow-md"
-                width={32}
-                height={32}
+                className="w-16 h-16 rounded-full object-cover shadow-md"
+                width={64}
+                height={64}
               />
               {/* Bulle de statut de connexion au chat */}
               <div
@@ -116,7 +124,7 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
             </div>
             <div className="flex-1 min-w-0">
               <div
-                className="font-bold text-left truncate max-w-full"
+                className="font-bold text-left truncate max-w-full text-sm"
                 title={user?.email}
               >
                 {user?.email}
@@ -125,11 +133,16 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
                 className="text-sm text-gray-500 text-left truncate max-w-full"
                 title={`${getRightStr(selectedEstablishment?.role_type) || ''}${selectedEstablishment?.name ? ', ' + selectedEstablishment.name : ''}`}
               >
-                {getRightStr(selectedEstablishment?.role_type) || ''}
                 {selectedEstablishment?.name
-                  ? `, ${selectedEstablishment.name}`
+                  ? `${selectedEstablishment.name}`
                   : ''}
               </div>
+              <div
+                className="italic text-sm text-gray-500 text-left truncate max-w-full"
+                title={`${getRightStr(selectedEstablishment?.role_type) || ''}${selectedEstablishment?.name ? ', ' + selectedEstablishment.name : ''}`}
+              >
+                {getRightStr(selectedEstablishment?.role_type) || ''}
+              </div>
             </div>
             <ChevronDown
               className={`w-5 h-5 transition-transform duration-200 ${dropdownOpen ? 'rotate-180' : 'rotate-0'}`}

Front-End/src/components/Sidebar.js

@@ -35,7 +35,7 @@ function Sidebar({ currentPage, items, onCloseMobile }) {
   return (
     <div className="w-64 bg-stone-50 border-r h-full border-gray-200">
       <div className="border-b border-gray-200 ">
-        <ProfileSelector className="border-none" />
+        <ProfileSelector className="border-none h-24" />
       </div>
       <nav className="space-y-1 px-4 py-6">
         {items.map((item) => (

Front-End/src/context/EstablishmentContext.js

@@ -50,6 +50,10 @@ export const EstablishmentProvider = ({ children }) => {
     const storedApiDocuseal = sessionStorage.getItem('apiDocuseal');
     return storedApiDocuseal ? JSON.parse(storedApiDocuseal) : null;
   });
+  const [selectedEstablishmentLogo, setSelectedEstablishmentLogoState] = useState(() => {
+    const storedLogo = sessionStorage.getItem('selectedEstablishmentLogo');
+    return storedLogo ? JSON.parse(storedLogo) : null;
+  });
 
   // Sauvegarder dans sessionStorage à chaque mise à jour
   const setSelectedEstablishmentId = (id) => {
@@ -95,6 +99,11 @@ export const EstablishmentProvider = ({ children }) => {
     sessionStorage.setItem('apiDocuseal', JSON.stringify(api));
   };
 
+  const setSelectedEstablishmentLogo = (logo) => {
+    setSelectedEstablishmentLogoState(logo);
+    sessionStorage.setItem('selectedEstablishmentLogo', JSON.stringify(logo));
+  };
+
   /**
    * Fonction d'initialisation du contexte avec la session (appelée lors du login)
    * @param {*} session
@@ -114,6 +123,7 @@ export const EstablishmentProvider = ({ children }) => {
       evaluation_frequency: role.establishment__evaluation_frequency,
       total_capacity: role.establishment__total_capacity,
       api_docuseal: role.establishment__api_docuseal,
+      logo: role.establishment__logo,
       role_id: i,
       role_type: role.role_type,
     }));
@@ -136,6 +146,9 @@ export const EstablishmentProvider = ({ children }) => {
         setApiDocuseal(
           userEstablishments[roleIndexDefault].api_docuseal
         );
+        setSelectedEstablishmentLogo(
+          userEstablishments[roleIndexDefault].logo
+        );
         setProfileRole(userEstablishments[roleIndexDefault].role_type);
       }
       if (endInitFunctionHandler) {
@@ -156,6 +169,7 @@ export const EstablishmentProvider = ({ children }) => {
     setSelectedEstablishmentEvaluationFrequencyState(null);
     setSelectedEstablishmentTotalCapacityState(null);
     setApiDocusealState(null);
+    setSelectedEstablishmentLogoState(null);
     sessionStorage.clear();
   };
 
@@ -172,6 +186,8 @@ export const EstablishmentProvider = ({ children }) => {
         setSelectedEstablishmentTotalCapacity,
         apiDocuseal,
         setApiDocuseal,
+        selectedEstablishmentLogo,
+        setSelectedEstablishmentLogo,
         selectedRoleId,
         setSelectedRoleId,
         profileRole,

Front-End/src/utils/rights.js

@@ -6,11 +6,11 @@ export const RIGHTS = {
 
 export function getRightStr(right) {
   if (right === RIGHTS.ADMIN) {
-    return 'ADMINISTRATEUR';
+    return 'Administrateur';
   } else if (right === RIGHTS.TEACHER) {
-    return 'PROFESSEUR';
+    return 'Professeur';
   } else if (right === RIGHTS.PARENT) {
-    return 'PARENT';
+    return 'Parent';
   } else {
     return 'NON DEFINI';
   }