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 [errorMessage, setErrorMessage] = useState('');
const [showErrorDialog, setShowErrorDialog] = useState(false);
const [isSearchVisible, setIsSearchVisible] = useState(false);
// Filter quizzes based on search term
// const filteredQuizzes = quizzes.filter(quiz =>
@ -120,6 +121,9 @@ const Dashboard: React.FC = () => {
selectRoomByName(event.target.value);
}
};
const toggleSearchVisibility = () => {
setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
};
// Créer une salle
const createRoom = async (title: string) => {
@ -511,42 +515,68 @@ const Dashboard: React.FC = () => {
<div
style={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: 'flex-end',
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
onChange={handleSearch}
value={searchTerm}
placeholder="Rechercher un quiz par son titre"
placeholder="Rechercher un quiz"
fullWidth
variant="outlined"
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>
<IconButton
onClick={toggleSearchVisibility}
sx={{
borderRadius: '8px',
border: '1px solid #ccc',
backgroundColor: '#fff',
color: '#5271FF'
}}
>
<Search />
</IconButton>
</InputAdornment>
)
}}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#e0e0e0'
},
'&:hover fieldset': {
borderColor: '#5271FF'
}
}
}}
/>
)}
</div>
<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
<Button
variant="outlined"
color="primary"
@ -567,7 +597,6 @@ const Dashboard: React.FC = () => {
Importer
</Button>
</div>
</div>
{/* Conteneur principal avec les actions et la liste des quiz */}
<div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>