Enhancement add responsive mobile view for documents table#606

src/components/Documents/DocumentCard.jsx

@@ -0,0 +1,138 @@
+// React Imports
+import React, { useState } from 'react';
+// Material UI Imports
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
+import ShareIcon from '@mui/icons-material/Share';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Typography from '@mui/material/Typography';
+
+/**
+ * @typedef {object} Document
+ * @property {string} name - The given name of the document
+ * @property {string} type - The given type of the document
+ * @property {string} description - The given description of the document
+ * @property {string} uploadDate- The upload date of the document
+ * @property {string} endDate - The expiration date of the document
+ * @property {string} fileUrl - The file URL of the document
+ */
+
+/**
+ * DocumentCard - Component that contains a document
+ *
+ * @memberof Documents
+ * @name DocumentCard
+ * @param {object} Props - Component props for Document Preview
+ * @param {Document} Props.document - The document
+ * @param {Function} Props.onPreview - The document preview event
+ * @param {Function} Props.onShare - The document share event
+ * @param {Function} Props.onDelete - The document delete event
+ * @returns {React.JSX.Element} React component for DocumentCard
+ */
+const DocumentCard = ({ document, onShare, onDelete, onPreview }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [openMenu, setOpenMenu] = useState(null);
+
+  const handleClick = (event, clickedDocument) => {
+    setAnchorEl(event.currentTarget);
+    setOpenMenu(clickedDocument.id);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpenMenu(null);
+  };
+
+  const handleMenuItemClick = (action, clickedDocument) => () => {
+    action(clickedDocument);
+    handleClose();
+  };
+
+  const iconSize = {
+    height: '24px',
+    width: '24px'
+  };
+
+  const iconStyling = {
+    width: '100%'
+  };
+
+  return (
+    <Box>
+      <Card
+        sx={{
+          my: '5px',
+          position: 'relative'
+        }}
+      >
+        <CardContent>
+          <Box>
+            <Typography variant="body1" component="div" noWrap sx={{ maxWidth: '90%' }}>
+              {document.name || '[No name given]'}
+            </Typography>
+            <Box
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                right: 5,
+                transform: 'translateY(-50%)'
+              }}
+            >
+              <IconButton
+                id="actions-icon-button"
+                aria-controls={openMenu === document.id ? 'actions-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={openMenu === document.id ? 'true' : undefined}
+                onClick={(event) => handleClick(event, document)}
+              >
+                <MoreVertIcon />
+              </IconButton>
+            </Box>
+          </Box>
+        </CardContent>
+        <Menu
+          id="actions-menu"
+          anchorEl={anchorEl}
+          open={openMenu === document.id}
+          onClose={handleClose}
+          MenuListProps={{
+            'aria-labelledby': 'actions-icon-button'
+          }}
+        >
+          <MenuItem
+            component={Button}
+            onClick={handleMenuItemClick(onPreview, document)}
+            startIcon={<FileOpenIcon sx={iconSize} />}
+            sx={iconStyling}
+          >
+            Preview
+          </MenuItem>
+          <MenuItem
+            component={Button}
+            onClick={handleMenuItemClick(onShare, document)}
+            startIcon={<ShareIcon sx={iconSize} />}
+            sx={iconStyling}
+          >
+            Share
+          </MenuItem>
+          <MenuItem
+            component={Button}
+            onClick={handleMenuItemClick(onDelete, document)}
+            startIcon={<DeleteOutlineOutlinedIcon sx={iconSize} />}
+            sx={iconStyling}
+          >
+            Delete
+          </MenuItem>
+        </Menu>
+      </Card>
+    </Box>
+  );
+};
+
+export default DocumentCard;

src/components/Documents/DocumentTable.jsx

@@ -1,19 +1,12 @@
 // React Imports
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 // Constants
 import DOC_TYPES from '@constants/doc_types';
 // Material UI Imports
 import Box from '@mui/material/Box';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import ShareIcon from '@mui/icons-material/Share';
-import FileOpenIcon from '@mui/icons-material/FileOpen';
-import {
-  DataGrid,
-  GridActionsCellItem,
-  GridToolbarContainer,
-  GridToolbarDensitySelector,
-  GridToolbarFilterButton
-} from '@mui/x-data-grid';
+import { useMediaQuery } from '@mui/material';
+
 // Context Imports
 import { DocumentListContext } from '@contexts';
 import { useSession } from '@hooks';
@@ -24,13 +17,8 @@ import theme from '../../theme';
 // Component Imports
 import { EmptyListNotification, LoadingAnimation } from '../Notification';
 
-// DataGrid Toolbar
-const CustomToolbar = () => (
-  <GridToolbarContainer>
-    <GridToolbarFilterButton />
-    <GridToolbarDensitySelector />
-  </GridToolbarContainer>
-);
+import DocumentsMobile from './DocumentsMobile';
+import DocumentsDesktop from './DocumentsDesktop';
 
 /**
  * DocumentTable - Component that shows the list of documents
@@ -50,6 +38,8 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
   const { session } = useSession();
   const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
 
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
   /**
    * Handles the local display of a document by opening it in a new window.
    *
@@ -74,158 +64,50 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
      * @returns {Promise<Blob>} A promise that resolves with the Blob of the document.
      * @throws {Error} Throws an error if there is an issue fetching the document blob.
      */
+
     const urlFileBlob = await getBlobFromSolid(session, urlToOpen);
 
     // Opens a new window with the Blob URL displaying the document.
     window.open(urlFileBlob);
   };
 
-  const columnTitlesArray = [
-    {
-      headerName: 'Name',
-      field: 'name',
-      minWidth: 120,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center'
-    },
-    {
-      headerName: 'Type',
-      field: 'type',
-      minWidth: 120,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center'
-    },
-    {
-      headerName: 'Description',
-      field: 'description',
-      minWidth: 120,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center'
-    },
-    {
-      headerName: 'Upload Date',
-      field: 'upload date',
-      minWidth: 120,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center'
-    },
-    {
-      headerName: 'Expiration Date',
-      field: 'expiration date',
-      minWidth: 120,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center'
-    },
-    {
-      headerName: 'Preview File',
-      field: 'preview file',
-      minWidth: 100,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center',
-      sortable: false,
-      filterable: false,
-      renderCell: (fileUrl) => (
-        <GridActionsCellItem
-          key={String(fileUrl)}
-          icon={<FileOpenIcon />}
-          onClick={() => handleShowDocumentLocal(fileUrl)}
-          label="Preview"
-        />
-      )
-    },
-    {
-      headerName: 'Sharing',
-      field: 'sharing',
-      type: 'actions',
-      minWidth: 80,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center',
-      getActions: (data) => [
-        <GridActionsCellItem
-          icon={<ShareIcon />}
-          onClick={() => handleAclPermissionsModal('document', data.row.id, data.row.type)}
-          label="Share"
-        />
-      ]
-    },
-    {
-      headerName: 'Delete',
-      field: 'actions',
-      type: 'actions',
-      minWidth: 80,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center',
-      getActions: (data) => [
-        <GridActionsCellItem
-          icon={<DeleteOutlineOutlinedIcon />}
-          onClick={() => handleSelectDeleteDoc(data.row.delete)}
-          label="Delete"
-        />
-      ]
-    }
-  ];
-
   // Updates type value to use DOC_TYPES for formatting the string
   const mappingType = (type) => DOC_TYPES[type] || type;
 
   // Map types for each document in the array
-  const mappedDocuments = documentListObject?.docList.map((document) => ({
-    ...document,
-    type: mappingType(document.type)
-  }));
+  const documents = useMemo(
+    () =>
+      documentListObject?.docList.map((document) => ({
+        id: uuidv4(), // Generate a UUID (a unique ID)
+        type: mappingType(document.type),
+        ...document
+      })),
+    [documentListObject?.docList]
+  );
+
+  const handlers = {
+    onShare: handleAclPermissionsModal,
+    onDelete: handleSelectDeleteDoc,
+    onPreview: handleShowDocumentLocal
+  };
 
-  const determineDocumentsTable = mappedDocuments?.length ? (
-    // Render if documents
-    <Box sx={{ margin: '20px 0', width: '90vw', height: '500px' }}>
-      <DataGrid
-        columns={columnTitlesArray}
-        rows={mappedDocuments.map((document) => ({
-          id: document.name,
-          type: document.type,
-          name: document.name,
-          description: document.description,
-          delete: document,
-          'upload date': document?.uploadDate.toLocaleDateString(),
-          'expiration date': document?.endDate?.toLocaleDateString(),
-          'preview file': document.fileUrl
-        }))}
-        pageSizeOptions={[10]}
-        initialState={{
-          pagination: {
-            paginationModel: { pageSize: 10, page: 0 }
-          }
-        }}
-        slots={{
-          toolbar: CustomToolbar
-        }}
-        disableColumnMenu
-        disableRowSelectionOnClick
-        sx={{
-          '.MuiDataGrid-columnHeader': {
-            background: theme.palette.primary.light,
-            color: 'white'
-          },
-          '.MuiDataGrid-columnSeparator': {
-            display: 'none'
-          }
-        }}
-      />
+  if (!documents?.length) return <EmptyListNotification type="documents" />;
+  if (loadingDocuments) return <LoadingAnimation loadingItem="documents" />;
+  return (
+    <Box
+      sx={{
+        margin: '20px 0',
+        width: '95vw',
+        height: '500px'
+      }}
+    >
+      {isMobile ? (
+        <DocumentsMobile documents={documents} handlers={handlers} />
+      ) : (
+        <DocumentsDesktop documents={documents} handlers={handlers} />
+      )}
     </Box>
-  ) : (
-    // Render if no documents
-    <EmptyListNotification type="documents" />
   );
-
-  // MAIN RETURN OF COMPONENT
-  return loadingDocuments ? <LoadingAnimation loadingItem="documents" /> : determineDocumentsTable;
 };
 
 export default DocumentTable;