Merge branch 'dev' of https://gitlab.inf.unibz.it/red-giant/dashboard into dev

src/components/Dashboard/ReservationPage/ReservationListViewer.tsx → 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 (

src/components/Dashboard/ReservationPage/ReservationList/ReservationListSwitcher.tsx

+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 />
+      )}
+    </>
+  );
+};

src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx → 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"
         />

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',
-  },
 }));

src/components/Dashboard/ReservationPage/ReservationPage.tsx

 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>

src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx

+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>
+  );
+};