IO-842 Add Time Ticekts to Clock Out button

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { alphaSort } from "../../utils/sorters";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
@@ -12,6 +13,7 @@ import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  technician: selectTechnician,
 });
 
 export function LaborAllocationsTable({
@@ -20,6 +22,7 @@ export function LaborAllocationsTable({
   timetickets,
   bodyshop,
   adjustments,
+  technician,
 }) {
   const { t } = useTranslation();
   const [totals, setTotals] = useState([]);
@@ -83,13 +86,15 @@ export function LaborAllocationsTable({
       render: (text, record) => (
         <Space wrap>
           {record.adjustments.toFixed(1)}
-          <LaborAllocationsAdjustmentEdit
-            jobId={jobId}
-            adjustments={adjustments}
-            mod_lbr_ty={record.opcode}
-          >
-            <EditFilled />
-          </LaborAllocationsAdjustmentEdit>
+          {!technician && (
+            <LaborAllocationsAdjustmentEdit
+              jobId={jobId}
+              adjustments={adjustments}
+              mod_lbr_ty={record.opcode}
+            >
+              <EditFilled />
+            </LaborAllocationsAdjustmentEdit>
+          )}
         </Space>
       ),
     },

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -1,5 +1,14 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, notification, Popover, Select } from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  notification,
+  Popover,
+  Row,
+  Select,
+} from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +20,7 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
+import { LaborAllocationContainer } from "../time-ticket-modal/time-ticket-modal.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -20,6 +30,7 @@ const mapStateToProps = createStructuredSelector({
 export function TechClockOffButton({
   bodyshop,
   technician,
+  jobId,
   timeTicketId,
   completedCallback,
   isShiftTicket,
@@ -34,8 +45,6 @@ export function TechClockOffButton({
     (e) => e.id === (technician && technician.id)
   )[0];
 
-  console.log(emps && emps.rates);
-
   const handleFinish = async (values) => {
     logImEXEvent("tech_clock_out_job");
 
@@ -80,67 +89,77 @@ export function TechClockOffButton({
               : null,
           }}
         >
-          {!isShiftTicket ? (
-            <div>
-              <Form.Item
-                label={t("timetickets.fields.actualhrs")}
-                name="actualhrs"
-                rules={[
-                  {
-                    required: true,
-                    message: t("general.validation.required"),
-                  },
-                ]}
-              >
-                <InputNumberCalculator precision={1} />
-              </Form.Item>
-              <Form.Item
-                label={t("timetickets.fields.productivehrs")}
-                name="productivehrs"
-                rules={[
-                  {
-                    required: true,
-                    message: t("general.validation.required"),
-                  },
-                ]}
-              >
-                <InputNumberCalculator precision={1} />
-              </Form.Item>
-            </div>
-          ) : null}
+          <Row gutter={[16, 16]}>
+            <Col span={!isShiftTicket ? 8 : 24}>
+              {!isShiftTicket ? (
+                <div>
+                  <Form.Item
+                    label={t("timetickets.fields.actualhrs")}
+                    name="actualhrs"
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                  >
+                    <InputNumberCalculator precision={1} />
+                  </Form.Item>
+                  <Form.Item
+                    label={t("timetickets.fields.productivehrs")}
+                    name="productivehrs"
+                    rules={[
+                      {
+                        required: true,
+                        message: t("general.validation.required"),
+                      },
+                    ]}
+                  >
+                    <InputNumberCalculator precision={1} />
+                  </Form.Item>
+                </div>
+              ) : null}
 
-          <Form.Item
-            name="cost_center"
-            label={t("timetickets.fields.cost_center")}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <Select disabled={isShiftTicket}>
-              {isShiftTicket ? (
-                <Select.Option value="timetickets.labels.shift">
-                  {t("timetickets.labels.shift")}
-                </Select.Option>
-              ) : (
-                emps &&
-                emps.rates.map((item) => (
-                  <Select.Option key={item.cost_center}>
-                    {item.cost_center}
-                  </Select.Option>
-                ))
-              )}
-            </Select>
-          </Form.Item>
-          <Button type="primary" htmlType="submit" loading={loading}>
-            {t("general.actions.save")}
-          </Button>
-          <TechJobClockoutDelete
-            completedCallback={completedCallback}
-            timeTicketId={timeTicketId}
-          />
+              <Form.Item
+                name="cost_center"
+                label={t("timetickets.fields.cost_center")}
+                rules={[
+                  {
+                    required: true,
+                    message: t("general.validation.required"),
+                  },
+                ]}
+              >
+                <Select disabled={isShiftTicket}>
+                  {isShiftTicket ? (
+                    <Select.Option value="timetickets.labels.shift">
+                      {t("timetickets.labels.shift")}
+                    </Select.Option>
+                  ) : (
+                    emps &&
+                    emps.rates.map((item) => (
+                      <Select.Option key={item.cost_center}>
+                        {item.cost_center}
+                      </Select.Option>
+                    ))
+                  )}
+                </Select>
+              </Form.Item>
+
+              <Button type="primary" htmlType="submit" loading={loading}>
+                {t("general.actions.save")}
+              </Button>
+              <TechJobClockoutDelete
+                completedCallback={completedCallback}
+                timeTicketId={timeTicketId}
+              />
+            </Col>
+            {!isShiftTicket && (
+              <Col span={16}>
+                <LaborAllocationContainer jobid={jobId} />
+              </Col>
+            )}
+          </Row>
         </Form>
       </div>
     </Card>

client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx

@@ -67,6 +67,7 @@ export function TechClockedInList({ technician }) {
                   }
                   actions={[
                     <TechClockOffButton
+                      jobId={ticket.jobid}
                       timeTicketId={ticket.id}
                       completedCallback={refetch}
                     />,

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

@@ -145,7 +145,7 @@ export default function TimeTicketModalComponent({
   );
 }
 
-function LaborAllocationContainer({ jobid }) {
+export function LaborAllocationContainer({ jobid }) {
   const { loading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
     variables: { id: jobid },
     skip: !jobid,

client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx

@@ -32,17 +32,20 @@ export default function TimeTicketShiftActive({ timetickets, refetch }) {
                   title={t(ticket.memo)}
                   actions={[
                     <TechClockOffButton
+                      jobId={ticket.jobid}
                       timeTicketId={ticket.id}
                       completedCallback={refetch}
                       isShiftTicket
                     />,
-                  ]}>
+                  ]}
+                >
                   <DataLabel label={t("timetickets.fields.clockon")}>
                     <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
                   </DataLabel>
                 </Card>
               </List.Item>
-            )}></List>
+            )}
+          ></List>
         </div>
       ) : null}
     </div>

client/src/graphql/timetickets.queries.js

@@ -10,6 +10,7 @@ export const QUERY_TICKETS_BY_JOBID = gql`
       productivehrs
       id
       memo
+      jobid
       employee {
         employee_number
         first_name
@@ -116,9 +117,9 @@ export const QUERY_ACTIVE_TIME_TICKETS = gql`
       clockon
       memo
       cost_center
+      jobid
       job {
         id
-
         ownr_fn
         ownr_ln
         ownr_co_nm
@@ -146,9 +147,9 @@ export const QUERY_ACTIVE_SHIFT_TIME_TICKETS = gql`
       id
       clockon
       memo
+      jobid
       job {
         id
-
         ownr_fn
         ownr_ln
         ownr_co_nm