Dave Richer
@@ -1,137 +1,137 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Form, Input, InputNumber, Select, Typography } from "antd";
|
||||
import {DeleteFilled} from "@ant-design/icons";
|
||||
import {Form, Input, InputNumber, Select, Typography} from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
|
||||
|
||||
export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
export function PartsReceiveModalComponent({bodyshop, form}) {
|
||||
const {t} = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow>
|
||||
<Form.Item name="location" label={t("parts_orders.labels.allpartsto")}>
|
||||
<Select
|
||||
style={{ width: "10rem" }}
|
||||
onSelect={(value) => {
|
||||
form.setFieldsValue({
|
||||
partsorderlines: form
|
||||
.getFieldValue("partsorderlines")
|
||||
.map((l) => {
|
||||
return { ...l, location: value };
|
||||
}),
|
||||
});
|
||||
}}
|
||||
>
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
<Select.Option key={idx} value={loc}>
|
||||
{loc}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<Typography.Title level={4}>
|
||||
{t("parts_orders.labels.inthisorder")}
|
||||
</Typography.Title>
|
||||
<Form.List name={["partsorderlines"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<Form.Item
|
||||
style={{ display: "none" }}
|
||||
key={`${index}joblineid`}
|
||||
name={[field.name, "joblineid"]}
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow>
|
||||
<Form.Item name="location" label={t("parts_orders.labels.allpartsto")}>
|
||||
<Select
|
||||
style={{width: "10rem"}}
|
||||
onSelect={(value) => {
|
||||
form.setFieldsValue({
|
||||
partsorderlines: form
|
||||
.getFieldValue("partsorderlines")
|
||||
.map((l) => {
|
||||
return {...l, location: value};
|
||||
}),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
style={{ display: "none" }}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<LayoutFormRow grow style={{ flex: 1 }}>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.oem_partno")}
|
||||
key={`${index}oem_partno`}
|
||||
name={[field.name, "oem_partno"]}
|
||||
>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.act_price")}
|
||||
key={`${index}act_price`}
|
||||
name={[field.name, "act_price"]}
|
||||
>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.location")}
|
||||
key={`${index}location`}
|
||||
name={[field.name, "location"]}
|
||||
>
|
||||
<Select style={{ width: "10rem" }}>
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
<Select.Option key={idx} value={loc}>
|
||||
{loc}
|
||||
{loc}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.quantity")}
|
||||
key={`${index}quantity`}
|
||||
name={[field.name, "quantity"]}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<DeleteFilled
|
||||
style={{ margin: "1rem" }}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
</LayoutFormRow>
|
||||
<Typography.Title level={4}>
|
||||
{t("parts_orders.labels.inthisorder")}
|
||||
</Typography.Title>
|
||||
<Form.List name={["partsorderlines"]}>
|
||||
{(fields, {add, remove, move}) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{display: "flex", alignItems: "center"}}>
|
||||
<Form.Item
|
||||
style={{display: "none"}}
|
||||
key={`${index}joblineid`}
|
||||
name={[field.name, "joblineid"]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
style={{display: "none"}}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<LayoutFormRow grow style={{flex: 1}}>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.oem_partno")}
|
||||
key={`${index}oem_partno`}
|
||||
name={[field.name, "oem_partno"]}
|
||||
>
|
||||
<Input disabled/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.act_price")}
|
||||
key={`${index}act_price`}
|
||||
name={[field.name, "act_price"]}
|
||||
>
|
||||
<Input disabled/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.location")}
|
||||
key={`${index}location`}
|
||||
name={[field.name, "location"]}
|
||||
>
|
||||
<Select style={{width: "10rem"}}>
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
<Select.Option key={idx} value={loc}>
|
||||
{loc}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.quantity")}
|
||||
key={`${index}quantity`}
|
||||
name={[field.name, "quantity"]}
|
||||
>
|
||||
<InputNumber min={0}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<DeleteFilled
|
||||
style={{margin: "1rem"}}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,120 +1,117 @@
|
||||
import { useMutation } from "@apollo/client";
|
||||
import { Form, Modal, notification } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { RECEIVE_PARTS_LINE } from "../../graphql/jobs-lines.queries";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectPartsReceive } from "../../redux/modals/modals.selectors";
|
||||
import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import {useMutation} from "@apollo/client";
|
||||
import {Form, Modal, notification} from "antd";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {logImEXEvent} from "../../firebase/firebase.utils";
|
||||
import {RECEIVE_PARTS_LINE} from "../../graphql/jobs-lines.queries";
|
||||
import {toggleModalVisible} from "../../redux/modals/modals.actions";
|
||||
import {selectPartsReceive} from "../../redux/modals/modals.selectors";
|
||||
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||
import PartsReceiveModalComponent from "./parts-receive-modal.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
partsReceiveModal: selectPartsReceive,
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
partsReceiveModal: selectPartsReceive,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("partsReceive")),
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("partsReceive")),
|
||||
});
|
||||
|
||||
export function PartsReceiveModalContainer({
|
||||
partsReceiveModal,
|
||||
toggleModalVisible,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { open, context, actions } = partsReceiveModal;
|
||||
const { partsorderlines } = context;
|
||||
partsReceiveModal,
|
||||
toggleModalVisible,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
}) {
|
||||
const {t} = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const {open, context, actions} = partsReceiveModal;
|
||||
const {partsorderlines} = context;
|
||||
|
||||
const { refetch } = actions;
|
||||
const [form] = Form.useForm();
|
||||
const {refetch} = actions;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [receivePartsLine] = useMutation(RECEIVE_PARTS_LINE);
|
||||
const [receivePartsLine] = useMutation(RECEIVE_PARTS_LINE);
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("parts_order_receive");
|
||||
setLoading(true);
|
||||
const result = await Promise.all(
|
||||
values.partsorderlines.map((li) => {
|
||||
return receivePartsLine({
|
||||
variables: {
|
||||
lineId: li.joblineid,
|
||||
line: {
|
||||
location: li.location,
|
||||
status:
|
||||
bodyshop.md_order_statuses.default_received || "Received*",
|
||||
},
|
||||
orderLineId: li.id,
|
||||
orderLine: {
|
||||
status:
|
||||
bodyshop.md_order_statuses.default_received || "Received*",
|
||||
},
|
||||
},
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("parts_order_receive");
|
||||
setLoading(true);
|
||||
const result = await Promise.all(
|
||||
values.partsorderlines.map((li) => {
|
||||
return receivePartsLine({
|
||||
variables: {
|
||||
lineId: li.joblineid,
|
||||
line: {
|
||||
location: li.location,
|
||||
status:
|
||||
bodyshop.md_order_statuses.default_received || "Received*",
|
||||
},
|
||||
orderLineId: li.id,
|
||||
orderLine: {
|
||||
status:
|
||||
bodyshop.md_order_statuses.default_received || "Received*",
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
result.forEach((jobLinesResult) => {
|
||||
if (jobLinesResult.errors) {
|
||||
notification["error"]({
|
||||
message: t("parts_orders.errors.creating"),
|
||||
description: JSON.stringify(jobLinesResult.errors),
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
notification["success"]({
|
||||
message: t("parts_orders.successes.received"),
|
||||
});
|
||||
setLoading(false);
|
||||
if (refetch) refetch();
|
||||
toggleModalVisible();
|
||||
};
|
||||
|
||||
const initialValues = {
|
||||
partsorderlines: partsorderlines,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open && !!partsorderlines) {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [open, partsorderlines, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title={t("parts_orders.labels.receive")}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
onOk={() => form.submit()}
|
||||
okButtonProps={{loading: loading}}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
width="50%"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
autoComplete="no"
|
||||
onFinish={handleFinish}
|
||||
initialValues={initialValues}
|
||||
>
|
||||
<PartsReceiveModalComponent form={form}/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
result.forEach((jobLinesResult) => {
|
||||
if (jobLinesResult.errors) {
|
||||
notification["error"]({
|
||||
message: t("parts_orders.errors.creating"),
|
||||
description: JSON.stringify(jobLinesResult.errors),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
notification["success"]({
|
||||
message: t("parts_orders.successes.received"),
|
||||
});
|
||||
setLoading(false);
|
||||
if (refetch) refetch();
|
||||
toggleModalVisible();
|
||||
};
|
||||
|
||||
const initialValues = {
|
||||
partsorderlines: partsorderlines,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open && !!partsorderlines) {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [open, partsorderlines, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title={t("parts_orders.labels.receive")}
|
||||
onCancel={() => toggleModalVisible()}
|
||||
onOk={() => form.submit()}
|
||||
okButtonProps={{ loading: loading }}
|
||||
destroyOnClose
|
||||
forceRender
|
||||
width="50%"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
autoComplete="no"
|
||||
onFinish={handleFinish}
|
||||
initialValues={initialValues}
|
||||
>
|
||||
<PartsReceiveModalComponent form={form} />
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(PartsReceiveModalContainer);
|
||||
|
||||
Reference in New Issue
Block a user