mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
ShareQuizModal and able to copy quiz URL
This commit is contained in:
Philippe
parent
8240de0a44
commit
9e5613a011
4 changed files with 148 additions and 63 deletions
71
client/src/components/ShareQuizModal/ShareQuizModal.tsx
Normal file
71
client/src/components/ShareQuizModal/ShareQuizModal.tsx
Normal file
|
|
@ -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<ShareQuizModalProps> = ({ 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 (
|
||||
<>
|
||||
<Tooltip title="Partager quiz" placement="top">
|
||||
<IconButton color="primary" onClick={handleOpenModal}>
|
||||
<Share />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Dialog open={open} onClose={handleCloseModal} fullWidth maxWidth="xs">
|
||||
<DialogTitle sx={{ textAlign: "center" }}>Choisissez une méthode de partage</DialogTitle>
|
||||
<DialogActions sx={{ display: "flex", justifyContent: "center", gap: 2 }}>
|
||||
<Button onClick={handleShareByEmail}>Partager par email</Button>
|
||||
<Button onClick={handleShareByUrl}>Partager par URL</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShareQuizModal;
|
||||
|
|
@ -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 = () => {
|
|||
> <DeleteOutline /> </IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Partager quiz" placement="top">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleShareQuiz(quiz)}
|
||||
> <Share /> </IconButton>
|
||||
</Tooltip>
|
||||
<div className="quiz-share">
|
||||
<ShareQuizModal quiz={quiz} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -92,40 +92,37 @@ const Share: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className='quizImport'>
|
||||
|
||||
<div className='importHeader'>
|
||||
<ReturnButton />
|
||||
|
||||
<div className='title'>Importer quiz: {quizTitle}</div>
|
||||
|
||||
<div className='titleContainer'>
|
||||
<div className='mainTitle'>Importation du Quiz: {quizTitle}</div>
|
||||
<div className='subTitle'>
|
||||
Vous êtes sur le point d'importer le quiz <strong>{quizTitle}</strong>, choisissez un dossier dans lequel enregistrer ce nouveau quiz.
|
||||
</div>
|
||||
</div>
|
||||
<div className='dumb'></div>
|
||||
</div>
|
||||
|
||||
<div className='editSection'>
|
||||
|
||||
<div>
|
||||
|
||||
<div className='formContainer'>
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolder}
|
||||
onChange={handleSelectFolder}
|
||||
className="folderSelect"
|
||||
>
|
||||
<option disabled value=""> Choisir un dossier... </option>
|
||||
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}> {folder.title} </option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave}>
|
||||
<Button variant="contained" onClick={handleQuizSave} className="saveButton">
|
||||
Enregistrer
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
Loading…
Reference in a new issue