From eff371bf8cc293125d613cdad2d89259ebc77bf7 Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Tue, 25 May 2021 20:03:43 +0200
Subject: [PATCH] Fix for broken homepage additional views. Layout updates

---
 src/CMSRouterSwitch.tsx                   | 20 +++++----
 src/collection/CollectionTableToolbar.tsx | 15 ++++---
 src/collection/EntityCollectionTable.tsx  | 21 ++++++---
 src/collection/FilterPopup.tsx            | 44 +++++++++++++------
 src/routes/HomeRoute.tsx                  | 52 ++++++++++++-----------
 5 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/src/CMSRouterSwitch.tsx b/src/CMSRouterSwitch.tsx
index c4da0cb..9c961ce 100644
--- a/src/CMSRouterSwitch.tsx
+++ b/src/CMSRouterSwitch.tsx
@@ -16,13 +16,23 @@ export function CMSRouterSwitch({ collections, views }: {
 
     function buildCMSViewRoute(path: string, cmsView: CMSView) {
         return <Route
-            key={"additional_view_" + path}
+            key={"navigation_view_" + path}
             path={addInitialSlash(path)}
         >
             <CMSViewRoute cmsView={cmsView}/>
         </Route>;
     }
 
+    let customRoutes: JSX.Element[] = [];
+    if (views) {
+        views.forEach((cmsView) => {
+            if (Array.isArray(cmsView.path))
+                customRoutes.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+            else
+                customRoutes.push(buildCMSViewRoute(cmsView.path, cmsView));
+        });
+    }
+
     return (
         <Switch location={mainLocation}>
             {[...collections]
@@ -40,13 +50,7 @@ export function CMSRouterSwitch({ collections, views }: {
                     )
                 )}
 
-            {views &&
-            views.map(cmsView => {
-                if (Array.isArray(cmsView.path))
-                    return <>{cmsView.path.map(path => buildCMSViewRoute(path, cmsView))}</>;
-                return buildCMSViewRoute(cmsView.path, cmsView);
-            })}
-
+            {customRoutes}
 
             <Route
                 key={`navigation_home`}>
diff --git a/src/collection/CollectionTableToolbar.tsx b/src/collection/CollectionTableToolbar.tsx
index bc953df..9fec84a 100644
--- a/src/collection/CollectionTableToolbar.tsx
+++ b/src/collection/CollectionTableToolbar.tsx
@@ -18,7 +18,11 @@ const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         toolbar: {
             minHeight: 56,
-            paddingLeft: theme.spacing(2),
+            [theme.breakpoints.down("md")]: {
+                paddingLeft: theme.spacing(.5),
+                paddingRight: theme.spacing(.5)
+            },
+            paddingLeft: theme.spacing(1),
             paddingRight: theme.spacing(1),
             zIndex: 100,
             backgroundColor: theme.palette.background.paper,
@@ -33,6 +37,9 @@ const useStyles = makeStyles((theme: Theme) =>
             display: "flex",
             alignItems: "center",
             "& > *": {
+                [theme.breakpoints.down("md")]: {
+                    marginRight: theme.spacing(.5)
+                },
                 marginRight: theme.spacing(1)
             }
         }
@@ -169,10 +176,8 @@ export function CollectionTableToolbar<S extends EntitySchema<Key>, Key extends
 
             <div className={classes.actions}>
 
-                <Box width={20}>
-                    {props.loading &&
-                    <CircularProgress size={16} thickness={8}/>}
-                </Box>
+                {props.loading &&
+                <CircularProgress size={16} thickness={8}/>}
 
                 {props.actions}
 
diff --git a/src/collection/EntityCollectionTable.tsx b/src/collection/EntityCollectionTable.tsx
index 4328d9e..b70be2a 100644
--- a/src/collection/EntityCollectionTable.tsx
+++ b/src/collection/EntityCollectionTable.tsx
@@ -312,22 +312,31 @@ export default function EntityCollectionTable<S extends EntitySchema<Key>, Key e
             </Button>);
 
         const multipleDeleteEnabled = selectedEntities.every((entity) => canDelete(collectionConfig.permissions, authController.loggedUser, entity));
+        const onMultipleDeleteClick = (event: React.MouseEvent) => {
+            event.stopPropagation();
+            setDeleteEntityClicked(selectedEntities);
+        };
         const multipleDeleteButton = selectionEnabled &&
 
             <Tooltip
                 title={multipleDeleteEnabled ? "Multiple delete" : "You have selected one entity you cannot delete"}>
                 <span>
-                    <Button
+                    {largeLayout && <Button
                         disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                         startIcon={<Delete/>}
-                        onClick={(event: React.MouseEvent) => {
-                            event.stopPropagation();
-                            setDeleteEntityClicked(selectedEntities);
-                        }}
+                        onClick={onMultipleDeleteClick}
                         color={"primary"}
                     >
                         <p style={{ minWidth: 24 }}>({selectedEntities?.length})</p>
-                    </Button>
+                    </Button>}
+
+                    {!largeLayout &&
+                    <IconButton
+                        color={"primary"}
+                        disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
+                        onClick={onMultipleDeleteClick}>
+                        <Delete/>
+                    </IconButton>}
                 </span>
             </Tooltip>;
 
diff --git a/src/collection/FilterPopup.tsx b/src/collection/FilterPopup.tsx
index 1355e24..42481c3 100644
--- a/src/collection/FilterPopup.tsx
+++ b/src/collection/FilterPopup.tsx
@@ -8,15 +8,12 @@ import PopupState, { bindPopover, bindTrigger } from "material-ui-popup-state";
 import {
     Box,
     Button,
-    createStyles,
     IconButton,
-    makeStyles,
     Popover,
     Table,
     TableBody,
     TableCell as MuiTableCell,
     TableRow,
-    Theme,
     Tooltip,
     withStyles
 } from "@material-ui/core";
@@ -47,7 +44,12 @@ interface FilterPopupProps<S extends EntitySchema<Key>, Key extends string> {
     onFilterUpdate(filterValues?: FilterValues<S, Key>): void;
 }
 
-export default function FilterPopup<S extends EntitySchema<Key>, Key extends string>({ schema, filterValues, onFilterUpdate, filterableProperties }: FilterPopupProps<S, Key>) {
+export default function FilterPopup<S extends EntitySchema<Key>, Key extends string>({
+                                                                                         schema,
+                                                                                         filterValues,
+                                                                                         onFilterUpdate,
+                                                                                         filterableProperties
+                                                                                     }: FilterPopupProps<S, Key>) {
 
     function createFilterFields() {
 
@@ -99,16 +101,23 @@ export default function FilterPopup<S extends EntitySchema<Key>, Key extends str
                     popupState.close();
                 }
 
-                const clearSetFiltersView = <Tooltip title="Clear filter">
-                    <IconButton
-                        aria-label="filter clear"
-                        onClick={() => onFilterUpdate(undefined)}>
-                        <ClearIcon fontSize={"small"}/>
-                    </IconButton>
-                </Tooltip>;
+                const clearSetFiltersView = (
+                    <Tooltip title="Clear filter">
+                        <IconButton
+                            style={{ height: "fit-content" }}
+                            size={"small"}
+                            aria-label="filter clear"
+                            onClick={() => onFilterUpdate(undefined)}>
+                            <ClearIcon fontSize={"small"}/>
+                        </IconButton>
+                    </Tooltip>
+                );
 
                 return (
-                    <Box display={"flex"} ml={1}>
+                    <Box display={"flex"}
+                         alignItems={"center"}
+                         ml={.5}
+                         mr={1}>
 
                         <Tooltip title="Filter list">
                             <IconButton
@@ -137,7 +146,16 @@ export default function FilterPopup<S extends EntitySchema<Key>, Key extends str
                                     initialValues={cleanedInitialValues}
                                     onSubmit={setFilters}
                                 >
-                                    {({ values, resetForm, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => {
+                                    {({
+                                          values,
+                                          resetForm,
+                                          errors,
+                                          touched,
+                                          handleChange,
+                                          handleBlur,
+                                          handleSubmit,
+                                          isSubmitting
+                                      }) => {
                                         const reset = (e: any) => {
                                             resetForm();
                                             setFilters(undefined);
diff --git a/src/routes/HomeRoute.tsx b/src/routes/HomeRoute.tsx
index 8354b90..396d7e7 100644
--- a/src/routes/HomeRoute.tsx
+++ b/src/routes/HomeRoute.tsx
@@ -119,31 +119,35 @@ function HomeRoute({
         </Grid>;
     }
 
-    const groupViews
-        = allGroups.map((group, index) => (
-        <Box mt={6} mb={6} key={`group_${index}`}>
-            <Typography color={"textSecondary"} className={"weight-500"}>
-                {group?.toUpperCase() ?? "Ungrouped".toUpperCase()}
-            </Typography>
-            <Divider/>
-            <Box mt={2}>
-                <Grid container spacing={2}>
-                    {group && navigationEntries
-                        .filter((entry) => entry.group === group)
-                        .map((entry) => buildNavigationCard(entry))
-                    }
-                    {!group && navigationEntries
-                        .filter((entry) => !entry.group)
-                        .map((entry) => buildNavigationCard(entry))
-                    }
-                </Grid>
-            </Box>
-        </Box>
-    ));
 
-    return <Container>
-        {groupViews}
-    </Container>;
+    return (
+        <Container>
+            {allGroups.map((group, index) => (
+                <Box mt={6} mb={6} key={`group_${index}`}>
+                    {allGroups.length > 0 && <>
+                        <Typography color={"textSecondary"}
+                                    className={"weight-500"}>
+                            {group?.toUpperCase() ?? "Ungrouped".toUpperCase()}
+                        </Typography>
+                        <Divider/>
+                    </>}
+
+                    <Box mt={2}>
+                        <Grid container spacing={2}>
+                            {group && navigationEntries
+                                .filter((entry) => entry.group === group)
+                                .map((entry) => buildNavigationCard(entry))
+                            }
+                            {!group && navigationEntries
+                                .filter((entry) => !entry.group)
+                                .map((entry) => buildNavigationCard(entry))
+                            }
+                        </Grid>
+                    </Box>
+                </Box>
+            ))}
+        </Container>
+    );
 }
 
 export default HomeRoute;