IO-1345 IO-43 Related Job linking

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

@@ -15,6 +15,7 @@ import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import "./jobs-detail-header.styles.scss";
+import JobsRelatedRos from "../jobs-related-ros/jobs-related-ros.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -80,6 +81,11 @@ 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} />

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

@@ -0,0 +1,112 @@
+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 { 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>
+  );
+
+  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>
+    </Space>
+  );
+}