gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Amélioration bouton recherche quiz

Browse source
This commit is contained in:
NouhailaAater 2025-03-25 04:40:47 -04:00
parent 1981a7f7d5
commit 5f4b97e004
1 changed files with 76 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
client/src/pages/Teacher/Dashboard/Dashboard.tsx
View file

@ -66,6 +66,7 @@ const Dashboard: React.FC = () => {
const [selectedRoom, selectRoom] = useState<RoomType>(); // menu const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const [showErrorDialog, setShowErrorDialog] = useState(false); const [showErrorDialog, setShowErrorDialog] = useState(false);
const [isSearchVisible, setIsSearchVisible] = useState(false);
// Filter quizzes based on search term // Filter quizzes based on search term
// const filteredQuizzes = quizzes.filter(quiz => // const filteredQuizzes = quizzes.filter(quiz =>
@ -120,6 +121,9 @@ const Dashboard: React.FC = () => {
selectRoomByName(event.target.value); selectRoomByName(event.target.value);
} }
}; };
const toggleSearchVisibility = () => {
setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
};
// Créer une salle // Créer une salle
const createRoom = async (title: string) => { const createRoom = async (title: string) => {
@ -511,62 +515,87 @@ const Dashboard: React.FC = () => {
<div <div
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'flex-end',
alignItems: 'center', alignItems: 'center',
marginBottom: '20px' width: '100%',
gap: '20px'
}} }}
> >
<div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}> {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
<TextField <div
onChange={handleSearch} className="search-bar"
value={searchTerm} style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
placeholder="Rechercher un quiz par son titre" >
fullWidth {!isSearchVisible ? (
variant="outlined" <IconButton
InputProps={{ onClick={toggleSearchVisibility}
endAdornment: ( sx={{
<InputAdornment position="end">
<IconButton>
<Search />
</IconButton>
</InputAdornment>
)
}}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: '8px', borderRadius: '8px',
'& fieldset': { border: '1px solid #ccc',
borderColor: '#e0e0e0' padding: '8px 12px',
}, backgroundColor: '#fff',
'&:hover fieldset': { color: '#5271FF'
borderColor: '#5271FF' }}
} >
} <Search />
}} </IconButton>
/> ) : (
// Barre de recherche visible
<TextField
onChange={handleSearch}
value={searchTerm}
placeholder="Rechercher un quiz"
fullWidth
autoFocus
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
padding: '8px 12px',
backgroundColor: '#fff',
maxWidth: '1000px',
width: '100%',
fontWeight: 500
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={toggleSearchVisibility}
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
backgroundColor: '#fff',
color: '#5271FF'
}}
>
<Search />
</IconButton>
</InputAdornment>
)
}}
/>
)}
</div> </div>
<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}> <Button
<Button variant="outlined"
variant="outlined" color="primary"
color="primary" startIcon={<Add />}
startIcon={<Add />} onClick={handleCreateQuiz}
onClick={handleCreateQuiz}
sx={{ borderRadius: '8px' }} sx={{ borderRadius: '8px' }}
> >
Ajouter nouveau quiz Ajouter nouveau quiz
</Button> </Button>
<Button <Button
variant="outlined" variant="outlined"
color="primary" color="primary"
startIcon={<Upload />} startIcon={<Upload />}
onClick={handleOnImport} onClick={handleOnImport}
sx={{ borderRadius: '8px' }} sx={{ borderRadius: '8px' }}
> >
Importer Importer
</Button> </Button>
</div>
</div> </div>
{/* Conteneur principal avec les actions et la liste des quiz */} {/* Conteneur principal avec les actions et la liste des quiz */}