Removed references to allocations objects. Added new fields to job for employee assignment + created new component. BOD-100

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

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import DataLabel from "../data-label/data-label.component";
+import { useTranslation } from "react-i18next";
+import { PlusCircleFilled, MinusOutlined } from "@ant-design/icons";
+import { Select, Button, Popover } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobEmployeeAssignments({
+  bodyshop,
+  body,
+  refinish,
+  handleAdd,
+  handleRemove,
+}) {
+  const { t } = useTranslation();
+  const [assignment, setAssignment] = useState({
+    operation: null,
+    employeeid: null,
+  });
+  const [visibility, setVisibility] = useState(false);
+
+  const onChange = (e) => {
+    setAssignment({ ...assignment, employeeid: e });
+  };
+
+  const popContent = (
+    <div>
+      <Select
+        id='employeeSelector'
+        showSearch
+        style={{ width: 200 }}
+        optionFilterProp='children'
+        onChange={onChange}
+        filterOption={(input, option) =>
+          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }>
+        {bodyshop.employees.map((emp) => (
+          <Select.Option value={emp.id} key={emp.id}>
+            {`${emp.first_name} ${emp.last_name}`}
+          </Select.Option>
+        ))}
+      </Select>
+      <Button
+        type='primary'
+        disabled={!assignment.employeeid}
+        onClick={() => {
+          handleAdd(assignment);
+          setVisibility(false);
+        }}>
+        Assign
+      </Button>
+      <Button onClick={() => setVisibility(false)}>Close</Button>
+    </div>
+  );
+
+  return (
+    <div>
+      <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
+        <DataLabel label={t("jobs.fields.employee_body")}>
+          {body ? (
+            <div>
+              <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
+              <MinusOutlined
+                operation='body'
+                onClick={() => handleRemove("body")}
+              />
+            </div>
+          ) : (
+            <PlusCircleFilled
+              onClick={() => {
+                setAssignment({ operation: "body" });
+                setVisibility(true);
+              }}
+            />
+          )}
+        </DataLabel>
+        <DataLabel label={t("jobs.fields.employee_refinish")}>
+          {refinish ? (
+            <div>
+              <span>{`${refinish.first_name || ""} ${
+                refinish.last_name || ""
+              }`}</span>
+              <MinusOutlined
+                operation='refinish'
+                onClick={() => handleRemove("refinish")}
+              />
+            </div>
+          ) : (
+            <PlusCircleFilled
+              onClick={() => {
+                setAssignment({ operation: "refinish" });
+                setVisibility(true);
+              }}
+            />
+          )}
+        </DataLabel>
+      </Popover>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobEmployeeAssignments);

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

@@ -0,0 +1,70 @@
+import { useMutation } from "@apollo/react-hooks";
+import { notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import JobEmployeeAssignmentsComponent from "./job-employee-assignments.component";
+
+export default function JobEmployeeAssignmentsContainer({ job }) {
+  const { t } = useTranslation();
+  const [updateJob] = useMutation(UPDATE_JOB);
+
+  const handleAdd = async (assignment) => {
+    const { operation, employeeid } = assignment;
+
+    let empAssignment = determineFieldName(operation);
+
+    const result = await updateJob({
+      variables: { jobId: job.id, job: { [empAssignment]: employeeid } },
+      refetchQueries: ["GET_JOB_BY_PK"],
+      awaitRefetchQueries: true,
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("jobs.errors.assigning", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+  const handleRemove = async (operation) => {
+    console.log("handleRemove -> operation", operation);
+    let empAssignment = determineFieldName(operation);
+    const result = await updateJob({
+      variables: { jobId: job.id, job: { [empAssignment]: null } },
+      refetchQueries: ["GET_JOB_BY_PK"],
+      awaitRefetchQueries: true,
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("jobs.errors.assigning", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <JobEmployeeAssignmentsComponent
+        body={job.employee_body_rel}
+        refinish={job.employee_refinish_rel}
+        handleAdd={handleAdd}
+        handleRemove={handleRemove}
+      />
+    </div>
+  );
+}
+
+const determineFieldName = (operation) => {
+  switch (operation) {
+    case "body":
+      return "employee_body";
+      break;
+    case "refinish":
+      return "employee_refinish";
+      break;
+  }
+};