Resolve non-updated form on bill enter. IO-739
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useApolloClient, useMutation } from "@apollo/client";
|
||||
import { Button, Form, Modal, notification } from "antd";
|
||||
import _ from "lodash";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -197,9 +197,28 @@ function BillEnterModalContainer({
|
||||
if (enterAgain) form.submit();
|
||||
}, [enterAgain, form]);
|
||||
|
||||
const formValues = useMemo(() => {
|
||||
return {
|
||||
...billEnterModal.context.bill,
|
||||
jobid:
|
||||
(billEnterModal.context.job && billEnterModal.context.job.id) || null,
|
||||
federal_tax_rate:
|
||||
(bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.federal_tax_rate) ||
|
||||
0,
|
||||
state_tax_rate:
|
||||
(bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.state_tax_rate) ||
|
||||
0,
|
||||
local_tax_rate:
|
||||
(bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.local_tax_rate) ||
|
||||
0,
|
||||
};
|
||||
}, [billEnterModal, bodyshop]);
|
||||
|
||||
useEffect(() => {
|
||||
if (billEnterModal.visible) form.resetFields();
|
||||
}, [billEnterModal.visible, form]);
|
||||
if (billEnterModal.visible) {
|
||||
form.setFieldsValue(formValues);
|
||||
}
|
||||
}, [billEnterModal.visible, form, formValues]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -239,24 +258,7 @@ function BillEnterModalContainer({
|
||||
onFinishFailed={() => {
|
||||
setEnterAgain(false);
|
||||
}}
|
||||
initialValues={{
|
||||
...billEnterModal.context.bill,
|
||||
jobid:
|
||||
(billEnterModal.context.job && billEnterModal.context.job.id) ||
|
||||
null,
|
||||
federal_tax_rate:
|
||||
(bodyshop.bill_tax_rates &&
|
||||
bodyshop.bill_tax_rates.federal_tax_rate) ||
|
||||
0,
|
||||
state_tax_rate:
|
||||
(bodyshop.bill_tax_rates &&
|
||||
bodyshop.bill_tax_rates.state_tax_rate) ||
|
||||
0,
|
||||
local_tax_rate:
|
||||
(bodyshop.bill_tax_rates &&
|
||||
bodyshop.bill_tax_rates.local_tax_rate) ||
|
||||
0,
|
||||
}}
|
||||
initialValues={formValues}
|
||||
>
|
||||
<BillFormContainer
|
||||
form={form}
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
Input,
|
||||
InputNumber,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
} from "antd";
|
||||
import React from "react";
|
||||
@@ -48,6 +49,7 @@ export function BillEnterModalLinesComponent({
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<LayoutFormRow style={{ flex: 1 }} grow>
|
||||
<Form.Item
|
||||
span={8}
|
||||
label={t("billlines.fields.jobline")}
|
||||
key={`${index}joblinename`}
|
||||
name={[field.name, "joblineid"]}
|
||||
@@ -154,37 +156,38 @@ export function BillEnterModalLinesComponent({
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.actual_cost")}
|
||||
key={`${index}actual_cost`}
|
||||
name={[field.name, "actual_cost"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
const line = getFieldsValue(["billlines"]).billlines[
|
||||
index
|
||||
];
|
||||
if (!!!line) return null;
|
||||
const lineDiscount = (
|
||||
1 -
|
||||
Math.round(
|
||||
(line.actual_cost / line.actual_price) * 100
|
||||
) /
|
||||
100
|
||||
).toPrecision(2);
|
||||
<div>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.actual_cost")}
|
||||
key={`${index}actual_cost`}
|
||||
name={[field.name, "actual_cost"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
const line = getFieldsValue(["billlines"])
|
||||
.billlines[index];
|
||||
if (!!!line) return null;
|
||||
const lineDiscount = (
|
||||
1 -
|
||||
Math.round(
|
||||
(line.actual_cost / line.actual_price) * 100
|
||||
) /
|
||||
100
|
||||
).toPrecision(2);
|
||||
|
||||
if (lineDiscount - discount === 0) return <div />;
|
||||
return <WarningOutlined style={{ color: "red" }} />;
|
||||
}}
|
||||
</Form.Item>
|
||||
if (lineDiscount - discount === 0) return <div />;
|
||||
return <WarningOutlined style={{ color: "red" }} />;
|
||||
}}
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.cost_center")}
|
||||
key={`${index}cost_center`}
|
||||
@@ -204,30 +207,45 @@ export function BillEnterModalLinesComponent({
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Space flex>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.federal_tax_applicable")}
|
||||
key={`${index}fedtax`}
|
||||
initialValue={true}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "federal"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.state_tax_applicable")}
|
||||
key={`${index}statetax`}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "state"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.local_tax_applicable")}
|
||||
key={`${index}localtax`}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "local"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.federal_tax_applicable")}
|
||||
key={`${index}fedtax`}
|
||||
initialValue={true}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "federal"]}
|
||||
label={t("billlines.fields.location")}
|
||||
key={`${index}location`}
|
||||
name={[field.name, "location"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.state_tax_applicable")}
|
||||
key={`${index}statetax`}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "state"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.local_tax_applicable")}
|
||||
key={`${index}localtax`}
|
||||
valuePropName="checked"
|
||||
name={[field.name, "applicable_taxes", "local"]}
|
||||
>
|
||||
<Switch disabled={disabled} />
|
||||
<Select style={{ width: "10rem" }} disabled={disabled}>
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
<Select.Option key={idx} value={loc}>
|
||||
{loc}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.labels.deductfromlabor")}
|
||||
@@ -335,19 +353,6 @@ export function BillEnterModalLinesComponent({
|
||||
return <span />;
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("billlines.fields.location")}
|
||||
key={`${index}location`}
|
||||
name={[field.name, "location"]}
|
||||
>
|
||||
<Select style={{ width: "10rem" }} disabled={disabled}>
|
||||
{bodyshop.md_parts_locations.map((loc, idx) => (
|
||||
<Select.Option key={idx} value={loc}>
|
||||
{loc}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
|
||||
@@ -46,23 +46,17 @@ const BillLineSearchSelect = (
|
||||
line_desc={item.line_desc}
|
||||
part_qty={item.part_qty}
|
||||
>
|
||||
<Row justify="center" align="middle">
|
||||
<Col span={12}>{item.line_desc}</Col>
|
||||
<Col span={8}>
|
||||
{item.oem_partno ? (
|
||||
<Tag color="blue">{item.oem_partno}</Tag>
|
||||
) : null}
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
{item.act_price ? (
|
||||
<Tag color="green">
|
||||
<CurrencyFormatter>
|
||||
{item.act_price || 0}
|
||||
</CurrencyFormatter>
|
||||
</Tag>
|
||||
) : null}
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="imex-flex-row">
|
||||
<div style={{ flex: 1 }}>{item.line_desc}</div>
|
||||
{item.oem_partno ? (
|
||||
<Tag color="blue">{item.oem_partno}</Tag>
|
||||
) : null}
|
||||
{item.act_price ? (
|
||||
<Tag color="green">
|
||||
<CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
|
||||
</Tag>
|
||||
) : null}
|
||||
</div>
|
||||
</Option>
|
||||
))
|
||||
: null}
|
||||
|
||||
@@ -146,7 +146,6 @@ export default function TimeTicketModalComponent({
|
||||
}
|
||||
|
||||
function LaborAllocationContainer({ jobid }) {
|
||||
console.log("jobid", jobid);
|
||||
const { loading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
|
||||
variables: { id: jobid },
|
||||
skip: !jobid,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Col, Row, Select, Tag } from "antd";
|
||||
import React, { useEffect, useState, forwardRef } from "react";
|
||||
import { HeartOutlined } from "@ant-design/icons";
|
||||
import { Select, Tag } from "antd";
|
||||
import React, { forwardRef, useEffect, useState } from "react";
|
||||
const { Option } = Select;
|
||||
|
||||
//To be used as a form element only.
|
||||
@@ -45,31 +45,22 @@ const VendorSearchSelect = (
|
||||
name={o.name}
|
||||
discount={o.discount}
|
||||
>
|
||||
<Row>
|
||||
<Col span={16}>{o.name}</Col>
|
||||
<Col span={4}>
|
||||
<HeartOutlined />
|
||||
</Col>
|
||||
{o.discount && (
|
||||
<Col span={4}>
|
||||
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
<div className="imex-flex-row">
|
||||
<div style={{ flex: 1 }}>{o.name}</div>
|
||||
<HeartOutlined />
|
||||
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
||||
</div>
|
||||
</Option>
|
||||
))
|
||||
: null}
|
||||
{options
|
||||
? options.map((o) => (
|
||||
<Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
|
||||
<Row>
|
||||
<Col span={20}>{o.name}</Col>
|
||||
{o.discount && (
|
||||
<Col span={4}>
|
||||
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
<div className="imex-flex-row" style={{ width: "100%" }}>
|
||||
<div style={{ flex: 1 }}>{o.name}</div>
|
||||
|
||||
<Tag color="green">{`${o.discount * 100}%`}</Tag>
|
||||
</div>
|
||||
</Option>
|
||||
))
|
||||
: null}
|
||||
|
||||
@@ -153,8 +153,6 @@ const { Content, Header } = Layout;
|
||||
|
||||
const stripePromise = new Promise((resolve, reject) => {
|
||||
client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
|
||||
console.log(resp);
|
||||
|
||||
resolve(
|
||||
loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
|
||||
stripeAccount:
|
||||
|
||||
Reference in New Issue
Block a user