STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.
This commit is contained in:
@@ -19,7 +19,8 @@ const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
|
||||
function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
|
||||
variables: { id: vendorId },
|
||||
@@ -45,61 +46,49 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (err) {
|
||||
notification["error"]({
|
||||
message: t("jobs.errors.validationtitle"),
|
||||
description: t("jobs.errors.validation")
|
||||
const handleFinish = values => {
|
||||
delete values.keys;
|
||||
if (vendorId) {
|
||||
//It's a vendor to update.
|
||||
updateVendor({
|
||||
variables: { id: vendorId, vendor: values }
|
||||
})
|
||||
.then(r => {
|
||||
notification["success"]({
|
||||
message: t("vendors.successes.saved")
|
||||
});
|
||||
//TODO Better way to reset the field decorators?
|
||||
if (refetch) refetch().then(r => form.resetFields());
|
||||
})
|
||||
.catch(error => {
|
||||
notification["error"]({
|
||||
message: t("vendors.errors.saving")
|
||||
});
|
||||
});
|
||||
}
|
||||
if (!err) {
|
||||
console.log("Received values of form: ", values);
|
||||
delete values.keys;
|
||||
if (vendorId) {
|
||||
//It's a vendor to update.
|
||||
updateVendor({
|
||||
variables: { id: vendorId, vendor: values }
|
||||
})
|
||||
.then(r => {
|
||||
notification["success"]({
|
||||
message: t("vendors.successes.saved")
|
||||
});
|
||||
//TODO Better way to reset the field decorators?
|
||||
if (refetch) refetch().then(r => form.resetFields());
|
||||
})
|
||||
.catch(error => {
|
||||
notification["error"]({
|
||||
message: t("vendors.errors.saving")
|
||||
});
|
||||
});
|
||||
} else {
|
||||
//It's a new vendor to insert.
|
||||
insertvendor({
|
||||
variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
|
||||
})
|
||||
.then(r => {
|
||||
notification["success"]({
|
||||
message: t("vendors.successes.saved")
|
||||
});
|
||||
//TODO Better way to reset the field decorators?
|
||||
if (refetch) refetch().then(r => form.resetFields());
|
||||
})
|
||||
.catch(error => {
|
||||
notification["error"]({
|
||||
message: t("vendors.errors.saving")
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//It's a new vendor to insert.
|
||||
insertvendor({
|
||||
variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
|
||||
})
|
||||
.then(r => {
|
||||
notification["success"]({
|
||||
message: t("vendors.successes.saved")
|
||||
});
|
||||
//TODO Better way to reset the field decorators?
|
||||
if (refetch) refetch().then(r => form.resetFields());
|
||||
})
|
||||
.catch(error => {
|
||||
notification["error"]({
|
||||
message: t("vendors.errors.saving")
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} autoComplete="new-password">
|
||||
<Form onFinish={handleFinish} form={form} autoComplete="new-password">
|
||||
{data ? (
|
||||
<VendorsFormComponent
|
||||
form={form}
|
||||
@@ -112,7 +101,4 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer));
|
||||
export default connect(mapStateToProps, null)(VendorsFormContainer);
|
||||
|
||||
Reference in New Issue
Block a user