CLEANUP on Jobs page. Now uses search param instead of state.

2020-04-02 11:36:01 -07:00
parent 53a567d65f
commit 922463d400
7 changed files with 57 additions and 59 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,7 @@
    "graphql": "^14.6.0",
    "i18next": "^19.3.4",
    "node-sass": "^4.13.1",
+    "query-string": "^6.11.1",
    "react": "^16.13.1",
    "react-apollo": "^3.1.3",
    "react-barcode": "^1.4.0",
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -63,7 +63,6 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
      />
      <PageHeader
        ghost={false}
-        onBack={() => window.history.back()}
        tags={
          <span key="job-status">
            {data.jobs_by_pk.status ? (
@@ -96,7 +95,7 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
          </Button>,
          <Link
            key="documents"
-            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
+            to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}
          >
            <Button>
              <FileImageFilled />
--- a/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx
@@ -17,7 +17,7 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
    <CardTemplate
      loading={loading}
      title={t("jobs.labels.cards.notes")}
-      extraLink={`/manage/jobs/${data.id}#notes`}
+      extraLink={`/manage/jobs/${data.id}?notes`}
    >
      {data ? (
        <Container>
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -7,15 +7,14 @@ 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 withRouter(function JobsList({
  searchTextState,
  refetch,
  loading,
  jobs,
-  selectedJob,
-  setSelectedJob,
-  history
+  selectedJob
 }) {
  const [state, setState] = useState({
    sortedInfo: {},
@@ -23,7 +22,7 @@ export default withRouter(function JobsList({
  });

  const { t } = useTranslation();
-
+  const history = useHistory();
  const setSearchText = searchTextState[1];
  const columns = [
    {
@@ -31,22 +30,18 @@ export default withRouter(function JobsList({
      dataIndex: "ro_number",
      key: "ro_number",
      width: "8%",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
      sorter: (a, b) =>
        alphaSort(
-          a.ro_number ? a.ro_number : "EST-" + a.est_number,
-          b.ro_number ? b.ro_number : "EST-" + b.est_number
+          a.ro_number ? a.ro_number : a.est_number,
+          b.ro_number ? b.ro_number : b.est_number
        ),
      sortOrder:
        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,

      render: (text, record) => (
-        <span>
-          <Link to={"/manage/jobs/" + record.id}>
-            {record.ro_number ? record.ro_number : "EST-" + record.est_number}
-          </Link>
-        </span>
+        <Link to={"/manage/jobs/" + record.id}>
+          {record.ro_number ? record.ro_number : record.est_number}
+        </Link>
      )
    },
    {
@@ -61,10 +56,9 @@ export default withRouter(function JobsList({
      render: (text, record) => {
        return record.owner ? (
          <Link to={"/manage/owners/" + record.owner.id}>
-            {record.ownr_fn} {record.ownr_ln}
+            {`${record.ownr_fn} ${record.ownr_ln}`}
          </Link>
        ) : (
-          // t("jobs.errors.noowner")
          <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
        );
      }
@@ -81,9 +75,7 @@ export default withRouter(function JobsList({
            <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
            <StartChatButton phone={record.ownr_ph1} />
          </span>
-        ) : (
-          t("general.labels.unknown")
-        );
+        ) : null;
      }
    },
    {
@@ -113,7 +105,8 @@ export default withRouter(function JobsList({
              ""} ${record.v_model_desc || ""}`}
          </Link>
        ) : (
-          t("jobs.errors.novehicle")
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc ||
+            ""} ${record.v_model_desc || ""}`}</span>
        );
      }
    },
@@ -127,11 +120,7 @@ export default withRouter(function JobsList({
      sortOrder:
        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
      render: (text, record) => {
-        return record.plate_no ? (
-          <span>{record.plate_no}</span>
-        ) : (
-          t("general.labels.unknown")
-        );
+        return record.plate_no ? record.plate_no : "";
      }
    },
    {
@@ -186,19 +175,12 @@ export default withRouter(function JobsList({
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

-  // const handleChange = event => {
-  //   const { value } = event.target;
-  //   setState({ ...state, filterinfo: { text: [value] } });
-  // };
-
  const handleOnRowClick = record => {
    if (record) {
      if (record.id) {
-        setSelectedJob(record.id);
-        return;
+        history.push({ search: `selected=${record.id}` });
      }
    }
-    setSelectedJob(null);
  };

  return (
@@ -212,7 +194,7 @@ export default withRouter(function JobsList({
                <SyncOutlined />
              </Button>
              <Input.Search
-                placeholder="Search..."
+                placeholder={t("general.labels.search")}
                onChange={e => {
                  setSearchText(e.target.value);
                }}
@@ -226,7 +208,13 @@ export default withRouter(function JobsList({
        columns={columns.map(item => ({ ...item }))}
        rowKey="id"
        dataSource={jobs}
-        rowSelection={{ selectedRowKeys: [selectedJob] }}
+        rowSelection={{
+          onSelect: record => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [selectedJob],
+          type: "radio"
+        }}
        onChange={handleTableChange}
        onRow={(record, rowIndex) => {
          return {
--- a/client/src/pages/error-not-found/error-not-found.page.jsx
+++ b/client/src/pages/error-not-found/error-not-found.page.jsx
@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function ErrorNotFound() {
-  return <div>Uh oh, we couldn't find the page you're looking for.</div>;
-}
--- a/client/src/pages/jobs/jobs.page.jsx
+++ b/client/src/pages/jobs/jobs.page.jsx
@@ -1,27 +1,22 @@
 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 { 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 { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
-
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-export default connect(
-  mapStateToProps,
-  null
-)(function JobsPage({ match, location, bodyshop }) {
+export function JobsPage({ location, bodyshop }) {
  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
-    fetchPolicy: "network-only",
    variables: {
      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
    }
@@ -32,8 +27,7 @@ export default connect(
    document.title = t("titles.jobs");
  }, [t]);

-  const { hash } = location;
-  const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
+  const search = queryString.parse(location.search);
  const searchTextState = useState("");
  const searchText = searchTextState[0];
  if (error) return <AlertComponent message={error.message} type="error" />;
@@ -45,11 +39,11 @@ export default connect(
        searchTextState={searchTextState}
        refetch={refetch}
        loading={loading}
-        selectedJob={selectedJob}
-        setSelectedJob={setSelectedJob}
+        selectedJob={search.selected}
+        //setSelectedJob={setSelectedJob}
        jobs={
          data
-            ? searchTextState[0] === ""
+            ? searchText === ""
              ? data.jobs
              : data.jobs.filter(
                  j =>
@@ -79,7 +73,9 @@ export default connect(
            : null
        }
      />
-      <JobDetailCards selectedJob={selectedJob} />
+      <JobDetailCards selectedJob={search.selected} />
    </div>
  );
-});
+}
+
+export default connect(mapStateToProps, null)(JobsPage);
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -10643,6 +10643,15 @@ query-string@^4.1.0:
    object-assign "^4.1.0"
    strict-uri-encode "^1.0.0"

+query-string@^6.11.1:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.11.1.tgz#ab021f275d463ce1b61e88f0ce6988b3e8fe7c2c"
+  integrity sha512-1ZvJOUl8ifkkBxu2ByVM/8GijMIPx+cef7u3yroO3Ogm4DOdZcF5dcrWTIlSHe3Pg/mtlt6/eFjObDfJureZZA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -12583,6 +12592,11 @@ spdy@^4.0.1:
    select-hose "^2.0.0"
    spdy-transport "^3.0.0"

+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -12726,6 +12740,11 @@ strict-uri-encode@^1.0.0:
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=

+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-convert@^0.2.0:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"