IO-2054 Improved spacing for QB Multi Payer
This commit is contained in:
Patrick Fic
@@ -3,6 +3,7 @@ import { useApolloClient, useMutation } from "@apollo/client";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
@@ -10,6 +11,7 @@ import {
|
||||
notification,
|
||||
PageHeader,
|
||||
Popconfirm,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Statistic,
|
||||
@@ -329,156 +331,162 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
|
||||
</LayoutFormRow>
|
||||
<Divider>{t("jobs.labels.multipayers")}</Divider>
|
||||
{Qb_Multi_Ar.treatment === "on" && (
|
||||
<Space>
|
||||
<Form.List
|
||||
name={["qb_multiple_payers"]}
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
let totalAllocated = Dinero();
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col lg={8} md={24}>
|
||||
<Form.List
|
||||
name={["qb_multiple_payers"]}
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
let totalAllocated = Dinero();
|
||||
|
||||
const payers = form.getFieldValue("qb_multiple_payers");
|
||||
payers &&
|
||||
payers.forEach((payer) => {
|
||||
totalAllocated = totalAllocated.add(
|
||||
Dinero({
|
||||
amount: Math.round((payer?.amount || 0) * 100),
|
||||
})
|
||||
);
|
||||
});
|
||||
const discrep = job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs).subtract(
|
||||
totalAllocated
|
||||
)
|
||||
: Dinero();
|
||||
return discrep.getAmount() > 0
|
||||
? Promise.resolve()
|
||||
: Promise.reject(
|
||||
new Error(
|
||||
t("jobs.labels.additionalpayeroverallocation")
|
||||
const payers = form.getFieldValue("qb_multiple_payers");
|
||||
payers &&
|
||||
payers.forEach((payer) => {
|
||||
totalAllocated = totalAllocated.add(
|
||||
Dinero({
|
||||
amount: Math.round((payer?.amount || 0) * 100),
|
||||
})
|
||||
);
|
||||
});
|
||||
const discrep = job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs).subtract(
|
||||
totalAllocated
|
||||
)
|
||||
);
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.qb_multiple_payers.name")}
|
||||
key={`${index}name`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ minWidth: "12rem" }}
|
||||
disabled={jobRO}
|
||||
: Dinero();
|
||||
return discrep.getAmount() > 0
|
||||
? Promise.resolve()
|
||||
: Promise.reject(
|
||||
new Error(
|
||||
t("jobs.labels.additionalpayeroverallocation")
|
||||
)
|
||||
);
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.qb_multiple_payers.name")}
|
||||
key={`${index}name`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{bodyshop.md_ins_cos.map((s) => (
|
||||
<Select.Option key={s.name} value={s.name}>
|
||||
{s.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Select
|
||||
style={{ minWidth: "12rem" }}
|
||||
disabled={jobRO}
|
||||
>
|
||||
{bodyshop.md_ins_cos.map((s) => (
|
||||
<Select.Option key={s.name} value={s.name}>
|
||||
{s.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("jobs.fields.qb_multiple_payers.amount")}
|
||||
key={`${index}amount`}
|
||||
name={[field.name, "amount"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} disabled={jobRO} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.qb_multiple_payers.amount")}
|
||||
key={`${index}amount`}
|
||||
name={[field.name, "amount"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} disabled={jobRO} />
|
||||
</Form.Item>
|
||||
|
||||
<DeleteFilled
|
||||
disabled={jobRO}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
<DeleteFilled
|
||||
disabled={jobRO}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
disabled={jobRO}
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("jobs.actions.dms.addpayer")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
disabled={jobRO}
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("jobs.actions.dms.addpayer")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
//Perform Calculation to determine discrepancy.
|
||||
let totalAllocated = Dinero();
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</Col>
|
||||
<Col lg={16} md={24}>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
//Perform Calculation to determine discrepancy.
|
||||
let totalAllocated = Dinero();
|
||||
|
||||
const payers = form.getFieldValue("qb_multiple_payers");
|
||||
payers &&
|
||||
payers.forEach((payer) => {
|
||||
totalAllocated = totalAllocated.add(
|
||||
Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
|
||||
);
|
||||
});
|
||||
const discrep = job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs).subtract(
|
||||
totalAllocated
|
||||
)
|
||||
: Dinero();
|
||||
return (
|
||||
<Space size="large" wrap align="center">
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_cust_payable")}
|
||||
value={(job.job_totals
|
||||
? Dinero(job.job_totals.totals.custPayable)
|
||||
: Dinero()
|
||||
).toFormat()}
|
||||
/>
|
||||
<Divider orientation="vertical" />
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_repairs")}
|
||||
value={(job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs)
|
||||
: Dinero()
|
||||
).toFormat()}
|
||||
/>
|
||||
<Typography.Title>-</Typography.Title>
|
||||
<Statistic
|
||||
title={t("jobs.labels.dms.totalallocated")}
|
||||
value={totalAllocated.toFormat()}
|
||||
/>
|
||||
<Typography.Title>=</Typography.Title>
|
||||
<Statistic
|
||||
title={t("jobs.labels.pimraryamountpayable")}
|
||||
valueStyle={{
|
||||
color: discrep.getAmount() > 0 ? "green" : "red",
|
||||
}}
|
||||
value={discrep.toFormat()}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Space>
|
||||
const payers = form.getFieldValue("qb_multiple_payers");
|
||||
payers &&
|
||||
payers.forEach((payer) => {
|
||||
totalAllocated = totalAllocated.add(
|
||||
Dinero({
|
||||
amount: Math.round((payer?.amount || 0) * 100),
|
||||
})
|
||||
);
|
||||
});
|
||||
const discrep = job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs).subtract(
|
||||
totalAllocated
|
||||
)
|
||||
: Dinero();
|
||||
return (
|
||||
<Space size="large" wrap align="center">
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_cust_payable")}
|
||||
value={(job.job_totals
|
||||
? Dinero(job.job_totals.totals.custPayable)
|
||||
: Dinero()
|
||||
).toFormat()}
|
||||
/>
|
||||
<Divider type="vertical" />
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_repairs")}
|
||||
value={(job.job_totals
|
||||
? Dinero(job.job_totals.totals.total_repairs)
|
||||
: Dinero()
|
||||
).toFormat()}
|
||||
/>
|
||||
<Typography.Title>-</Typography.Title>
|
||||
<Statistic
|
||||
title={t("jobs.labels.dms.totalallocated")}
|
||||
value={totalAllocated.toFormat()}
|
||||
/>
|
||||
<Typography.Title>=</Typography.Title>
|
||||
<Statistic
|
||||
title={t("jobs.labels.pimraryamountpayable")}
|
||||
valueStyle={{
|
||||
color: discrep.getAmount() > 0 ? "green" : "red",
|
||||
}}
|
||||
value={discrep.toFormat()}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Divider />
|
||||
<JobsCloseLines job={job} />
|
||||
|
||||
Reference in New Issue
Block a user