diff --git a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx b/src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
similarity index 93%
rename from src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
rename to src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
index 37c9635393a68a2d3af603897e611050d3cc3e32..1cd99aa468ef7cf3885f645b7c43b1e036591197 100644
--- a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
@@ -7,7 +7,7 @@ import { useReservations } from 'hooks/useReservations';
* Displays a list of all reservations from api.
* @returns rendered list of reservations.
*/
-export const ReservationListViewer: FC = () => {
+export const ReservationList: FC = () => {
const reservations = useReservations();
return (
diff --git a/src/components/Dashboard/ReservationPage/ReservationList/ReservationListSwitcher.tsx b/src/components/Dashboard/ReservationPage/ReservationList/ReservationListSwitcher.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d2057b3851e5561604ffed90ca08cbb5ccdffe1
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationList/ReservationListSwitcher.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { useRole } from 'hooks/useRole';
+import { Roles } from 'roles/userRoles';
+import { ReservationsListByWeek } from 'components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek';
+import { ReservationList } from 'components/Dashboard/ReservationPage/ReservationList/ReservationList';
+
+export const ReservationListSwitcher: FC = () => {
+ const [role] = useRole();
+
+ return (
+ <>
+ {role === Roles.operator ? (
+ <ReservationsListByWeek />
+ ) : (
+ <ReservationList />
+ )}
+ </>
+ );
+};
diff --git a/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx b/src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
similarity index 86%
rename from src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
rename to src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
index ad452f18391176d1b7d0d91793373cfe94e974ac..46c9e9c2589267984f50a803c231430498f29959 100644
--- a/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
import { Grid } from '@material-ui/core';
import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
import DateFnsUtils from '@date-io/date-fns';
+import itLocale from 'date-fns/locale/en-US';
import {
KeyboardDatePicker,
MuiPickersUtilsProvider,
@@ -12,16 +13,17 @@ import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';
* Displays a list of all reservations from api.
* @returns rendered list of reservations.
*/
-export const WeekReservations: FC = () => {
+export const ReservationsListByWeek: FC = () => {
const [selectedDate, handleDateChange] = useState<Date | null>(new Date());
const reservations = useReservationsListByWeek(selectedDate);
return (
- <MuiPickersUtilsProvider utils={DateFnsUtils}>
+ <MuiPickersUtilsProvider locale={itLocale} utils={DateFnsUtils}>
<div data-testid="ReservationListViewer">
<KeyboardDatePicker
value={selectedDate}
+ variant="static"
onChange={(date) => handleDateChange(date)}
format="dd/MM/yyyy"
/>
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index a380c8f243c6cf884e1a7707527c136b12735fca..6e92b3eaff4085cc4798c82415790044b4501dc2 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -47,19 +47,11 @@ export const reservationPageStyle = makeStyles(() => ({
fontSize: '50px',
},
fab: {
- margin: '1.9em',
+ margin: '5vw',
bottom: '0',
right: '0',
position: 'fixed',
fontSize: '2em',
padding: '1.5em',
},
- fabSmall: {
- margin: '1.4em',
- bottom: '0',
- right: '0',
- position: 'fixed',
- fontSize: '1.7em',
- padding: '1.4em',
- },
}));
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index fea77db54cb6c210da40559864556f9310fb3231..2fbb7c843d4e6c46d7f998d174f7ef7e279608db 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -1,11 +1,11 @@
import React, { FC } from 'react';
-import { Grid, Typography, Hidden } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
-import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-import { reservationPageStyle } from './ReservationPage.style';
+import { ReservationPageHeader } from './ReservationPageHeader';
import { ReservationDialog } from './ReservationDialog';
-import { ReservationListViewer } from './ReservationListViewer';
+import { reservationPageStyle } from './ReservationPage.style';
+import { ReservationListSwitcher } from './ReservationList/ReservationListSwitcher';
export const ReservationPage: FC = () => {
const classes = reservationPageStyle();
@@ -23,52 +23,18 @@ export const ReservationPage: FC = () => {
return (
<div data-testid="Reservation">
<Grid container direction="column" className={classes.paddingBottom}>
- <div className={classes.root}>
- <Grid item>
- <NavBar />
- </Grid>
- <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
- <header>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
-
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Plan Here Your
- </Typography>
- <Typography variant="h2" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
- </Grid>
-
- <Grid item xs={1} />
- </Grid>
- </header>
- </div>
-
- <Hidden smDown>
- <Fab
- color="primary"
- size="large"
- className={classes.fab}
- onClick={handleOpen}
- aria-label="Add New Reservations"
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
- </Hidden>
-
- <Hidden mdUp>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fabSmall}
- onClick={handleOpen}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
- </Hidden>
+ <ReservationPageHeader />
+ <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
+
+ <Fab
+ color="primary"
+ size="large"
+ className={classes.fab}
+ onClick={handleOpen}
+ aria-label="Add New Reservations"
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
<Grid item container className={classes.paddingTop}>
<Grid item xs={1} lg={2} />
@@ -79,7 +45,7 @@ export const ReservationPage: FC = () => {
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
- <ReservationListViewer />
+ <ReservationListSwitcher />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
diff --git a/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx b/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e2765008e76301f2dc77a8a4b5491c2fe1968c37
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import { NavBar } from 'components/Dashboard/HomePage/NavBar';
+import { reservationPageStyle } from './ReservationPage.style';
+
+export const ReservationPageHeader: FC = () => {
+ const classes = reservationPageStyle();
+
+ return (
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <Grid item>
+ <NavBar />
+ </Grid>
+ <header>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
+
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </header>
+ </div>
+ </Grid>
+ );
+};