diff --git a/client/src/components/ShareQuizModal/ShareQuizModal.tsx b/client/src/components/ShareQuizModal/ShareQuizModal.tsx new file mode 100644 index 0000000..9e25dca --- /dev/null +++ b/client/src/components/ShareQuizModal/ShareQuizModal.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react'; +import { Dialog, DialogTitle, DialogActions, Button, Tooltip, IconButton } from '@mui/material'; +import { Share } from '@mui/icons-material'; +import { QuizType } from '../../Types/QuizType'; +import ApiService from '../../services/ApiService'; + +interface ShareQuizModalProps { + quiz: QuizType; +} + +const ShareQuizModal: React.FC = ({ quiz }) => { + const [open, setOpen] = useState(false); + + const handleOpenModal = () => setOpen(true); + + const handleCloseModal = () => setOpen(false); + + const handleShareByEmail = async () => { + const email = prompt(`Veuillez saisir l'email de la personne avec qui vous souhaitez partager ce quiz`, ""); + + if (email) { + try { + const result = await ApiService.ShareQuiz(quiz._id, email); + + if (!result) { + window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`); + return; + } + + window.alert(`Quiz partagé avec succès!`); + } catch (error) { + console.error('Erreur lors du partage du quiz:', error); + } + } + + handleCloseModal(); + }; + + const handleShareByUrl = () => { + const quizUrl = `${window.location.origin}/teacher/share/${quiz._id}`; + navigator.clipboard.writeText(quizUrl) + .then(() => { + window.alert('URL copied to clipboard!'); + }) + .catch(() => { + window.alert('Failed to copy URL to clipboard.'); + }); + + handleCloseModal(); + }; + + return ( + <> + + + + + + + + Choisissez une méthode de partage + + + + + + + ); +}; + +export default ShareQuizModal; \ No newline at end of file diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx index f920d12..c8d03bf 100644 --- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx +++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx @@ -36,6 +36,7 @@ import { Share, // DriveFileMove } from '@mui/icons-material'; +import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal'; // Create a custom-styled Card component const CustomCard = styled(Card)({ @@ -342,26 +343,6 @@ const Dashboard: React.FC = () => { navigate(`/teacher/manage-room/${quiz._id}`); } - const handleShareQuiz = async (quiz: QuizType) => { - try { - const email = prompt(`Veuillez saisir l'email de la personne avec qui vous souhaitez partager ce quiz`, ""); - - if (email) { - const result = await ApiService.ShareQuiz(quiz._id, email); - - if (!result) { - window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`) - return; - } - - window.alert(`Quiz partagé avec succès!`) - } - - } catch (error) { - console.error('Erreur lors du partage du quiz:', error); - } - } - @@ -510,12 +491,9 @@ const Dashboard: React.FC = () => { > - - handleShareQuiz(quiz)} - > - +
+ +
))} diff --git a/client/src/pages/Teacher/Share/Share.tsx b/client/src/pages/Teacher/Share/Share.tsx index 31bb72c..34bd0a9 100644 --- a/client/src/pages/Teacher/Share/Share.tsx +++ b/client/src/pages/Teacher/Share/Share.tsx @@ -91,42 +91,39 @@ const Share: React.FC = () => { }; return ( -
- -
- - -
Importer quiz: {quizTitle}
- -
+
+
+ +
+
Importation du Quiz: {quizTitle}
+
+ Vous êtes sur le point d'importer le quiz {quizTitle}, choisissez un dossier dans lequel enregistrer ce nouveau quiz.
- -
- -
- - - - - {folders.map((folder: FolderType) => ( - - ))} - - - - -
- -
-
+
+
+ +
+
+ + + {folders.map((folder: FolderType) => ( + + ))} + + + +
+
+
); }; diff --git a/client/src/pages/Teacher/Share/share.css b/client/src/pages/Teacher/Share/share.css index 119b645..146f318 100644 --- a/client/src/pages/Teacher/Share/share.css +++ b/client/src/pages/Teacher/Share/share.css @@ -3,19 +3,58 @@ display: flex; flex-direction: row; justify-content: space-between; - align-content: stretch + align-content: stretch; } + .quizImport .importHeader .returnButton { flex-basis: 10%; - display: flex; justify-content: center; } -.quizImport .importHeader .title { +.quizImport .importHeader .titleContainer { flex-basis: auto; + text-align: center; /* Center the title and subtitle */ +} + +.quizImport .importHeader .mainTitle { + font-size: 44px; /* Larger font size for the main title */ + font-weight: bold; /* Remove bold */ + color: #333; /* Slightly paler color */ +} + +.quizImport .importHeader .subTitle { + font-size: 14px; /* Smaller font size for the subtitle */ + color: #666; /* Pale gray color */ + margin-top: 8px; /* Add some space between the title and subtitle */ } .quizImport .importHeader .dumb { flex-basis: 10%; +} + +.quizImport .editSection { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} + +.quizImport .editSection .formContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; /* Adds space between the select and button */ + width: 100%; + max-width: 400px; /* Limits the width of the form container */ +} + +.quizImport .editSection .folderSelect { + width: 100%; /* Ensures the select element takes the full width of its container */ +} + +.quizImport .editSection .saveButton { + width: 100%; /* Makes the button take the full width of its container */ + padding: 10px 20px; /* Increases the button's padding for a larger appearance */ + font-size: 16px; /* Increases the font size for better visibility */ } \ No newline at end of file