admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added all jobs page with pagination BOD-80

Browse Source
This commit is contained in:
Patrick Fic
2020-05-15 09:16:58 -07:00
parent 87146fa08d
commit ef96186dfb
12 changed files with 966 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/header/header.component.jsx
View File

@@ -134,6 +134,9 @@ function Header({
<Menu.Item key='activejobs'>
<Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
</Menu.Item>
<Menu.Item key='alljobs'>
<Link to='/manage/jobs/all'>{t("menus.header.alljobs")}</Link>
</Menu.Item>
<Menu.Item key='availablejobs'>
<Link to='/manage/available'>
{t("menus.header.availablejobs")}

220
client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx Normal file
View File

@@ -0,0 +1,220 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button, Input, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";
import StartChatButton from "../chat-open-button/chat-open-button.component";
import { useHistory } from "react-router-dom";
export default function JobsList({
searchTextState,
refetch,
loading,
jobs,
total,
}) {
const search = queryString.parse(useLocation().search);
const { page, sortcolumn, sortorder } = search;
const history = useHistory();
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
});
const { t } = useTranslation();
const setSearchText = searchTextState[1];
const columns = [
{
title: t("jobs.fields.ro_number"),
dataIndex: "ro_number",
key: "ro_number",
width: "8%",
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.ro_number}</Link>
),
},
{
title: t("jobs.fields.est_number"),
dataIndex: "est_number",
key: "est_number",
width: "8%",
sorter: (a, b) => a.est_number - b.est_number,
sortOrder: sortcolumn === "est_number" && sortorder,
render: (text, record) => (
<Link to={"/manage/jobs/" + record.id}>{record.est_number}</Link>
),
},
{
title: t("jobs.fields.owner"),
dataIndex: "ownr_ln",
key: "ownr_ln",
ellipsis: true,
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
width: "25%",
sortOrder: sortcolumn === "owner" && sortorder,
render: (text, record) => {
return record.owner ? (
<Link to={"/manage/owners/" + record.owner.id}>
{`${record.ownr_fn} ${record.ownr_ln}`}
</Link>
) : (
<span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
);
},
},
{
title: t("jobs.fields.ownr_ph1"),
dataIndex: "ownr_ph1",
key: "ownr_ph1",
width: "12%",
ellipsis: true,
render: (text, record) => {
return record.ownr_ph1 ? (
<span>
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
<StartChatButton phone={record.ownr_ph1} jobid={record.id} />
</span>
) : null;
},
},
{
title: t("jobs.fields.status"),
dataIndex: "status",
key: "status",
width: "10%",
ellipsis: true,
sorter: (a, b) => alphaSort(a.status, b.status),
sortOrder: sortcolumn === "status" && sortorder,
render: (text, record) => {
return record.status || t("general.labels.na");
},
},
{
title: t("jobs.fields.vehicle"),
dataIndex: "vehicle",
key: "vehicle",
width: "15%",
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",
width: "8%",
ellipsis: true,
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",
width: "12%",
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",
width: "10%",
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.owner_owing"),
dataIndex: "owner_owing",
key: "owner_owing",
width: "8%",
render: (text, record) => (
<CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
),
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
console.log("handleTableChange -> sorter", sorter);
search.page = pagination.current;
search.sortcolumn = sorter.columnKey;
search.sortorder = sorter.order;
history.push({ search: queryString.stringify(search) });
};
return (
<div>
THE RIGHT COMPONENT
<Table
loading={loading}
title={() => {
return (
<div style={{ display: "flex" }}>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
setSearchText(e.target.value);
}}
enterButton
/>
</div>
);
}}
size='small'
pagination={{
position: "top",
pageSize: 25,
current: parseInt(page || 1),
total: total,
}}
columns={columns}
rowKey='id'
dataSource={jobs}
onChange={handleTableChange}
/>
</div>
);
}

60
client/src/graphql/jobs.queries.js
View File

@@ -442,7 +442,6 @@ export const SEARCH_FOR_JOBS = gql`
}
}
`;
//TODO Ensure this is always up to date.
export const QUERY_ALL_JOB_FIELDS = gql`
query QUERY_ALL_JOB_FIELDS($id: uuid!) {
@@ -692,3 +691,62 @@ export const QUERY_ALL_JOB_FIELDS = gql`
}
}
`;
export const QUERY_ALL_JOBS_PAGINATED = gql`
query QUERY_ALL_JOBS_PAGINATED(
$offset: Int
$limit: Int
$order: [jobs_order_by!]!
) {
jobs(offset: $offset, limit: $limit, order_by: $order) {
ownr_fn
ownr_ln
ownr_ph1
ownr_ea
owner {
id
allow_text_message
preferred_contact
}
plate_no
plate_st
v_vin
v_model_yr
v_model_desc
v_make_desc
v_color
vehicleid
actual_completion
actual_delivery
actual_in
est_number
id
ins_co_nm
ins_ct_fn
ins_ct_ln
ins_ph1
ins_ea
est_co_nm
est_ph1
est_ea
est_ct_fn
est_ct_ln
clm_no
clm_total
owner_owing
ro_number
scheduled_completion
scheduled_in
scheduled_delivery
status
updated_at
ded_amt
vehicleid
}
jobs_aggregate {
aggregate {
count(distinct: true)
}
}
}
`;

95
client/src/pages/jobs-all/jobs-all.container.jsx Normal file
View File

@@ -0,0 +1,95 @@
import { useQuery } from "@apollo/react-hooks";
import queryString from "query-string";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
import { QUERY_ALL_JOBS_PAGINATED } from "../../graphql/jobs.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function AllJobs({ bodyshop, setBreadcrumbs }) {
const search = queryString.parse(useLocation().search);
const { page, sortcolumn, sortorder } = search;
const { loading, error, data, refetch } = useQuery(QUERY_ALL_JOBS_PAGINATED, {
variables: {
offset: page ? (page - 1) * 25 : 0,
limit: 25,
order: [
{
[sortcolumn || "est_number"]: sortorder
? sortorder === "descend"
? "desc"
: "asc"
: "desc",
},
],
},
});
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.jobs-all");
setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-all") }]);
}, [t, setBreadcrumbs]);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<div>
<JobsListPaginated
searchTextState={searchTextState}
refetch={refetch}
loading={loading}
searchParams={search}
total={data ? data.jobs_aggregate.aggregate.count : 0}
jobs={
data
? searchText === ""
? data.jobs
: data.jobs.filter(
(j) =>
(j.ro_number || "")
.toString()
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_fn || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_ln || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.plate_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_model_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.v_make_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase())
)
: null
}
/>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(AllJobs);

7
client/src/pages/manage/manage.page.component.jsx
View File

@@ -86,6 +86,8 @@ const ShopTemplates = lazy(() =>
const JobIntake = lazy(() =>
import("../jobs-intake/jobs-intake.page.container")
);
const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
const { Header, Content, Footer } = Layout;
export default function Manage({ match }) {
@@ -123,6 +125,11 @@ export default function Manage({ match }) {
exact
path={`${match.path}/jobs/:jobId/intake`}
component={JobIntake}
/>{" "}
<Route
exact
path={`${match.path}/jobs/all`}
component={AllJobs}
/>
<Route
exact

3
client/src/translations/en_us/common.json
View File

@@ -653,6 +653,7 @@
"header": {
"accounting": "Accounting",
"activejobs": "Active Jobs",
"alljobs": "All Jobs",
"availablejobs": "Available Jobs",
"courtesycars": "Courtesy Cars",
"courtesycars-all": "All Courtesy Cars",
@@ -882,6 +883,7 @@
"invoices-list": "Invoices",
"jobs": "Jobs",
"jobs-active": "Active Jobs",
"jobs-all": "All Jobs",
"jobs-detail": "Job {{number}}",
"jobs-intake": "Intake",
"jobs-new": "Create a New Job",
@@ -903,6 +905,7 @@
"courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)",
"invoices-list": "Invoices | $t(titles.app)",
"jobs": "Active Jobs | $t(titles.app)",
"jobs-all": "All Jobs | $t(titles.app)",
"jobs-create": "Create a New Job | $t(titles.app)",
"jobs-intake": "Intake | $t(titles.app)",
"jobsavailable": "Available Jobs | $t(titles.app)",

3
client/src/translations/es/common.json
View File

@@ -653,6 +653,7 @@
"header": {
"accounting": "",
"activejobs": "Empleos activos",
"alljobs": "",
"availablejobs": "Trabajos disponibles",
"courtesycars": "",
"courtesycars-all": "",
@@ -882,6 +883,7 @@
"invoices-list": "",
"jobs": "",
"jobs-active": "",
"jobs-all": "",
"jobs-detail": "",
"jobs-intake": "",
"jobs-new": "",
@@ -903,6 +905,7 @@
"courtesycars-detail": "",
"invoices-list": "",
"jobs": "Todos los trabajos | $t(titles.app)",
"jobs-all": "",
"jobs-create": "",
"jobs-intake": "",
"jobsavailable": "Empleos disponibles | $t(titles.app)",

3
client/src/translations/fr/common.json
View File

@@ -653,6 +653,7 @@
"header": {
"accounting": "",
"activejobs": "Emplois actifs",
"alljobs": "",
"availablejobs": "Emplois disponibles",
"courtesycars": "",
"courtesycars-all": "",
@@ -882,6 +883,7 @@
"invoices-list": "",
"jobs": "",
"jobs-active": "",
"jobs-all": "",
"jobs-detail": "",
"jobs-intake": "",
"jobs-new": "",
@@ -903,6 +905,7 @@
"courtesycars-detail": "",
"invoices-list": "",
"jobs": "Tous les emplois | $t(titles.app)",
"jobs-all": "",
"jobs-create": "",
"jobs-intake": "",
"jobsavailable": "Emplois disponibles | $t(titles.app)",