Files
bodyshop/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

104 lines
3.0 KiB
JavaScript

import { Button, Form, notification, Popover, Select } from "antd";
import React, { useState } from "react";
import { useMutation } from "react-apollo";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { CONVERT_JOB_TO_RO } from "../../graphql/jobs.queries";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
jobRO: selectJobReadOnly,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
const [visible, setVisible] = useState(false);
const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
const { t } = useTranslation();
const handleConvert = async (values) => {
const res = await mutationConvertJob({
variables: { jobId: job.id, ...values },
});
if (!res.errors) {
refetch();
notification["success"]({
message: t("jobs.successes.converted"),
});
setVisible(false);
}
};
const popMenu = (
<div>
<Form layout="vertical" onFinish={handleConvert}>
<Form.Item
name={["ins_co_nm"]}
label={t("jobs.fields.ins_co_nm")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select>
{bodyshop.md_ins_cos.map((s) => (
<Select.Option key={s} value={s}>
{s}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name={["class"]}
label={t("jobs.fields.class")}
rules={[
{
required: bodyshop.enforce_class,
message: t("general.validation.required"),
},
]}
>
<Select>
{bodyshop.md_classes.map((s) => (
<Select.Option key={s} value={s}>
{s}
</Select.Option>
))}
</Select>
</Form.Item>
<Button type="danger" htmlType="submit">
{t("jobs.actions.convert")}
</Button>
<Button onClick={() => setVisible(false)}>
{t("general.actions.close")}
</Button>
</Form>
</div>
);
return (
<Popover visible={visible} content={popMenu}>
<Button
key="convert"
className="imex-flex-row__margin"
type="danger"
style={{ display: job.converted ? "none" : "" }}
disabled={job.converted || jobRO}
onClick={() => setVisible(true)}
>
{t("jobs.actions.convert")}
</Button>
</Popover>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsConvertButton);