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

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`;