Release/0.0.3 to main (#254)
* CEC-2628 - Display IP in digital twin in portal (#251) * CEC-3453 Update security dll instructions (#252) * CEC-2752-Add-Mobile-Issue-Tracker (#250) * first commit * removed comments * remove more comments * fix build issues * fix unused vars * update snapshot * fix test * Fix connect ECONNREFUSED 127.0.0.1:80 * Test Magna side menu * attempt to pass test * fix test * remove comments * fix some code smells * fix test * resolve comments * fix bug * resolved comments * resolve comments * resolve comments * update snapshot * resolved comments Co-authored-by: jwu-fisker <jwu@fiskerinc.com> * Cec 2752 small fix (#253) * first commit * removed comments * remove more comments * fix build issues * fix unused vars * update snapshot * fix test * Fix connect ECONNREFUSED 127.0.0.1:80 * Test Magna side menu * attempt to pass test * fix test * remove comments * fix some code smells * fix test * resolve comments * fix bug * resolved comments * resolve comments * resolve comments * update snapshot * resolved comments * small fix Co-authored-by: jwu-fisker <jwu@fiskerinc.com> Co-authored-by: Paul Adamsen <117673433+pauladamseniii@users.noreply.github.com> Co-authored-by: das31 <31259710+das31@users.noreply.github.com>
This commit is contained in:
John Wu
217
src/components/Controls/IssueSelectionTable/index.jsx
Normal file
217
src/components/Controls/IssueSelectionTable/index.jsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Button,
|
||||
} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useIssueContext } from "../../Contexts/IssueContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
import { RoleWrap } from "../RoleWrap";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { Permissions } from "../../../utils/roles";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "id",
|
||||
label: "Id",
|
||||
},
|
||||
{
|
||||
id: "vin",
|
||||
label: "VIN",
|
||||
},
|
||||
{
|
||||
id: "title",
|
||||
label: "Title",
|
||||
},
|
||||
{
|
||||
id: "description",
|
||||
label: "Description",
|
||||
},
|
||||
{
|
||||
id: "driver_id",
|
||||
label: "Driver ID",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "",
|
||||
label: "",
|
||||
},
|
||||
];
|
||||
|
||||
const PAGE_SIZE = "ISSUE_SELECTION_TABLE_PAGE_SIZE";
|
||||
|
||||
const IssueSelectionTable = (props) => {
|
||||
const {
|
||||
token,
|
||||
classes,
|
||||
search,
|
||||
multiSelect,
|
||||
selected,
|
||||
onSelectAll,
|
||||
} = props;
|
||||
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("created_at");
|
||||
const [order, setOrder] = useState("asc");
|
||||
const { getIssues, issues, totalIssues } = useIssueContext();
|
||||
const { groups, providers } = useUserContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
const handleSort = (_event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("desc");
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePageIndex = (_event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSelectAll = (event) => {
|
||||
if (!onSelectAll) return;
|
||||
|
||||
const newSelected = [];
|
||||
if (event.target.checked) {
|
||||
issues.forEach((car) => {
|
||||
newSelected.push(car.vin);
|
||||
});
|
||||
}
|
||||
|
||||
onSelectAll(newSelected);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
await getIssues(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, orderBy, order, search, token]);
|
||||
|
||||
useEffect(() => {
|
||||
setPageIndex(0);
|
||||
}, [search]);
|
||||
|
||||
const { deleteIssue } = useIssueContext();
|
||||
const handleDelete = (id) => {
|
||||
deleteIssue(id, token).then(() => {
|
||||
getIssues(token)
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
multiSelect={multiSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
selectCount={selected ? selected.length : 0}
|
||||
rowCount={issues ? issues.length : 0}
|
||||
/>
|
||||
<TableBody>
|
||||
{issues.map((row) => {
|
||||
return (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">
|
||||
<Link to={`/issue-info/${row.id}`}>{row.id}</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.vin}</TableCell>
|
||||
<TableCell align="center">{row.title}</TableCell>
|
||||
<TableCell align="center">{row.description || ""}</TableCell>
|
||||
<TableCell align="center">{row.driver_id}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.timestamp)}
|
||||
</TableCell>
|
||||
<RoleWrap
|
||||
groups={groups}
|
||||
providers={providers}
|
||||
rolesPerProvider={Permissions.FiskerDelete}
|
||||
>
|
||||
<TableCell>
|
||||
<Button onClick={() => handleDelete(row.id)}>Delete</Button>
|
||||
</TableCell>
|
||||
</RoleWrap>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
{totalIssues === 0 ? (
|
||||
<p>No issues found</p>
|
||||
) : (
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={7}
|
||||
count={totalIssues}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
)}
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
IssueSelectionTable.propTypes = {
|
||||
token: PropTypes.string.isRequired,
|
||||
classes: PropTypes.object.isRequired,
|
||||
multiSelect: PropTypes.bool,
|
||||
selected: PropTypes.array,
|
||||
onSelect: PropTypes.func,
|
||||
onSelectAll: PropTypes.func,
|
||||
};
|
||||
|
||||
export default IssueSelectionTable;
|
||||
Reference in New Issue
Block a user