feat: Ajout de l'envoie de mail [#17]

Back-End/GestionMessagerie/urls.py

@@ -1,9 +1,10 @@
 from django.urls import path, re_path
-
+from .views import SendEmailView
 from GestionMessagerie.views import MessagerieView, MessageView, MessageSimpleView
 
 urlpatterns = [
     re_path(r'^messagerie/(?P<profile_id>[0-9]+)$', MessagerieView.as_view(), name="messagerie"),
     re_path(r'^messages$', MessageView.as_view(), name="messages"),
     re_path(r'^messages/(?P<id>[0-9]+)$', MessageSimpleView.as_view(), name="messages"),
+    path('send-email/', SendEmailView.as_view(), name='send_email'),
 ]

Back-End/GestionMessagerie/views.py

@@ -1,6 +1,11 @@
 from django.http.response import JsonResponse
 from rest_framework.views import APIView
 from rest_framework.parsers import JSONParser
+from django.core.mail import send_mail
+from django.utils.html import strip_tags
+from django.conf import settings
+from rest_framework.response import Response
+from rest_framework import status
 
 from .models import *
 
@@ -32,3 +37,30 @@ class MessageSimpleView(APIView):
         message_serializer=MessageSerializer(message)
         return JsonResponse(message_serializer.data, safe=False)
 
+class SendEmailView(APIView):
+    """
+    API pour envoyer des emails aux parents et professeurs.
+    """
+    def post(self, request):
+        data = request.data
+        recipients = data.get('recipients', [])
+        subject = data.get('subject', 'Notification')
+        message = data.get('message', '')
+
+        if not recipients or not message:
+            return Response({'error': 'Les destinataires et le message sont requis.'}, status=status.HTTP_400_BAD_REQUEST)
+
+        try:
+            plain_message = strip_tags(message)
+            send_mail(
+                subject,
+                plain_message,
+                settings.EMAIL_HOST_USER,
+                recipients,
+                html_message=message,
+                fail_silently=False,
+            )
+            return Response({'message': 'Email envoyé avec succès.'}, status=status.HTTP_200_OK)
+        except Exception as e:
+            return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+

Front-End/messages/en/sidebar.json

@@ -6,5 +6,6 @@
   "events": "Events",
   "educational_monitoring": "Educational Monitoring",
   "settings": "Settings",
-  "schoolAdmin": "School Administration"
+  "schoolAdmin": "School Administration",
-}
+  "messagerie": "Messenger"
+}

Front-End/messages/fr/sidebar.json

@@ -6,5 +6,6 @@
   "events": "Evenements",
   "educational_monitoring": "Suivi pédagogique",
   "settings": "Paramètres",
-  "schoolAdmin": "Administration Scolaire"
+  "schoolAdmin": "Administration Scolaire",
-}
+  "messagerie": "Messagerie"
+}

Front-End/package-lock.json

@@ -11,6 +11,7 @@
         "@docuseal/react": "^1.0.56",
         "@radix-ui/react-dialog": "^1.1.2",
         "@tailwindcss/forms": "^0.5.9",
+        "@tinymce/tinymce-react": "^6.1.0",
         "date-fns": "^4.1.0",
         "framer-motion": "^11.11.11",
         "ics": "^3.8.1",
@@ -1054,6 +1055,25 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
       }
     },
+    "node_modules/@tinymce/tinymce-react": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-6.1.0.tgz",
+      "integrity": "sha512-K0MP3yYVKe8+etUwsg6zyRq+q9TGLaVf005WiBHiB8JZEomAwbBPERGunhU9uOqNQ5gJs8yVOPZ68Xcd1UHclA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
+        "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
+        "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1"
+      },
+      "peerDependenciesMeta": {
+        "tinymce": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
@@ -5219,7 +5239,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7529,6 +7548,14 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
+    "@tinymce/tinymce-react": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-6.1.0.tgz",
+      "integrity": "sha512-K0MP3yYVKe8+etUwsg6zyRq+q9TGLaVf005WiBHiB8JZEomAwbBPERGunhU9uOqNQ5gJs8yVOPZ68Xcd1UHclA==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "@tybys/wasm-util": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
@@ -10370,7 +10397,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",

Front-End/package.json

@@ -13,6 +13,7 @@
     "@docuseal/react": "^1.0.56",
     "@radix-ui/react-dialog": "^1.1.2",
     "@tailwindcss/forms": "^0.5.9",
+    "@tinymce/tinymce-react": "^6.1.0",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.11",
     "ics": "^3.8.1",

Front-End/src/app/[locale]/admin/layout.js

@@ -15,6 +15,7 @@ import {
   LogOut,
   Menu,
   X,
+  Mail,
 } from 'lucide-react';
 import DropdownMenu from '@/components/DropdownMenu';
 
@@ -27,6 +28,7 @@ import {
   FE_ADMIN_GRADES_URL,
   FE_ADMIN_PLANNING_URL,
   FE_ADMIN_SETTINGS_URL,
+  FE_ADMIN_MESSAGERIE_URL
 } from '@/utils/Url';
 
 import { disconnect } from '@/app/actions/authAction';
@@ -36,6 +38,7 @@ import Footer from '@/components/Footer';
 import { getRightStr, RIGHTS } from '@/utils/rights';
 import { useEstablishment } from '@/context/EstablishmentContext';
 
+
 export default function Layout({ children }) {
   const t = useTranslations('sidebar');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -79,6 +82,12 @@ export default function Layout({ children }) {
       url: FE_ADMIN_PLANNING_URL,
       icon: Calendar,
     },
+    messagerie: {
+      id: 'messagerie',
+      name: t('messagerie'),
+      url: FE_ADMIN_MESSAGERIE_URL,
+      icon: Mail,
+    },
     settings: {
       id: 'settings',
       name: t('settings'),

Front-End/src/app/[locale]/admin/messagerie/page.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import EmailSender from '@/components/Admin/EmailSender';
+export default function MessageriePage({ csrfToken }) {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Messagerie Admin</h1>
+      <EmailSender csrfToken={csrfToken} />
+    </div>
+  );
+}

Front-End/src/app/actions/messagerieAction.js

@@ -1,4 +1,7 @@
-import { BE_GESTIONMESSAGERIE_MESSAGES_URL } from '@/utils/Url';
+import {
+  BE_GESTIONMESSAGERIE_MESSAGES_URL,
+  BE_GESTIONMESSAGERIE_SEND_MESSAGE_URL,
+} from '@/utils/Url';
 
 const requestResponseHandler = async (response) => {
   const body = await response.json();
@@ -18,3 +21,14 @@ export const fetchMessages = (id) => {
     },
   }).then(requestResponseHandler);
 };
+
+export const sendMessage = (data, csrfToken) => {
+  return fetch(`${BE_GESTIONMESSAGERIE_SEND_MESSAGE_URL}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRFToken': csrfToken,
+    },
+    body: JSON.stringify(data),
+  }).then(requestResponseHandler);
+};

Front-End/src/components/Admin/EmailSender.js

@@ -0,0 +1,74 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { sendMessage } from '@/app/actions/messagerieAction';
+
+export default function EmailSender({ csrfToken }) {
+  const [recipients, setRecipients] = useState('');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState('');
+
+  const handleSendEmail = async () => {
+    const data = {
+      recipients: recipients.split(',').map((email) => email.trim()),
+      subject,
+      message,
+    };
+    sendMessage(data);
+
+  };
+
+  return (
+    <div className="p-4 bg-white rounded shadow">
+      <h2 className="text-xl font-bold mb-4">Envoyer un Email</h2>
+      <div className="mb-4">
+        <label className="block font-medium">Destinataires (séparés par des virgules)</label>
+        <input
+          type="text"
+          value={recipients}
+          onChange={(e) => setRecipients(e.target.value)}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium">Sujet</label>
+        <input
+          type="text"
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium">Message</label>
+        <Editor
+          apiKey="8ftyao41dcp1et0p409ipyrdtp14wxs0efqdofvrjq1vo2gi" // Remplacez par votre clé API TinyMCE
+          value={message}
+          init={{
+            height: 300,
+            menubar: false,
+            plugins: [
+              'advlist autolink lists link image charmap print preview anchor',
+              'searchreplace visualblocks code fullscreen',
+              'insertdatetime media table paste code help wordcount',
+            ],
+            toolbar:
+              'undo redo | formatselect | bold italic backcolor | \
+              alignleft aligncenter alignright alignjustify | \
+              bullist numlist outdent indent | removeformat | help',
+          }}
+          onEditorChange={(content) => setMessage(content)}
+        />
+      </div>
+      <button
+        onClick={handleSendEmail}
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+      >
+        Envoyer
+      </button>
+      {status && <p className="mt-4 text-sm">{status}</p>}
+    </div>
+  );
+}

Front-End/src/utils/Url.js

@@ -53,6 +53,7 @@ export const BE_PLANNING_EVENTS_URL = `${BASE_URL}/Planning/events`;
 // GESTION MESSAGERIE
 export const BE_GESTIONMESSAGERIE_MESSAGES_URL = `${BASE_URL}/GestionMessagerie/messages`;
 export const BE_GESTIONMESSAGERIE_MESSAGERIE_URL = `${BASE_URL}/GestionMessagerie/messagerie`;
+export const BE_GESTIONMESSAGERIE_SEND_MESSAGE_URL = `${BASE_URL}/GestionMessagerie/send-email/`;
 
 // URL FRONT-END
 export const FE_HOME_URL = `/`;
@@ -94,6 +95,9 @@ export const FE_ADMIN_PLANNING_URL = `/admin/planning`;
 //ADMIN/SETTINGS URL
 export const FE_ADMIN_SETTINGS_URL = `/admin/settings`;
 
+//ADMIN/MESSAGERIE URL
+export const FE_ADMIN_MESSAGERIE_URL = `/admin/messagerie`;
+
 // PARENT HOME
 export const FE_PARENTS_HOME_URL = `/parents`;
 export const FE_PARENTS_MESSAGERIE_URL = `/parents/messagerie`;