admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLEANUP Refactored parts order to use redux modals.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-02 17:59:42 -07:00
parent 7254622f52
commit fe002b0dff
11 changed files with 306 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
bodyshop_translations.babel
View File

@@ -10393,6 +10393,48 @@
<folder_node>
<name>fields</name>
<children>
<concept_node>
<name>act_price</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>db_price</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deliver_by</name>
<definition_loaded>false</definition_loaded>
@@ -10414,6 +10456,69 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>job_line_id</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>line_desc</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>line_remarks</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>lineremarks</name>
<definition_loaded>false</definition_loaded>

32
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -1,7 +1,9 @@
import { Button, Input, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { setModalContext } from "../../redux/modals/modals.actions";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
@@ -9,14 +11,19 @@ import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/a
import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
export default function JobLinesComponent({
const mapDispatchToProps = dispatch => ({
setPartsOrderContext: context =>
dispatch(setModalContext({ context: context, modal: "partsOrder" }))
});
export function JobLinesComponent({
setPartsOrderContext,
loading,
refetch,
jobLines,
setSearchText,
selectedLines,
setSelectedLines,
partsOrderModalVisible,
jobId,
setJobLineEditContext
}) {
@@ -24,7 +31,7 @@ export default function JobLinesComponent({
sortedInfo: {}
});
const { t } = useTranslation();
const setPartsModalVisible = partsOrderModalVisible[1];
const columns = [
{
title: t("joblines.fields.unq_seq"),
@@ -205,13 +212,7 @@ export default function JobLinesComponent({
return (
<div>
<PartsOrderModalContainer
partsOrderModalVisible={partsOrderModalVisible}
linesToOrder={selectedLines}
refetch={refetch}
jobId={jobId}
/>
<PartsOrderModalContainer />
<Table
title={() => {
return (
@@ -225,7 +226,15 @@ export default function JobLinesComponent({
/>
<Button
disabled={selectedLines.length > 0 ? false : true}
onClick={() => setPartsModalVisible(true)}
onClick={() => {
setPartsOrderContext({
actions: { refetch: refetch },
context: {
jobId: jobId,
linesToOrder: selectedLines
}
});
}}
>
{t("parts.actions.order")}
</Button>
@@ -280,3 +289,4 @@ export default function JobLinesComponent({
</div>
);
}
export default connect(null, mapDispatchToProps)(JobLinesComponent);

12
client/src/components/job-detail-lines/job-lines.container.jsx
View File

@@ -11,10 +11,8 @@ const mapDispatchToProps = dispatch => ({
setJobLineEditContext: context =>
dispatch(setModalContext({ context: context, modal: "jobLineEdit" }))
});
export default connect(
null,
mapDispatchToProps
)(function JobLinesContainer({ jobId, setJobLineEditContext }) {
export function JobLinesContainer({ jobId, setJobLineEditContext }) {
const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
@@ -22,7 +20,6 @@ export default connect(
const [searchText, setSearchText] = useState("");
const [selectedLines, setSelectedLines] = useState([]);
const partsOrderModalVisible = useState(false);
if (error) return <AlertComponent message={error.message} type="error" />;
@@ -64,9 +61,10 @@ export default connect(
setSearchText={setSearchText}
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
partsOrderModalVisible={partsOrderModalVisible}
jobId={jobId}
setJobLineEditContext={setJobLineEditContext}
/>
);
});
}
export default connect(null, mapDispatchToProps)(JobLinesContainer);

170
client/src/components/parts-order-modal/parts-order-modal.component.jsx
View File

@@ -1,94 +1,106 @@
import { AutoComplete, DatePicker, Input, List, Radio } from "antd";
import { HeartFilled } from "@ant-design/icons";
import React, { useState } from "react";
import { DeleteFilled } from "@ant-design/icons";
import { DatePicker, Form, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function PartsOrderModalComponent({
vendorList,
state,
sendTypeState,
orderLinesState
sendTypeState
}) {
const [partsOrder, setPartsOrder] = state;
const [sendType, setSendType] = sendTypeState;
const orderLines = orderLinesState[0];
const [vendorComplete, setVendorComplete] = useState(vendorList);
const { t } = useTranslation();
const handleSearch = value => {
if (value === "") setVendorComplete(vendorList);
else
setVendorComplete(
vendorList.filter(v =>
v.name.toLowerCase().includes(value.toLowerCase())
)
);
};
const handleSelect = (value, option) => {
setPartsOrder({ ...partsOrder, vendorid: option.key });
};
return (
<div>
<AutoComplete
onSearch={handleSearch}
onSelect={handleSelect}
defaultOpen
backfill
optionLabelProp="value"
dataSource={vendorComplete}
placeholder={t("vendors.labels.search")}
<Form.Item
name="vendorid"
label={t("vendors.fields.name")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
{vendorComplete.map(v => (
<AutoComplete.Option value={v.name} key={v.id}>
<div>{v.name}</div>
<div> {v.favorite ? <HeartFilled /> : null}</div>
</AutoComplete.Option>
))}
</AutoComplete>
{t("parts_orders.fields.deliver_by")}
<DatePicker
defaultValue={partsOrder.deliver_by}
onChange={e => {
setPartsOrder({ ...partsOrder, deliver_by: e });
}}
/>
<VendorSearchSelect options={vendorList} />
</Form.Item>
<Form.Item
name="deliver_by"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
label={t("parts_orders.fields.deliver_by")}
>
<DatePicker />
</Form.Item>
{t("parts_orders.labels.inthisorder")}
<List
itemLayout="horizontal"
dataSource={orderLines}
renderItem={item => (
<List.Item
actions={[
<Input placeholder={t("parts_orders.fields.lineremarks")} />
//TODO Editable table/adding line remarks to the order.
]}
>
{
// <List.Item.Meta
// avatar={
// <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
// }
// title={<a href='https://ant.design'>{item.name.last}</a>}
// description='Ant Design, a design language for background applications, is refined by Ant UED Team'
// />
}
<div>{`${item.line_desc}${
item.oem_partno ? " | " + item.oem_partno : ""
}`}</div>
</List.Item>
)}
/>
<Radio.Group
defaultValue={sendType}
onChange={e => setSendType(e.target.value)}
>
<Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
<Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
</Radio.Group>
<Form.List name={["parts_order_lines", "data"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<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("parts_orders.fields.line_remarks")}
key={`${index}line_remarks`}
name={[field.name, "line_remarks"]}
>
<Input />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.db_price")}
key={`${index}db_price`}
name={[field.name, "db_price"]}
>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.act_price")}
key={`${index}act_price`}
name={[field.name, "act_price"]}
>
<CurrencyInput />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
</div>
);
}}
</Form.List>
</div>
);
}
// <Radio.Group
// defaultValue={sendType}
// onChange={e => setSendType(e.target.value)}
// >
// <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
// <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
// </Radio.Group>

140
client/src/components/parts-order-modal/parts-order-modal.container.jsx
View File

@@ -1,12 +1,20 @@
import { Modal, notification } from "antd";
import React, { useState, useEffect } from "react";
import { useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
import PartsOrderEmailTemplate from "../../emails/templates/parts-order/parts-order.email";
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/templates/parts-order/parts-order.query";
import { UPDATE_JOB_LINE_STATUS } from "../../graphql/jobs-lines.queries";
import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
import {
setEmailOptions,
toggleEmailOverlayVisible
} from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPartsOrder } from "../../redux/modals/modals.selectors";
import {
selectBodyshop,
selectCurrentUser
@@ -14,102 +22,53 @@ import {
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import PartsOrderModalComponent from "./parts-order-modal.component";
import {
setEmailOptions,
toggleEmailOverlayVisible
} from "../../redux/email/email.actions";
import PartsOrderEmailTemplate from "../../emails/templates/parts-order/parts-order.email";
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/templates/parts-order/parts-order.query";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop
bodyshop: selectBodyshop,
partsOrderModal: selectPartsOrder
});
const mapDispatchToProps = dispatch => ({
setEmailOptions: e => dispatch(setEmailOptions(e)),
toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible())
toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
toggleModalVisible: () => dispatch(toggleModalVisible("partsOrder"))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function PartsOrderModalContainer({
partsOrderModalVisible,
linesToOrder,
jobId,
partsOrderModal,
toggleModalVisible,
currentUser,
bodyshop,
refetch,
setEmailOptions,
toggleEmailOverlayVisible
}) {
const { t } = useTranslation();
const [modalVisible, setModalVisible] = partsOrderModalVisible;
//set order lines to be a version of the incoming lines.
const orderLinesState = useState(
linesToOrder.reduce((acc, value) => {
acc.push({
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
line_remarks: "Alalala",
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, [])
);
const [orderLines, setOrderLinesState] = orderLinesState;
useEffect(() => {
if (modalVisible)
setOrderLinesState(
linesToOrder.reduce((acc, value) => {
acc.push({
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
line_remarks: "Alalala",
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, [])
);
}, [
modalVisible,
setOrderLinesState,
linesToOrder,
bodyshop.md_order_statuses.default_ordered
]);
const { visible, context, actions } = partsOrderModal;
const { jobId, linesToOrder } = context;
const { refetch } = actions;
const [form] = Form.useForm();
const sendTypeState = useState("e");
const sendType = sendTypeState[0];
const partsOrderState = useState({
vendorid: null,
jobid: jobId,
user_email: currentUser.email
});
const partsOrder = partsOrderState[0];
const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
fetchPolicy: "network-only",
skip: !modalVisible
skip: !visible
});
const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);
const handleOk = () => {
const handleFinish = values => {
insertPartOrder({
variables: {
po: [
{
...partsOrder,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*",
parts_order_lines: {
data: orderLines
}
...values,
jobid: jobId,
user_email: currentUser.email,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
}
]
}
@@ -117,7 +76,7 @@ export default connect(
.then(r => {
updateJobLines({
variables: {
ids: linesToOrder.map(item => item.id),
ids: values.parts_order_lines.data.map(item => item.job_line_id),
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
}
})
@@ -126,7 +85,7 @@ export default connect(
message: t("parts_orders.successes.created")
});
if (refetch) refetch();
setModalVisible(false);
toggleModalVisible();
if (sendType === "e") {
//Show the email modal and set the data.
@@ -160,6 +119,8 @@ export default connect(
description: error.message
});
});
//end no good
})
.catch(error => {
notification["error"]({
@@ -169,20 +130,41 @@ export default connect(
});
};
const initialValues =
linesToOrder &&
linesToOrder.reduce((acc, value) => {
acc.push({
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, []);
return (
<Modal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onOk={handleOk}
visible={visible}
onCancel={() => toggleModalVisible()}
width="90%"
onOk={() => form.submit()}
destroyOnClose
>
{error ? <AlertComponent message={error.message} type="error" /> : null}
<LoadingSpinner loading={loading}>
<PartsOrderModalComponent
vendorList={(data && data.vendors) || []}
state={partsOrderState}
sendTypeState={sendTypeState}
orderLinesState={orderLinesState}
/>
<Form
form={form}
autoComplete="no"
onFinish={handleFinish}
initialValues={{ parts_order_lines: { data: initialValues } }}
>
<PartsOrderModalComponent
vendorList={(data && data.vendors) || []}
sendTypeState={sendTypeState}
/>
</Form>
</LoadingSpinner>
</Modal>
);

1
client/src/graphql/vendors.queries.js
View File

@@ -73,6 +73,7 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
cost_center
id
favorite
discount
}
}
`;

3
client/src/redux/modals/modals.reducer.js
View File

@@ -13,7 +13,8 @@ const INITIAL_STATE = {
invoiceEnter: { ...baseModal },
courtesyCarReturn: { ...baseModal },
noteUpsert: { ...baseModal },
schedule: { ...baseModal }
schedule: { ...baseModal },
partsOrder: { ...baseModal }
};
const modalsReducer = (state = INITIAL_STATE, action) => {

5
client/src/redux/modals/modals.selectors.js
View File

@@ -26,3 +26,8 @@ export const selectSchedule = createSelector(
[selectModals],
modals => modals.schedule
);
export const selectPartsOrder = createSelector(
[selectModals],
modals => modals.partsOrder
);

5
client/src/translations/en_us/common.json
View File

@@ -679,7 +679,12 @@
"creating": "Error encountered when creating parts order. "
},
"fields": {
"act_price": "Price",
"db_price": "DB Price",
"deliver_by": "Deliver By",
"job_line_id": "Job Line Id",
"line_desc": "Line Description",
"line_remarks": "Remarks",
"lineremarks": "Line Remarks"
},
"labels": {

5
client/src/translations/es/common.json
View File

@@ -679,7 +679,12 @@
"creating": "Se encontró un error al crear el pedido de piezas."
},
"fields": {
"act_price": "",
"db_price": "",
"deliver_by": "Entregado por",
"job_line_id": "",
"line_desc": "",
"line_remarks": "",
"lineremarks": "Comentarios de línea"
},
"labels": {

5
client/src/translations/fr/common.json
View File

@@ -679,7 +679,12 @@
"creating": "Erreur rencontrée lors de la création de la commande de pièces."
},
"fields": {
"act_price": "",
"db_price": "",
"deliver_by": "Livrer par",
"job_line_id": "",
"line_desc": "",
"line_remarks": "",
"lineremarks": "Remarques sur la ligne"
},
"labels": {