Added error boundary to the ByAsset page. Added useRef to the SimpleTable utility.

This commit is contained in:
2024-02-14 08:48:21 -08:00
parent 4d20bf73b7
commit 57fc5583f7
3 changed files with 32 additions and 26 deletions

View File

@@ -30,6 +30,7 @@ import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import {ErrorBoundary} from "react-error-boundary";
const cssTwoColumnContainer = {
display: 'grid',
@@ -174,30 +175,32 @@ const AssignmentsByAsset = () => {
return (
<>
<ul>
{data.map((next, i) => (
<li key={next._id}>
{next.person && (
<>
User: <Link to={"/assignments/byPerson"} state={{search: next.person.lastName, person: next.person}}>{next.person.firstName} {next.person.lastName} {next.person.grade ? "~ " + next.person.grade : ""} ({next.email})</Link><br/>
</>
)}
{!next.person && (
<>
User: N/A<br/>
</>
)}
{/*Device ID: <Link to={"/search?deviceId=" + encodeURIComponent(next.deviceId)}>{next.deviceId}</Link><br/>*/}
{/*{next.asset && (*/}
{/* <>Asset ID: <Link to={"/search?assetId=" + encodeURIComponent(next.asset.assetId)}>{next.asset.assetId}</Link><br/></>*/}
{/*)}*/}
{/*<>Asset Type: {next.assetType ? next.assetType.name : "Unknown"}<br/></>*/}
{/*Serial: <Link to={"/search?serial=" + encodeURIComponent(next.serial)}>{next.serial}</Link><br/>*/}
{new Date(next.startTime).toLocaleDateString("en-US") + "-" + new Date(next.endTime).toLocaleDateString("en-US") + " @ " + new Date(next.endTime).toLocaleTimeString("en-US")} ({Math.ceil(((next.endTime ? next.endTime : new Date().getTime()) - next.startTime) / (1000*60*60*24))} days)<br/>
{/*{next.assignedTo && (*/}
{/* <>Currently assigned to: {next.assignedTo.firstName} {next.assignedTo.lastName} {next.assignedTo.grade ? "~ " + next.assignedTo.grade : ""} ({next.assignedTo.email})</>*/}
{/*)}*/}
</li>
))}
<ErrorBoundary fallback={<li>Error</li>}>
{data && data.map && data.map((next, i) => (
<li key={next._id}>
{next.person && (
<>
User: <Link to={"/assignments/byPerson"} state={{search: next.person.lastName, person: next.person}}>{next.person.firstName} {next.person.lastName} {next.person.grade ? "~ " + next.person.grade : ""} ({next.email})</Link><br/>
</>
)}
{!next.person && (
<>
User: N/A<br/>
</>
)}
{/*Device ID: <Link to={"/search?deviceId=" + encodeURIComponent(next.deviceId)}>{next.deviceId}</Link><br/>*/}
{/*{next.asset && (*/}
{/* <>Asset ID: <Link to={"/search?assetId=" + encodeURIComponent(next.asset.assetId)}>{next.asset.assetId}</Link><br/></>*/}
{/*)}*/}
{/*<>Asset Type: {next.assetType ? next.assetType.name : "Unknown"}<br/></>*/}
{/*Serial: <Link to={"/search?serial=" + encodeURIComponent(next.serial)}>{next.serial}</Link><br/>*/}
{new Date(next.startTime).toLocaleDateString("en-US") + "-" + new Date(next.endTime).toLocaleDateString("en-US") + " @ " + new Date(next.endTime).toLocaleTimeString("en-US")} ({Math.ceil(((next.endTime ? next.endTime : new Date().getTime()) - next.startTime) / (1000*60*60*24))} days)<br/>
{/*{next.assignedTo && (*/}
{/* <>Currently assigned to: {next.assignedTo.firstName} {next.assignedTo.lastName} {next.assignedTo.grade ? "~ " + next.assignedTo.grade : ""} ({next.assignedTo.email})</>*/}
{/*)}*/}
</li>
))}
</ErrorBoundary>
</ul>
</>
)

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, {useRef, useState} from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
@@ -48,6 +48,7 @@ const cssTopControls = {
*/
export default ({columns, rows, options}) => {
const [selected, setSelected] = useState(undefined);
const tableContainer = useRef(null)
let selectRow = (e, row) => {
setSelected(row);
@@ -67,6 +68,7 @@ export default ({columns, rows, options}) => {
const addRow = () => {
setEdited({});
setTimeout(() => tableContainer.current.scrollTo({top: 0, left: 0, behavior: "smooth"}),0)
}
let containerStyle = options.maxHeight ? {maxHeight: options.maxHeight} : {}
@@ -131,7 +133,7 @@ export default ({columns, rows, options}) => {
{options.add && <Button variant="text" className="button" onClick={addRow}>Add</Button>}
{options.remove && _.isFunction(options.remove) && <Button disabled={!selected} variant='text' className='button' onClick={() => {selected && options.remove(selected)}}>Remove</Button>}
</div>
<TableContainer className="simpleTable" component={Paper} style={containerStyle}>
<TableContainer ref={tableContainer} className="simpleTable" component={Paper} style={containerStyle}>
<Table size="small" aria-label="Table" tabIndex="0" onKeyDown={keyHandler}>
<TableHead className="sticky">
<TableRow>

View File

@@ -30,6 +30,7 @@
"mongodb": "^4.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.11",
"react-router-dom": "^6.3.0",
"typescript": "^4.8.4",
"umbrellajs": "^3.3.1",