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

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";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function JobEmployeeAssignments({
  bodyshop,
  jobRO,
  body,
  refinish,
  prep,
  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 || jobRO}
        onClick={() => {
          handleAdd(assignment);
          setVisibility(false);
        }}
      >
        Assign
      </Button>
      <Button onClick={() => setVisibility(false)}>Close</Button>
    </div>
  );

  return (
    <div>
      <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
        <div style={{ display: "flex" }}>
          <DataLabel
            label={t("jobs.fields.employee_body")}
            style={{ margin: "0rem .5rem" }}
          >
            {body ? (
              <div>
                <span>{`${body.first_name || ""} ${
                  body.last_name || ""
                }`}</span>
                <MinusOutlined
                  operation="body"
                  disabled={jobRO}
                  onClick={() => !jobRO && handleRemove("body")}
                />
              </div>
            ) : (
              <PlusCircleFilled
                disabled={jobRO}
                onClick={() => {
                  if (!jobRO) {
                    setAssignment({ operation: "body" });
                    setVisibility(true);
                  }
                }}
              />
            )}
          </DataLabel>
          <DataLabel
            label={t("jobs.fields.employee_prep")}
            style={{ margin: "0rem .5rem" }}
          >
            {prep ? (
              <div>
                <span>{`${prep.first_name || ""} ${
                  prep.last_name || ""
                }`}</span>
                <MinusOutlined
                  disabled={jobRO}
                  operation="prep"
                  onClick={() => !jobRO && handleRemove("prep")}
                />
              </div>
            ) : (
              <PlusCircleFilled
                disabled={jobRO}
                onClick={() => {
                  if (!jobRO) {
                    setAssignment({ operation: "prep" });
                    setVisibility(true);
                  }
                }}
              />
            )}
          </DataLabel>
          <DataLabel
            label={t("jobs.fields.employee_refinish")}
            style={{ margin: "0rem .5rem" }}
          >
            {refinish ? (
              <div>
                <span>{`${refinish.first_name || ""} ${
                  refinish.last_name || ""
                }`}</span>
                <MinusOutlined
                  disabled={jobRO}
                  operation="refinish"
                  onClick={() => !jobRO && handleRemove("refinish")}
                />
              </div>
            ) : (
              <PlusCircleFilled
                disabled={jobRO}
                onClick={() => {
                  if (!jobRO) {
                    setAssignment({ operation: "refinish" });
                    setVisibility(true);
                  }
                }}
              />
            )}
          </DataLabel>
        </div>
      </Popover>
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobEmployeeAssignments);