Finish the majority of work on vendors page to add/delete/edit.
This commit is contained in:
Patrick Fic
114
client/src/components/vendors-form/vendors-form.component.jsx
Normal file
114
client/src/components/vendors-form/vendors-form.component.jsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Button, Form, Input, InputNumber, Switch } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormItemEmail from "../form-items-formatted/email-form-item.component";
|
||||
import ResetForm from "../form-items-formatted/reset-form-item.component";
|
||||
export default function VendorsFormComponent({ form, vendor, handleDelete }) {
|
||||
const {
|
||||
getFieldDecorator,
|
||||
isFieldsTouched,
|
||||
getFieldValue,
|
||||
resetFields
|
||||
} = form;
|
||||
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
|
||||
<Button htmlType='submit' type='primary'>
|
||||
{t("general.actions.save")}
|
||||
</Button>
|
||||
<Button type='danger' onClick={handleDelete}>
|
||||
{t("general.actions.delete")}
|
||||
</Button>
|
||||
<Form.Item label={t("vendors.fields.zip")}>
|
||||
{getFieldDecorator("zip", {
|
||||
initialValue: vendor.zip
|
||||
})(<Input name='zip' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.terms")}>
|
||||
{getFieldDecorator("terms", {
|
||||
initialValue: vendor.terms
|
||||
})(<Input name='terms' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.taxid")}>
|
||||
{getFieldDecorator("taxid", {
|
||||
initialValue: vendor.taxid
|
||||
})(<Input name='taxid' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.street1")}>
|
||||
{getFieldDecorator("street1", {
|
||||
initialValue: vendor.street1
|
||||
})(<Input name='street1' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.street2")}>
|
||||
{getFieldDecorator("street2", {
|
||||
initialValue: vendor.street2
|
||||
})(<Input name='street2' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.state")}>
|
||||
{getFieldDecorator("state", {
|
||||
initialValue: vendor.state
|
||||
})(<Input name='state' />)}
|
||||
</Form.Item>{" "}
|
||||
<Form.Item label={t("vendors.fields.prompt_discount")}>
|
||||
{getFieldDecorator("prompt_discount", {
|
||||
initialValue: vendor.prompt_discount
|
||||
})(<InputNumber name='prompt_discount' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.name")}>
|
||||
{getFieldDecorator("name", {
|
||||
initialValue: vendor.name
|
||||
})(<Input name='name' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.favorite")}>
|
||||
{getFieldDecorator("favorite", {
|
||||
initialValue: vendor.favorite,
|
||||
valuePropName: "checked"
|
||||
})(<Switch name='favorite' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.email")}>
|
||||
{getFieldDecorator("email", {
|
||||
initialValue: vendor.email,
|
||||
rules: [
|
||||
{
|
||||
type: "email",
|
||||
message: t("general.validation.invalidemail")
|
||||
}
|
||||
]
|
||||
})(<FormItemEmail name='email' email={getFieldValue("email")} />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.due_date")}>
|
||||
{getFieldDecorator("due_date", {
|
||||
initialValue: vendor.due_date
|
||||
})(<InputNumber name='due_date' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.display_name")}>
|
||||
{getFieldDecorator("display_name", {
|
||||
initialValue: vendor.display_name
|
||||
})(<Input name='display_name' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.discount")}>
|
||||
{getFieldDecorator("discount", {
|
||||
initialValue: vendor.discount
|
||||
})(<InputNumber name='discount' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.country")}>
|
||||
{getFieldDecorator("country", {
|
||||
initialValue: vendor.country
|
||||
})(<Input name='country' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.cost_center")}>
|
||||
{getFieldDecorator("cost_center", {
|
||||
initialValue: vendor.cost_center,
|
||||
rules: [{ required: true, message: t("general.validation.required") }]
|
||||
})(<Input name='cost_center' />)}
|
||||
</Form.Item>
|
||||
<Form.Item label={t("vendors.fields.city")}>
|
||||
{getFieldDecorator("city", {
|
||||
initialValue: vendor.city
|
||||
})(<Input name='city' />)}
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
client/src/components/vendors-form/vendors-form.container.jsx
Normal file
109
client/src/components/vendors-form/vendors-form.container.jsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from "react";
|
||||
import { Form } from "antd";
|
||||
import VendorsFormComponent from "./vendors-form.component";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notification } from "antd";
|
||||
import {
|
||||
UPDATE_VENDOR,
|
||||
INSERT_NEW_VENDOR,
|
||||
DELETE_VENDOR
|
||||
} from "../../graphql/vendors.queries";
|
||||
import { useMutation } from "react-apollo";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
function VendorsFormContainer({ form, vendor, refetch, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const [updateVendor] = useMutation(UPDATE_VENDOR);
|
||||
const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
|
||||
const [deleteVendor] = useMutation(DELETE_VENDOR);
|
||||
const handleDelete = () => {
|
||||
deleteVendor({ variables: { id: vendor.id } })
|
||||
.then(r => {
|
||||
notification["success"]({
|
||||
message: t("vendors.successes.deleted")
|
||||
});
|
||||
//TODO: Better way to reset the field decorators?
|
||||
if (refetch) refetch().then(r => form.resetFields());
|
||||
})
|
||||
.catch(error => {
|
||||
notification["error"]({
|
||||
message: t("vendors.errors.deleting")
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (err) {
|
||||
notification["error"]({
|
||||
message: t("jobs.errors.validationtitle"),
|
||||
description: t("jobs.errors.validation")
|
||||
});
|
||||
}
|
||||
if (!err) {
|
||||
if (vendor.id) {
|
||||
//It's a vendor to update.
|
||||
updateVendor({
|
||||
variables: { id: vendor.id, 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")
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form onSubmit={handleSubmit} autoComplete='new-password'>
|
||||
{vendor ? (
|
||||
<VendorsFormComponent
|
||||
form={form}
|
||||
vendor={vendor}
|
||||
handleDelete={handleDelete}
|
||||
/>
|
||||
) : (
|
||||
t("vendors.labels.noneselected")
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer));
|
||||
Reference in New Issue
Block a user