IO-710 Export Log Setup. [ci skip]
This commit is contained in:
Patrick Fic
230
client/src/pages/export-logs/export-logs.page.component.jsx
Normal file
230
client/src/pages/export-logs/export-logs.page.component.jsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import { SyncOutlined } from "@ant-design/icons";
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { Button, Card, Input, Space, Table, Typography } from "antd";
|
||||
import _ from "lodash";
|
||||
import queryString from "query-string";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import AlertComponent from "../../components/alert/alert.component";
|
||||
import JobRemoveFromPartsQueue from "../../components/job-remove-from-parst-queue/job-remove-from-parts-queue.component";
|
||||
import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import { TimeAgoFormatter } from "../../utils/DateFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export function PartsQueuePageComponent({ bodyshop }) {
|
||||
const searchParams = queryString.parse(useLocation().search);
|
||||
const { page, sortcolumn, sortorder, search } = searchParams;
|
||||
const history = useHistory();
|
||||
|
||||
const { loading, error, data, refetch } = useQuery(
|
||||
QUERY_EXPORT_LOG_PAGINATED,
|
||||
{
|
||||
variables: {
|
||||
//search: search || "",
|
||||
offset: page ? (page - 1) * 25 : 0,
|
||||
limit: 25,
|
||||
order: sortcolumn && [
|
||||
{
|
||||
[sortcolumn || "created_at"]: sortorder
|
||||
? sortorder === "descend"
|
||||
? "desc"
|
||||
: "asc"
|
||||
: "desc",
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
searchParams.page = pagination.current;
|
||||
searchParams.sortcolumn = sorter.columnKey;
|
||||
searchParams.sortorder = sorter.order;
|
||||
if (filters.status) {
|
||||
searchParams.statusFilters = JSON.stringify(
|
||||
_.flattenDeep(filters.status)
|
||||
);
|
||||
} else {
|
||||
delete searchParams.statusFilters;
|
||||
}
|
||||
history.push({ search: queryString.stringify(searchParams) });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("jobs.fields.ro_number"),
|
||||
dataIndex: "ro_number",
|
||||
key: "ro_number",
|
||||
sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
|
||||
sortOrder: sortcolumn === "ro_number" && sortorder,
|
||||
|
||||
render: (text, record) => (
|
||||
<Link to={"/manage/jobs/" + record.id}>
|
||||
{(record.job && record.job.ro_number) || t("general.labels.na")}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.owner"),
|
||||
dataIndex: "owner",
|
||||
key: "owner",
|
||||
// sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
// sortOrder: sortcolumn === "owner" && sortorder,
|
||||
render: (text, record) => {
|
||||
return record.owner ? (
|
||||
<Link to={"/manage/owners/" + record.owner.id}>
|
||||
{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
|
||||
record.ownr_co_nm || ""
|
||||
}`}
|
||||
</Link>
|
||||
) : (
|
||||
<span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
|
||||
record.ownr_co_nm || ""
|
||||
}`}</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: t("jobs.fields.vehicle"),
|
||||
dataIndex: "vehicle",
|
||||
key: "vehicle",
|
||||
ellipsis: true,
|
||||
render: (text, record) => {
|
||||
return record.vehicleid ? (
|
||||
<Link to={"/manage/vehicles/" + record.vehicleid}>
|
||||
{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
|
||||
record.v_model_desc || ""
|
||||
}`}
|
||||
</Link>
|
||||
) : (
|
||||
<span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
|
||||
record.v_model_desc || ""
|
||||
}`}</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("vehicles.fields.plate_no"),
|
||||
dataIndex: "plate_no",
|
||||
key: "plate_no",
|
||||
sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
|
||||
sortOrder: sortcolumn === "plate_no" && sortorder,
|
||||
render: (text, record) => {
|
||||
return record.plate_no ? record.plate_no : "";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.clm_no"),
|
||||
dataIndex: "clm_no",
|
||||
key: "clm_no",
|
||||
ellipsis: true,
|
||||
sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
|
||||
sortOrder: sortcolumn === "clm_no" && sortorder,
|
||||
render: (text, record) => {
|
||||
return record.clm_no ? (
|
||||
<span>{record.clm_no}</span>
|
||||
) : (
|
||||
t("general.labels.unknown")
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.clm_total"),
|
||||
dataIndex: "clm_total",
|
||||
key: "clm_total",
|
||||
sorter: (a, b) => a.clm_total - b.clm_total,
|
||||
sortOrder: sortcolumn === "clm_total" && sortorder,
|
||||
render: (text, record) => {
|
||||
return record.clm_total ? (
|
||||
<CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
|
||||
) : (
|
||||
t("general.labels.unknown")
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("jobs.fields.updated_at"),
|
||||
dataIndex: "updated_at",
|
||||
key: "updated_at",
|
||||
render: (text, record) => (
|
||||
<TimeAgoFormatter>{record.updated_at}</TimeAgoFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("general.labels.actions"),
|
||||
dataIndex: "actions",
|
||||
key: "actions",
|
||||
render: (text, record) => (
|
||||
<JobRemoveFromPartsQueue jobId={record.id} refetch={refetch} />
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
extra={
|
||||
<Space wrap>
|
||||
{searchParams.search && (
|
||||
<>
|
||||
<Typography.Title level={4}>
|
||||
{t("general.labels.searchresults", {
|
||||
search: searchParams.search,
|
||||
})}
|
||||
</Typography.Title>
|
||||
<Button
|
||||
onClick={() => {
|
||||
delete searchParams.search;
|
||||
history.push({ search: queryString.stringify(searchParams) });
|
||||
}}
|
||||
>
|
||||
{t("general.actions.clear")}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button onClick={() => refetch()}>
|
||||
<SyncOutlined />
|
||||
</Button>
|
||||
<Input.Search
|
||||
placeholder={searchParams.search || t("general.labels.search")}
|
||||
onSearch={(value) => {
|
||||
searchParams.search = value;
|
||||
history.push({ search: queryString.stringify(searchParams) });
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
loading={loading}
|
||||
pagination={{
|
||||
position: "top",
|
||||
pageSize: 25,
|
||||
current: parseInt(page || 1),
|
||||
total: data && data.exportlog_aggregate.aggregate.count,
|
||||
}}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={data && data.exportlog}
|
||||
style={{ height: "100%" }}
|
||||
scroll={{ x: true }}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, null)(PartsQueuePageComponent);
|
||||
36
client/src/pages/export-logs/export-logs.page.container.jsx
Normal file
36
client/src/pages/export-logs/export-logs.page.container.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
|
||||
import {
|
||||
setBreadcrumbs,
|
||||
setSelectedHeader,
|
||||
} from "../../redux/application/application.actions";
|
||||
import ExportLogsPage from "./export-logs.page.component";
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
||||
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
|
||||
});
|
||||
|
||||
export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("titles.export-logs");
|
||||
setSelectedHeader("export-logs");
|
||||
setBreadcrumbs([
|
||||
{
|
||||
link: "/manage/accounting/exportlogs",
|
||||
label: t("titles.bc.export-logs"),
|
||||
},
|
||||
]);
|
||||
}, [setBreadcrumbs, t, setSelectedHeader]);
|
||||
|
||||
return (
|
||||
<RbacWrapper action="accounting:exportlogs">
|
||||
<ExportLogsPage />
|
||||
</RbacWrapper>
|
||||
);
|
||||
}
|
||||
export default connect(null, mapDispatchToProps)(ExportsLogPageContainer);
|
||||
@@ -150,6 +150,9 @@ const Help = lazy(() => import("../help/help.page"));
|
||||
const PartsQueue = lazy(() =>
|
||||
import("../parts-queue/parts-queue.page.container")
|
||||
);
|
||||
const ExportLogs = lazy(() =>
|
||||
import("../export-logs/export-logs.page.container")
|
||||
);
|
||||
const EmailTest = lazy(() =>
|
||||
import("../../components/email-test/email-test-component")
|
||||
);
|
||||
@@ -307,7 +310,6 @@ export function Manage({ match, conflict, bodyshop }) {
|
||||
component={JobsAvailablePage}
|
||||
/>
|
||||
<Route exact path={`${match.path}/shop/`} component={ShopPage} />
|
||||
|
||||
{
|
||||
// <Route
|
||||
// exact
|
||||
@@ -315,7 +317,6 @@ export function Manage({ match, conflict, bodyshop }) {
|
||||
// component={ShopTemplates}
|
||||
// />
|
||||
}
|
||||
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/shop/vendors`}
|
||||
@@ -341,7 +342,13 @@ export function Manage({ match, conflict, bodyshop }) {
|
||||
path={`${match.path}/accounting/payments`}
|
||||
component={AccountingPayments}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/accounting/exportlogs`}
|
||||
component={ExportLogs}
|
||||
/>
|
||||
<Route exact path={`${match.path}/partsqueue`} component={PartsQueue} />
|
||||
|
||||
<Route exact path={`${match.path}/payments`} component={PaymentsAll} />
|
||||
<Route exact path={`${match.path}/shiftclock`} component={ShiftClock} />
|
||||
<Route exact path={`${match.path}/scoreboard`} component={Scoreboard} />
|
||||
|
||||
Reference in New Issue
Block a user