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

IO-2054 Improved spacing for QB Multi Payer

Browse Source
This commit is contained in:
Patrick Fic
2022-09-28 12:07:27 -07:00
parent 1c222db5a3
commit 1105431909
1 changed files with 151 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
client/src/pages/jobs-close/jobs-close.component.jsx
View File

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