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

67
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,42 +515,68 @@ 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 */}
<div
className="search-bar"
style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
>
{!isSearchVisible ? (
<IconButton
onClick={toggleSearchVisibility}
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
padding: '8px 12px',
backgroundColor: '#fff',
color: '#5271FF'
}}
>
<Search />
</IconButton>
) : (
// Barre de recherche visible
<TextField <TextField
onChange={handleSearch} onChange={handleSearch}
value={searchTerm} value={searchTerm}
placeholder="Rechercher un quiz par son titre" placeholder="Rechercher un quiz"
fullWidth fullWidth
variant="outlined" autoFocus
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
padding: '8px 12px',
backgroundColor: '#fff',
maxWidth: '1000px',
width: '100%',
fontWeight: 500
}}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton> <IconButton
onClick={toggleSearchVisibility}
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
backgroundColor: '#fff',
color: '#5271FF'
}}
>
<Search /> <Search />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
) )
}} }}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#e0e0e0'
},
'&:hover fieldset': {
borderColor: '#5271FF'
}
}
}}
/> />
)}
</div> </div>
<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
<Button <Button
variant="outlined" variant="outlined"
color="primary" color="primary"
@ -567,7 +597,6 @@ const Dashboard: React.FC = () => {
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 */}
<div className="folder" style={{ display: 'flex', flexDirection: 'column' }}> <div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>