Add fullscreen mode for BookTable

frontend/src/components/BookPage.js

@@ -118,7 +118,7 @@ class BookPage extends Component {
       const chartWidthEm = width - bookTableWidth;
       const tableWidthXS = (bookTableWidth / width) * 12;
       const chartWidthXS = (chartWidthEm / width) * 12;
-      console.log(bookTableWidth, chartWidthEm, tableWidthXS, chartWidthXS);
+
       return (
         <Grid
           container
@@ -136,6 +136,9 @@ class BookPage extends Component {
               currency={this.props.currency}
               maxWidth={bookTableWidth} // EM units
               maxHeight={heightEm * 0.8 - 11} // EM units
+              fullWidth={widthEm} // EM units
+              fullHeight={heightEm} // EM units
+              defaultFullscreen={false}
             />
           </Grid>
           <Grid
@@ -181,6 +184,9 @@ class BookPage extends Component {
             currency={this.props.currency}
             maxWidth={widthEm * 0.97} // EM units
             maxHeight={heightEm * 0.8 - 11} // EM units
+            fullWidth={widthEm} // EM units
+            fullHeight={heightEm} // EM units
+            defaultFullscreen={false}
           />
         );
       }

frontend/src/components/BookTable.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import {
   Box,
+  Grid,
+  Dialog,
   Typography,
   Paper,
   Stack,
@@ -11,8 +13,9 @@ import {
   ListItemAvatar,
   useTheme,
   CircularProgress,
+  IconButton,
 } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, GridFooterPlaceholder, GridPagination } from '@mui/x-data-grid';
 import currencyDict from '../../static/assets/currencies.json';
 import { Order } from '../models/Order.model';
 
@@ -23,6 +26,10 @@ import RobotAvatar from './Robots/RobotAvatar';
 import hexToRgb from '../utils/hexToRgb';
 import statusBadgeColor from '../utils/statusBadgeColor';
 
+// Icons
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+
 interface Props {
   loading: boolean;
   orders: Order[];
@@ -30,6 +37,9 @@ interface Props {
   currency: number;
   maxWidth: number;
   maxHeight: number;
+  fullWidth: number;
+  fullHeight: number;
+  defaultFullscreen: boolean;
 }
 
 const BookTable = ({
@@ -39,23 +49,26 @@ const BookTable = ({
   currency,
   maxWidth,
   maxHeight,
+  fullWidth,
+  fullHeight,
+  defaultFullscreen,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
   const history = useHistory();
-
+  const [pageSize, setPageSize] = useState(0);
-  const fontSize = theme.typography.fontSize;
+  const [fullscreen, setFullscreen] = useState(defaultFullscreen);
 
   // all sizes in 'em'
+  const fontSize = theme.typography.fontSize;
   const verticalHeightFrame = 6.9075;
   const verticalHeightRow = 3.25;
   const defaultPageSize = Math.max(
-    Math.floor((maxHeight - verticalHeightFrame) / verticalHeightRow),
+    Math.floor(((fullscreen? fullHeight *0.875:maxHeight) - verticalHeightFrame) / verticalHeightRow),
     1,
   );
   const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
 
-  const [pageSize, setPageSize] = useState(0);
   const [useDefaultPageSize, setUseDefaultPageSize] = useState(true);
   useEffect(() => {
     if (useDefaultPageSize) {
@@ -564,35 +577,75 @@ const BookTable = ({
     return [columns, width * 0.875 + 0.15];
   };
 
-  const [columns, width] = filteredColumns(maxWidth);
+  const [columns, width] = filteredColumns(fullscreen? fullWidth : maxWidth);
 
-  return (
+  const gridComponents = {
-    <Paper style={{ width: `${width}em`, height: `${height}em`, overflow: 'auto' }}>
+    NoResultsOverlay: () => (
-      <DataGrid
+      <Stack height='100%' alignItems='center' justifyContent='center'>
-        localeText={localeText}
+        {t('Filter has no results')}
-        rows={orders.filter(
+      </Stack>
-          (order) =>
+    ),
-            (order.type == type || type == null) && (order.currency == currency || currency == 0),
+    Footer: () => (
-        )}
+      <Grid container alignItems="center" direction="row" justifyContent="space-between">
-        loading={loading}
+        <Grid item>
-        columns={columns}
+        <IconButton onClick={() => setFullscreen(!fullscreen)}>
-        components={{
+          {fullscreen ? <FullscreenExitIcon/> : <FullscreenIcon/>}
-          NoResultsOverlay: () => (
+        </IconButton>
-            <Stack height='100%' alignItems='center' justifyContent='center'>
+        </Grid>
-              {t('Filter has no results')}
+        <Grid item>
-            </Stack>
+        <GridPagination/>
-          ),
+        </Grid>
-        }}
+      </Grid>
-        pageSize={loading ? 0 : pageSize}
+    ),
-        rowsPerPageOptions={[0, pageSize, defaultPageSize * 2, 50, 100]}
+  }
-        onPageSizeChange={(newPageSize) => {
+
-          setPageSize(newPageSize);
+  if (!fullscreen){
-          setUseDefaultPageSize(false);
+    return(
-        }}
+      <Paper style={{ width: `${width}em`, height: `${height}em`, overflow: 'auto' }}>
-        onRowClick={(params) => history.push('/order/' + params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
+        <DataGrid
-      />
+      localeText={localeText}
-    </Paper>
+      rows={orders.filter(
-  );
+        (order) =>
+          (order.type == type || type == null) && (order.currency == currency || currency == 0),
+      )}
+      loading={loading}
+      columns={columns}
+      components={gridComponents}
+      pageSize={loading ? 0 : pageSize}
+      rowsPerPageOptions={[0, pageSize, defaultPageSize * 2, 50, 100]}
+      onPageSizeChange={(newPageSize) => {
+        setPageSize(newPageSize);
+        setUseDefaultPageSize(false);
+      }}
+      onRowClick={(params) => history.push('/order/' + params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
+    />
+      </Paper>
+    )
+  } else {
+    return(
+    <Dialog open={fullscreen} fullScreen={true}>
+      <Paper style={{ width: '100%', height: '100%', overflow: 'auto' }}>
+        <DataGrid
+      localeText={localeText}
+      rows={orders.filter(
+        (order) =>
+          (order.type == type || type == null) && (order.currency == currency || currency == 0),
+      )}
+      loading={loading}
+      columns={columns}
+      components={gridComponents}
+      pageSize={loading ? 0 : pageSize}
+      rowsPerPageOptions={[0, pageSize, defaultPageSize * 2, 50, 100]}
+      onPageSizeChange={(newPageSize) => {
+        setPageSize(newPageSize);
+        setUseDefaultPageSize(false);
+      }}
+      onRowClick={(params) => history.push('/order/' + params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
+    />
+      </Paper>
+    </Dialog>
+    )
+  }
 };
 
 export default BookTable;