mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Compare commits
1 commit
524f48ea91
...
65bcda2134
| Author | SHA1 | Date | |
|---|---|---|---|
|
65bcda2134 |
15 changed files with 648 additions and 604 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import Editor from '../../../components/Editor/newEditor';
|
||||
import Editor from '../../../components/Editor/Editor';
|
||||
|
||||
describe('Editor Component', () => {
|
||||
const mockOnValuesChange = jest.fn();
|
||||
|
|
|
|||
|
|
@ -1,33 +1,202 @@
|
|||
import React, { useRef } from 'react';
|
||||
import './editor.css';
|
||||
import { TextareaAutosize } from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
|
||||
interface EditorProps {
|
||||
label: string;
|
||||
values: string[];
|
||||
onEditorChange: (value: string) => void;
|
||||
onValuesChange: (values: string[]) => void;
|
||||
onFocusQuestion?: (index: number) => void;
|
||||
}
|
||||
|
||||
const Editor: React.FC<EditorProps> = ({ label, values, onEditorChange }) => {
|
||||
const editorRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
|
||||
const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
|
||||
|
||||
function handleEditorChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||
const text = event.target.value;
|
||||
onEditorChange(text || '');
|
||||
const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValues = [...values];
|
||||
newValues[index] = event.target.value;
|
||||
onValuesChange(newValues);
|
||||
};
|
||||
|
||||
const handleDeleteQuestion = (index: number) => () => {
|
||||
if (values[index].trim() === '') {
|
||||
const newValues = values.filter((_, i) => i !== index);
|
||||
onValuesChange(newValues);
|
||||
setCollapsed((prev) => prev.filter((_, i) => i !== index));
|
||||
} else {
|
||||
setDeleteIndex(index);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
if (deleteIndex !== null) {
|
||||
const newValues = values.filter((_, i) => i !== deleteIndex);
|
||||
onValuesChange(newValues);
|
||||
setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
|
||||
}
|
||||
setDialogOpen(false);
|
||||
setDeleteIndex(null);
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setDialogOpen(false);
|
||||
setDeleteIndex(null);
|
||||
};
|
||||
|
||||
const handleFocusQuestion = (index: number) => () => {
|
||||
if (onFocusQuestion) {
|
||||
onFocusQuestion(index);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleCollapse = (index: number) => () => {
|
||||
setCollapsed((prev) => {
|
||||
const newCollapsed = [...prev];
|
||||
newCollapsed[index] = !newCollapsed[index];
|
||||
return newCollapsed;
|
||||
});
|
||||
};
|
||||
|
||||
const onDragEnd = (result: any) => {
|
||||
if (!result.destination) return;
|
||||
|
||||
const newValues = [...values];
|
||||
const [reorderedItem] = newValues.splice(result.source.index, 1);
|
||||
newValues.splice(result.destination.index, 0, reorderedItem);
|
||||
onValuesChange(newValues);
|
||||
|
||||
const newCollapsed = [...collapsed];
|
||||
const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
|
||||
newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
|
||||
setCollapsed(newCollapsed);
|
||||
};
|
||||
|
||||
if (collapsed.length !== values.length) {
|
||||
setCollapsed((prev) => {
|
||||
const newCollapsed = [...prev];
|
||||
while (newCollapsed.length < values.length) newCollapsed.push(false);
|
||||
while (newCollapsed.length > values.length) newCollapsed.pop();
|
||||
return newCollapsed;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<label>
|
||||
<h4>{label}</h4>
|
||||
<TextareaAutosize
|
||||
id="editor-textarea"
|
||||
ref={editorRef}
|
||||
onChange={handleEditorChange}
|
||||
value={values}
|
||||
className="editor"
|
||||
minRows={5}
|
||||
<div>
|
||||
<Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="questions">
|
||||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{values.map((value, index) => (
|
||||
<Draggable key={index} draggableId={`question-${index}`} index={index}>
|
||||
{(provided) => (
|
||||
<Box
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
sx={{
|
||||
marginBottom: '8px',
|
||||
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '16px',
|
||||
borderRadius: '4px',
|
||||
...provided.draggableProps.style,
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
<Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
|
||||
Question {index + 1}
|
||||
</Typography>
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleToggleCollapse(index)}
|
||||
aria-label="toggle collapse"
|
||||
sx={{
|
||||
color: 'gray',
|
||||
'&:hover': { color: 'blue' },
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
{collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleFocusQuestion(index)}
|
||||
aria-label="focus question"
|
||||
sx={{
|
||||
color: 'gray',
|
||||
'&:hover': { color: 'blue' },
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleDeleteQuestion(index)}
|
||||
aria-label="delete"
|
||||
sx={{
|
||||
color: 'light-gray',
|
||||
'&:hover': { color: 'red' },
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
<Collapse in={!collapsed[index]}>
|
||||
<TextField
|
||||
value={value}
|
||||
onChange={handleChange(index)}
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={4}
|
||||
maxRows={Infinity}
|
||||
variant="outlined"
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</label>
|
||||
</Collapse>
|
||||
</Box>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onClose={handleCancelDelete}
|
||||
aria-labelledby="delete-confirmation-title"
|
||||
aria-describedby="delete-confirmation-description"
|
||||
>
|
||||
<DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="delete-confirmation-description">
|
||||
Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
|
||||
<Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
|
||||
Supprimer
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.editor {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background-color: #f8f9ff;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
font-size: medium;
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
|
||||
interface EditorProps {
|
||||
label: string;
|
||||
values: string[];
|
||||
onValuesChange: (values: string[]) => void;
|
||||
onFocusQuestion?: (index: number) => void;
|
||||
}
|
||||
|
||||
const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
|
||||
const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
|
||||
|
||||
const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValues = [...values];
|
||||
newValues[index] = event.target.value;
|
||||
onValuesChange(newValues);
|
||||
};
|
||||
|
||||
const handleDeleteQuestion = (index: number) => () => {
|
||||
if (values[index].trim() === '') {
|
||||
const newValues = values.filter((_, i) => i !== index);
|
||||
onValuesChange(newValues);
|
||||
setCollapsed((prev) => prev.filter((_, i) => i !== index));
|
||||
} else {
|
||||
setDeleteIndex(index);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
if (deleteIndex !== null) {
|
||||
const newValues = values.filter((_, i) => i !== deleteIndex);
|
||||
onValuesChange(newValues);
|
||||
setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
|
||||
}
|
||||
setDialogOpen(false);
|
||||
setDeleteIndex(null);
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setDialogOpen(false);
|
||||
setDeleteIndex(null);
|
||||
};
|
||||
|
||||
const handleFocusQuestion = (index: number) => () => {
|
||||
if (onFocusQuestion) {
|
||||
onFocusQuestion(index);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleCollapse = (index: number) => () => {
|
||||
setCollapsed((prev) => {
|
||||
const newCollapsed = [...prev];
|
||||
newCollapsed[index] = !newCollapsed[index];
|
||||
return newCollapsed;
|
||||
});
|
||||
};
|
||||
|
||||
const onDragEnd = (result: any) => {
|
||||
if (!result.destination) return;
|
||||
|
||||
const newValues = [...values];
|
||||
const [reorderedItem] = newValues.splice(result.source.index, 1);
|
||||
newValues.splice(result.destination.index, 0, reorderedItem);
|
||||
onValuesChange(newValues);
|
||||
|
||||
const newCollapsed = [...collapsed];
|
||||
const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
|
||||
newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
|
||||
setCollapsed(newCollapsed);
|
||||
};
|
||||
|
||||
if (collapsed.length !== values.length) {
|
||||
setCollapsed((prev) => {
|
||||
const newCollapsed = [...prev];
|
||||
while (newCollapsed.length < values.length) newCollapsed.push(false);
|
||||
while (newCollapsed.length > values.length) newCollapsed.pop();
|
||||
return newCollapsed;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="questions">
|
||||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{values.map((value, index) => (
|
||||
<Draggable key={index} draggableId={`question-${index}`} index={index}>
|
||||
{(provided) => (
|
||||
<Box
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
sx={{
|
||||
marginBottom: '8px',
|
||||
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '16px',
|
||||
borderRadius: '4px',
|
||||
...provided.draggableProps.style,
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
<Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
|
||||
Question {index + 1}
|
||||
</Typography>
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleToggleCollapse(index)}
|
||||
aria-label="toggle collapse"
|
||||
sx={{
|
||||
color: 'gray',
|
||||
'&:hover': { color: 'blue' },
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
{collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleFocusQuestion(index)}
|
||||
aria-label="focus question"
|
||||
sx={{
|
||||
color: 'gray',
|
||||
'&:hover': { color: 'blue' },
|
||||
mr: 1,
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleDeleteQuestion(index)}
|
||||
aria-label="delete"
|
||||
sx={{
|
||||
color: 'light-gray',
|
||||
'&:hover': { color: 'red' },
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
<Collapse in={!collapsed[index]}>
|
||||
<TextField
|
||||
value={value}
|
||||
onChange={handleChange(index)}
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={4}
|
||||
maxRows={Infinity}
|
||||
variant="outlined"
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</Collapse>
|
||||
</Box>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onClose={handleCancelDelete}
|
||||
aria-labelledby="delete-confirmation-title"
|
||||
aria-describedby="delete-confirmation-description"
|
||||
>
|
||||
<DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="delete-confirmation-description">
|
||||
Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
|
||||
<Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
|
||||
Supprimer
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
|
|
@ -2,7 +2,6 @@ import { Link, useNavigate } from 'react-router-dom';
|
|||
import * as React from 'react';
|
||||
import './header.css';
|
||||
import { Button } from '@mui/material';
|
||||
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
||||
|
||||
interface HeaderProps {
|
||||
isLoggedIn: boolean;
|
||||
|
|
@ -29,9 +28,8 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
|
|||
handleLogout();
|
||||
navigate('/');
|
||||
}}
|
||||
startIcon={<ExitToAppIcon />}
|
||||
>
|
||||
Déconnexion
|
||||
Logout
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
disabled={disableButton}
|
||||
>
|
||||
{showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedTrue}`}>V</div>
|
||||
<div className={`answer-text ${selectedTrue}`}>Vrai</div>
|
||||
|
||||
{showAnswer && answer && question.trueFormattedFeedback && (
|
||||
|
|
@ -75,6 +76,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
|
||||
>
|
||||
{showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedFalse}`}>F</div>
|
||||
<div className={`answer-text ${selectedFalse}`}>Faux</div>
|
||||
|
||||
{showAnswer && !answer && question.falseFormattedFeedback && (
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
|
|||
variant="contained"
|
||||
onClick={handleLaunchClick}
|
||||
startIcon={<PlayArrow />}
|
||||
sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
|
||||
fullWidth
|
||||
sx={{ fontWeight: 600, fontSize: 20 }}
|
||||
>
|
||||
Lancer
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleFeedbackDialogClose} color="primary">
|
||||
Fermer
|
||||
OK
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const SimpleLogin: React.FC = () => {
|
|||
variant="outlined"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Nom d'utilisateur"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
@ -54,6 +55,7 @@ const SimpleLogin: React.FC = () => {
|
|||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Nom de la salle"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ import {
|
|||
Upload,
|
||||
FolderCopy,
|
||||
ContentCopy,
|
||||
Edit
|
||||
Edit,
|
||||
} from '@mui/icons-material';
|
||||
import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal';
|
||||
|
||||
|
|
@ -65,7 +65,6 @@ const Dashboard: React.FC = () => {
|
|||
const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [showErrorDialog, setShowErrorDialog] = useState(false);
|
||||
const [isSearchVisible, setIsSearchVisible] = useState(false);
|
||||
|
||||
// Filter quizzes based on search term
|
||||
// const filteredQuizzes = quizzes.filter(quiz =>
|
||||
|
|
@ -121,10 +120,6 @@ const Dashboard: React.FC = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const toggleSearchVisibility = () => {
|
||||
setIsSearchVisible(!isSearchVisible);
|
||||
};
|
||||
|
||||
// Créer une salle
|
||||
const createRoom = async (title: string) => {
|
||||
// Créer la salle et récupérer l'objet complet
|
||||
|
|
@ -138,9 +133,10 @@ const Dashboard: React.FC = () => {
|
|||
selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
|
||||
};
|
||||
|
||||
|
||||
// Sélectionner une salle
|
||||
const selectRoomByName = (roomId: string) => {
|
||||
const room = rooms.find((r) => r._id === roomId);
|
||||
const room = rooms.find(r => r._id === roomId);
|
||||
selectRoom(room);
|
||||
localStorage.setItem('selectedRoomId', roomId);
|
||||
};
|
||||
|
|
@ -154,7 +150,7 @@ const Dashboard: React.FC = () => {
|
|||
setOpenAddRoomDialog(false);
|
||||
setNewRoomTitle('');
|
||||
} catch (error) {
|
||||
setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue');
|
||||
setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
|
||||
setShowErrorDialog(true);
|
||||
}
|
||||
}
|
||||
|
|
@ -406,63 +402,30 @@ const Dashboard: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
{/* Conteneur pour le titre et le sélecteur de salle */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
{/* Titre tableau de bord */}
|
||||
<div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Tableau de bord
|
||||
</div>
|
||||
<div className="title">Tableau de bord</div>
|
||||
|
||||
{/* Sélecteur de salle */}
|
||||
<div
|
||||
className="roomSelection"
|
||||
style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
|
||||
>
|
||||
<select
|
||||
value={selectedRoom?._id || ''}
|
||||
onChange={(e) => handleSelectRoom(e)}
|
||||
id="room-select"
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
backgroundColor: '#fff',
|
||||
maxWidth: '200px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
<div className="roomSelection">
|
||||
<label htmlFor="select-room">Sélectionner une salle: </label>
|
||||
<select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
|
||||
<option value="" disabled>
|
||||
Sélectionner une salle
|
||||
-- Sélectionner une salle --
|
||||
</option>
|
||||
{rooms.map((room) => (
|
||||
<option key={room._id} value={room._id}>
|
||||
{room.title}
|
||||
</option>
|
||||
))}
|
||||
<option
|
||||
value="add-room"
|
||||
style={{
|
||||
color: 'black',
|
||||
backgroundColor: '#f0f0f0',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Ajouter une salle
|
||||
</option>
|
||||
<option value="add-room">Ajouter salle</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Dialog pour créer une salle */}
|
||||
{selectedRoom && (
|
||||
<div className="roomTitle">
|
||||
<h2>Salle sélectionnée: {selectedRoom.title}</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
|
||||
<DialogTitle>Créer une nouvelle salle</DialogTitle>
|
||||
<DialogContent>
|
||||
|
|
@ -487,17 +450,24 @@ const Dashboard: React.FC = () => {
|
|||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
gap: '20px'
|
||||
<div className="search-bar">
|
||||
<TextField
|
||||
onChange={handleSearch}
|
||||
value={searchTerm}
|
||||
placeholder="Rechercher un quiz par son titre"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton>
|
||||
<Search />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Conteneur principal avec les actions et la liste des quiz */}
|
||||
<div className="folder">
|
||||
<div className="select">
|
||||
<NativeSelect
|
||||
|
|
@ -505,18 +475,13 @@ const Dashboard: React.FC = () => {
|
|||
color="primary"
|
||||
value={selectedFolderId}
|
||||
onChange={handleSelectFolder}
|
||||
sx={{
|
||||
padding: '6px 12px',
|
||||
maxWidth: '180px',
|
||||
borderRadius: '8px',
|
||||
borderColor: '#e0e0e0',
|
||||
'&:hover': { borderColor: '#5271FF' }
|
||||
}}
|
||||
>
|
||||
<option value=""> Tous les dossiers... </option>
|
||||
{folders.map((folder) => (
|
||||
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}>
|
||||
{folder.title}
|
||||
{' '}
|
||||
{folder.title}{' '}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
|
|
@ -572,77 +537,14 @@ const Dashboard: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="search-bar"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: '20px',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}>
|
||||
{!isSearchVisible ? (
|
||||
<IconButton
|
||||
onClick={toggleSearchVisibility}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#fff',
|
||||
color: '#5271FF'
|
||||
}}
|
||||
>
|
||||
<Search />
|
||||
</IconButton>
|
||||
) : (
|
||||
<TextField
|
||||
onChange={handleSearch}
|
||||
value={searchTerm}
|
||||
placeholder="Rechercher un quiz"
|
||||
fullWidth
|
||||
autoFocus
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#fff',
|
||||
fontWeight: 500,
|
||||
width: '100%',
|
||||
maxWidth: '1000px'
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={toggleSearchVisibility}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
backgroundColor: '#fff',
|
||||
color: '#5271FF'
|
||||
}}
|
||||
>
|
||||
<Search />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* À droite : les boutons */}
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<div className="ajouter">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
startIcon={<Add />}
|
||||
onClick={handleCreateQuiz}
|
||||
sx={{ borderRadius: '8px', minWidth: 'auto', padding: '4px 12px' }}
|
||||
>
|
||||
Nouveau quiz
|
||||
Ajouter un nouveau quiz
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
|
|
@ -651,11 +553,9 @@ const Dashboard: React.FC = () => {
|
|||
startIcon={<Upload />}
|
||||
onClick={handleOnImport}
|
||||
>
|
||||
Importer
|
||||
Import
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list">
|
||||
{Object.keys(quizzesByFolder).map((folderName) => (
|
||||
<CustomCard key={folderName} className="folder-card">
|
||||
|
|
@ -671,9 +571,7 @@ const Dashboard: React.FC = () => {
|
|||
onClick={() => handleLancerQuiz(quiz)}
|
||||
disabled={!validateQuiz(quiz.content)}
|
||||
>
|
||||
{`${quiz.title} (${
|
||||
quiz.content.length
|
||||
} question${
|
||||
{`${quiz.title} (${quiz.content.length} question${
|
||||
quiz.content.length > 1 ? 's' : ''
|
||||
})`}
|
||||
</Button>
|
||||
|
|
@ -711,20 +609,21 @@ const Dashboard: React.FC = () => {
|
|||
<ContentCopy />{' '}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<div className="quiz-share">
|
||||
<ShareQuizModal quiz={quiz} />
|
||||
</div>
|
||||
|
||||
<Tooltip title="Supprimer" placement="top">
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color="error"
|
||||
color="primary"
|
||||
onClick={() => handleRemoveQuiz(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<DeleteOutline />{' '}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<div className="quiz-share">
|
||||
<ShareQuizModal quiz={quiz} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
import React, { useState, useEffect, useRef, CSSProperties } from 'react';
|
||||
// EditorQuiz.tsx
|
||||
import React, { useState, useEffect, CSSProperties } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { FolderType } from '../../../Types/FolderType';
|
||||
|
||||
import NewEditor from 'src/components/Editor/newEditor';
|
||||
import Editor from 'src/components/Editor/Editor';
|
||||
|
||||
import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
|
||||
import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
|
||||
|
||||
import { QuizType } from '../../../Types/QuizType';
|
||||
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
import './EditorQuiz.css';
|
||||
import './editorQuiz.css';
|
||||
import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, MenuItem, Select, Snackbar } from '@mui/material';
|
||||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
import ImageGalleryModal from 'src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal';
|
||||
|
|
@ -52,10 +50,6 @@ const QuizForm: React.FC = () => {
|
|||
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
||||
const [snackbarMessage, setSnackbarMessage] = useState('');
|
||||
const [copySuccess, setCopySuccess] = useState<string | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const [useNewEditor, setUserNewEditor] = useState(false);
|
||||
|
||||
const QuestionVraiFaux = "::Exemple de question vrai/faux:: \n 2+2 \\= 4 ? {T} //Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}.";
|
||||
const QuestionChoixMul = "::Ville capitale du Canada:: \nQuelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Rétroaction spécifique.\n} // Commentaire non visible (au besoin)";
|
||||
|
|
@ -149,27 +143,11 @@ const QuizForm: React.FC = () => {
|
|||
console.log("Updated values:", [...values, '']); // Log new state
|
||||
};
|
||||
|
||||
const newHandleUpdatePreview = (newValues: string[]) => {
|
||||
const handleUpdatePreview = (newValues: string[]) => {
|
||||
setValues(newValues);
|
||||
setFilteredValue(newValues.filter(value => value.trim() !== ''));
|
||||
};
|
||||
|
||||
const handleUpdatePreview = (value: string) => {
|
||||
if (value !== '') {
|
||||
setValues([value]);
|
||||
}
|
||||
|
||||
// split value when there is at least one blank line
|
||||
const linesArray = value.split(/\n{2,}/);
|
||||
|
||||
// if the first item in linesArray is blank, remove it
|
||||
if (linesArray[0] === '') linesArray.shift();
|
||||
|
||||
if (linesArray[linesArray.length - 1] === '') linesArray.pop();
|
||||
|
||||
setFilteredValue(linesArray);
|
||||
}
|
||||
|
||||
const handleQuizTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuizTitle(event.target.value);
|
||||
};
|
||||
|
|
@ -271,9 +249,6 @@ const QuizForm: React.FC = () => {
|
|||
copyToClipboard(value, label);
|
||||
};
|
||||
|
||||
const toggleEditor = () => {
|
||||
setUserNewEditor(!useNewEditor);
|
||||
}
|
||||
const handleCopyImage = (id: string) => {
|
||||
const escLink = `${ENV_VARIABLES.BACKEND_URL}/api/image/get/${id}`;
|
||||
setImageLinks(prevLinks => [...prevLinks, escLink]);
|
||||
|
|
@ -281,34 +256,54 @@ const QuizForm: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className='quizEditor'>
|
||||
<div className='editHeader' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '32px' }}>
|
||||
<ReturnButton quizTitle={quizTitle} quizContent={filteredValue} quizFolder={selectedFolder} quizId={quiz?._id} isNewQuiz={isNewQuiz} />
|
||||
<div className='title'>Éditeur de Quiz</div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={toggleEditor}
|
||||
size="small"
|
||||
style={{
|
||||
fontSize: '10px', // Smaller font
|
||||
padding: '2px 6px', // Reduced padding
|
||||
minWidth: 'auto', // Allow button to shrink
|
||||
height: 'fit-content', // Match height to content
|
||||
}}
|
||||
>
|
||||
{useNewEditor ? 'Ancien éditeur' : 'Nouvel éditeur'}
|
||||
</Button>
|
||||
|
||||
<div className='editHeader'
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '32px'
|
||||
}}>
|
||||
<ReturnButton
|
||||
quizTitle={quizTitle}
|
||||
quizContent={filteredValue}
|
||||
quizFolder={selectedFolder}
|
||||
quizId={quiz?._id}
|
||||
isNewQuiz={isNewQuiz}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<div className='title'>Éditeur de Quiz</div>
|
||||
|
||||
<div className='dumb'></div>
|
||||
</div>
|
||||
|
||||
<TextField onChange={handleQuizTitleChange} value={quizTitle} placeholder="Titre du quiz" label="Titre du quiz" fullWidth />
|
||||
{/* <h2 className="subtitle">Éditeur</h2> */}
|
||||
|
||||
<TextField
|
||||
onChange={handleQuizTitleChange}
|
||||
value={quizTitle}
|
||||
placeholder="Titre du quiz"
|
||||
label="Titre du quiz"
|
||||
fullWidth
|
||||
/>
|
||||
<label>Choisir un dossier:
|
||||
<NativeSelect id="select-folder" color="primary" value={selectedFolder} onChange={handleSelectFolder} disabled={!isNewQuiz} style={{ marginBottom: '16px' }}>
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolder}
|
||||
onChange={handleSelectFolder}
|
||||
disabled={!isNewQuiz}
|
||||
style={{ marginBottom: '16px' }} // Ajout de marge en bas
|
||||
>
|
||||
<option disabled value=""> Choisir un dossier... </option>
|
||||
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}> {folder.title} </option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</label>
|
||||
</NativeSelect></label>
|
||||
|
||||
|
||||
<div className='sticky-buttons'>
|
||||
<Select
|
||||
|
|
@ -316,62 +311,100 @@ const QuizForm: React.FC = () => {
|
|||
displayEmpty
|
||||
onChange={(e) => handleSelectChange(e.target.value, templates.find(t => t.value === e.target.value)?.label || '')}
|
||||
style={{ width: '210px' }}
|
||||
inputProps={{ 'data-testid': 'template-select' }}
|
||||
inputProps={{
|
||||
'data-testid': 'template-select'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem value="" disabled>Modèles de questions</MenuItem>
|
||||
{templates.map((template, index) => (
|
||||
<MenuItem key={index} value={template.value}>{template.label}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave} sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuizSave}
|
||||
sx={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<SaveIcon sx={{ fontSize: 20 }} />
|
||||
Enregistrer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Snackbar open={!!copySuccess} autoHideDuration={3000} onClose={() => setCopySuccess(null)} message={copySuccess} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} key={copySuccess ? 'open' : 'close'} />
|
||||
<Snackbar
|
||||
open={!!copySuccess}
|
||||
autoHideDuration={3000}
|
||||
onClose={() => setCopySuccess(null)}
|
||||
message={copySuccess}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
key={copySuccess ? 'open' : 'close'}
|
||||
/>
|
||||
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
|
||||
<div className='editSection'>
|
||||
|
||||
<div className='edit'>
|
||||
{useNewEditor ? (
|
||||
<NewEditor label="" values={values} onValuesChange={newHandleUpdatePreview} onFocusQuestion={handleFocusQuestion} />
|
||||
) : (
|
||||
<Editor label="" values={values} onEditorChange={handleUpdatePreview} />
|
||||
)}
|
||||
{useNewEditor && (
|
||||
<Editor
|
||||
label=""
|
||||
values={values}
|
||||
onValuesChange={handleUpdatePreview}
|
||||
onFocusQuestion={handleFocusQuestion} />
|
||||
<Button variant="contained" onClick={handleAddQuestion}>
|
||||
Ajouter une question
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="images">
|
||||
{/* Collapsible Upload Section */}
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<Button variant="outlined" onClick={() => setIsUploadCollapsed(!isUploadCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setIsUploadCollapsed(!isUploadCollapsed)}
|
||||
style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
|
||||
>
|
||||
{isUploadCollapsed ? 'Afficher Téléverser image' : 'Masquer Téléverser image'}
|
||||
</Button>
|
||||
{!isUploadCollapsed && (
|
||||
<div className="upload">
|
||||
<label className="dropArea">
|
||||
<input type="file" id="file-input" className="file-input" accept="image/jpeg, image/png" multiple ref={fileInputRef} />
|
||||
<Button variant="outlined" aria-label="Téléverser" onClick={handleSaveImage}>
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
className="file-input"
|
||||
accept="image/jpeg, image/png"
|
||||
multiple
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
aria-label="Téléverser"
|
||||
onClick={handleSaveImage}
|
||||
>
|
||||
Téléverser <Upload />
|
||||
</Button>
|
||||
</label>
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
|
||||
<DialogTitle>Erreur</DialogTitle>
|
||||
<DialogContent>Veuillez d'abord choisir une image à téléverser.</DialogContent>
|
||||
<DialogContent>
|
||||
Veuillez d'abord choisir une image à téléverser.
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDialogOpen(false)} color="primary">OK</Button>
|
||||
<Button onClick={() => setDialogOpen(false)} color="primary">
|
||||
OK
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Collapsible Images Section */}
|
||||
<div style={{ marginTop: '2px' }}>
|
||||
<Button variant="outlined" onClick={() => setIsImagesCollapsed(!isImagesCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setIsImagesCollapsed(!isImagesCollapsed)}
|
||||
style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
|
||||
>
|
||||
{isImagesCollapsed ? 'Afficher Mes images' : 'Masquer Mes images'}
|
||||
</Button>
|
||||
{!isImagesCollapsed && (
|
||||
|
|
@ -380,8 +413,16 @@ const QuizForm: React.FC = () => {
|
|||
<div>
|
||||
<div>
|
||||
<div style={{ display: 'inline' }}>(Voir section </div>
|
||||
<a href="#images-section" style={{ textDecoration: 'none' }} onClick={scrollToImagesSection}>
|
||||
<u><em><h4 style={{ display: 'inline' }}> 9. Images </h4></em></u>
|
||||
<a
|
||||
href="#images-section"
|
||||
style={{ textDecoration: 'none' }}
|
||||
onClick={scrollToImagesSection}
|
||||
>
|
||||
<u>
|
||||
<em>
|
||||
<h4 style={{ display: 'inline' }}> 9. Images </h4>
|
||||
</em>
|
||||
</u>
|
||||
</a>
|
||||
<div style={{ display: 'inline' }}> ci-dessous</div>
|
||||
<div style={{ display: 'inline' }}>)</div>
|
||||
|
|
@ -393,7 +434,9 @@ const QuizForm: React.FC = () => {
|
|||
const imgTag = `} "texte de l'infobulle")`;
|
||||
return (
|
||||
<li key={index}>
|
||||
<code onClick={() => handleCopyToClipboard(imgTag)}>{imgTag}</code>
|
||||
<code onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
{imgTag}
|
||||
</code>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
|
@ -403,8 +446,13 @@ const QuizForm: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Collapsible CheatSheet Section */}
|
||||
<div style={{ marginTop: '2px' }}>
|
||||
<Button variant="outlined" onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)}
|
||||
style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
|
||||
>
|
||||
{isCheatSheetCollapsed ? 'Afficher CheatSheet' : 'Masquer CheatSheet'}
|
||||
</Button>
|
||||
{!isCheatSheetCollapsed && <GiftCheatSheet />}
|
||||
|
|
@ -423,12 +471,24 @@ const QuizForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{showScrollButton && (
|
||||
<Button onClick={scrollToTop} variant="contained" color="primary" style={scrollToTopButtonStyle} title="Scroll to top">
|
||||
<Button
|
||||
onClick={scrollToTop}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={scrollToTopButtonStyle}
|
||||
title="Scroll to top"
|
||||
>
|
||||
↑
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose} message={snackbarMessage} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} />
|
||||
<Snackbar
|
||||
open={snackbarOpen}
|
||||
autoHideDuration={3000} // Hide after 3 seconds
|
||||
onClose={handleSnackbarClose}
|
||||
message={snackbarMessage}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} // Lower-right corner
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ import {
|
|||
} from '@mui/material';
|
||||
import { checkIfIsCorrect } from './useRooms';
|
||||
import { QRCodeCanvas } from 'qrcode.react';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
|
||||
|
||||
const ManageRoom: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -415,7 +416,7 @@ const ManageRoom: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="room">
|
||||
{/* En-tête avec bouton Disconnect à gauche et QR code à droite */}
|
||||
{/* En-tête avec titre et bouton QR code*/}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
@ -424,11 +425,7 @@ const ManageRoom: React.FC = () => {
|
|||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
<DisconnectButton
|
||||
onReturn={handleReturn}
|
||||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter?`}
|
||||
/>
|
||||
<h1 style={{ margin: 0 }}>Salle : {formattedRoomName}</h1>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
|
|
@ -440,14 +437,13 @@ const ManageRoom: React.FC = () => {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Modale QR Code */}
|
||||
<Dialog
|
||||
open={showQrModal}
|
||||
onClose={() => setShowQrModal(false)}
|
||||
aria-labelledby="qr-modal-title"
|
||||
>
|
||||
<DialogTitle id="qr-modal-title">
|
||||
Rejoindre la salle: {formattedRoomName}
|
||||
</DialogTitle>
|
||||
<DialogTitle id="qr-modal-title">Rejoindre la salle: {formattedRoomName}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Scannez ce QR code ou partagez le lien ci-dessous pour rejoindre la salle :
|
||||
|
|
@ -466,7 +462,7 @@ const ManageRoom: React.FC = () => {
|
|||
onClick={handleCopy}
|
||||
style={{ marginTop: '10px' }}
|
||||
>
|
||||
{copied ? 'Copié !' : 'Copier le lien'}
|
||||
{copied ? "Copié !" : "Copier le lien"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
|
@ -476,34 +472,31 @@ const ManageRoom: React.FC = () => {
|
|||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<div className="roomHeader">
|
||||
<DisconnectButton
|
||||
onReturn={handleReturn}
|
||||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter?`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="headerContent"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
marginBottom: '10px'
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
|
||||
Salle : {formattedRoomName}
|
||||
{
|
||||
<div
|
||||
className="userCount subtitle"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
className="userCount subtitle smallText"
|
||||
style={{ display: 'flex', justifyContent: 'flex-end' }}
|
||||
>
|
||||
<GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
|
||||
<GroupIcon style={{ marginRight: '5px' }} />
|
||||
{students.length}/60
|
||||
</div>
|
||||
</h1>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="dumb"></div>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,25 @@
|
|||
.room .roomHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: stretch
|
||||
}
|
||||
.room .roomHeader .returnButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
flex-basis: 10%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.room .roomHeader .centerTitle {
|
||||
flex-basis: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.room .roomHeader .headerContent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.room .roomHeader .dumb {
|
||||
|
|
@ -40,6 +34,7 @@
|
|||
|
||||
overflow: auto;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.room .finishQuizButton {
|
||||
|
|
@ -49,7 +44,146 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.room h1 {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
|
||||
|
||||
/* .create-room-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.manage-room-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quiz-setup-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.quiz-mode-selection {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.users-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
gap: 2vh;
|
||||
}
|
||||
|
||||
.launch-quiz-btn {
|
||||
width: 20vw;
|
||||
height: 11vh;
|
||||
margin-top: 2vh;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mode-choice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.user {
|
||||
background-color: #e7dad1;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.room-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 768px) {
|
||||
.room-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.room-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.room-name-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
.user-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-column-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-and-result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nextQuestionButton {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 5rem !important;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 4000px) {
|
||||
.flex-column-wrapper {
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 1079px) {
|
||||
.flex-column-wrapper {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 741px) {
|
||||
.flex-column-wrapper {
|
||||
height: 40vh;
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import './share.css';
|
|||
import { Button, NativeSelect, Typography, Box } from '@mui/material';
|
||||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
|
||||
const Share: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -168,7 +167,6 @@ const Share: React.FC = () => {
|
|||
</NativeSelect>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave} className="saveButton">
|
||||
{<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
|
||||
Enregistrer
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue