Merge pull request #304 from SchoodEIP/revert-301-revert-300-last_dem…

…o_fixes

Revert "Revert "Last demo fixes""

src/Components/Graph/teacherGraphSpace.js

@@ -20,7 +20,7 @@ export function TeacherGraphSpace () {
   const selectedDate = useState(new Date().toISOString().split('T')[0])
   const activeFilter = useState('Semaine')
   const selectedClass = useState(null)
-
+  const role = sessionStorage.getItem('role')
   const moodChartRef = useRef(null)
 
   useEffect(() => {
@@ -263,7 +263,7 @@ export function TeacherGraphSpace () {
   return (
     <div className='graph-box'>
       <div className='graph-header'>
-        <span className='title'>Evolution de l'humeur de mes classes</span>
+        <span className='title'>Evolution de l'humeur de {role === 'administration' ? 'mon établissement' : 'mes classes'}</span>
         <Link to='/statistiques' className='see-more'>
           Voir plus
           <img className='img' src={rightArrow} alt='Right arrow' />

src/Components/Sidebar/sidebar.jsx

@@ -146,6 +146,8 @@ export default function Sidebar () {
       pages.splice(4, 0, reportObj)
       const feelingsModerationObj = { id: 'ressentis', path: '/feelings', icon: <img className='icons' src={feelingIcon} />, iconSelected: <img className='icons' src={feelingIconSelected} />, label: 'Mes ressentis', title: 'Mes ressentis', selected: IsCurrentPage('/feelings', false) }
       pages.splice(4, 0, feelingsModerationObj)
+      const statObj = { id: 'statistiques', path: '/statistiques', icon: <img className='icons' src={statsIcon} />, iconSelected: <img className='icons' src={statsIconSelected} />, label: 'Mes statistiques', title: 'Mes statistiques', selected: IsCurrentPage('/statistiques', false) }
+      pages.splice(4, 0, statObj)
     }
   } else {
     pages = [

src/Users/Admin/feelingsAdminPage.jsx

@@ -18,6 +18,7 @@ import { toast } from 'react-toastify'
 const FeelingsAdminPage = () => {
   const [isShown, setIsShown] = useState(false)
   const [shownFeeling, setShownFeeling] = useState([])
+  const [shownUser, setShownUser] = useState({ firstname: '', lastname: '' })
   const [demand, setDemand] = useState({
     user: '',
     mood: '',
@@ -48,10 +49,10 @@ const FeelingsAdminPage = () => {
     }
   }, [])
 
-  const handleDemandPopup = (userId, feelingId, feelingMood) => {
+  const handleDemandPopup = (userId, feelingId) => {
     demand.user = userId
     demand.reason = feelingId
-    demand.mood = feelings.find(item => item.mood === feelingMood)._id
+    demand.mood = feelingId
     setDemand(demand)
     const toFind = demands.find(item => item.reason === feelingId)
     if (toFind) { toast.warn('Vous avez déjà effectué une demande de désanonymisation pour ce ressenti.') } else { handleAskDesanonym() }
@@ -95,7 +96,8 @@ const FeelingsAdminPage = () => {
       })
       .then(data => {
         if (Array.isArray(data)) {
-          setFeelings(prevFeelings => [...prevFeelings, ...data])
+          setFeelings(data)
+          console.log(data)
         } else {
           toast.error('Les données reçues ne sont pas valides.')
         }
@@ -159,12 +161,14 @@ const FeelingsAdminPage = () => {
   }
 
   const handleCloseFeelingPopup = () => {
+    console.log(shownFeeling)
     setIsShown(!isShown)
   }
 
   const handleShowFeeling = (feelingId) => {
     const feeling = feelings.find(item => item._id === feelingId)
     setShownFeeling(feeling)
+    setShownUser(feeling.user)
     handleCloseFeelingPopup()
   }
 
@@ -183,7 +187,7 @@ const FeelingsAdminPage = () => {
           {(close) => (
             <div className='popup-modal-container' style={{ alignItems: 'inherit' }}>
               <button className='close-btn' onClick={close}><img src={cross} alt='Close' /></button>
-              <div key={shownFeeling._id} style={{ marginBottom: '0', width: '95%' }} className='individual-feelings-container'>
+              <div key={`${shownFeeling._id}-shown`} style={{ marginBottom: '0', width: '95%' }} className='individual-feelings-container'>
                 <div className='publication-date'>{moment(shownFeeling.date).format('DD/MM/YYYY')}</div>
                 <div className='horizontal-line' />
                 <div className='feelings-container-content' style={{ width: '100%' }}>
@@ -196,7 +200,7 @@ const FeelingsAdminPage = () => {
                       <p style={{ marginBottom: '0' }}>{shownFeeling.date !== '' ? 'Pris en compte le:' : 'En attente de prise en compte'}</p>
                       <p style={{ marginTop: '0' }}>{shownFeeling.date !== '' ? `${moment(shownFeeling.date).format('DD/MM/YYYY')}` : ''}</p>
                     </div>
-                    <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>Anonyme</div>
+                    <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>{(shownFeeling.annonymous && shownUser !== null) ? 'Anonyme' : `${shownUser.firstname} ${shownUser.lastname}`}</div>
                   </div>
                   <div className='feelings-content' style={{ width: '100%' }}>
                     <p className='paragraph-style'>{shownFeeling.comment}</p>
@@ -213,7 +217,7 @@ const FeelingsAdminPage = () => {
                 demands.length !== 0
                   ? (
                       demands.map((dem) => (
-                        <div title={dem.status === 'refused' ? 'Refus de la demande' : dem.status === 'accepted' ? 'Ressenti désanonymisé' : 'En attente d\'un retour'} onClick={() => handleShowFeeling(dem.reason)} className={`demand-container ${dem.status === 'refused' ? 'red-filler' : dem.status === 'accepted' ? 'green-filler' : 'orange-filler'}`} key={dem._id}>
+                        <div title={dem.status === 'refused' ? 'Refus de la demande' : dem.status === 'accepted' ? 'Ressenti désanonymisé' : 'En attente d\'un retour'} onClick={() => handleShowFeeling(dem.reason)} className={`demand-container ${dem.status === 'refused' ? 'red-filler' : dem.status === 'accepted' ? 'green-filler' : 'orange-filler'}`} key={`demand-${dem._id}`}>
                           <div className='demand-content'>
                             <img className='emoticone-image' style={{ height: '25px' }} src={imagePaths[dem.mood.mood]} alt={moods[dem.mood.mood]} />
                             <p>{dem.mood.comment}</p>
@@ -230,7 +234,7 @@ const FeelingsAdminPage = () => {
         </div>
         <div id='feelings-container'>
           {feelings.length !== 0 && feelings.map((feeling) => (
-            <div key={feeling._id} className='individual-feelings-container'>
+            <div key={`${feeling._id}-feeling`} className='individual-feelings-container'>
               <div className='publication-date'>{moment(feeling.date).format('DD/MM/YYYY')}</div>
               <div className='horizontal-line' />
               <div className='feelings-container-content'>
@@ -243,7 +247,7 @@ const FeelingsAdminPage = () => {
                     <p style={{ marginBottom: '0' }}>{feeling.date !== '' ? 'Pris en compte le:' : 'En attente de prise en compte'}</p>
                     <p style={{ marginTop: '0' }}>{feeling.date !== '' ? `${moment(feeling.date).format('DD/MM/YYYY')}` : ''}</p>
                   </div>
-                  <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>{feeling.annonymous ? (<>Anonyme <img style={{ height: '15px', cursor: 'pointer' }} onClick={() => handleDemandPopup(feeling.user._id, feeling._id, feeling.mood)} src={questionIcon} alt='Demander à désanonymiser' title='Faire une demande de désanonymisation' /> </>) : `${feeling.user.firstname} ${feeling.user.lastname}`}</div>
+                  <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>{feeling.annonymous ? (<>Anonyme <img style={{ height: '15px', cursor: 'pointer' }} onClick={() => handleDemandPopup(feeling.user._id, feeling._id)} src={questionIcon} alt='Demander à désanonymiser' title='Faire une demande de désanonymisation' /> </>) : `${feeling.user.firstname} ${feeling.user.lastname}`}</div>
                 </div>
                 <div className='feelings-content'>
                   <p className='paragraph-style'>{feeling.comment}</p>

src/Users/Student/feelingsStudentPage.jsx

@@ -27,7 +27,6 @@ import emoji4Selected from '../../assets/emojis/4s.png'
 import emoji5Selected from '../../assets/emojis/5s.png'
 
 const FeelingsStudentPage = () => {
-  const [userProfile, setUserProfile] = useState([])
   const [isCreateOpen, setIsCreateOpen] = useState(false)
   const [isPassed, setIsPassed] = useState(false)
   const [isModified, setIsModified] = useState(false)
@@ -258,7 +257,6 @@ const FeelingsStudentPage = () => {
 
   const handleShowFeeling = (feelingId, user) => {
     const feeling = feelings.find(item => item._id === feelingId)
-    setUserProfile(user)
     setShownFeeling(feeling)
     handleCloseFeelingPopup()
   }
@@ -356,7 +354,7 @@ const FeelingsStudentPage = () => {
                       <p style={{ marginBottom: '0' }}>{shownFeeling.date !== '' ? 'Pris en compte le:' : 'En attente de prise en compte'}</p>
                       <p style={{ marginTop: '0' }}>{shownFeeling.date !== '' ? `${moment(shownFeeling.date).format('DD/MM/YYYY')}` : ''}</p>
                     </div>
-                    <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>{shownFeeling.annonymous ? 'Anonyme' : userProfile.firstname + ' ' + userProfile.lastname}</div>
+                    <div className='publication-author' style={{ alignItems: 'center', display: 'flex', gap: '5px' }}>{shownFeeling.annonymous ? 'Anonyme' : ' '}</div>
                   </div>
                   <div className='feelings-content' style={{ width: '100%' }}>
                     <p className='paragraph-style'>{shownFeeling.comment}</p>
@@ -373,19 +371,19 @@ const FeelingsStudentPage = () => {
                 demands.length !== 0
                   ? (
                       demands.map((dem) => (
-                        <div title={dem.status === 'refused' ? 'Refus de la demande' : dem.status === 'accepted' ? 'Ressenti désanonymisé' : 'En attente d\'un retour'} onClick={() => handleShowFeeling(dem.reason)} className={`demand-container ${dem.status === 'refused' ? 'red-filler' : dem.status === 'accepted' ? 'green-filler' : 'orange-filler'}`} key={dem._id}>
+                        <div title={dem.status === 'refused' ? 'Refus de la demande' : dem.status === 'accepted' ? 'Ressenti désanonymisé' : 'En attente d\'un retour'} onClick={() => handleShowFeeling(dem.reason)} className={`demand-container ${dem.status === 'refused' ? 'red-filler' : dem.status === 'accepted' ? 'green-filler' : 'orange-filler'}`} key={`demand-${dem._id}`}>
                           <div className='demand-content'>
                             <img className='emoticone-image' style={{ height: '25px' }} src={imagePaths[dem.mood.mood]} alt={moods[dem.mood.mood]} />
                             <p style={{ flexWrap: 'wrap' }}>{dem.mood.comment}</p>
                           </div>
-                          <div className='demand-button-container'>
-                            {
-                                dem.status !== 'accepted' && <button title='Accepter' className='demand-close-btn' onClick={(e) => { e.stopPropagation(); handleDemand(dem._id, 'accepted') }}><img className='open-img' src={acceptIcon} alt='AcceptDemand' /></button>
-                              }
-                            {
-                                dem.status !== 'refused' && <button title='Refuser' className='demand-close-btn' onClick={(e) => { e.stopPropagation(); handleDemand(dem._id, 'refused') }}><img className='close-img' src={refuseIcon} alt='RefuseDemand' /></button>
-                              }
-                          </div>
+                          {
+                              (!dem.status || dem.status === 'waiting') && (
+                                <div className='demand-button-container'>
+                                  <button title='Accepter' className='demand-close-btn' onClick={(e) => { e.stopPropagation(); handleDemand(dem._id, 'accepted') }}><img className='open-img' src={acceptIcon} alt='AcceptDemand' /></button>
+                                  <button title='Refuser' className='demand-close-btn' onClick={(e) => { e.stopPropagation(); handleDemand(dem._id, 'refused') }}><img className='close-img' src={refuseIcon} alt='RefuseDemand' /></button>
+                                </div>
+                              )
+                            }
                         </div>
                       ))
                     )

src/Users/Student/statisticsStudent.jsx

@@ -266,8 +266,8 @@ const StudentStatPage = () => {
   return (
     <div className='dashboard'>
       <HeaderComp title='Mes statistiques' />
-      <div className='page-content'>
-        <div>
+      <div className='page-content' style={{ height: 'calc(100% - 130px)' }}>
+        <div className='stat-page-content'>
           <label htmlFor='dateFilter'>Sélectionner une date:</label>
           <input type='date' id='dateFilter' value={selectedDate} onChange={handleDateChange} />
           <div className='button-container'>
@@ -297,7 +297,7 @@ const StudentStatPage = () => {
             </div>
           </div>
           <h1>Evolution de mon humeur</h1>
-          <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div style={{ display: 'flex', flexDirection: 'row', width: '500px' }}>
             <canvas id='moodChart' width='400' height='400' />
             {isNaN(averagePercentage)
               ? (

src/Users/Teacher/dashboardTeacher.jsx

@@ -40,10 +40,10 @@ const TeacherHomePage = () => {
       />
       <div className='page-content'>
         <div className='left-half'>
-          <div className='graph-space' style={{ height: '70%' }}>
+          <div className='graph-space'>
             <GraphSpace />
           </div>
-          <div className='quest-space' style={{ height: '35%' }}>
+          <div className='quest-space'>
             <QuestSpace />
           </div>
         </div>

src/Users/Teacher/statisticsTeacher.jsx

@@ -345,17 +345,31 @@ const TeacherStatPage = () => {
           datasets: [{
             label: 'Réponses',
             data: answerData.map((answer) => answer.data),
-            backgroundColor: 'rgba(255, 255, 255, 0.8)',
-            borderColor: 'rgba(255, 255, 255, 1)',
+            backgroundColor: 'white',
+            borderColor: 'white',
             borderWidth: 1
           }]
         },
         options: {
           scales: {
+            x: {
+              ticks: {
+                color: 'white',
+                font: {
+                  family: 'Inter'
+                }
+              },
+              grid: {
+                color: 'rgba(255, 255, 255, 0.1)'
+              }
+            },
             y: {
               beginAtZero: true,
-              font: {
-                family: 'Inter'
+              ticks: {
+                color: 'white',
+                font: {
+                  family: 'Inter'
+                }
               }
             }
           },
@@ -398,7 +412,7 @@ const TeacherStatPage = () => {
   return (
     <div className='dashboard'>
       <HeaderComp title='Mes statistiques' />
-      <div className='page-content'>
+      <div className='page-content' style={{ height: 'calc(100% - 130px)' }}>
         <div>
           <div>
             <label htmlFor='dateFilter'>Sélectionner une date:</label>
@@ -431,7 +445,7 @@ const TeacherStatPage = () => {
             <div>
               <h1>Evolution de l'humeur</h1>
               <canvas id='moodChart' width='400' height='400' />
-              <div style={{ width: '200px', margin: 'auto', marginTop: '20px' }}>
+              <div style={{ width: '200px', margin: 'auto', marginTop: '20px', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                 <img src={emoji4} size='2x' style={{ marginRight: '10px', marginBottom: '10px' }} />
                 <progress className='progress' value={averageMood} max='100' />
               </div>

src/css/Components/Alerts/lastAlerts.scss

@@ -25,6 +25,12 @@
             font-family: Inter;
         }
 
+        @media (max-height: 600px) {
+            .title {
+              font-size: 25px;
+            }
+          }
+
         .see-more {
             margin-top: 5px;
             display: flex;

src/css/Components/Graph/graphSpace.scss

@@ -8,7 +8,7 @@
     flex-direction: column;
     justify-content: start;
     align-items: start;
-  
+
     .graph-header {
       width: calc(100% - 28px);
       margin-top: 24px;
@@ -18,14 +18,20 @@
       margin-left: 18px;
       margin-right: 18px;
       align-items: center;
-  
+
       .title {
         color: #4F23E2;
         font-size: 30px;
         font-weight: 600;
         font-family: Inter;
       }
-
+
+      @media (max-height: 600px) {
+        .title {
+          font-size: 25px;
+        }
+      }
+
       .see-more {
         margin-top: 5px;
         display: flex;
@@ -42,37 +48,50 @@
         }
       }
     }
-
+
+    @media (max-height: 600px) {
+      .graph-header {
+        margin-top: 10px;
+      }
+    }
+
     .graph-body {
       width: 100%;
       flex: 1; /* Utilisation de flex pour permettre à graph-content de prendre l'espace restant */
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-  
+
       .graph-content {
         color: #4F23E2;
         font-size: 18px;
         font-weight: 600;
         font-family: Inter;
         width: 100%; /* Le graph-content prend toute la largeur disponible */
-  
+
         .chart-container {
           width: 100%;
-          max-height: calc(100% - 80px); /* Hauteur maximale pour le graphique (100% - taille du graph-header) */
+          max-height: calc(100% - 60px); /* Hauteur maximale pour le graphique (100% - taille du graph-header) */
           display: flex;
           justify-content: center;
           align-items: center;
           position: relative;
-
+          padding-left: 10px;
+
           canvas {
             max-width: 100%;
             max-height: 100%;
           }
 
         }
+
+        @media (max-height: 600px) {
+          .chart-container {
+            width: 100%;
+            max-height: calc(100% - 160px); /* Hauteur maximale pour le graphique (100% - taille du graph-header) */
+          }
+        }
       }
     }
   }
-