Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
5b718841
Commit
5b718841
authored
Apr 26, 2020
by
Imane Misrar
Browse files
fix(PreviousExchangesTab) : reset filters only when you click on the button
Closes
#176
parent
054ef35c
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/university/tabs/PreviousExchangesTab.jsx
View file @
5b718841
/* eslint-disable no-shadow */
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
React
,
{
useEffect
,
useState
,
useCallback
}
from
"
react
"
;
import
PropTypes
from
"
prop-types
"
;
import
compose
from
"
recompose/compose
"
;
import
MenuItem
from
"
@material-ui/core/MenuItem
"
;
import
Select
from
"
@material-ui/core/Select
"
;
import
InputLabel
from
"
@material-ui/core/InputLabel
"
;
import
FormControl
from
"
@material-ui/core/FormControl
"
;
import
uuid
from
"
uuid/v4
"
;
import
FormControlLabel
from
"
@material-ui/core/FormControlLabel
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
Checkbox
from
"
@material-ui/core/Checkbox
"
;
import
Typography
from
"
@material-ui/core/Typography
"
;
import
{
makeStyles
}
from
"
@material-ui/styles
"
;
import
uuid
from
"
uuid/v4
"
;
import
PreviousExchange
from
"
../modules/previousExchangeFeedback/PreviousExchange
"
;
import
PaginatedData
from
"
../../common/PaginatedData
"
;
import
RequestParams
from
"
../../../utils/api/RequestParams
"
;
...
...
@@ -17,10 +20,6 @@ import withNetworkWrapper, {
NetWrapParam
}
from
"
../../../hoc/withNetworkWrapper
"
;
import
Switch
from
"
@material-ui/core/Switch
"
;
import
FormControlLabel
from
"
@material-ui/core/FormControlLabel
"
;
import
Grid
from
"
@material-ui/core/Grid
"
;
const
undefinedVal
=
uuid
();
const
useStyles
=
makeStyles
(
theme
=>
({
...
...
@@ -46,7 +45,9 @@ function PreviousExchangesTab({
goToPage
,
univMajorMinors
,
showUntouched
,
setShowUntouched
setShowUntouched
,
hasFilters
,
resetFilters
})
{
const
classes
=
useStyles
();
...
...
@@ -55,12 +56,6 @@ function PreviousExchangesTab({
if
(
displayMinorSelect
)
minors
=
univMajorMinors
.
find
(
el
=>
el
.
major
===
major
).
minors
;
if
(
exchanges
.
number_elements
===
0
)
{
setMajor
(
undefinedVal
);
setMinor
(
undefinedVal
);
setShowUntouched
(
true
);
}
return
(
<>
<
form
autoComplete
=
"off"
className
=
{
classes
.
root
}
>
...
...
@@ -68,10 +63,7 @@ function PreviousExchangesTab({
<
InputLabel
htmlFor
=
"major-select"
>
Branche
</
InputLabel
>
<
Select
value
=
{
major
}
onChange
=
{
e
=>
{
setMajor
(
e
.
target
.
value
);
goToPage
(
1
);
}
}
onChange
=
{
e
=>
setMajor
(
e
.
target
.
value
)
}
inputProps
=
{
{
id
:
"
major-select
"
}
}
...
...
@@ -88,52 +80,53 @@ function PreviousExchangesTab({
</
FormControl
>
{
displayMinorSelect
&&
(
<>
<
FormControl
className
=
{
classes
.
formControl
}
>
<
InputLabel
htmlFor
=
"minor-filière"
>
Filière
</
InputLabel
>
<
Select
className
=
{
classes
.
select
}
value
=
{
minor
}
onChange
=
{
e
=>
{
setMinor
(
e
.
target
.
value
);
goToPage
(
1
);
}
}
inputProps
=
{
{
id
:
"
minor-filière
"
}
}
>
<
MenuItem
value
=
{
undefinedVal
}
>
Pas de filtre
</
MenuItem
>
{
minors
.
filter
(
el
=>
el
!==
null
)
.
map
(
el
=>
(
<
MenuItem
key
=
{
el
}
value
=
{
el
}
>
{
el
}
</
MenuItem
>
))
}
</
Select
>
</
FormControl
>
</>
<
FormControl
className
=
{
classes
.
formControl
}
>
<
InputLabel
htmlFor
=
"minor-filière"
>
Filière
</
InputLabel
>
<
Select
className
=
{
classes
.
select
}
value
=
{
minor
}
onChange
=
{
e
=>
setMinor
(
e
.
target
.
value
)
}
inputProps
=
{
{
id
:
"
minor-filière
"
}
}
>
<
MenuItem
value
=
{
undefinedVal
}
>
Pas de filtre
</
MenuItem
>
{
minors
.
filter
(
el
=>
el
!==
null
)
.
map
(
el
=>
(
<
MenuItem
key
=
{
el
}
value
=
{
el
}
>
{
el
}
</
MenuItem
>
))
}
</
Select
>
</
FormControl
>
)
}
<
Typography
component
=
"div"
>
<
Grid
component
=
"label"
container
alignItems
=
"center"
spacing
=
{
0
}
>
<
Grid
item
>
Départs avec retour
 
</
Grid
>
<
Grid
item
>
<
FormControlLabel
control
=
{
<
Switch
checked
=
{
showUntouched
}
onChange
=
{
()
=>
{
setShowUntouched
(
!
showUntouched
);
goToPage
(
1
);
}
}
color
=
"primary"
/>
}
<
FormControl
className
=
{
classes
.
formControl
}
>
<
FormControlLabel
control
=
{
<
Checkbox
checked
=
{
!
showUntouched
}
onChange
=
{
()
=>
setShowUntouched
(
!
showUntouched
)
}
/>
</
Grid
>
<
Grid
item
>
Tous les échanges
</
Grid
>
</
Grid
>
</
Typography
>
}
label
=
"Avec feedbacks uniquement"
labelPlacement
=
"start"
/>
</
FormControl
>
{
hasFilters
&&
(
<
FormControl
className
=
{
classes
.
formControl
}
>
<
Button
onClick
=
{
resetFilters
}
variant
=
"outlined"
color
=
"action"
size
=
"small"
>
Réinitialiser les filtres
</
Button
>
</
FormControl
>
)
}
</
form
>
<
PaginatedData
...
...
@@ -147,7 +140,9 @@ function PreviousExchangesTab({
EmptyMessageComponent
=
{
<
Typography
>
<
em
>
Aucun échange n'est à ce jour répertorié pour cette université.
{
hasFilters
?
"
Aucun échange ne correspond au(x) filtre(s).
"
:
"
Aucun échange n'est à ce jour répertorié pour cette université.
"
}
</
em
>
</
Typography
>
}
...
...
@@ -163,7 +158,11 @@ PreviousExchangesTab.propTypes = {
minor
:
PropTypes
.
string
.
isRequired
,
goToPage
:
PropTypes
.
func
.
isRequired
,
setMinor
:
PropTypes
.
func
.
isRequired
,
setMajor
:
PropTypes
.
func
.
isRequired
setMajor
:
PropTypes
.
func
.
isRequired
,
resetFilters
:
PropTypes
.
func
.
isRequired
,
hasFilters
:
PropTypes
.
bool
.
isRequired
,
showUntouched
:
PropTypes
.
bool
.
isRequired
,
setShowUntouched
:
PropTypes
.
func
.
isRequired
};
const
buildExchangesParams
=
(
...
...
@@ -224,13 +223,26 @@ export default () => {
const
[
major
,
setMajor
]
=
useState
(
undefinedVal
);
const
[
minor
,
setMinor
]
=
useState
(
undefinedVal
);
const
[
showUntouched
,
setShowUntouched
]
=
useState
(
false
);
const
[
showUntouched
,
setShowUntouched
]
=
useState
(
true
);
const
resetFilters
=
useCallback
(()
=>
{
setMajor
(
undefinedVal
);
setMinor
(
undefinedVal
);
setShowUntouched
(
true
);
},
[]);
// Reset minors on majors change
useEffect
(()
=>
{
setMinor
(
undefinedVal
);
},
[
major
]);
useEffect
(()
=>
{
goToPage
(
1
);
},
[
major
,
minor
,
showUntouched
]);
const
hasFilters
=
major
!==
undefinedVal
||
minor
!==
undefinedVal
||
showUntouched
===
false
;
return
(
<
ConnectedComp
page
=
{
page
}
...
...
@@ -241,6 +253,8 @@ export default () => {
setMinor
=
{
setMinor
}
showUntouched
=
{
showUntouched
}
setShowUntouched
=
{
setShowUntouched
}
resetFilters
=
{
resetFilters
}
hasFilters
=
{
hasFilters
}
/>
);
};
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment