110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import { useMutation } from "@apollo/client/react";
|
|
import { Form, Modal } from "antd";
|
|
import { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
import { INSERT_INVENTORY_LINE, UPDATE_INVENTORY_LINE } from "../../graphql/inventory.queries";
|
|
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
|
import { selectInventoryUpsert } from "../../redux/modals/modals.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import InventoryUpsertModal from "./inventory-upsert-modal.component";
|
|
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
inventoryUpsertModal: selectInventoryUpsert
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
toggleModalVisible: () => dispatch(toggleModalVisible("inventoryUpsert"))
|
|
});
|
|
|
|
export function InventoryUpsertModalContainer({ bodyshop, inventoryUpsertModal, toggleModalVisible }) {
|
|
const { t } = useTranslation();
|
|
const [insertInventory] = useMutation(INSERT_INVENTORY_LINE);
|
|
const [updateInventoryLine] = useMutation(UPDATE_INVENTORY_LINE);
|
|
const notification = useNotification();
|
|
|
|
const { open, context, actions } = inventoryUpsertModal;
|
|
const { existingInventory } = context;
|
|
const { refetch } = actions;
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
useEffect(() => {
|
|
//Required to prevent infinite looping.
|
|
if (existingInventory && open) {
|
|
form.setFieldsValue(existingInventory);
|
|
} else if (!existingInventory && open) {
|
|
form.resetFields();
|
|
}
|
|
}, [existingInventory, form, open]);
|
|
|
|
const handleFinish = async (formValues) => {
|
|
const values = formValues;
|
|
|
|
if (existingInventory) {
|
|
logImEXEvent("inventory_update");
|
|
|
|
updateInventoryLine({
|
|
variables: {
|
|
inventoryId: existingInventory.id,
|
|
inventoryItem: values
|
|
}
|
|
}).then(() => {
|
|
notification.success({
|
|
title: t("inventory.successes.updated")
|
|
});
|
|
});
|
|
// if (refetch) refetch();
|
|
toggleModalVisible();
|
|
} else {
|
|
logImEXEvent("inventory_insert");
|
|
|
|
await insertInventory({
|
|
variables: {
|
|
inventoryItem: { shopid: bodyshop.id, ...values }
|
|
},
|
|
update(cache, { data }) {
|
|
cache.modify({
|
|
fields: {
|
|
inventory(existingInv) {
|
|
return [...existingInv, data.insert_inventory_one];
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
if (refetch) refetch();
|
|
form.resetFields();
|
|
toggleModalVisible();
|
|
notification.success({
|
|
title: t("inventory.successes.inserted")
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={existingInventory ? t("inventory.actions.edit") : t("inventory.actions.new")}
|
|
open={open}
|
|
okText={t("general.actions.save")}
|
|
onOk={() => {
|
|
form.submit();
|
|
}}
|
|
onCancel={() => {
|
|
toggleModalVisible();
|
|
}}
|
|
destroyOnHidden
|
|
>
|
|
<Form form={form} onFinish={handleFinish} layout="vertical">
|
|
<InventoryUpsertModal form={form} />
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(InventoryUpsertModalContainer);
|