re-worked the terminals page and gateList component for better use with ResponsiveTable
This commit is contained in:
csawatzky
parent
6f0921bf95
commit
02cee8623a
5 changed files with 213 additions and 159 deletions
|
|
@ -1,16 +1,22 @@
|
|||
import { Gate } from "models/Gate";
|
||||
import { Box, Card, Theme } from "@mui/material";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Typography } from "@mui/material";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useMobile } from "hooks";
|
||||
//import MaterialTable from "material-table";
|
||||
//import { getTableIcons } from "common/ResponsiveTable";
|
||||
import { Terminal } from "models/Terminal";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import ResponsiveTable, { Column } from "common/ResponsiveTable";
|
||||
import AddGateFab from "./AddGateFab";
|
||||
import GateSettings from "./GateSettings";
|
||||
import { useGateAPI } from "providers";
|
||||
import { Settings } from "@mui/icons-material";
|
||||
|
||||
interface Props {
|
||||
gates: Gate[];
|
||||
//gates: Gate[];
|
||||
terminals: Terminal[];
|
||||
currentTerminal?: string; //the key of the terminal for the currently selected tab
|
||||
useMobile: boolean;
|
||||
//duplicateGate: (gate: Gate) => void;
|
||||
}
|
||||
|
|
@ -32,12 +38,20 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
}));
|
||||
|
||||
export default function GateList(props: Props) {
|
||||
const { gates, terminals } = props;
|
||||
const {terminals, currentTerminal } = props;
|
||||
// const history = useHistory();
|
||||
const navigate = useNavigate();
|
||||
const isMobile = useMobile();
|
||||
const classes = useStyles();
|
||||
const [gateDialog, setGateDialog] = useState(false);
|
||||
const [tablePage, setTablePage] = useState(0)
|
||||
const [pageSize, setPageSize] = useState(5)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [terminalMap, setTerminalMap] = useState<Map<string, string>>(new Map<string, string>());
|
||||
const gateAPI = useGateAPI();
|
||||
const [gates, setGates] = useState<Gate[]>([])
|
||||
const [selectedGate, setSelectedGate] = useState<Gate | undefined>()
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
const goToGate = (gate: Gate) => {
|
||||
let path = "/terminals/" + gate.key;
|
||||
|
|
@ -52,92 +66,180 @@ export default function GateList(props: Props) {
|
|||
setTerminalMap(map);
|
||||
}, [terminals]);
|
||||
|
||||
const desktopView = () => {
|
||||
return (<Box>Desktop table</Box>)
|
||||
// return (
|
||||
// <MaterialTable
|
||||
// columns={[
|
||||
// {
|
||||
// title: "Gate",
|
||||
// field: "name",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: "Terminals",
|
||||
// field: "settings.terminal",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// },
|
||||
// render: rowData => terminalMap.get(rowData.terminal())
|
||||
// },
|
||||
// {
|
||||
// title: "Duct Type",
|
||||
// field: "settings.ductName",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: "Duct Size(mm)",
|
||||
// field: "settings.ductDiameter",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: "Duct Length(m)",
|
||||
// field: "settings.ductLength",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: "PCA Unit",
|
||||
// field: "settings.pcaType",
|
||||
// headerStyle: {
|
||||
// fontWeight: 650,
|
||||
// fontSize: 20
|
||||
// }
|
||||
// }
|
||||
// ]}
|
||||
// data={gates}
|
||||
// icons={getTableIcons()}
|
||||
// onRowClick={(_, gate) => {
|
||||
// gate && goToGate(gate);
|
||||
// }}
|
||||
// title={""}
|
||||
// options={{
|
||||
// pageSize: 10
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
const loadGates = useCallback(() => {
|
||||
let keys = undefined
|
||||
let types = undefined
|
||||
if(currentTerminal) {
|
||||
keys = [currentTerminal]
|
||||
types = ["terminal"]
|
||||
}
|
||||
gateAPI.listGates(pageSize, pageSize * tablePage, "asc", "name", search, undefined, keys, types).then(resp => {
|
||||
setGates(resp.data.gates.map(gate => Gate.create(gate)))
|
||||
setTotal(resp.data.total)
|
||||
})
|
||||
},[currentTerminal, search])
|
||||
|
||||
useEffect(() => {
|
||||
loadGates()
|
||||
},[currentTerminal, search])
|
||||
|
||||
const handleChange = (event: any) => {
|
||||
setPageSize(event.target.value);
|
||||
};
|
||||
|
||||
const mobileView = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{gates.map((gate, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
className={classes.gateCard}
|
||||
onClick={() => {
|
||||
goToGate(gate);
|
||||
}}>
|
||||
<Box margin={2} fontSize={20} fontWeight={650}>
|
||||
const desktopCols = (): Column<Gate>[] => {
|
||||
return [
|
||||
{
|
||||
title: "Gate",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{gate.name}
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Terminal",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{terminalMap.get(gate.terminal())}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Duct Type",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{gate.settings.ductName}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Duct Size(mm)",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{gate.ductDiameter()}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Duct Length(m)",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{gate.settings.ductLength}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "PCA Unit",
|
||||
render: gate => (
|
||||
<Box padding={2}>
|
||||
<Typography>
|
||||
{gate.settings.pcaType}
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
]
|
||||
}
|
||||
const mobileCols = (): Column<Gate>[] => {
|
||||
return [{
|
||||
title: "",
|
||||
render: gate => {
|
||||
return (
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography margin="auto" marginLeft={0} fontWeight={650} fontSize={20}>
|
||||
{gate.name}
|
||||
</Typography>
|
||||
<IconButton onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
setSelectedGate(gate)
|
||||
setGateDialog(true)
|
||||
}}>
|
||||
<Settings />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
const gutter = (gate: Gate) => {
|
||||
return(
|
||||
<Box>
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography>Terminal:</Typography>
|
||||
<Typography>{terminalMap.get(gate.terminal()) ?? "None"}</Typography>
|
||||
</Box>
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography>Duct Type:</Typography>
|
||||
<Typography>{gate.ductName() !== "" ? gate.ductName() : "None"}</Typography>
|
||||
</Box>
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography>Duct Size(mm):</Typography>
|
||||
<Typography>{gate.ductDiameter()}</Typography>
|
||||
</Box>
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography>DuctLength(m):</Typography>
|
||||
<Typography>{gate.ductLength()}</Typography>
|
||||
</Box>
|
||||
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
|
||||
<Typography>PCA Unit:</Typography>
|
||||
<Typography>{gate.settings.pcaType !== "" ? gate.settings.pcaType : "None"}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>
|
||||
|
||||
// </Typography>
|
||||
)
|
||||
}
|
||||
|
||||
const gateTable = () => {
|
||||
return (
|
||||
<ResponsiveTable<Gate>
|
||||
page={tablePage}
|
||||
pageSize={pageSize}
|
||||
columns={isMobile || props.useMobile ? mobileCols() : desktopCols()}
|
||||
handleRowsPerPageChange={handleChange}
|
||||
renderGutter={isMobile || props.useMobile ? gutter : undefined}
|
||||
gutterPadding={0}
|
||||
rows={gates}
|
||||
setPage={(page) => {console.log(page)}}
|
||||
total={total}
|
||||
onRowClick={(gate) => {goToGate(gate)}}
|
||||
hideKeys={isMobile || props.useMobile}
|
||||
setSearchText={(search) => setSearch(search)}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
return isMobile || props.useMobile ? mobileView() : desktopView();
|
||||
return <Box>
|
||||
<GateSettings
|
||||
open={gateDialog}
|
||||
gate={selectedGate}
|
||||
close={newGate => {
|
||||
if (newGate) {
|
||||
gates.push(newGate)
|
||||
}
|
||||
setGateDialog(false);
|
||||
}}
|
||||
terminals={terminals}
|
||||
/>
|
||||
<AddGateFab
|
||||
onClick={() => {
|
||||
setGateDialog(true);
|
||||
}}
|
||||
pulse={gates.length < 1}
|
||||
/>
|
||||
{gateTable()}
|
||||
</Box>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue