Skip to content
Extraits de code Groupes Projets
Valider d267f88c rédigé par yahyaELMOKHTARI's avatar yahyaELMOKHTARI
Parcourir les fichiers

Updated left Conditional Components

removed logs
parent 958af8fe
Branches
Étiquettes
1 requête de fusion!91feat: Enhanced Exercise Creation System with Manual/AI Mode Selection
Pipeline #20382 réussi avec les étapes
in 4 minutes et 25 secondes
......@@ -176,15 +176,18 @@ export const AnswerOptions = ({
{/* Validation Status */}
<Box sx={{ mb: 2 }}>
{correctCount === 0 ? (
<Chip
icon={<FontAwesomeIcon icon={faTimes} />}
label="Aucune réponse correcte définie"
color="error"
size="small"
variant="outlined"
/>
) : (
<ConditionalComponent
isValid={correctCount > 0}
defaultComponent={
<Chip
icon={<FontAwesomeIcon icon={faTimes} />}
label="Aucune réponse correcte définie"
color="error"
size="small"
variant="outlined"
/>
}
>
<Chip
icon={<FontAwesomeIcon icon={faCheck} />}
label={`${correctCount} réponse${correctCount > 1 ? 's' : ''} correcte${correctCount > 1 ? 's' : ''}`}
......@@ -192,7 +195,7 @@ export const AnswerOptions = ({
size="small"
variant="outlined"
/>
)}
</ConditionalComponent>
</Box>
{/* Options List */}
......@@ -243,7 +246,18 @@ export const AnswerOptions = ({
{/* Correct Answer Control */}
<Box sx={{ pt: 0.5 }}>
{allowMultiple ? (
<ConditionalComponent
isValid={allowMultiple} // true ⇒ Checkbox, false ⇒ Radio
defaultComponent={
<Radio
checked={option.isCorrect}
onChange={(e) => handleOptionChange(index, 'isCorrect', e.target.checked)}
color="success"
icon={<FontAwesomeIcon icon={faCircle} />}
checkedIcon={<FontAwesomeIcon icon={faCheckCircle} />}
/>
}
>
<Checkbox
checked={option.isCorrect}
onChange={(e) => handleOptionChange(index, 'isCorrect', e.target.checked)}
......@@ -251,15 +265,7 @@ export const AnswerOptions = ({
icon={<FontAwesomeIcon icon={faSquare} />}
checkedIcon={<FontAwesomeIcon icon={faCheckSquare} />}
/>
) : (
<Radio
checked={option.isCorrect}
onChange={(e) => handleOptionChange(index, 'isCorrect', e.target.checked)}
color="success"
icon={<FontAwesomeIcon icon={faCircle} />}
checkedIcon={<FontAwesomeIcon icon={faCheckCircle} />}
/>
)}
</ConditionalComponent>
</Box>
{/* Option Text */}
......
......@@ -35,6 +35,7 @@ import {
} from '@mui/material';
import { Upload } from 'src/shared/components/upload';
import ConditionalComponent from 'src/shared/components/ConditionalComponent/ConditionalComponent';
type UploadPropsWithChildren = ComponentProps<typeof Upload> & {
children?: ReactNode;
......@@ -139,7 +140,7 @@ export const DocumentAttachment = ({
{description}
</Typography>
{attachments.length < maxFiles && (
<ConditionalComponent isValid={attachments.length < maxFiles}>
<UploadWithChildren
multiple
accept={acceptedFileTypes}
......@@ -170,24 +171,27 @@ export const DocumentAttachment = ({
style={{ color: theme.palette.primary.main }}
/>
</Box>
<Typography variant="subtitle1" textAlign="center">
Glissez-déposez vos fichiers ici ou cliquez pour parcourir
</Typography>
<Typography variant="caption" color="text.secondary" textAlign="center">
Formats acceptés : PDF, Word, Excel, Images, Vidéos, Audio
Formats acceptés&nbsp;: PDF, Word, Excel, Images, Vidéos, Audio
<br />
Taille max : {maxSize} MB par fichier • Max {maxFiles} fichiers
Taille max&nbsp;: {maxSize} MB par fichier • Max&nbsp;{maxFiles} fichiers
</Typography>
</Stack>
</UploadWithChildren>
)}
</ConditionalComponent>
{attachments.length > 0 && (
<ConditionalComponent isValid={attachments.length > 0}>
<Stack spacing={2}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography variant="subtitle2">
Fichiers attachés ({attachments.length}/{maxFiles})
</Typography>
<Chip
label={formatFileSize(attachments.reduce((sum, file) => sum + file.size, 0))}
size="small"
......@@ -207,7 +211,7 @@ export const DocumentAttachment = ({
transition={{ duration: 0.3 }}
sx={{ p: 2, position: 'relative', overflow: 'hidden' }}
>
{attachment.status === 'uploading' && (
<ConditionalComponent isValid={attachment.status === 'uploading'}>
<LinearProgress
variant="determinate"
value={attachment.uploadProgress ?? 0}
......@@ -219,7 +223,7 @@ export const DocumentAttachment = ({
height: 3,
}}
/>
)}
</ConditionalComponent>
<Stack direction="row" spacing={2} alignItems="center">
<Box
......@@ -241,31 +245,36 @@ export const DocumentAttachment = ({
<Typography variant="subtitle2" noWrap>
{attachment.name}
</Typography>
<Stack direction="row" spacing={1} alignItems="center">
<Typography variant="caption" color="text.secondary">
{formatFileSize(attachment.size)}
</Typography>
{attachment.status === 'success' && (
<ConditionalComponent isValid={attachment.status === 'success'}>
<Chip
label="Téléchargé"
size="small"
color="success"
sx={{ height: 20, fontSize: '0.75rem' }}
/>
)}
{attachment.status === 'error' && (
</ConditionalComponent>
<ConditionalComponent isValid={attachment.status === 'error'}>
<Chip
label="Erreur"
size="small"
color="error"
sx={{ height: 20, fontSize: '0.75rem' }}
/>
)}
</ConditionalComponent>
</Stack>
</Box>
<Stack direction="row" spacing={0.5}>
{canPreview(attachment.type) && attachment.url && (
<ConditionalComponent
isValid={canPreview(attachment.type) && Boolean(attachment.url)}
>
<Tooltip title="Aperçu">
<IconButton
size="small"
......@@ -280,9 +289,9 @@ export const DocumentAttachment = ({
<FontAwesomeIcon icon={faEye} />
</IconButton>
</Tooltip>
)}
</ConditionalComponent>
{attachment.url && (
<ConditionalComponent isValid={Boolean(attachment.url)}>
<Tooltip title="Télécharger">
<IconButton
size="small"
......@@ -299,8 +308,7 @@ export const DocumentAttachment = ({
<FontAwesomeIcon icon={faDownload} />
</IconButton>
</Tooltip>
)}
</ConditionalComponent>
<Tooltip title="Supprimer">
<IconButton
size="small"
......@@ -322,7 +330,7 @@ export const DocumentAttachment = ({
))}
</AnimatePresence>
</Stack>
)}
</ConditionalComponent>
<Dialog open={!!previewFile} onClose={() => setPreviewFile(null)} maxWidth="md" fullWidth>
<DialogTitle>
......@@ -334,11 +342,13 @@ export const DocumentAttachment = ({
</Stack>
</DialogTitle>
<DialogContent>
{previewFile?.type.includes('image') && previewFile.url && (
<ConditionalComponent
isValid={Boolean(previewFile?.type.includes('image') && Boolean(previewFile?.url))}
>
<Box
component="img"
src={previewFile.url}
alt={previewFile.name}
src={previewFile!.url}
alt={previewFile!.name}
sx={{
width: '100%',
height: 'auto',
......@@ -346,14 +356,22 @@ export const DocumentAttachment = ({
objectFit: 'contain',
}}
/>
)}
{previewFile?.type.includes('pdf') && previewFile.url && (
</ConditionalComponent>
<ConditionalComponent
isValid={Boolean(previewFile?.type.includes('image') && Boolean(previewFile?.url))}
>
<Box
component="iframe"
src={previewFile.url}
sx={{ width: '100%', height: '70vh', border: 'none' }}
component="img"
src={previewFile!.url}
alt={previewFile!.name}
sx={{
width: '100%',
height: 'auto',
maxHeight: '70vh',
objectFit: 'contain',
}}
/>
)}
</ConditionalComponent>
</DialogContent>
</Dialog>
</Box>
......
......@@ -126,10 +126,6 @@ export const EditExerciceView = ({ id }: EditExerciceViewProps) => {
const handleSubmit = async (data: any) => {
setIsSubmitting(true);
try {
// API call to update the exercice
console.log('Updating exercice:', { ...data, mode: exercice.mode });
// Simulate API delay
await new Promise((resolve) => setTimeout(resolve, 800));
router.push(
......
......@@ -24,6 +24,7 @@ import { varFade } from 'src/shared/components/animate';
import { ExerciceForm } from 'src/shared/sections/contenu-pedagogique/apprentissage/components/exercice/ExerciceForm';
import { ExerciceManualForm } from 'src/shared/sections/contenu-pedagogique/apprentissage/components/exercice/ExerciceManualForm';
import { ExerciceModeSelector } from 'src/shared/sections/contenu-pedagogique/apprentissage/components/exercice/ExerciceModeSelector';
import ConditionalComponent from 'src/shared/components/ConditionalComponent/ConditionalComponent';
export const NewExerciceView: React.FC = () => {
const router = useRouter();
......@@ -132,7 +133,7 @@ export const NewExerciceView: React.FC = () => {
{niveauNom}
</MuiLink>
)}
{matiereId && (
<ConditionalComponent isValid={!!matiereId}>
<MuiLink
component="button"
underline="hover"
......@@ -140,18 +141,20 @@ export const NewExerciceView: React.FC = () => {
onClick={() => {
const params = new URLSearchParams({
view: 'chapitres',
matiereId,
matiereId: matiereId || '',
matiereNom: matiereNom || '',
niveauId: niveauId || '',
niveauNom: niveauNom || '',
});
router.push(`/dashboard/contenu-pedagogique/apprentissage?${params.toString()}`);
}}
>
{matiereNom}
</MuiLink>
)}
{chapitreId && (
</ConditionalComponent>
<ConditionalComponent isValid={!!chapitreId}>
<MuiLink
component="button"
underline="hover"
......@@ -159,19 +162,20 @@ export const NewExerciceView: React.FC = () => {
onClick={() => {
const params = new URLSearchParams({
view: 'exercices',
chapitreId,
chapitreId: chapitreId || '',
chapitreNom: chapitreNom || '',
matiereId: matiereId || '',
matiereNom: matiereNom || '',
niveauId: niveauId || '',
niveauNom: niveauNom || '',
});
router.push(`/dashboard/contenu-pedagogique/apprentissage?${params.toString()}`);
}}
>
{chapitreNom}
</MuiLink>
)}
</ConditionalComponent>
<Typography color="text.primary">Nouvel exercice</Typography>
</Breadcrumbs>
......@@ -199,7 +203,7 @@ export const NewExerciceView: React.FC = () => {
{/* Mode Selector Modal */}
<ExerciceModeSelector
open={showModeSelector}
onClose={handleModalClose} // Fix: Don't redirect automatically
onClose={handleModalClose}
onSelectMode={handleModeSelect}
/>
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter