UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

client/src/pages/courtesy-cars/courtesy-cars.page.component.jsx

@@ -1,6 +1,12 @@
 import React from "react";
 import CourtesyCarsListComponent from "../../components/courtesy-cars-list/courtesy-cars-list.component";
 
-export default function CourtesyCarsPageComponent({ loading, data }) {
-  return <CourtesyCarsListComponent loading={loading} courtesycars={data} />;
+export default function CourtesyCarsPageComponent({ loading, data, refetch }) {
+  return (
+    <CourtesyCarsListComponent
+      loading={loading}
+      courtesycars={data}
+      refetch={refetch}
+    />
+  );
 }

client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx

@@ -12,7 +12,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function CourtesyCarsPageContainer({ setBreadcrumbs }) {
-  const { loading, error, data } = useQuery(QUERY_ALL_CC);
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_CC);
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.courtesycars");
@@ -21,11 +21,12 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs }) {
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
     ]);
   }, [setBreadcrumbs, t]);
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <CourtesyCarsPageComponent
       loading={loading}
       data={(data && data.courtesycars) || []}
+      refetch={refetch}
     />
   );
 }

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -19,18 +19,18 @@ export default function JobsCreateComponent({ form }) {
       title: t("jobs.labels.create.vehicleinfo"),
       content: <JobsCreateVehicleInfoContainer />,
       validation: !!state.vehicle.new || !!state.vehicle.selectedid,
-      error: t("vehicles.errors.selectexistingornew")
+      error: t("vehicles.errors.selectexistingornew"),
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
       content: <JobsCreateOwnerInfoContainer />,
       validation: !!state.owner.new || !!state.owner.selectedid,
-      error: t("owners.errors.selectexistingornew")
+      error: t("owners.errors.selectexistingornew"),
     },
     {
       title: t("jobs.labels.create.jobinfo"),
-      content: <JobsCreateJobsInfo form={form} />
-    }
+      content: <JobsCreateJobsInfo form={form} />,
+    },
   ];
 
   const next = () => {
@@ -43,19 +43,15 @@ export default function JobsCreateComponent({ form }) {
 
   const ProgressButtons = () => {
     return (
-      <div>
-        {pageIndex > 0 && (
-          <Button style={{ margin: 8 }} onClick={() => prev()}>
-            Previous
-          </Button>
-        )}
+      <div style={{ margin: "1rem" }}>
+        {pageIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
         {pageIndex < steps.length - 1 && (
           <Button
             type='primary'
             onClick={() => {
               form
                 .validateFields()
-                .then(r => {
+                .then((r) => {
                   if (steps[pageIndex].validation) {
                     setErrorMessage(null);
                     next();
@@ -63,7 +59,7 @@ export default function JobsCreateComponent({ form }) {
                     setErrorMessage(steps[pageIndex].error);
                   }
                 })
-                .catch(error => console.log("error", error));
+                .catch((error) => console.log("error", error));
             }}>
             Next
           </Button>
@@ -85,7 +81,7 @@ export default function JobsCreateComponent({ form }) {
             status='success'
             title={t("jobs.successes.creatednoclick")}
             subTitle={t("jobs.successes.created_subtitle", {
-              est_number: state.newJobEstNum
+              est_number: state.newJobEstNum,
             })}
             extra={[
               <Link to={`/manage/jobs/${state.newJobId}`} key='gotojob'>
@@ -93,7 +89,7 @@ export default function JobsCreateComponent({ form }) {
               </Link>,
               <Link to={`/manage/jobs/`} key='gotojoblist'>
                 <Button>{t("menus.header.activejobs")}</Button>
-              </Link>
+              </Link>,
             ]}
           />
         </div>
@@ -108,7 +104,7 @@ export default function JobsCreateComponent({ form }) {
                 onClick={() => {
                   form
                     .validateFields()
-                    .then(r => {
+                    .then((r) => {
                       if (steps[pageIndex].validation) {
                         setErrorMessage(null);
                         setPageIndex(idx);
@@ -116,7 +112,7 @@ export default function JobsCreateComponent({ form }) {
                         setErrorMessage(steps[pageIndex].error);
                       }
                     })
-                    .catch(error => console.log("error", error));
+                    .catch((error) => console.log("error", error));
                 }}
               />
             ))}
@@ -130,7 +126,12 @@ export default function JobsCreateComponent({ form }) {
           ) : null}
 
           {steps.map((item, idx) => (
-            <div key={idx} style={{ display: idx === pageIndex ? "" : "none" }}>
+            <div
+              key={idx}
+              style={{
+                display: idx === pageIndex ? "" : "none",
+                margin: "1rem",
+              }}>
               {item.content}
             </div>
           ))}

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -74,6 +74,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
   };
 
   const handleFinish = (values) => {
+    console.log("handleFinish -> values", values);
     let job = Object.assign(
       {},
       values,
@@ -86,13 +87,14 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
         ownerid: state.owner.selectedid || null,
       },
       {
-        status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store.
+        status: bodyshop.md_ro_statuses.default_imported || "Open*",
         shopid: bodyshop.id,
       }
     );
     //TODO Logic to ensure the owner is actually fetched.
+    console.log("job", job);
     let ownerData;
-    if (!!job.owner) {
+    if (!!!job.ownerid) {
       ownerData = job.owner.data;
       ownerData.shopid = bodyshop.id;
       delete ownerData.allow_text_message;
@@ -103,7 +105,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
       delete ownerData.id;
       delete ownerData.__typename;
     }
-    if (!!job.vehicle) {
+    if (!!!job.vehicleid) {
       delete job.vehicleid;
       job.vehicle.data.shopid = bodyshop.id;
       job.plate_no = job.vehicle.data.plate_no;
@@ -114,8 +116,6 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
       job.v_make_desc = job.vehicle.data.v_make_desc;
       job.v_color = job.vehicle.data.v_color;
     } else {
-      //Vehicle selected.
-      job.vehicle.data.shopid = bodyshop.id;
       job.plate_no = state.vehicle.vehicleObj.plate_no;
       job.plate_st = state.vehicle.vehicleObj.plate_st;
       job.v_vin = state.vehicle.vehicleObj.v_vin;
@@ -131,7 +131,11 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
 
   return (
     <JobCreateContext.Provider value={contextState}>
-      <Form form={form} onFinish={handleFinish} autoComplete={"off"}>
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        layout='vertical'
+        autoComplete={"off"}>
         <JobsCreateComponent form={form} />
       </Form>
     </JobCreateContext.Provider>

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -15,6 +15,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function VehicleDetailContainer({ match, setBreadcrumbs }) {
   const { vehId } = match.params;
   const { t } = useTranslation();
+  
   const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
     variables: { id: vehId },
     fetchPolicy: "network-only",