wcrisman/Tempest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2024-02-14 08:48:21 -08:00
parent 4d20bf73b7
commit 57fc5583f7
3 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
imports/ui/pages/Assignments/ByAsset.jsx
View File

@@ -30,6 +30,7 @@ import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext'; import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList'; import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel'; import TabPanel from '@mui/lab/TabPanel';
import {ErrorBoundary} from "react-error-boundary";
const cssTwoColumnContainer = { const cssTwoColumnContainer = {
display: 'grid', display: 'grid',
@@ -174,30 +175,32 @@ const AssignmentsByAsset = () => {
return ( return (
<> <>
<ul> <ul>
{data.map((next, i) => ( <ErrorBoundary fallback={<li>Error</li>}>
<li key={next._id}> {data && data.map && data.map((next, i) => (
{next.person && ( <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/> <>
</> 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 && ( )}
<> {!next.person && (
User: N/A<br/> <>
</> User: N/A<br/>
)} </>
{/*Device ID: <Link to={"/search?deviceId=" + encodeURIComponent(next.deviceId)}>{next.deviceId}</Link><br/>*/} )}
{/*{next.asset && (*/} {/*Device ID: <Link to={"/search?deviceId=" + encodeURIComponent(next.deviceId)}>{next.deviceId}</Link><br/>*/}
{/* <>Asset ID: <Link to={"/search?assetId=" + encodeURIComponent(next.asset.assetId)}>{next.asset.assetId}</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/>*/} {/*<>Asset Type: {next.assetType ? next.assetType.name : "Unknown"}<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/> {/*Serial: <Link to={"/search?serial=" + encodeURIComponent(next.serial)}>{next.serial}</Link><br/>*/}
{/*{next.assignedTo && (*/} {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/>
{/* <>Currently assigned to: {next.assignedTo.firstName} {next.assignedTo.lastName} {next.assignedTo.grade ? "~ " + next.assignedTo.grade : ""} ({next.assignedTo.email})</>*/} {/*{next.assignedTo && (*/}
{/*)}*/} {/* <>Currently assigned to: {next.assignedTo.firstName} {next.assignedTo.lastName} {next.assignedTo.grade ? "~ " + next.assignedTo.grade : ""} ({next.assignedTo.email})</>*/}
</li> {/*)}*/}
))} </li>
))}
</ErrorBoundary>
</ul> </ul>
</> </>
) )

6
imports/ui/util/SimpleTable.jsx
View File

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

1
package.json
View File

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