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 React, {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";

const mapStateToProps = createStructuredSelector({
    bodyshop: selectBodyshop,
    jobRO: selectJobReadOnly,
});
const mapDispatchToProps = (dispatch) => ({
    //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"
                    showSearch
                    style={{width: 200}}
                    optionFilterProp="children"
                    onChange={onChange}
                    filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                        0
                    }
                >
                    {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 destroyTooltipOnHide 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("jobs.fields.employee_csr")}>
                    {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);