From b0a810bf17276dac6f60219e8c3434a68b04468d Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Wed, 19 Feb 2020 16:35:21 -0800
Subject: [PATCH] Minor fixes: Job detail card schedule, job list search, job
 list sorting.

---
 _business_logic/NewShopSetup.md               | 24 +++++--
 .../job-detail-cards.component.jsx            | 52 +++++++++------
 .../job-detail-cards.customer.component.jsx   |  5 +-
 .../jobs-find-modal.container.jsx             | 28 +++++---
 .../jobs-list/jobs-list.component.jsx         | 36 ++++++----
 client/src/graphql/jobs.queries.js            |  6 +-
 client/src/pages/jobs/jobs.page.jsx           | 65 ++++++++++++++++---
 client/src/utils/sorters.js                   |  1 +
 8 files changed, 161 insertions(+), 56 deletions(-)

diff --git a/_business_logic/NewShopSetup.md b/_business_logic/NewShopSetup.md
index 98933da85..dc17f03f0 100644
--- a/_business_logic/NewShopSetup.md
+++ b/_business_logic/NewShopSetup.md
@@ -4,6 +4,7 @@
 ..\*Include the statuses file in the format of:
 
 ```json
+{
   "statuses": [
     "Open",
     "Scheduled",
@@ -21,14 +22,29 @@
     "Invoiced",
     "Exported"
   ],
-  "default_imported": "Open",
-  "default_scheduled": "Scheduled",
+  "open_statuses": [
+    "Open",
+    "Scheduled",
+    "Arrived",
+    "Repair Plan",
+    "Parts",
+    "Body",
+    "Prep",
+    "Paint",
+    "Reassembly",
+    "Sublet",
+    "Detail",
+    "Completed"
+  ],
   "default_arrived": "Arrived",
+  "default_exported": "Exported",
+  "default_imported": "Open",
+  "default_invoiced": "Invoiced",
   "default_completed": "Completed",
   "default_delivered": "Delivered",
-  "default_invoiced": "Invoiced",
-  "default_exported": "Exported"
+  "default_scheduled": "Scheduled"
 }
+
 ```
 
 --\* Set the region for the shop.
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 458ea0da7..910a02b1b 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -17,6 +17,7 @@ import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
 import "./job-detail-cards.styles.scss";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
+import ScheduleJobModalContainer from "../schedule-job-modal/schedule-job-modal.container";
 
 export default function JobDetailCards({ selectedJob }) {
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -25,29 +26,35 @@ export default function JobDetailCards({ selectedJob }) {
     skip: !selectedJob
   });
   const [noteModalVisible, setNoteModalVisible] = useState(false);
+  const scheduleModalState = useState(false);
   const { t } = useTranslation();
 
   if (!selectedJob) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
-    <div className="job-cards-container">
+    <div className='job-cards-container'>
       <NoteUpsertModal
         jobId={data.jobs_by_pk.id}
         visible={noteModalVisible}
         changeVisibility={setNoteModalVisible}
         refetch={refetch}
       />
+      <ScheduleJobModalContainer
+        scheduleModalState={scheduleModalState}
+        jobId={data.jobs_by_pk.id}
+        refetch={refetch}
+      />
       <PageHeader
         ghost={false}
         onBack={() => window.history.back()}
         tags={
-          <span key="job-status">
+          <span key='job-status'>
             {data.jobs_by_pk.status ? (
-              <Tag color="blue">{data.jobs_by_pk.status}</Tag>
+              <Tag color='blue'>{data.jobs_by_pk.status}</Tag>
             ) : null}
           </span>
         }
@@ -65,35 +72,40 @@ export default function JobDetailCards({ selectedJob }) {
           )
         }
         extra={[
+          <Button
+            key='schedule'
+            //TODO Enabled logic based on status.
+            onClick={() => {
+              scheduleModalState[1](true);
+            }}>
+            {t("jobs.actions.schedule")}
+          </Button>,
           <Link
-            key="documents"
-            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
-          >
+            key='documents'
+            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
             <Button>
-              <Icon type="file-image" />
+              <Icon type='file-image' />
               {t("jobs.actions.addDocuments")}
             </Button>
           </Link>,
-          <Button key="printing">
-            <Icon type="printer" />
+          <Button key='printing'>
+            <Icon type='printer' />
             {t("jobs.actions.printCenter")}
           </Button>,
           <Button
-            key="notes"
-            actiontype="addNote"
+            key='notes'
+            actiontype='addNote'
             onClick={() => {
               setNoteModalVisible(!noteModalVisible);
-            }}
-          >
-            <Icon type="edit" />
+            }}>
+            <Icon type='edit' />
             {t("jobs.actions.addNote")}
           </Button>,
-          <Button key="postinvoices">
-            <Icon type="shopping-cart" />
+          <Button key='postinvoices'>
+            <Icon type='shopping-cart' />
             {t("jobs.actions.postInvoices")}
           </Button>
-        ]}
-      >
+        ]}>
         {
           //   loading ? (
           //   <LoadingSkeleton />
@@ -114,7 +126,7 @@ export default function JobDetailCards({ selectedJob }) {
           // )
         }
 
-        <section className="job-cards">
+        <section className='job-cards'>
           <JobDetailCardsCustomerComponent
             loading={loading}
             data={data ? data.jobs_by_pk : null}
diff --git a/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
index 2b8d778dd..5a8de6135 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
@@ -14,7 +14,10 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
       extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}>
       {data ? (
         <span>
-          <div>{`${data.ownr_fn || ""} ${data.ownr_ln || ""}`}</div>
+          <div>
+            <Link to={`/manage/owners/${data.owner.id}`}>{`${data.ownr_fn ||
+              ""} ${data.ownr_ln || ""}`}</Link>
+          </div>
           <div>
             {t("jobs.fields.phoneshort")}:
             <PhoneFormatter>{`${data.ownr_ph1 ||
diff --git a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx b/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
index 7825d40a6..58809f5a7 100644
--- a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
@@ -2,12 +2,22 @@ import { Modal } from "antd";
 import React from "react";
 import { useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
-import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobsFindModalComponent from "./jobs-find-modal.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
 
-export default function JobsFindModalContainer({
+export default connect(
+  mapStateToProps,
+  null
+)(function JobsFindModalContainer({
+  bodyshop,
   loading,
   error,
   selectedJob,
@@ -17,8 +27,11 @@ export default function JobsFindModalContainer({
 }) {
   const { t } = useTranslation();
 
-  const jobsList = useQuery(QUERY_ALL_OPEN_JOBS, {
-    fetchPolicy: "network-only"
+  const jobsList = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    fetchPolicy: "network-only",
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
+    }
   });
 
   return (
@@ -26,10 +39,9 @@ export default function JobsFindModalContainer({
       title={t("jobs.labels.existing_jobs")}
       width={"80%"}
       okButtonProps={{ disabled: selectedJob ? false : true }}
-      {...modalProps}
-    >
+      {...modalProps}>
       {loading ? <LoadingSpinner /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent message={error.message} type='error' /> : null}
       {true ? (
         <JobsFindModalComponent
           selectedJob={selectedJob}
@@ -43,4 +55,4 @@ export default function JobsFindModalContainer({
       ) : null}
     </Modal>
   );
-}
+});
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index 312e1ad91..d44fbcc06 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,4 +1,4 @@
-import { Input, Table, Icon } from "antd";
+import { Input, Table, Icon, Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -8,6 +8,8 @@ import { withRouter } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 export default withRouter(function JobsList({
+  searchTextState,
+  refetch,
   loading,
   jobs,
   selectedJob,
@@ -21,6 +23,7 @@ export default withRouter(function JobsList({
 
   const { t } = useTranslation();
 
+  const setSearchText = searchTextState[1];
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -29,7 +32,11 @@ export default withRouter(function JobsList({
       width: "8%",
       // onFilter: (value, record) => record.ro_number.includes(value),
       // filteredValue: state.filteredInfo.text || null,
-      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sorter: (a, b) =>
+        alphaSort(
+          a.ro_number ? a.ro_number : "EST-" + a.est_number,
+          b.ro_number ? b.ro_number : "EST-" + b.est_number
+        ),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
 
@@ -73,7 +80,7 @@ export default withRouter(function JobsList({
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
             <Icon
               style={{ margin: 4 }}
-              type="message"
+              type='message'
               onClick={() => {
                 alert("SMSing will happen here.");
               }}
@@ -205,19 +212,24 @@ export default withRouter(function JobsList({
         loading={loading}
         title={() => {
           return (
-            <Input.Search
-              placeholder="Search..."
-              onSearch={value => {
-                console.log(value);
-              }}
-              enterButton
-            />
+            <div style={{ display: "flex" }}>
+              <Button onClick={() => refetch()}>
+                <Icon type='sync' />
+              </Button>
+              <Input.Search
+                placeholder='Search...'
+                onChange={e => {
+                  setSearchText(e.target.value);
+                }}
+                enterButton
+              />
+            </div>
           );
         }}
-        size="small"
+        size='small'
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 6d630d9a0..ba32b39ab 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -1,8 +1,8 @@
 import { gql } from "apollo-boost";
 
-export const QUERY_ALL_OPEN_JOBS = gql`
-  query QUERY_ALL_OPEN_JOBS {
-    jobs {
+export const QUERY_ALL_ACTIVE_JOBS = gql`
+  query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!) {
+    jobs(where: { status: { _in: $statuses } }) {
       ownr_fn
       ownr_ln
       ownr_ph1
diff --git a/client/src/pages/jobs/jobs.page.jsx b/client/src/pages/jobs/jobs.page.jsx
index 06afb59ca..f8339a99e 100644
--- a/client/src/pages/jobs/jobs.page.jsx
+++ b/client/src/pages/jobs/jobs.page.jsx
@@ -4,12 +4,25 @@ import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 import JobsList from "../../components/jobs-list/jobs-list.component";
-import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 
-//TODO Implement pagination for this.
-export default function JobsPage({ match, location }) {
-  const { loading, error, data } = useQuery(QUERY_ALL_OPEN_JOBS, {
-    fetchPolicy: "network-only"
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function JobsPage({ match, location, bodyshop }) {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    fetchPolicy: "network-only",
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
+    }
   });
   const { t } = useTranslation();
 
@@ -19,17 +32,53 @@ export default function JobsPage({ match, location }) {
 
   const { hash } = location;
   const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
+  const searchTextState = useState("");
+  const searchText = searchTextState[0];
+  if (error) return <AlertComponent message={error.message} type='error' />;
+  //TODO Implement pagination for this.
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  console.log(typeof searchText);
   return (
     <div>
       <JobsList
+        searchTextState={searchTextState}
+        refetch={refetch}
         loading={loading}
         selectedJob={selectedJob}
         setSelectedJob={setSelectedJob}
-        jobs={data ? data.jobs : null}
+        jobs={
+          data
+            ? searchTextState[0] === ""
+              ? 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.vehicle.plate_no || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.vehicle.v_model_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase()) ||
+                    (j.vehicle.v_make_desc || "")
+                      .toLowerCase()
+                      .includes(searchText.toLowerCase())
+                )
+            : null
+        }
       />
       <JobDetailCards selectedJob={selectedJob} />
     </div>
   );
-}
+});
diff --git a/client/src/utils/sorters.js b/client/src/utils/sorters.js
index c089d83c0..e0adffbf6 100644
--- a/client/src/utils/sorters.js
+++ b/client/src/utils/sorters.js
@@ -4,6 +4,7 @@ export function alphaSort(a, b) {
   A = a ? a.toLowerCase() : "";
 
   B = b ? b.toLowerCase() : "";
+  console.log("Objects", A, B, A < B, A > B);
 
   if (A < B)
     //sort string ascending