Resolve non-updated form on bill enter. IO-739

This commit is contained in:
Patrick Fic
2021-03-05 11:20:03 -08:00
parent 89383dccff
commit 9a8e07d2e5
6 changed files with 116 additions and 127 deletions

View File

@@ -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}

View File

@@ -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}

View File

@@ -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}

View File

@@ -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,

View File

@@ -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}

View File

@@ -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: