CEC-3519 Add car version history (#260)
* CEC-3519 Add car version history CEC-3455 Delete button is icon and remove column CEC-3496 Fix Issue delete * smell * Remove tab from issues details page * Fix date format
This commit is contained in:
John Wu
136
src/components/Controls/CarVersionLogTable/index.jsx
Normal file
136
src/components/Controls/CarVersionLogTable/index.jsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow
|
||||
} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "version_source",
|
||||
label: "Type",
|
||||
},
|
||||
{
|
||||
id: "version",
|
||||
label: "Version",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Date",
|
||||
},
|
||||
];
|
||||
|
||||
const PAGE_SIZE = "CAR_VERSIONLOG_TABLE_PAGE_SIZE";
|
||||
|
||||
const CarVersionLogTable = ({ vin, token, classes }) => {
|
||||
const [versions, setVersions] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("created_at");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const { getVersionLog } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!vin || !token) return;
|
||||
const result = await getVersionLog(
|
||||
{
|
||||
vin,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
setVersions(result.data);
|
||||
if (result.total > -1) setTotal(result.total);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [vin, token, pageIndex, pageSize, orderBy, order]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSort = (event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{versions && versions.map((row, i) => (
|
||||
<TableRow key={`row${i}`}>
|
||||
<TableCell align="center">{row.version_source}</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">{LocalDateTimeString(row.created_at)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={3}
|
||||
count={total}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarVersionLogTable;
|
||||
@@ -1,26 +1,26 @@
|
||||
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,
|
||||
TableRow
|
||||
} from "@material-ui/core";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import clsx from "clsx";
|
||||
import PropTypes from "prop-types";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { Permissions } from "../../../utils/roles";
|
||||
import { useIssueContext } from "../../Contexts/IssueContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
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 = [
|
||||
{
|
||||
@@ -35,10 +35,6 @@ const tableColumns = [
|
||||
id: "title",
|
||||
label: "Title",
|
||||
},
|
||||
{
|
||||
id: "description",
|
||||
label: "Description",
|
||||
},
|
||||
{
|
||||
id: "driver_id",
|
||||
label: "Driver ID",
|
||||
@@ -69,7 +65,7 @@ const IssueSelectionTable = (props) => {
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("created_at");
|
||||
const [order, setOrder] = useState("asc");
|
||||
const { getIssues, issues, totalIssues = 0 } = useIssueContext();
|
||||
const { deleteIssue, getIssues, issues, totalIssues = 0 } = useIssueContext();
|
||||
const { groups, providers } = useUserContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
@@ -132,12 +128,19 @@ const IssueSelectionTable = (props) => {
|
||||
setPageIndex(0);
|
||||
}, [search]);
|
||||
|
||||
const { deleteIssue } = useIssueContext();
|
||||
const handleDelete = (id) => {
|
||||
deleteIssue(id, token).then(() => {
|
||||
getIssues(token)
|
||||
getIssues(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
@@ -161,7 +164,6 @@ const IssueSelectionTable = (props) => {
|
||||
</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)}
|
||||
@@ -172,7 +174,9 @@ const IssueSelectionTable = (props) => {
|
||||
rolesPerProvider={Permissions.FiskerDelete}
|
||||
>
|
||||
<TableCell>
|
||||
<Button onClick={() => handleDelete(row.id)}>Delete</Button>
|
||||
<Link to="#" onClick={() => handleDelete(row.id)}>
|
||||
<DeleteIcon />
|
||||
</Link>
|
||||
</TableCell>
|
||||
</RoleWrap>
|
||||
</TableRow>
|
||||
@@ -181,12 +185,9 @@ const IssueSelectionTable = (props) => {
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
{totalIssues === 0 ? (
|
||||
<td>No issues found</td>
|
||||
) : (
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={7}
|
||||
colSpan={6}
|
||||
count={totalIssues}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
@@ -197,7 +198,6 @@ const IssueSelectionTable = (props) => {
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
)}
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
|
||||
Reference in New Issue
Block a user