mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
question focus from editor to preview
This commit is contained in:
Philippe
parent
c18b1a8759
commit
6e91ab311d
3 changed files with 202 additions and 108 deletions
|
|
@ -1,14 +1,16 @@
|
|||
import React from 'react';
|
||||
import { TextField, Typography, IconButton, Box } from '@mui/material';
|
||||
import DeleteIcon from '@mui/icons-material/Delete'; // Import delete icon
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
|
||||
interface EditorProps {
|
||||
label: string;
|
||||
values: string[];
|
||||
onValuesChange: (values: string[]) => void;
|
||||
onFocusQuestion?: (index: number) => void;
|
||||
}
|
||||
|
||||
const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange }) => {
|
||||
const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
|
||||
const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValues = [...values];
|
||||
newValues[index] = event.target.value;
|
||||
|
|
@ -20,36 +22,51 @@ const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange }) => {
|
|||
onValuesChange(newValues);
|
||||
};
|
||||
|
||||
const handleFocusQuestion = (index: number) => () => {
|
||||
if (onFocusQuestion) {
|
||||
onFocusQuestion(index); // Call the focus function if provided
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Label with increased margin */}
|
||||
<Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
|
||||
{/* Map through each question */}
|
||||
{values.map((value, index) => (
|
||||
<Box key={index} style={{ marginBottom: '24px' }}>
|
||||
{/* Bold "Question #" title */}
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
<Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
|
||||
Question {index + 1}
|
||||
</Typography>
|
||||
|
||||
{/* Delete button */}
|
||||
<Box>
|
||||
{/* Focus (Eye) Button */}
|
||||
<IconButton
|
||||
onClick={handleFocusQuestion(index)}
|
||||
aria-label="focus question"
|
||||
sx={{
|
||||
color: 'gray',
|
||||
'&:hover': { color: 'blue' },
|
||||
marginRight: '8px', // Space between eye and delete
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon />
|
||||
</IconButton>
|
||||
{/* Delete Button */}
|
||||
<IconButton
|
||||
onClick={handleDeleteQuestion(index)}
|
||||
aria-label="delete"
|
||||
sx={{ color: 'light-gray',
|
||||
'&:hover': {
|
||||
color: 'red'
|
||||
},
|
||||
sx={{
|
||||
color: 'light-gray',
|
||||
'&:hover': { color: 'red' },
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{/* TextField for the question */}
|
||||
</Box>
|
||||
<TextField
|
||||
value={value}
|
||||
onChange={handleChange(index)}
|
||||
|
|
@ -60,8 +77,6 @@ const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange }) => {
|
|||
variant="outlined"
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
|
||||
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,23 @@ interface GIFTTemplatePreviewProps {
|
|||
|
||||
const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
||||
questions,
|
||||
hideAnswers = false
|
||||
hideAnswers = false,
|
||||
}) => {
|
||||
const [error, setError] = useState('');
|
||||
const [isPreviewReady, setIsPreviewReady] = useState(false);
|
||||
const [items, setItems] = useState('');
|
||||
const [questionItems, setQuestionItems] = useState<string[]>([]); // Array of HTML strings for each question
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
let previewHTML = '';
|
||||
questions.forEach((giftQuestion) => {
|
||||
const previewItems: string[] = [];
|
||||
questions.forEach((giftQuestion, index) => {
|
||||
try {
|
||||
const question = parse(giftQuestion);
|
||||
previewHTML += Template(question[0], {
|
||||
const html = Template(question[0], {
|
||||
preview: true,
|
||||
theme: 'light'
|
||||
theme: 'light',
|
||||
});
|
||||
previewItems.push(html);
|
||||
} catch (error) {
|
||||
let errorMsg: string;
|
||||
if (error instanceof UnsupportedQuestionTypeError) {
|
||||
|
|
@ -37,18 +38,21 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
|||
} else {
|
||||
errorMsg = ErrorTemplate(giftQuestion, 'Erreur inconnue');
|
||||
}
|
||||
previewHTML += `<div label="error-message">${errorMsg}</div>`;
|
||||
previewItems.push(`<div label="error-message">${errorMsg}</div>`);
|
||||
}
|
||||
});
|
||||
|
||||
if (hideAnswers) {
|
||||
previewItems.forEach((item, index) => {
|
||||
const svgRegex = /<svg[^>]*>([\s\S]*?)<\/svg>/gi;
|
||||
previewHTML = previewHTML.replace(svgRegex, '');
|
||||
const placeholderRegex = /(placeholder=")[^"]*(")/gi;
|
||||
previewHTML = previewHTML.replace(placeholderRegex, '$1$2');
|
||||
previewItems[index] = item
|
||||
.replace(svgRegex, '')
|
||||
.replace(placeholderRegex, '$1$2');
|
||||
});
|
||||
}
|
||||
|
||||
setItems(previewHTML);
|
||||
setQuestionItems(previewItems);
|
||||
setIsPreviewReady(true);
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
|
|
@ -57,7 +61,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
|||
setError('Une erreur est survenue durant le chargement de la prévisualisation.');
|
||||
}
|
||||
}
|
||||
}, [questions]);
|
||||
}, [questions, hideAnswers]);
|
||||
|
||||
const PreviewComponent = () => (
|
||||
<React.Fragment>
|
||||
|
|
@ -65,8 +69,13 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
|
|||
<div className="error">{error}</div>
|
||||
) : isPreviewReady ? (
|
||||
<div data-testid="preview-container">
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate({ format: 'html', text: items }) }}></div>
|
||||
{questionItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="question-item"
|
||||
dangerouslySetInnerHTML={{ __html: FormattedTextTemplate({ format: 'html', text: item }) }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="loading">Chargement de la prévisualisation...</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview
|
|||
import { QuizType } from '../../../Types/QuizType';
|
||||
|
||||
import './editorQuiz.css';
|
||||
import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
|
||||
import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, Snackbar } from '@mui/material';
|
||||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
|
||||
import ApiService from '../../../services/ApiService';
|
||||
|
|
@ -42,6 +42,12 @@ const QuizForm: React.FC = () => {
|
|||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
|
||||
const [isImagesCollapsed, setIsImagesCollapsed] = useState(true);
|
||||
const [isCheatSheetCollapsed, setIsCheatSheetCollapsed] = useState(true);
|
||||
const [isUploadCollapsed, setIsUploadCollapsed] = useState(true);
|
||||
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
||||
const [snackbarMessage, setSnackbarMessage] = useState('');
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
|
@ -149,7 +155,8 @@ const QuizForm: React.FC = () => {
|
|||
}
|
||||
}
|
||||
|
||||
navigate('/teacher/dashboard');
|
||||
setSnackbarMessage('Quiz enregistré avec succès!');
|
||||
setSnackbarOpen(true);
|
||||
} catch (error) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
|
||||
console.log(error)
|
||||
|
|
@ -161,6 +168,10 @@ const QuizForm: React.FC = () => {
|
|||
return <div>Chargement...</div>;
|
||||
}
|
||||
|
||||
const handleSnackbarClose = () => {
|
||||
setSnackbarOpen(false);
|
||||
};
|
||||
|
||||
const handleSaveImage = async () => {
|
||||
try {
|
||||
const inputElement = document.getElementById('file-input') as HTMLInputElement;
|
||||
|
|
@ -199,7 +210,15 @@ const QuizForm: React.FC = () => {
|
|||
navigator.clipboard.writeText(link);
|
||||
}
|
||||
|
||||
|
||||
const handleFocusQuestion = (index: number) => {
|
||||
const previewElement = document.querySelector('.preview-column');
|
||||
if (previewElement) {
|
||||
const questionElements = previewElement.querySelectorAll('.question-item');
|
||||
if (questionElements[index]) {
|
||||
questionElements[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='quizEditor'>
|
||||
|
|
@ -252,33 +271,45 @@ const QuizForm: React.FC = () => {
|
|||
<Editor
|
||||
label="Contenu GIFT de chaque question:"
|
||||
values={values}
|
||||
onValuesChange={handleUpdatePreview} />
|
||||
onValuesChange={handleUpdatePreview}
|
||||
onFocusQuestion={handleFocusQuestion} />
|
||||
<Button variant="contained" onClick={handleAddQuestion}>
|
||||
Ajouter une question
|
||||
</Button>
|
||||
|
||||
<div className='images'>
|
||||
<div className='upload'>
|
||||
<label className="dropArea">
|
||||
<input type="file" id="file-input" className="file-input"
|
||||
accept="image/jpeg, image/png"
|
||||
multiple
|
||||
ref={fileInputRef} />
|
||||
|
||||
<div className="images">
|
||||
{/* Collapsible Upload Section */}
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
aria-label='Téléverser'
|
||||
onClick={handleSaveImage}>
|
||||
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}
|
||||
>
|
||||
Téléverser <Upload />
|
||||
</Button>
|
||||
|
||||
</label>
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)} >
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
|
||||
<DialogTitle>Erreur</DialogTitle>
|
||||
<DialogContent>
|
||||
Veuillez d'abord choisir une image à téléverser.
|
||||
Veuillez d'abord choisir une image à téléverser.
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDialogOpen(false)} color="primary">
|
||||
|
|
@ -287,16 +318,37 @@ const QuizForm: React.FC = () => {
|
|||
</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%' }}
|
||||
>
|
||||
{isImagesCollapsed ? 'Afficher Mes images' : 'Masquer Mes images'}
|
||||
</Button>
|
||||
{!isImagesCollapsed && (
|
||||
<div>
|
||||
<h4>Mes images :</h4>
|
||||
<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>
|
||||
<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>
|
||||
<div style={{ display: "inline" }}> ci-dessous</div>
|
||||
<div style={{ display: "inline" }}>)</div>
|
||||
<div style={{ display: 'inline' }}> ci-dessous</div>
|
||||
<div style={{ display: 'inline' }}>)</div>
|
||||
<br />
|
||||
<em> - Cliquez sur un lien pour le copier</em>
|
||||
</div>
|
||||
|
|
@ -305,8 +357,7 @@ const QuizForm: React.FC = () => {
|
|||
const imgTag = `} "texte de l'infobulle")`;
|
||||
return (
|
||||
<li key={index}>
|
||||
<code
|
||||
onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
<code onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
{imgTag}
|
||||
</code>
|
||||
</li>
|
||||
|
|
@ -315,12 +366,24 @@ const QuizForm: React.FC = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GiftCheatSheet />
|
||||
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='preview'>
|
||||
{/* Collapsible CheatSheet Section */}
|
||||
<div style={{ marginTop: '2px' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)}
|
||||
style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
|
||||
>
|
||||
{isCheatSheetCollapsed ? 'Afficher CheatSheet' : 'Masquer CheatSheet'}
|
||||
</Button>
|
||||
{!isCheatSheetCollapsed && <GiftCheatSheet />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="preview">
|
||||
<div className="preview-column">
|
||||
<h4>Prévisualisation</h4>
|
||||
<div>
|
||||
|
|
@ -328,7 +391,6 @@ const QuizForm: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{showScrollButton && (
|
||||
|
|
@ -342,6 +404,14 @@ const QuizForm: React.FC = () => {
|
|||
↑
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Snackbar
|
||||
open={snackbarOpen}
|
||||
autoHideDuration={3000} // Hide after 3 seconds
|
||||
onClose={handleSnackbarClose}
|
||||
message={snackbarMessage}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} // Lower-right corner
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue