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

UI Fixes on Job list page. Refactored form row component. BOD-155

Browse Source
This commit is contained in:
Patrick Fic
2020-06-12 15:04:16 -07:00
parent 12924fe13a
commit a88785fc43
26 changed files with 634 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/pages/jobs/jobs.page.jsx
View File

@@ -1,88 +1,30 @@
import { useQuery } from "@apollo/react-hooks";
import queryString from "query-string";
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
import JobsList from "../../components/jobs-list/jobs-list.component";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function JobsPage({ location, bodyshop, setBreadcrumbs }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
},
});
export function JobsPage({ setBreadcrumbs }) {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.jobs");
setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-active") }]);
setBreadcrumbs([
{ link: "/manage/jobs", label: t("titles.bc.jobs-active") },
]);
}, [t, setBreadcrumbs]);
const search = queryString.parse(location.search);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<EnterInvoiceModalContainer />
<JobsList
searchTextState={searchTextState}
refetch={refetch}
loading={loading}
searchParams={search}
//setSelectedJob={setSelectedJob}
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
}
/>
<JobDetailCards selectedJob={search.selected} />
<div className='jobs-list-container'>
<JobsList />
<JobDetailCards />
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsPage);
export default connect(null, mapDispatchToProps)(JobsPage);