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

bodyshop_translations.babel

@@ -32672,6 +32672,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>notyetordered</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>oec</name>
                                         <definition_loaded>false</definition_loaded>

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) => {

client/src/graphql/jobs.queries.js

@@ -146,7 +146,7 @@ export const QUERY_EXACT_JOB_IN_PRODUCTION = gql`
       employee_refinish
       employee_prep
       employee_csr
-      joblines_status{
+      joblines_status {
         part_type
         status
         count
@@ -224,7 +224,7 @@ export const QUERY_EXACT_JOBS_IN_PRODUCTION = gql`
       employee_refinish
       employee_prep
       employee_csr
-      joblines_status{
+      joblines_status {
         part_type
         status
         count
@@ -304,7 +304,7 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
       employee_prep
       employee_csr
       suspended
-      joblines_status{
+      joblines_status {
         part_type
         status
         count
@@ -721,20 +721,6 @@ export const GET_JOB_BY_PK = gql`
             }
           }
         }
-        parts_order_lines {
-          id
-          parts_order {
-            id
-            order_number
-            comments
-            order_date
-            user_email
-            vendor {
-              id
-              name
-            }
-          }
-        }
       }
       payments {
         id
@@ -2114,3 +2100,23 @@ export const DELETE_RELATED_RO = gql`
     }
   }
 `;
+export const GET_JOB_LINE_ORDERS = gql`
+  query GET_JOB_LINE_ORDERS($joblineid: uuid!) {
+    parts_order_lines(where: { job_line_id: { _eq: $joblineid } }) {
+      id
+      act_price
+      parts_order {
+        id
+        order_date
+        order_number
+        orderedby
+        return
+        comments
+        vendor {
+          id
+          name
+        }
+      }
+    }
+  }
+`;

client/src/translations/en_us/common.json

@@ -1082,7 +1082,7 @@
 				"mod_lbr_ty": "Labor Type",
 				"notes": "Notes",
 				"oem_partno": "OEM Part #",
-				"op_code_desc": "Operation Code Description",
+				"op_code_desc": "Op Code Description",
 				"part_qty": "Qty.",
 				"part_type": "Part Type",
 				"part_types": {
@@ -1939,6 +1939,7 @@
 				"email": "Send by Email",
 				"inthisorder": "Parts in this Order",
 				"newpartsorder": "New Parts Order",
+				"notyetordered": "This part has not yet been ordered.",
 				"oec": "Order via OEC",
 				"orderhistory": "Order History",
 				"parts_orders": "Parts Orders",

client/src/translations/es/common.json

@@ -1939,6 +1939,7 @@
 				"email": "Enviar por correo electrónico",
 				"inthisorder": "Partes en este pedido",
 				"newpartsorder": "",
+				"notyetordered": "",
 				"oec": "",
 				"orderhistory": "Historial de pedidos",
 				"parts_orders": "",

client/src/translations/fr/common.json

@@ -1939,6 +1939,7 @@
 				"email": "Envoyé par email",
 				"inthisorder": "Pièces dans cette commande",
 				"newpartsorder": "",
+				"notyetordered": "",
 				"oec": "",
 				"orderhistory": "Historique des commandes",
 				"parts_orders": "",