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

import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import DataLabel from "../data-label/data-label.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

const iconStyle = { marginLeft: ".3rem" };

export function JobEmployeeAssignments({
  bodyshop,
  jobRO,
  body,
  refinish,
  prep,
  csr,
  handleAdd,
  handleRemove,
  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 });
  };

  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);
            }}
          >
            {t("allocations.actions.assign")}
          </Button>
          <Button onClick={() => setVisibility(false)}>Close</Button>
        </Space>
      </Col>
    </Row>
  );

  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
              disabled={jobRO}
              style={iconStyle}
              onClick={() => {
                if (!jobRO) {
                  setAssignment({ operation: "body" });
                  setVisibility(true);
                }
              }}
            />
          )}
        </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
              disabled={jobRO}
              style={iconStyle}
              onClick={() => {
                if (!jobRO) {
                  setAssignment({ operation: "prep" });
                  setVisibility(true);
                }
              }}
            />
          )}
        </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
              disabled={jobRO}
              style={iconStyle}
              onClick={() => {
                if (!jobRO) {
                  setAssignment({ operation: "refinish" });
                  setVisibility(true);
                }
              }}
            />
          )}
        </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
              disabled={jobRO}
              style={iconStyle}
              onClick={() => {
                if (!jobRO) {
                  setAssignment({ operation: "csr" });
                  setVisibility(true);
                }
              }}
            />
          )}
        </DataLabel>
      </Spin>
    </Popover>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobEmployeeAssignments);