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
7ca26ed0
Commit
7ca26ed0
authored
Jun 11, 2020
by
Imane Misrar
Browse files
refacto(History) : remplace MobileStepper by Pagination, fix errors detected by lint_frontend
Closes
#191
parent
94c89fbe
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/common/PaginatedData.jsx
View file @
7ca26ed0
...
...
@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme) => ({
},
stepperContainer
:
{
margin
:
"
0 auto
"
,
marginBottom
:
theme
.
spacing
(
1
),
width
:
"
max-content
"
,
},
progress
:
{
...
...
frontend/src/components/edition/History.jsx
View file @
7ca26ed0
...
...
@@ -3,16 +3,12 @@ import React, { useEffect } from "react";
import
PropTypes
from
"
prop-types
"
;
import
compose
from
"
recompose/compose
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
MobileStepper
from
"
@material-ui/core/MobileStepper
"
;
import
KeyboardArrowLeft
from
"
@material-ui/icons/KeyboardArrowLeft
"
;
import
KeyboardArrowRight
from
"
@material-ui/icons/KeyboardArrowRight
"
;
import
Pagination
from
"
@material-ui/lab/Pagination
"
;
import
{
makeStyles
}
from
"
@material-ui/styles
"
;
import
Typography
from
"
@material-ui/core/Typography
"
;
import
Divider
from
"
@material-ui/core/Divider
"
;
import
RequestParams
from
"
../../utils/api/RequestParams
"
;
import
FullScreenDialogService
from
"
../../services/FullScreenDialogService
"
;
import
useStepper
from
"
../../hooks/useStepper
"
;
import
FullScreenDialogFrame
from
"
../common/FullScreenDialogFrame
"
;
import
dateTimeStrToStr
from
"
../../utils/dateTimeStrToStr
"
;
import
withNetworkWrapper
,
{
NetWrapParam
}
from
"
../../hoc/withNetworkWrapper
"
;
...
...
@@ -26,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
marginTop
:
theme
.
spacing
(
2
),
marginBottom
:
theme
.
spacing
(
2
),
},
center
:
{
margin
:
"
0 auto
"
,
width
:
"
max-content
"
,
},
}));
function
VersionInfo
({
rawModelData
,
versionNumber
,
editFromVersion
})
{
...
...
@@ -71,21 +71,23 @@ function History({
editFromVersion
,
rawModelDataEx
,
})
{
const
classes
=
useStyles
();
const
resetVersions
=
useApiInvalidateAll
(
"
versions
"
);
useEffect
(()
=>
{
return
()
=>
resetVersions
();
// only on unmount
},
[]);
const
[
currentVersion
,
goNextVersion
,
goPreviousVersion
]
=
useStepper
(
versions
.
length
-
1
);
const
maxSteps
=
versions
.
length
;
const
[
currentVersion
,
setCurrentVersion
]
=
React
.
useState
(
maxSteps
);
const
handleChange
=
(
event
,
value
)
=>
{
setCurrentVersion
(
value
);
};
const
newRawModelData
=
{
...
rawModelDataEx
,
...
versions
[
currentVersion
].
data
,
...
versions
[
currentVersion
-
1
].
data
,
};
return
(
...
...
@@ -94,38 +96,21 @@ function History({
title
=
"Parcours de l'historique"
>
<>
<
MobileStepper
steps
=
{
versions
.
length
}
position
=
"static"
activeStep
=
{
currentVersion
}
nextButton
=
{
<
Button
color
=
"secondary"
size
=
"small"
onClick
=
{
goNextVersion
}
disabled
=
{
currentVersion
>=
maxSteps
-
1
}
>
Version suivante
<
KeyboardArrowRight
/>
</
Button
>
}
backButton
=
{
<
Button
color
=
"secondary"
size
=
"small"
onClick
=
{
goPreviousVersion
}
disabled
=
{
currentVersion
===
0
}
>
<
KeyboardArrowLeft
/>
Version précédente
</
Button
>
}
/>
<
div
className
=
{
classes
.
center
}
>
<
Pagination
count
=
{
maxSteps
}
page
=
{
currentVersion
}
onChange
=
{
handleChange
}
showFirstButton
showLastButton
color
=
"secondary"
/>
</
div
>
<
br
/>
<
Divider
/>
<
VersionInfo
rawModelData
=
{
newRawModelData
}
versionNumber
=
{
currentVersion
}
versionNumber
=
{
currentVersion
-
1
}
editFromVersion
=
{
editFromVersion
}
/>
<
br
/>
...
...
frontend/src/components/search/UnivList.jsx
View file @
7ca26ed0
...
...
@@ -4,11 +4,11 @@ import List from "@material-ui/core/List";
import
ListItem
from
"
@material-ui/core/ListItem
"
;
import
ListItemText
from
"
@material-ui/core/ListItemText
"
;
import
Divider
from
"
@material-ui/core/Divider
"
;
import
Pagination
from
"
@material-ui/lab/Pagination
"
;
import
{
makeStyles
}
from
"
@material-ui/styles
"
;
import
range
from
"
../../utils/range
"
;
import
APP_ROUTES
from
"
../../config/appRoutes
"
;
import
CustomNavLink
from
"
../common/CustomNavLink
"
;
import
Pagination
from
"
@material-ui/lab/Pagination
"
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
root
:
{
...
...
@@ -47,9 +47,12 @@ function UnivList({ universitiesToList, itemsPerPage }) {
const
maxSteps
=
Math
.
ceil
(
numberOfItems
/
itemsPerPage
);
const
getIndexesOnPage
=
useCallback
(
(
page
)
=>
{
const
firstIdxOnPage
=
page
*
itemsPerPage
;
const
lastIdxOnPage
=
Math
.
min
((
page
+
1
)
*
itemsPerPage
,
numberOfItems
);
(
currentPage
)
=>
{
const
firstIdxOnPage
=
currentPage
*
itemsPerPage
;
const
lastIdxOnPage
=
Math
.
min
(
(
currentPage
+
1
)
*
itemsPerPage
,
numberOfItems
);
return
range
(
lastIdxOnPage
-
firstIdxOnPage
).
map
(
(
el
)
=>
el
+
firstIdxOnPage
);
...
...
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