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

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>
   );
 }