Commit 7ca26ed0 authored by Imane Misrar's avatar Imane Misrar
Browse files

refacto(History) : remplace MobileStepper by Pagination, fix errors detected by lint_frontend

Closes #191
parent 94c89fbe
...@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme) => ({
}, },
stepperContainer: { stepperContainer: {
margin: "0 auto", margin: "0 auto",
marginBottom: theme.spacing(1),
width: "max-content", width: "max-content",
}, },
progress: { progress: {
......
...@@ -3,16 +3,12 @@ import React, { useEffect } from "react"; ...@@ -3,16 +3,12 @@ import React, { useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import compose from "recompose/compose"; import compose from "recompose/compose";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Pagination from "@material-ui/lab/Pagination";
import MobileStepper from "@material-ui/core/MobileStepper";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import { makeStyles } from "@material-ui/styles"; import { makeStyles } from "@material-ui/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import RequestParams from "../../utils/api/RequestParams"; import RequestParams from "../../utils/api/RequestParams";
import FullScreenDialogService from "../../services/FullScreenDialogService"; import FullScreenDialogService from "../../services/FullScreenDialogService";
import useStepper from "../../hooks/useStepper";
import FullScreenDialogFrame from "../common/FullScreenDialogFrame"; import FullScreenDialogFrame from "../common/FullScreenDialogFrame";
import dateTimeStrToStr from "../../utils/dateTimeStrToStr"; import dateTimeStrToStr from "../../utils/dateTimeStrToStr";
import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper"; import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
...@@ -26,6 +22,10 @@ const useStyles = makeStyles((theme) => ({ ...@@ -26,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
}, },
center: {
margin: "0 auto",
width: "max-content",
},
})); }));
function VersionInfo({ rawModelData, versionNumber, editFromVersion }) { function VersionInfo({ rawModelData, versionNumber, editFromVersion }) {
...@@ -71,21 +71,23 @@ function History({ ...@@ -71,21 +71,23 @@ function History({
editFromVersion, editFromVersion,
rawModelDataEx, rawModelDataEx,
}) { }) {
const classes = useStyles();
const resetVersions = useApiInvalidateAll("versions"); const resetVersions = useApiInvalidateAll("versions");
useEffect(() => { useEffect(() => {
return () => resetVersions(); // only on unmount return () => resetVersions(); // only on unmount
}, []); }, []);
const [currentVersion, goNextVersion, goPreviousVersion] = useStepper(
versions.length - 1
);
const maxSteps = versions.length; const maxSteps = versions.length;
const [currentVersion, setCurrentVersion] = React.useState(maxSteps);
const handleChange = (event, value) => {
setCurrentVersion(value);
};
const newRawModelData = { const newRawModelData = {
...rawModelDataEx, ...rawModelDataEx,
...versions[currentVersion].data, ...versions[currentVersion - 1].data,
}; };
return ( return (
...@@ -94,38 +96,21 @@ function History({ ...@@ -94,38 +96,21 @@ function History({
title="Parcours de l'historique" title="Parcours de l'historique"
> >
<> <>
<MobileStepper <div className={classes.center}>
steps={versions.length} <Pagination
position="static" count={maxSteps}
activeStep={currentVersion} page={currentVersion}
nextButton={ onChange={handleChange}
<Button showFirstButton
color="secondary" showLastButton
size="small" color="secondary"
onClick={goNextVersion} />
disabled={currentVersion >= maxSteps - 1} </div>
>
Version suivante
<KeyboardArrowRight />
</Button>
}
backButton={
<Button
color="secondary"
size="small"
onClick={goPreviousVersion}
disabled={currentVersion === 0}
>
<KeyboardArrowLeft />
Version précédente
</Button>
}
/>
<br /> <br />
<Divider /> <Divider />
<VersionInfo <VersionInfo
rawModelData={newRawModelData} rawModelData={newRawModelData}
versionNumber={currentVersion} versionNumber={currentVersion - 1}
editFromVersion={editFromVersion} editFromVersion={editFromVersion}
/> />
<br /> <br />
......
...@@ -4,11 +4,11 @@ import List from "@material-ui/core/List"; ...@@ -4,11 +4,11 @@ import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import Pagination from "@material-ui/lab/Pagination";
import { makeStyles } from "@material-ui/styles"; import { makeStyles } from "@material-ui/styles";
import range from "../../utils/range"; import range from "../../utils/range";
import APP_ROUTES from "../../config/appRoutes"; import APP_ROUTES from "../../config/appRoutes";
import CustomNavLink from "../common/CustomNavLink"; import CustomNavLink from "../common/CustomNavLink";
import Pagination from "@material-ui/lab/Pagination";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
...@@ -47,9 +47,12 @@ function UnivList({ universitiesToList, itemsPerPage }) { ...@@ -47,9 +47,12 @@ function UnivList({ universitiesToList, itemsPerPage }) {
const maxSteps = Math.ceil(numberOfItems / itemsPerPage); const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
const getIndexesOnPage = useCallback( const getIndexesOnPage = useCallback(
(page) => { (currentPage) => {
const firstIdxOnPage = page * itemsPerPage; const firstIdxOnPage = currentPage * itemsPerPage;
const lastIdxOnPage = Math.min((page + 1) * itemsPerPage, numberOfItems); const lastIdxOnPage = Math.min(
(currentPage + 1) * itemsPerPage,
numberOfItems
);
return range(lastIdxOnPage - firstIdxOnPage).map( return range(lastIdxOnPage - firstIdxOnPage).map(
(el) => el + firstIdxOnPage (el) => el + firstIdxOnPage
); );
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment