Added error boundary to the ByAsset page. Added useRef to the SimpleTable utility.
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user