IO-1751 Add parts order data to repair data screen.

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -0,0 +1,54 @@
+import { useQuery } from "@apollo/client";
+import { Row, Col, Timeline, Typography, Space, Divider, Skeleton } from "antd";
+import React from "react";
+import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../alert/alert.component";
+import { DateFormatter } from "../../utils/DateFormatter";
+import { Link } from "react-router-dom";
+
+export default function JobLinesExpander({ jobline, jobid }) {
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: {
+      joblineid: jobline.id,
+    },
+  });
+
+  if (loading) return <Skeleton />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Row>
+      <Col md={24} lg={12}>
+        <Typography.Title level={4}>
+          {t("parts_orders.labels.parts_orders")}
+        </Typography.Title>
+        <Timeline>
+          {data.parts_order_lines.length > 0 ? (
+            data.parts_order_lines.map((line) => (
+              <Timeline.Item key={line.id}>
+                <Space split={<Divider type="vertical" />} wrap>
+                  <Link
+                    to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
+                  >
+                    {line.parts_order.order_number}
+                  </Link>
+                  <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                  {line.parts_order.vendor.name}
+                </Space>
+              </Timeline.Item>
+            ))
+          ) : (
+            <Timeline.Item>
+              {t("parts_orders.labels.notyetordered")}
+            </Timeline.Item>
+          )}
+        </Timeline>
+      </Col>
+      <Col md={24} lg={12}></Col>
+    </Row>
+  );
+}

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -4,6 +4,8 @@ import {
   SyncOutlined,
   WarningFilled,
   EditFilled,
+  PlusCircleTwoTone,
+  MinusCircleTwoTone,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import {
@@ -38,6 +40,7 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import _ from "lodash";
 import JobCreateIOU from "../job-create-iou/job-create-iou.component";
+import JobLinesExpander from "./job-lines-expander.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -449,6 +452,19 @@ export function JobLinesComponent({
         scroll={{
           x: true,
         }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <JobLinesExpander jobline={record} jobid={job.id} />
+          ),
+          rowExpandable: (record) => true,
+          expandRowByClick: true,
+          expandIcon: ({ expanded, onExpand, record }) =>
+            expanded ? (
+              <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ) : (
+              <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ),
+        }}
         onRow={(record, rowIndex) => {
           return {
             onDoubleClick: (event) => {