IO-43 Updated related ROs approach.

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -81,11 +81,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               <span style={{ margin: "0rem .5rem" }}>/</span>
               <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
             </DataLabel>
-            {job.converted && (
-              <DataLabel label={t("jobs.labels.relatedros")}>
-                <JobsRelatedRos jobid={job.id} />
-              </DataLabel>
-            )}
+
             <DataLabel label={t("jobs.fields.alt_transport")}>
               {job.alt_transport}
               <JobAltTransportChange job={job} />
@@ -183,6 +179,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
             <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
               {`${job.v_vin || t("general.labels.na")}`}
             </DataLabel>
+            <DataLabel label={t("jobs.labels.relatedros")}>
+              <JobsRelatedRos jobid={job.id} job={job} />
+            </DataLabel>
           </div>
         </Card>
       </Col>

client/src/components/jobs-related-ros/jobs-related-ros.component.jsx

@@ -1,112 +1,19 @@
-import React, { useState } from "react";
-import { useQuery, useMutation } from "@apollo/client";
-import { Tag, Space, Button, Popover, Card, Form } from "antd";
-import {
-  DELETE_RELATED_RO,
-  INSERT_RELATED_ROS,
-  QUERY_RELATED_ROS,
-} from "../../graphql/jobs.queries";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import AlertComponent from "../alert/alert.component";
-import { PlusCircleOutlined } from "@ant-design/icons";
-import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
-import { useTranslation } from "react-i18next";
+import { Space, Tag } from "antd";
+import React from "react";
 import { Link } from "react-router-dom";
 
-export default function JobsRelatedRos({ jobid }) {
-  const [roSearchVisible, setRoSearchVisible] = useState(false);
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [insertRelationship] = useMutation(INSERT_RELATED_ROS);
-  const [deleteRelationship] = useMutation(DELETE_RELATED_RO);
-  const { loading, error, data } = useQuery(QUERY_RELATED_ROS, {
-    variables: { jobid },
-    skip: !jobid,
-  });
-  const { t } = useTranslation();
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
-  const relatedJobs = data.relatedjobs.map((r) => {
-    if (r.parentjob === jobid) {
-      return { relationshipid: r.id, ...r.childjob_rel };
-    }
-    return { relationshipid: r.id, ...r.parentjob_rel };
-  });
-
-  const handleAddRo = async ({ relatedjobid }) => {
-    setSaveLoading(true);
-
-    await insertRelationship({
-      variables: { relationship: { parentjob: jobid, childjob: relatedjobid } },
-      update(cache, { data }) {
-        cache.modify({
-          fields: {
-            relatedjobs(rj, { readField }) {
-              return [rj, data.insert_relatedjobs_one];
-            },
-          },
-        });
-      },
-    });
-    setSaveLoading(false);
-    setRoSearchVisible(false);
-  };
-  const handleDelete = async (id) => {
-    setSaveLoading(true);
-
-    await deleteRelationship({
-      variables: {
-        relationshipid: id,
-      },
-
-      update(cache, { data }) {
-        cache.modify({
-          fields: {
-            relatedjobs(rj, { readField }) {
-              return rj.filter((r) => r.id !== id);
-            },
-          },
-        });
-      },
-    });
-    setSaveLoading(false);
-    setRoSearchVisible(false);
-  };
-
-  const popContent = (
-    <Card style={{ minWidth: "25rem" }}>
-      <Form layout="vertical" onFinish={handleAddRo}>
-        <Form.Item
-          name="relatedjobid"
-          label={t("jobs.fields.ro_number")}
-          rules={[{ required: true }]}
-        >
-          <JobSearchSelectComponent convertedOnly />
-        </Form.Item>
-        <Space>
-          <Button loading={saveLoading} htmlType="submit">
-            {t("general.actions.add")}
-          </Button>
-          <Button onClick={() => setRoSearchVisible(false)}>
-            {t("general.actions.cancel")}
-          </Button>
-        </Space>
-      </Form>
-    </Card>
-  );
-
+export default function JobsRelatedRos({ jobid, job }) {
   return (
     <Space wrap>
-      {relatedJobs.map((r) => (
-        <Tag key={r.id} closable onClose={() => handleDelete(r.relationshipid)}>
-          <Link to={`/manage/jobs/${r?.id}`}>{r.ro_number}</Link>
-        </Tag>
-      ))}
-      <Popover content={popContent} visible={roSearchVisible}>
-        <Button type="link" onClick={() => setRoSearchVisible(true)}>
-          <PlusCircleOutlined />
-        </Button>
-      </Popover>
+      {job.vehicle.jobs
+        .filter((j) => j.id !== job.id)
+        .map((j) => (
+          <Tag key={j.id}>
+            <Link to={`/manage/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
+              j.clm_no ? ` | ${j.clm_no}` : ""
+            }${j.status ? ` | ${j.status}` : ""}`}</Link>
+          </Tag>
+        ))}
     </Space>
   );
 }

client/src/graphql/jobs.queries.js

@@ -384,6 +384,12 @@ export const GET_JOB_BY_PK = gql`
         v_model_desc
         v_make_desc
         v_color
+        jobs {
+          id
+          ro_number
+          status
+          clm_no
+        }
       }
       available_jobs {
         id