From aef7bffefa1025aa0cd3648562f499d1f0ecf3d8 Mon Sep 17 00:00:00 2001
From: Tarik Huber <tarik.huber@acid21.com>
Date: Tue, 9 May 2023 23:06:25 +0200
Subject: [PATCH] Added top and bottom to mui list page

---
 .../template/src/pages/ListPageDemo/index.js  |   1 +
 packages/material-ui-shell/package-lock.json  |   4 +-
 packages/material-ui-shell/package.json       |   2 +-
 .../src/components/MenuHeader/MenuHeader.js   | 211 ++++++++++++++++++
 .../src/containers/Page/ListPage.js           |   5 +
 5 files changed, 220 insertions(+), 3 deletions(-)
 create mode 100644 packages/material-ui-shell/src/components/MenuHeader/MenuHeader.js

diff --git a/packages/material-ui-shell/cra-template-material-ui/template/src/pages/ListPageDemo/index.js b/packages/material-ui-shell/cra-template-material-ui/template/src/pages/ListPageDemo/index.js
index 63c8d21ce..4ba4852ff 100644
--- a/packages/material-ui-shell/cra-template-material-ui/template/src/pages/ListPageDemo/index.js
+++ b/packages/material-ui-shell/cra-template-material-ui/template/src/pages/ListPageDemo/index.js
@@ -78,6 +78,7 @@ const ListPageDemo = () => {
       list={list}
       fields={fields}
       Row={Row}
+      top={<div>TOP</div>}
       listProps={{ itemSize: 91 }}
       getPageProps={(list) => {
         return {
diff --git a/packages/material-ui-shell/package-lock.json b/packages/material-ui-shell/package-lock.json
index 37327e647..75a78eb8d 100644
--- a/packages/material-ui-shell/package-lock.json
+++ b/packages/material-ui-shell/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "material-ui-shell",
-  "version": "3.4.9",
+  "version": "3.4.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "material-ui-shell",
-      "version": "3.4.9",
+      "version": "3.4.10",
       "license": "MIT",
       "devDependencies": {
         "@emotion/react": "^11.10.4",
diff --git a/packages/material-ui-shell/package.json b/packages/material-ui-shell/package.json
index 1ea084ede..bb8d41407 100644
--- a/packages/material-ui-shell/package.json
+++ b/packages/material-ui-shell/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-ui-shell",
-  "version": "3.4.9",
+  "version": "3.4.10",
   "description": "material-ui-shell React component",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/material-ui-shell/src/components/MenuHeader/MenuHeader.js b/packages/material-ui-shell/src/components/MenuHeader/MenuHeader.js
new file mode 100644
index 000000000..fbf87b70d
--- /dev/null
+++ b/packages/material-ui-shell/src/components/MenuHeader/MenuHeader.js
@@ -0,0 +1,211 @@
+import React from 'react'
+import { useAuth } from 'base-shell/lib/providers/Auth'
+import { useMenu } from '../../providers/Menu'
+import { useTheme as useAppTheme } from '../../providers/Theme'
+import {
+  Avatar,
+  IconButton,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  Paper,
+} from '@mui/material'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChromeReaderMode,
+  Person as PersonIcon,
+  ArrowDropDown as ArrowDropDownIcon,
+  ArrowDropUp as ArrowDropUpIcon,
+  Brightness4 as Brightness4Icon,
+  BrightnessHigh as BrightnessHighIcon,
+} from '@mui/icons-material'
+import { useTheme } from '@mui/material/styles'
+
+const MenuHeader = () => {
+  const { auth } = useAuth()
+  const { toggleThisTheme, isDarkMode, isRTL } = useAppTheme()
+  const menuContext = useMenu()
+  const theme = useTheme()
+  const authData = auth
+  const {
+    toggleThis,
+    isDesktop,
+    isMiniMode,
+    isMenuOpen,
+    isMiniSwitchVisibility,
+    isAuthMenuOpen,
+  } = menuContext || {}
+
+  const isAuthenticated = auth.isAuthenticated
+  const AvatarConstructor = ({ src, alt, avatar }) => {
+    return (
+      <ListItemAvatar onClick={() => toggleThis('isAuthMenuOpen')}>
+        <Avatar src={src} alt={alt}>
+          {avatar}
+        </Avatar>
+      </ListItemAvatar>
+    )
+  }
+
+  const styles = {
+    icon: {
+      color: theme.palette.grey.A100,
+      cursor: 'pointer',
+    },
+    toolbar: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: theme.spacing(1),
+      // necessary for content to be below app bar
+      ...theme.mixins.toolbar,
+    },
+  }
+
+  return (
+    <Paper
+      square={true}
+      elevation={3}
+      sx={{
+        backgroundColor: (t) =>
+          t.palette.mode === 'dark'
+            ? t.palette.background.default
+            : t.palette.primary.dark,
+        margin: 0,
+        padding: 0,
+      }}
+    >
+      {isMiniMode && isAuthenticated && (
+        <div style={{ ...styles.toolbar }}></div>
+      )}
+      <List sx={{ ...(!isAuthenticated ? styles.toolbar : {}) }}>
+        {!isMiniMode && (
+          <ListItem
+            sx={{
+              color: (t) => theme.palette.grey.A100,
+              cursor: 'pointer',
+              ...theme.mixins.toolbar,
+            }}
+          >
+            {isAuthenticated &&
+              (authData.photoURL
+                ? AvatarConstructor({
+                    src: authData.photoURL,
+                    alt: 'user',
+                  })
+                : AvatarConstructor({
+                    avatar: authData.displayName ? (
+                      authData.displayName[0].toUpperCase()
+                    ) : (
+                      <PersonIcon />
+                    ),
+                  }))}
+            <ListItemSecondaryAction>
+              <IconButton
+                onClick={() => {
+                  toggleThisTheme('isDarkMode')
+                }}
+              >
+                {isDarkMode ? (
+                  <BrightnessHighIcon sx={{ ...styles.icon }} />
+                ) : (
+                  <Brightness4Icon sx={{ ...styles.icon }} />
+                )}
+              </IconButton>
+              {isDesktop && (
+                <>
+                  {isMiniSwitchVisibility && (
+                    <IconButton
+                      onClick={() => {
+                        toggleThis('isMiniMode', true)
+                        toggleThis('isMenuOpen', false)
+                      }}
+                    >
+                      <ChromeReaderMode sx={{ ...styles.icon }} />
+                    </IconButton>
+                  )}
+                  <IconButton
+                    color="inherit"
+                    onClick={() => {
+                      toggleThis('isMenuOpen', false)
+                    }}
+                  >
+                    {isRTL ? (
+                      <ChevronRight sx={{ ...styles.icon }} />
+                    ) : (
+                      <ChevronLeft sx={{ ...styles.icon }} />
+                    )}
+                  </IconButton>{' '}
+                </>
+              )}
+            </ListItemSecondaryAction>
+          </ListItem>
+        )}
+
+        {isAuthenticated && (
+          <ListItem
+            onClick={() => {
+              toggleThis('isAuthMenuOpen')
+            }}
+          >
+            {!isMenuOpen &&
+              isMiniMode &&
+              isDesktop &&
+              (authData.photoURL
+                ? AvatarConstructor({
+                    src: authData.photoURL,
+                    alt: 'user',
+                  })
+                : AvatarConstructor({
+                    avatar: authData.displayName ? (
+                      authData.displayName[0].toUpperCase()
+                    ) : (
+                      <PersonIcon />
+                    ),
+                  }))}
+            {!isMiniMode && (
+              <ListItemText
+                sx={{
+                  color: (t) => theme.palette.grey.A100,
+                  cursor: 'pointer',
+                  marginLeft:
+                    !isMenuOpen && isDesktop && authData.photoURL
+                      ? 7
+                      : undefined,
+                  textOverflow: 'ellipsis',
+                }}
+                secondaryTypographyProps={{
+                  color: (t) => theme.palette.grey.A100,
+                  width: 80,
+                  textOverflow: 'ellipsis',
+                }}
+                primary={authData.displayName}
+                secondary={authData.email}
+              />
+            )}
+            {isMenuOpen && (
+              <ListItemSecondaryAction
+                onClick={() => {
+                  toggleThis('isAuthMenuOpen')
+                }}
+              >
+                <IconButton>
+                  {isAuthMenuOpen ? (
+                    <ArrowDropUpIcon sx={{ ...styles.icon }} />
+                  ) : (
+                    <ArrowDropDownIcon sx={{ ...styles.icon }} />
+                  )}
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
+          </ListItem>
+        )}
+      </List>
+    </Paper>
+  )
+}
+
+export default MenuHeader
diff --git a/packages/material-ui-shell/src/containers/Page/ListPage.js b/packages/material-ui-shell/src/containers/Page/ListPage.js
index a14f27ecd..3b45f0f01 100644
--- a/packages/material-ui-shell/src/containers/Page/ListPage.js
+++ b/packages/material-ui-shell/src/containers/Page/ListPage.js
@@ -14,11 +14,14 @@ export default function (props) {
     getPageProps = () => {},
     listProps,
     Row,
+
     name,
     trailing = null,
     leading = null,
     disableSearch = false,
     disableFilter = false,
+    top = null,
+    bottom = null,
   } = props
   const { openFilter, getList, getFilter, setSearch } = useFilter()
   const { queries = [], search = {} } = getFilter(name)
@@ -52,7 +55,9 @@ export default function (props) {
       }
       {...getPageProps(list)}
     >
+      {top}
       <VirtualList list={list} name={name} listProps={listProps} Row={Row} />
+      {bottom}
 
       {fields.length > 0 && <FilterDrawer fields={fields} name={name} />}
     </Page>