IO-3215 Employee Assignment Timeticket Modal

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -1,7 +1,6 @@
 import { useLazyQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Form, Input, InputNumber, Select, Switch } from "antd";
-import React from "react";
+import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -19,6 +18,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
+import JobEmployeeAssignmentsContainer from "./../job-employee-assignments/job-employee-assignments.container";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -319,10 +319,15 @@ export function TimeTicketModalComponent({
 }
 
 export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideTimeTickets = false }) {
+  const { t } = useTranslation();
   if (loading) return <LoadingSkeleton />;
   if (!lineTicketData) return null;
+  if (!jobid) return null;
   return (
-    <div>
+    <Space direction="vertical" style={{ width: "100%" }}>
+      <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
+        <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
+      </Card>
       <LaborAllocationsTable
         jobId={jobid}
         joblines={lineTicketData.joblines}
@@ -332,6 +337,6 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
       {!hideTimeTickets && (
         <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
       )}
-    </div>
+    </Space>
   );
 }

client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

@@ -2,10 +2,11 @@ import { PageHeader } from "@ant-design/pro-layout";
 import { useMutation, useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Form, Modal, Space } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
 import { INSERT_NEW_TIME_TICKET, UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
@@ -14,7 +15,6 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
 import TimeTicketsCommitToggleComponent from "../time-tickets-commit-toggle/time-tickets-commit-toggle.component";
 import TimeTicketModalComponent from "./time-ticket-modal.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketModal: selectTimeTicket,
@@ -81,7 +81,7 @@ export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible,
     }
   };
 
-  const handleMutationSuccess = (response) => {
+  const handleMutationSuccess = () => {
     notification["success"]({
       message: t("timetickets.successes.created")
     });
@@ -123,7 +123,7 @@ export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible,
     if (timeTicketModal.open) form.resetFields();
   }, [timeTicketModal.open, form]);
 
-  const handleFieldsChange = (changedFields, allFields) => {
+  const handleFieldsChange = (changedFields) => {
     if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
       const emps = EmployeeAutoCompleteData.employees.filter((e) => e.id === changedFields.employeeid);
       form.setFieldsValue({
@@ -182,6 +182,7 @@ export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible,
         </Space>
       }
       destroyOnClose
+      id="time-ticket-modal"
     >
       <Form
         onFinish={handleFinish}

client/src/graphql/jobs-lines.queries.js

@@ -35,6 +35,30 @@ export const GET_LINE_TICKET_BY_PK = gql`
       lbr_adjustments
       converted
       status
+      employee_body
+      employee_body_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_csr
+      employee_csr_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_prep
+      employee_prep_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_refinish
+      employee_refinish_rel {
+        id
+        first_name
+        last_name
+      }
     }
     joblines(where: { jobid: { _eq: $id }, removed: { _eq: false } }) {
       id