Enhancement add responsive mobile view for documents table#606

src/components/Contacts/ContactListTableMobile.jsx

@@ -130,30 +130,32 @@ const ContactListTableMobile = ({
           </Box>
         </Box>
       </Box>
-      {contacts?.map((contact) => (
-        <Box key={contact.webId}>
-          <Card
-            sx={{
-              my: '5px',
-              position: 'relative'
-            }}
-          >
-            <CardContent>
-              <Box>
-                <Typography variant="body1" component="div" noWrap sx={{ maxWidth: '90%' }}>
-                  {contact.givenName || contact.familyName
-                    ? `${contact.givenName || ''}\u00A0${contact.familyName || ''}`
-                    : '[No name given]'}
-                </Typography>
-                <Typography
-                  variant="body2"
-                  component="div"
-                  noWrap
-                  color="text.secondary"
-                  sx={{ maxWidth: '90%' }}
-                >
-                  {contact.webId}
-                </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          rowGap: '12px'
+        }}
+      >
+        {contacts?.map((contact) => (
+          <Box key={contact.webId}>
+            <Card
+              sx={{
+                my: '5px',
+                position: 'relative'
+              }}
+            >
+              <CardContent>
+                <Box sx={{ maxWidth: '90%' }}>
+                  <Typography variant="body1" component="div" noWrap sx={{ fontWeight: 'bold' }}>
+                    {contact.givenName || contact.familyName
+                      ? `${contact.givenName || ''}\u00A0${contact.familyName || ''}`
+                      : '[No name given]'}
+                  </Typography>
+                  <Typography variant="body2" component="div" noWrap color="text.secondary">
+                    {contact.webId}
+                  </Typography>
+                </Box>
                 <Box
                   sx={{
                     position: 'absolute',
@@ -173,76 +175,76 @@ const ContactListTableMobile = ({
                     <MoreVertIcon />
                   </IconButton>
                 </Box>
-              </Box>
-            </CardContent>
-            <Menu
-              id="actions-menu"
-              anchorEl={anchorEl}
-              open={openMenu === contact.webId}
-              onClose={handleClose}
-              MenuListProps={{
-                'aria-labelledby': 'actions-icon-button'
-              }}
-            >
-              <MenuItem
-                component={Button}
-                onClick={handleMenuItemClick(handleProfileClick, contact)}
-                startIcon={<ContactProfileIcon contact={contact} sx={iconSize} />}
-                sx={iconStyling}
+              </CardContent>
+              <Menu
+                id="actions-menu"
+                anchorEl={anchorEl}
+                open={openMenu === contact.webId}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'actions-icon-button'
+                }}
               >
-                Profile
-              </MenuItem>
-              <MenuItem
-                component={Button}
-                onClick={handleMenuItemClick(handleSendMessage, contact)}
-                startIcon={
-                  <SendIcon
-                    sx={{
-                      ...iconSize,
-                      color: '#808080',
-                      cursor: 'pointer'
-                    }}
-                  />
-                }
-                sx={iconStyling}
-              >
-                Message
-              </MenuItem>
-              {/* TODO: Keep copy function? */}
-              {/* If so, also add to Desktop table? */}
-              {/* Maybe without any icon. Simply click on the web ID and it will copy? */}
-              <MenuItem
-                component={Button}
-                onClick={handleMenuItemClick(
-                  () =>
-                    saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
-                  contact
-                )}
-                startIcon={<ContentCopyIcon sx={iconSize} />}
-                sx={iconStyling}
-              >
-                Copy WebId
-              </MenuItem>
-              <MenuItem
-                component={Button}
-                onClick={handleMenuItemClick(editContact, contact)}
-                startIcon={<EditIconOutlined sx={iconSize} />}
-                sx={iconStyling}
-              >
-                Edit
-              </MenuItem>
-              <MenuItem
-                component={Button}
-                onClick={handleMenuItemClick(deleteContact, contact)}
-                startIcon={<DeleteOutlineOutlinedIcon sx={iconSize} />}
-                sx={iconStyling}
-              >
-                Delete
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      ))}
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(handleProfileClick, contact)}
+                  startIcon={<ContactProfileIcon contact={contact} sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Profile
+                </MenuItem>
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(handleSendMessage, contact)}
+                  startIcon={
+                    <SendIcon
+                      sx={{
+                        ...iconSize,
+                        color: '#808080',
+                        cursor: 'pointer'
+                      }}
+                    />
+                  }
+                  sx={iconStyling}
+                >
+                  Message
+                </MenuItem>
+                {/* TODO: Keep copy function? */}
+                {/* If so, also add to Desktop table? */}
+                {/* Maybe without any icon. Simply click on the web ID and it will copy? */}
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(
+                    () =>
+                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
+                    contact
+                  )}
+                  startIcon={<ContentCopyIcon sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Copy WebId
+                </MenuItem>
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(editContact, contact)}
+                  startIcon={<EditIconOutlined sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Edit
+                </MenuItem>
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(deleteContact, contact)}
+                  startIcon={<DeleteOutlineOutlinedIcon sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Delete
+                </MenuItem>
+              </Menu>
+            </Card>
+          </Box>
+        ))}
+      </Box>
     </Box>
   );
 };

src/components/Documents/DocumentCard.jsx

@@ -0,0 +1,174 @@
+// 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';
+// Utility Imports
+import { truncateText, getTypeText } from '@utils';
+
+/**
+ * @typedef {object} Document
+ * @property {string} id - The unique id of the 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 - A component that displays a single document's information
+ * and provides actions (preview, share, delete) through a context menu.
+ *
+ * @memberof Documents
+ * @name DocumentCard
+ * @param {object} props - Component props
+ * @param {Document} props.document - The document object to be displayed
+ * @param {Function} props.onPreview - Function to handle the "Preview" action
+ * @param {Function} props.onShare - Function to handle the "Share" action
+ * @param {Function} props.onDelete - Function to handle the "Delete" action
+ * @returns {React.JSX.Element} The DocumentCard component
+ */
+const DocumentCard = ({ document, onShare, onDelete, onPreview }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [openMenu, setOpenMenu] = useState(null);
+
+  // Opens the context menu
+  const handleClick = (event, clickedDocument) => {
+    setAnchorEl(event.currentTarget);
+    setOpenMenu(clickedDocument.id);
+  };
+
+  // Closes the context menu
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpenMenu(null);
+  };
+
+  // Handles the click on a context menu item, executing the corresponding action
+  const handleMenuItemClick = (action, clickedDocument) => () => {
+    action(clickedDocument);
+    handleClose();
+  };
+
+  // Icon styles
+  const iconSize = {
+    height: '24px',
+    width: '24px'
+  };
+
+  const iconStyling = {
+    width: '100%'
+  };
+
+  return (
+    <Box>
+      <Card
+        sx={{
+          my: '5px',
+          position: 'relative'
+        }}
+      >
+        <CardContent>
+          <Box sx={{ maxWidth: '90%' }}>
+            <Typography
+              sx={{
+                fontWeight: 'bold'
+              }}
+              variant="body1"
+              component="div"
+              noWrap
+            >
+              {document.name || '[Untitled document]'}
+            </Typography>
+            <Typography variant="body2" component="div" noWrap>
+              {document.type ? `Type: ${getTypeText(document.type)}` : 'Type: Other'}
+            </Typography>
+
+            <Typography variant="body2" component="div" noWrap>
+              {document.uploadDate
+                ? `Uploaded: ${document.uploadDate.toLocaleDateString()}`
+                : 'Uploaded: N/A'}
+            </Typography>
+            <Typography variant="body2" component="div" noWrap>
+              {document.endDate
+                ? `Expires: ${document.endDate.toLocaleDateString()}`
+                : 'Expires: N/A'}
+            </Typography>
+            {document.description && (
+              <Typography variant="body2" component="div" color="text.secondary" sx={{ mt: '5px' }}>
+                <em>{truncateText(document.description, 140)}</em>
+              </Typography>
+            )}
+          </Box>
+          <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}
+              aria-label="open-actions-menu"
+              onClick={(event) => handleClick(event, document)}
+            >
+              <MoreVertIcon />
+            </IconButton>
+          </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;