WIP participants table

constants/index.js

@@ -25,6 +25,11 @@ import {
 } from './vars'
 import { THEME, fontSize } from './theme'
 
+const SORT_DIRECTION = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+}
+
 export {
   ADMIN_ROLE,
   ADMIN_TABLE_COLUMN_NUMBER,
@@ -44,6 +49,7 @@ export {
   N_A,
   NOTIFICATION_DEFAULT,
   ROLE_OPTIONS,
+  SORT_DIRECTION,
   TOTAL_LABEL,
   TOTALS,
   THEME,

views/components/Table/index.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import {
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Box,
+  TableSortLabel,
+} from '@mui/material'
+import { visuallyHidden } from '@mui/utils'
+import { SORT_DIRECTION, fontSize } from '../../../constants'
+
+function EnhancedTableHead(props) {
+  const { sortDirection, sortProperty, onRequestSort, headCells } = props
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property)
+  }
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.dataProperty}
+            sortDirection={
+              sortProperty === headCell.dataProperty ? sortDirection : false
+            }
+            sx={{ fontSize: fontSize[12], fontWeight: 400 }}
+          >
+            {headCell.sortable ? (
+              <TableSortLabel
+                active={sortProperty === headCell.dataProperty}
+                direction={
+                  sortProperty === headCell.dataProperty
+                    ? sortDirection
+                    : SORT_DIRECTION.ASC
+                }
+                onClick={createSortHandler(headCell.dataProperty)}
+              >
+                {headCell.label}
+                {sortProperty === headCell.dataProperty ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {sortDirection === SORT_DIRECTION.DESC
+                      ? 'sorted descending'
+                      : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  )
+}
+
+const Table = (props) => {
+  const {
+    cellRenderer,
+    data,
+    headers,
+    sortDirection,
+    sortProperty,
+    handleRequestSort,
+  } = props
+
+  return (
+    <TableContainer component={Paper}>
+      <MuiTable size="small">
+        <EnhancedTableHead
+          sortDirection={sortDirection}
+          sortProperty={sortProperty}
+          onRequestSort={handleRequestSort}
+          headCells={headers}
+        />
+        <TableBody>
+          {data.map((rowData) => (
+            <TableRow>
+              {headers.map((header) => (
+                <TableCell key={header.dataProperty}>
+                  {cellRenderer(rowData, header.dataProperty)}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </MuiTable>
+    </TableContainer>
+  )
+}
+
+export default Table

views/components/VirtualTables/ParticipantsTable/index.jsx

@@ -1,101 +1,76 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
-import { Column, Table } from 'react-virtualized'
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
-import CheckBoxIcon from '@mui/icons-material/CheckBox'
 import { Checkbox } from '@mui/material'
 import StarBorder from '@mui/icons-material/StarBorder'
 import Star from '@mui/icons-material/Star'
-import { routes } from '../../../routes/routes'
-import '../Table.css'
-import {
-  DRAWER_WIDTH,
-  ADMIN_TABLE_MAX_WIDTH,
-  TABLE_ROW_HEIGHT,
-} from '../../../../constants'
+
+import Table from '../../Table'
+import { SORT_DIRECTION } from '../../../../constants'
 
 const ParticipantsTable = (props) => {
-  return (
-    <Table
-      width={
-        props.width < ADMIN_TABLE_MAX_WIDTH
-          ? props.width
-          : props.width - DRAWER_WIDTH
-      }
-      height={props.height}
-      headerHeight={TABLE_ROW_HEIGHT}
-      headerClassName="ParticipantTableHeader"
-      rowHeight={TABLE_ROW_HEIGHT}
-      rowCount={props.rowCount}
-      rowGetter={({ index }) => props.participants.find((_, i) => i === index)}
-      rowClassName="ParticipantTableRow"
-      sort={props.sort}
-      sortBy={props.sortBy}
-      sortDirection={props.sortDirection}
-    >
-      <Column
-        label="Participant"
-        dataKey="subject"
-        width={props.width / 5}
-        cellRenderer={({ rowData: { study, subject } }) => {
-          return (
-            <Link
-              style={{ textDecoration: 'none' }}
-              to={routes.dashboard(study, subject)}
-            >
-              {subject}
-            </Link>
-          )
-        }}
-      />
-      <Column
-        label="Study"
-        dataKey="study"
-        width={props.width / 5}
-        cellRenderer={({ rowData }) => {
-          return (
-            <Link
-              style={{ textDecoration: 'none' }}
-              to={`/dashboard/${rowData.study}`}
-            >
-              {rowData.study}
-            </Link>
-          )
-        }}
-      />
-      <Column
-        label="Complete"
-        cellRenderer={({ rowData: { study, subject, complete } }) => (
-          <Checkbox
-            name={`complete-${study}`}
-            icon={<CheckBoxOutlineBlankIcon />}
-            checkedIcon={
-              <CheckBoxIcon style={{ color: 'rgba(0, 0, 0, 0.54)' }} />
-            }
-            checked={complete}
-            disableRipple={true}
-            value={subject}
-            onChange={props.onUpdate}
-          />
-        )}
-        width={props.width / 5}
-      />
-      <Column
-        label="Star"
-        cellRenderer={({ rowData: { study, subject, star } }) => (
+  const {
+    onSort,
+    sortProperty,
+    sortDirection,
+    sortable,
+    participants,
+    onUpdate,
+  } = props
+  const handleRequestSort = (_event, property) => {
+    const isAsc =
+      sortProperty === property && sortDirection === SORT_DIRECTION.ASC
+    return onSort(property, isAsc ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC)
+  }
+  const headers = [
+    {
+      dataProperty: 'subject',
+      label: 'Participant ID',
+      sortable: !!sortable,
+    },
+    {
+      dataProperty: 'study',
+      label: 'Study',
+      sortable: !!sortable,
+    },
+    {
+      dataProperty: 'days',
+      label: 'Days In Study',
+      sortable: !!sortable,
+    },
+    {
+      dataProperty: 'star',
+      label: '',
+      sortable: false,
+    },
+  ]
+  const cellRenderer = (participant, property) => {
+    switch (property) {
+      case 'star':
+        return (
           <Checkbox
-            name={`star-${study}`}
+            name={`star-${participant.study}`}
             disableRipple={true}
             icon={<StarBorder />}
-            checked={star}
+            checked={participant.star || false}
             checkedIcon={<Star style={{ color: '#FFB80A' }} />}
-            value={subject}
-            onChange={props.onUpdate}
+            value={participant.subject}
+            onChange={onUpdate}
           />
-        )}
-        width={props.width / 5}
-      />
-    </Table>
+        )
+
+      default:
+        return participant[property]
+    }
+  }
+
+  return (
+    <Table
+      cellRenderer={cellRenderer}
+      data={participants}
+      headers={headers}
+      sortDirection={sortDirection}
+      sortProperty={sortProperty}
+      handleRequestSort={handleRequestSort}
+    />
   )
 }
 

views/layouts/MainLayout/MainLayout.css

@@ -1,3 +1,8 @@
 .MainLayout_container {
   display: flex;
 }
+
+.MainLayout_main {
+  flex-shrink: 0;
+  flex: 1;
+}

views/layouts/MainLayout/index.jsx

@@ -52,7 +52,8 @@ const MainLayout = () => {
   return (
     <div className="MainLayout_container">
       <Sidebar sidebarOpen={true} user={user} onLogout={handleLogout} />
-      <div>
+
+      <main className="MainLayout_main">
         <Outlet
           context={{
             configurations,
@@ -65,7 +66,7 @@ const MainLayout = () => {
             users,
           }}
         />
-      </div>
+      </main>
     </div>
   )
 }