feature/IO-3499-React-19: Ticket Ticket Issues, Employee Select Issues

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -16,11 +16,15 @@ const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardLabor);
 
 export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
+  const jobId = job?.id ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: job.id },
+    variables: { id: jobId },
+    skip: !jobId,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -29,12 +33,13 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     splitKey: bodyshop.imexshopid
   });
 
+  if (!jobId) return <LoadingSkeleton />;
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent title={error.message} type="error" />;
 
   return Enhanced_Payroll.treatment === "on" ? (
     <PayrollLaborAllocationsTable
-      jobId={job.id}
+      jobId={jobId}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}
       adjustments={data ? data.jobs_by_pk.lbr_adjustments : []}
@@ -43,7 +48,7 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     />
   ) : (
     <LaborAllocationsTableComponent
-      jobId={job.id}
+      jobId={jobId}
       joblines={data ? data.joblines : []}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -13,9 +13,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 
 const iconStyle = { marginLeft: ".3rem" };
 
@@ -31,163 +29,199 @@ export function JobEmployeeAssignments({
   loading
 }) {
   const { t } = useTranslation();
-  const [assignment, setAssignment] = useState({
-    operation: null,
-    employeeid: null
-  });
-  const [visibility, setVisibility] = useState(false);
 
-  const onChange = (value, option) => {
-    setAssignment({ ...assignment, employeeid: value, name: option.name });
+  // Which assignment popover is currently open: "body" | "prep" | "refinish" | "csr" | null
+  const [openOperation, setOpenOperation] = useState(null);
+
+  // Current selection inside the popover
+  const [selected, setSelected] = useState({ employeeid: null, name: null });
+
+  const employeeOptions = (bodyshop?.employees || [])
+    .filter((emp) => emp.active)
+    .map((emp) => ({
+      value: emp.id,
+      label: `${emp.first_name} ${emp.last_name}`
+    }));
+
+  const getPopupContainer = () => document.querySelector("#time-ticket-modal") || document.body;
+
+  const openFor = (operation) => {
+    if (jobRO) return;
+    setSelected({ employeeid: null, name: null });
+    setOpenOperation(operation);
   };
 
-  const popContent = (
-    <Row gutter={[16, 16]}>
-      <Col span={24}>
-        <Select
-          id="employeeSelector"
-          showSearc={{
-            optionFilterProp: "children",
-            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }}
-          style={{ width: 200 }}
-          onChange={onChange}
-        >
-          {bodyshop.employees
-            .filter((emp) => emp.active)
-            .map((emp) => (
-              <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                {`${emp.first_name} ${emp.last_name}`}
-              </Select.Option>
-            ))}
-        </Select>
-      </Col>
-      <Col span={24}>
-        <Space wrap>
-          <Button
-            type="primary"
-            disabled={!assignment.employeeid || jobRO}
-            onClick={() => {
-              handleAdd(assignment);
-              setVisibility(false);
+  const close = () => {
+    setOpenOperation(null);
+    setSelected({ employeeid: null, name: null });
+  };
+
+  const renderAssigner = (operation) => {
+    if (jobRO) {
+      return <PlusCircleFilled disabled style={iconStyle} />;
+    }
+
+    const popContent = (
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Select
+            style={{ width: 220 }}
+            options={employeeOptions}
+            value={selected.employeeid}
+            placeholder={t("employees.actions.select")}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
             }}
-          >
-            {t("allocations.actions.assign")}
-          </Button>
-          <Button onClick={() => setVisibility(false)}>Close</Button>
-        </Space>
-      </Col>
-    </Row>
-  );
+            onChange={(value, option) => {
+              if (!value) {
+                setSelected({ employeeid: null, name: null });
+                return;
+              }
+              setSelected({ employeeid: value, name: option?.label || null });
+            }}
+          />
+        </Col>
+
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              type="primary"
+              disabled={!selected.employeeid}
+              onClick={() => {
+                handleAdd({ operation, employeeid: selected.employeeid, name: selected.name });
+                close();
+              }}
+            >
+              {t("allocations.actions.assign")}
+            </Button>
+            <Button onClick={close}>Close</Button>
+          </Space>
+        </Col>
+      </Row>
+    );
+
+    return (
+      <Popover
+        destroyOnHidden
+        trigger="click"
+        open={openOperation === operation}
+        onOpenChange={(open) => {
+          // Important: let Popover drive close on outside click
+          if (open) openFor(operation);
+          else close();
+        }}
+        content={popContent}
+        getPopupContainer={getPopupContainer}
+      >
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            // Prevent the click from being re-interpreted as "outside"
+            e.preventDefault();
+            e.stopPropagation();
+            openFor(operation);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              openFor(operation);
+            }
+          }}
+          style={{ display: "inline-flex", alignItems: "center" }}
+        >
+          <PlusCircleFilled style={iconStyle} />
+        </span>
+      </Popover>
+    );
+  };
 
   return (
-    <Popover destroyOnHidden content={popContent} open={visibility}>
-      <Spin spinning={loading}>
-        <DataLabel label={t("jobs.fields.employee_body")}>
-          {body ? (
-            <div>
-              <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
-              <DeleteFilled
-                operation="body"
-                disabled={jobRO}
-                style={iconStyle}
-                onClick={() => !jobRO && handleRemove("body")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+    <Spin spinning={loading}>
+      <DataLabel label={t("jobs.fields.employee_body")}>
+        {body ? (
+          <div>
+            <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "body" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("body");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_prep")}>
-          {prep ? (
-            <div>
-              <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="prep"
-                onClick={() => !jobRO && handleRemove("prep")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("body")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_prep")}>
+        {prep ? (
+          <div>
+            <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "prep" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("prep");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_refinish")}>
-          {refinish ? (
-            <div>
-              <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="refinish"
-                onClick={() => !jobRO && handleRemove("refinish")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("prep")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_refinish")}>
+        {refinish ? (
+          <div>
+            <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "refinish" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("refinish");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel
-          label={t(
-            InstanceRenderManager({
-              imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer"
-            })
-          )}
-        >
-          {csr ? (
-            <div>
-              <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="csr"
-                onClick={() => !jobRO && handleRemove("csr")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("refinish")
+        )}
+      </DataLabel>
+
+      <DataLabel
+        label={t(
+          InstanceRenderManager({
+            imex: "jobs.fields.employee_csr",
+            rome: "jobs.fields.employee_csr_writer"
+          })
+        )}
+      >
+        {csr ? (
+          <div>
+            <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "csr" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("csr");
               }}
             />
-          )}
-        </DataLabel>
-      </Spin>
-    </Popover>
+          </div>
+        ) : (
+          renderAssigner("csr")
+        )}
+      </DataLabel>
+    </Spin>
   );
 }
 

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -11,9 +11,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
+const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
@@ -26,55 +24,69 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
   const notification = useNotification();
 
   const handleAdd = async (assignment) => {
-    setLoading(true);
     const { operation, employeeid, name } = assignment;
-    logImEXEvent("job_assign_employee", { operation });
+    const empAssignment = determineFieldName(operation);
 
-    let empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment || !employeeid) return;
 
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
-    });
-    if (refetch) refetch();
-
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentchange(operation, name),
-        type: "jobassignmentchange"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
-    }
-    setLoading(false);
-  };
-  const handleRemove = async (operation) => {
     setLoading(true);
-    logImEXEvent("job_unassign_employee", { operation });
+    try {
+      logImEXEvent("job_assign_employee", { operation });
 
-    let empAssignment = determineFieldName(operation);
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: null } }
-    });
+      const result = await updateJob({
+        variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
+      });
 
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentremoved(operation),
-        type: "jobassignmentremoved"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
+      if (typeof refetch === "function") await refetch();
+
+      if (!result.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobassignmentchange(operation, name),
+          type: "jobassignmentchange"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemove = async (operation) => {
+    const empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment) return;
+
+    setLoading(true);
+    try {
+      logImEXEvent("job_unassign_employee", { operation });
+
+      const result = await updateJob({
+        variables: { jobId: job.id, job: { [empAssignment]: null } }
+      });
+
+      if (typeof refetch === "function") await refetch();
+
+      if (!result.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobassignmentremoved(operation),
+          type: "jobassignmentremoved"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
@@ -102,7 +114,6 @@ const determineFieldName = (operation) => {
       return "employee_csr";
     case "refinish":
       return "employee_refinish";
-
     default:
       return null;
   }

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -4,9 +4,11 @@ import AlertComponent from "../alert/alert.component";
 import JobsDetailLaborComponent from "./jobs-detail-labor.component";
 
 export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
+  const id = jobId ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: jobId },
-    skip: !jobId,
+    variables: { id },
+    skip: !id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
@@ -16,7 +18,7 @@ export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
   return (
     <JobsDetailLaborComponent
       loading={loading}
-      jobId={jobId}
+      jobId={id}
       timetickets={data ? data.timetickets : []}
       joblines={data ? data.joblines : []}
       refetch={refetch}

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

@@ -37,6 +37,7 @@ export function TechClockOffButton({
   const [updateJobStatus] = useMutation(UPDATE_JOB_STATUS);
   const notification = useNotification();
   const [form] = Form.useForm();
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -45,14 +46,15 @@ export function TechClockOffButton({
     splitKey: bodyshop.imexshopid
   });
 
-  const { queryLoading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: {
-      id: jobId
-    },
-    skip: !jobId,
+  const id = jobId ?? null;
+
+  const { loading: queryLoading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
+    variables: { id },
+    skip: !id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const { t } = useTranslation();
 
   const emps = bodyshop.employees.filter((e) => e.id === technician?.id)[0];
@@ -63,6 +65,7 @@ export function TechClockOffButton({
     const status = values.status;
     delete values.status;
     setLoading(true);
+
     const result = await updateTimeticket({
       variables: {
         timeticketId: timeTicketId,
@@ -95,10 +98,11 @@ export function TechClockOffButton({
         title: t("timetickets.successes.clockedout")
       });
     }
+
     if (!isShiftTicket) {
       const job_update_result = await updateJobStatus({
         variables: {
-          jobId: jobId,
+          jobId: id,
           status: status
         }
       });
@@ -115,6 +119,7 @@ export function TechClockOffButton({
         });
       }
     }
+
     setLoading(false);
     if (completedCallback) completedCallback();
   };
@@ -139,7 +144,6 @@ export function TechClockOffButton({
                   rules={[
                     {
                       required: true
-                      //message: t("general.validation.required"),
                     }
                   ]}
                 >
@@ -151,7 +155,6 @@ export function TechClockOffButton({
                   rules={[
                     {
                       required: true
-                      //message: t("general.validation.required"),
                     },
                     ({ getFieldValue }) => ({
                       validator(rule, value) {
@@ -179,9 +182,7 @@ export function TechClockOffButton({
 
                         if (value > costCenterDiff)
                           return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
-                        else {
-                          return Promise.resolve();
-                        }
+                        return Promise.resolve();
                       }
                     })
                   ]}
@@ -190,13 +191,13 @@ export function TechClockOffButton({
                 </Form.Item>
               </div>
             ) : null}
+
             <Form.Item
               name="cost_center"
               label={t("timetickets.fields.cost_center")}
               rules={[
                 {
                   required: true
-                  //message: t("general.validation.required"),
                 }
               ]}
             >
@@ -228,7 +229,6 @@ export function TechClockOffButton({
                 rules={[
                   {
                     required: true
-                    //message: t("general.validation.required"),
                   }
                 ]}
               >
@@ -239,12 +239,15 @@ export function TechClockOffButton({
                 </Select>
               </Form.Item>
             )}
+
             <Button type="primary" htmlType="submit" loading={loading}>
               {t("general.actions.save")}
             </Button>
+
             <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
+
             {!isShiftTicket && (
-              <LaborAllocationContainer jobid={jobId || null} loading={queryLoading} lineTicketData={lineTicketData} />
+              <LaborAllocationContainer jobid={id || null} loading={queryLoading} lineTicketData={lineTicketData} />
             )}
           </Space>
         </Form>

client/src/translations/en_us/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "Add Vacation",
         "new": "New Employee",
-        "newrate": "New Rate"
+        "newrate": "New Rate",
+        "select": "Select Employee"
       },
       "errors": {
         "delete": "Error encountered while deleting employee. {{message}}",

client/src/translations/es/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "",
         "new": "Nuevo empleado",
-        "newrate": ""
+        "newrate": "",
+        "select": ""
       },
       "errors": {
         "delete": "Se encontró un error al eliminar al empleado. {{message}}",

client/src/translations/fr/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "",
         "new": "Nouvel employé",
-        "newrate": ""
+        "newrate": "",
+        "select": ""
       },
       "errors": {
         "delete": "Erreur rencontrée lors de la suppression de l'employé. {{message}}",