Merge pull request symfony#2 from BekhechiWahib/email-template

Email template fix

Author: BekhechiWahib

Gestion_PFE_Frontend_React/package-lock.json

@@ -17,10 +17,14 @@
     "@tinymce/tinymce-react": "^5.1.1",
     "axios": "^1.7.7",
     "formik": "^2.4.6",
+    "moment": "^2.30.1",
     "papaparse": "^5.4.1",
     "quill": "^2.0.3",
     "react": "^18.3.1",
+    "react-big-calendar": "^1.16.3",
     "react-circular-progressbar": "^2.1.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",

Gestion_PFE_Frontend_React/package.json

@@ -1,9 +1,12 @@
 import React from "react";
-import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
+import { CircularProgressbar,CircularProgressbarWithChildren, buildStyles } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 
+
 const CircularProgress = ({ percentage ,color}) => {
   return (
+
+    
     <div style={{ width: "150px", height: "150px" }}>
       <CircularProgressbar
         value={percentage}
@@ -18,4 +21,29 @@ const CircularProgress = ({ percentage ,color}) => {
   );
 };
 
+
+
 export default CircularProgress;
+
+
+
+/*
+const CircularProgress = ({ percentage ,color}) => {
+  return (
+
+    
+    <div style={{ width: "150px", height: "150px" }}>
+      <CircularProgressbar
+        value={percentage}
+        text={`${percentage}%`}
+        styles={buildStyles({
+          textColor: color, // Couleur du texte
+          pathColor:  color, // Couleur de la barre
+          trailColor: "#d6d6d6", // Couleur de l'arrière-plan
+        })}
+      />
+    </div>
+  );
+};*/
+
+

Gestion_PFE_Frontend_React/src/components/circle_progression_bar.jsx

@@ -0,0 +1,23 @@
+import { Calendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; // Style pour drag-and-drop
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
+const localizer = momentLocalizer(moment);
+const DragAndDropCalendar = withDragAndDrop(Calendar); // Active le DnD
+
+const MyCalendar = ({ events, onEventDrop }) => {
+  return (
+    <DragAndDropCalendar
+      localizer={localizer}
+      events={events}
+      startAccessor="start"
+      endAccessor="end"
+      style={{ height: 500 }}
+      onEventDrop={onEventDrop} // Drag-and-drop handler
+      draggableAccessor={() => true} // Rend les événements déplaçables
+    />
+  );
+};
+
+export default MyCalendar;

Gestion_PFE_Frontend_React/src/components/my_calendar.jsx

@@ -318,6 +318,8 @@ textarea:hover {
 
 
 
+
+
 
 
 

Gestion_PFE_Frontend_React/src/index.css

@@ -8,11 +8,42 @@ import '../styles/home_page.css';
 
 import { ClipLoader } from 'react-spinners';
 import { FaBell, FaSearch } from 'react-icons/fa';
-
+import MyCalendar from '../../../components/my_calendar';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 
 
 function HomePage(){
+
+
+
+  const [events, setEvents] = useState([
+    {
+      title: 'Réunion',
+      start: new Date(2024, 11, 10, 10, 0),
+      end: new Date(2024, 11, 10, 11, 0),
+    },
+    {
+      title: 'Déjeuner',
+      start: new Date(2024, 11, 11, 12, 0),
+      end: new Date(2024, 11, 11, 13, 0),
+    },
+  ]);
+
+  const handleEventDrop = ({ event, start, end }) => {
+    const updatedEvents = events.map((evt) =>
+      evt === event ? { ...evt, start, end } : evt
+    );
+    setEvents(updatedEvents);
+  };
+
+
+
+
+
+
+
   return (
     <>  
     <div className="appBar">
@@ -48,6 +79,11 @@ function HomePage(){
         <ClipLoader color="#00BFFF" loading={true} size={40} />
         <p>Chargement...</p>
       </div>
+
+      <DndProvider backend={HTML5Backend}>
+      <MyCalendar events={events} onEventDrop={handleEventDrop} />
+    </DndProvider>
+
     </>
   );
 }

Gestion_PFE_Frontend_React/src/views/dashboard admin/pages/home_page.jsx

@@ -130,7 +130,7 @@ const EvoieConfigEmail = () => {
               />
 
               <p>Description :</p>
-              <textarea
+              <textarea 
                 className="auto-expand"
                 rows={1} // Hauteur initiale : 1 ligne
                 maxLength={150} // Limite du nombre total de caractères (optionnel)

Gestion_PFE_Frontend_React/src/views/dashboard admin/pages/page_envoi_config_email.jsx

@@ -11,38 +11,39 @@ function PageGestionEmail (){
   const [isSelected,setSelected]=useState(false);
   const [isSelected2,setSelected2]=useState(false);
 
+
+
+
+
+
+
+
+  const calculatePercentPfeStatus = () => {
+    const validCount = dataTheme.filter((pfe) => pfe.est_valider === "valide").length;
+    return ((validCount / dataTheme.length) * 100).toFixed(2);
+  };
+
+  const getPercentageColor = (percentage) => {
+    if (percentage < 30) return "red";
+    if (percentage < 70) return "orange";
+    return "green";
+  };
+
+
+
+
+
+
   return (
     <div className="gestion-email">
       <header className="header-email-page">
-        <div
-          className="email-type-template"
-          onClick={() => {
-              setSelected(true);
-            }}
-          onMouseLeave={() => {
-            setSelected(false);
-          }} >
-          Email Template
-          {isSelected ? (
-            <ul>
-              <li>
-                <Link to={''}>appel a proposition</Link>
-              
-              </li>
-              <li>
-              <Link to={''}>appel a encadrement</Link>
-               
-              </li>
-              <li>
-              <Link to={''}>appel a proposition de stage</Link>
-          
-              </li>
-            </ul>
-          ) : null}
+       
+        <div  className="email-type-template" >
+             <Link to={`${window.location.pathname}/configuration?type-email=proposition-encadrement`}> Email Template</Link>
         </div>
 
-        <div
-          className="email-type-control"
+        {/*<div
+          className="email-template-configue"
           onClick={() => {
               setSelected2(true);
             }}
@@ -53,7 +54,7 @@ function PageGestionEmail (){
           {isSelected2 ? (
             <ul>
               <li>
-                <Link to={`${window.location.pathname}/configuration?type-email=proposition-pfe`}>Email de proposition PFE</Link>
+               { //!pour les parametre dans l'url      <Link to={`${window.location.pathname}/configuration?type-email=proposition-pfe`}>Email de proposition PFE</Link>}
               </li>
               <li>
               <Link to={`${window.location.pathname}/configuration?type-email=proposition-encadrement`}>Email de proposition Encadrement</Link>
@@ -64,24 +65,25 @@ function PageGestionEmail (){
             </ul>
           ) : null}
         </div>
+        */}
 
 
       </header>
 
       <div className="header-email">
-        <div>
-          <CircularProgress percentage={35} color={"red"} />
-          <p>Proposition PFE soumise</p>
-        </div>
-        <div>
-          <CircularProgress percentage={65} color={"orange"} />
-          <p>Proposition encadrement soumise</p>
-        </div>
-        <div>
-          <CircularProgress percentage={100} color={"green"} />
-          <p>Proposition soumise</p>
-        </div>
+      <div className="progress-item">
+        <CircularProgress percentage={65} color="red" />
+        <p>Proposition PFE soumise</p>
+      </div>
+      <div className="progress-item">
+        <CircularProgress percentage={25} color="orange" />
+        <p>Proposition encadrement soumise</p>
       </div>
+      <div className="progress-item">
+        <CircularProgress percentage={100} color="green" />
+        <p>Proposition soumise</p>
+      </div>
+    </div>
 
       <main className="email-main-part">
         <div className="non-proposition">

Gestion_PFE_Frontend_React/src/views/dashboard admin/pages/page_gestion_email.jsx

@@ -5,7 +5,7 @@
 
 
  .header-email-page {
-   background-color: #dfdfdf;
+   background-color: #ffffff;
    display: flex;
    align-items: center;
 
@@ -14,18 +14,17 @@
  .header-email-page div{
    background-color: #cfcfcf;
    position: relative;
-   padding: 5px;
    margin-right: 5px;
    width: fit-content;
-   border-left: 1px solid #2c3e50a9;
-   border-right: 1px solid #2c3e50a9;
+ 
    cursor: pointer;
 
 }
 
 
 .header-email-page div:hover{
  background-color: #b5b5b5;
+ transition: background-color 0.5s ease;
 }
 
 
@@ -50,29 +49,33 @@
 
    .header-email-page div a  {
       text-decoration: none;
-      color: #333;
-      display: block; /* Assure que les liens remplissent entièrement leur conteneur */
-      padding: 5px 10px; /* Ajoute un peu d'espacement interne */
-      white-space: nowrap; /* Empêche les liens de se diviser en plusieurs lignes */
+      background-color: #2c3e50;
+      width: 100%;
+      color: #ffffff;
+      display: block; 
+      padding: 20px 25px; 
+      white-space: nowrap; 
+   
    }
    .header-email-page div a:hover  {
-    background-color: #dadada;
+    background-color: #375778;
+    transition: background-color 0.7s ease;
    }
 
 
  .header-email{
     display: flex;
-    justify-content: space-evenly; /* Espacement égal entre les sections */
-    align-items: center; /* Alignement vertical au centre */
+    justify-content: space-evenly; 
+    align-items: center; 
     width: 100%;
-    min-width: 1000px;
-    padding: 20px; /* Ajout d'un peu d'espace autour */
+
+    padding: 20px; 
  }
  .header-email div {
     display: flex;
-    flex-direction: column; /* Empile la barre et le texte verticalement */
-    align-items: center; /* Aligne la barre et le texte horizontalement au centre */
-    text-align: center; /* Centrage du texte */
+    flex-direction: column; 
+    align-items: center;
+    text-align: center; 
     gap: 10px;
     color: white;
     padding: 10px;
@@ -85,6 +88,11 @@
  }
 
 
+
+
+
+
+
  /*==============================================================================*/
 
  .email-main-part{