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

Merge branch 'feature/IO-3548-Bill-Modal-TabOrder' into hotfix/2026-02-03

Browse Source
This commit is contained in:
Dave
2026-02-03 16:00:08 -05:00
parent 019b3cf4da ad520ab23e
commit b797bf7dc9
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/bill-form/bill-form.lines.component.jsx
View File

@@ -1,6 +1,7 @@
import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons"; import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react"; import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd"; import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
import { useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -32,6 +33,7 @@ export function BillEnterModalLinesComponent({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setFieldsValue, getFieldsValue, getFieldValue } = form; const { setFieldsValue, getFieldsValue, getFieldValue } = form;
const firstFieldRefs = useRef({});
const CONTROL_HEIGHT = 32; const CONTROL_HEIGHT = 32;
@@ -155,6 +157,9 @@ export function BillEnterModalLinesComponent({
), ),
formInput: (record, index) => ( formInput: (record, index) => (
<BillLineSearchSelect <BillLineSearchSelect
ref={(el) => {
firstFieldRefs.current[index] = el;
}}
disabled={disabled} disabled={disabled}
options={lineData} options={lineData}
style={{ style={{
@@ -205,7 +210,7 @@ export function BillEnterModalLinesComponent({
label: t("billlines.fields.line_desc"), label: t("billlines.fields.line_desc"),
rules: [{ required: true }] rules: [{ required: true }]
}), }),
formInput: () => <Input.TextArea disabled={disabled} autoSize /> formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
}, },
{ {
title: t("billlines.fields.quantity"), title: t("billlines.fields.quantity"),
@@ -234,7 +239,7 @@ export function BillEnterModalLinesComponent({
}) })
] ]
}), }),
formInput: () => <InputNumber precision={0} min={1} disabled={disabled} /> formInput: () => <InputNumber precision={0} min={1} disabled={disabled} tabIndex={0} />
}, },
{ {
title: t("billlines.fields.actual_price"), title: t("billlines.fields.actual_price"),
@@ -251,6 +256,7 @@ export function BillEnterModalLinesComponent({
<CurrencyInput <CurrencyInput
min={0} min={0}
disabled={disabled} disabled={disabled}
tabIndex={0}
// NOTE: Autofill should only happen on forward Tab out of Retail // NOTE: Autofill should only happen on forward Tab out of Retail
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index); if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index);
@@ -328,6 +334,7 @@ export function BillEnterModalLinesComponent({
min={0} min={0}
disabled={disabled} disabled={disabled}
controls={false} controls={false}
tabIndex={0}
style={{ width: "100%", height: CONTROL_HEIGHT }} style={{ width: "100%", height: CONTROL_HEIGHT }}
// NOTE: No auto-fill on focus/blur; only triggered from Retail on Tab // NOTE: No auto-fill on focus/blur; only triggered from Retail on Tab
/> />
@@ -392,7 +399,7 @@ export function BillEnterModalLinesComponent({
rules: [{ required: true }] rules: [{ required: true }]
}), }),
formInput: () => ( formInput: () => (
<Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}> <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled} tabIndex={0}>
{bodyshopHasDmsKey(bodyshop) {bodyshopHasDmsKey(bodyshop)
? CiecaSelect(true, false) ? CiecaSelect(true, false)
: responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)} : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
@@ -412,7 +419,7 @@ export function BillEnterModalLinesComponent({
name: [field.name, "location"] name: [field.name, "location"]
}), }),
formInput: () => ( formInput: () => (
<Select disabled={disabled}> <Select disabled={disabled} tabIndex={0}>
{bodyshop.md_parts_locations.map((loc, idx) => ( {bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}> <Select.Option key={idx} value={loc}>
{loc} {loc}
@@ -432,7 +439,7 @@ export function BillEnterModalLinesComponent({
key: `${field.name}deductedfromlbr`, key: `${field.name}deductedfromlbr`,
name: [field.name, "deductedfromlbr"] name: [field.name, "deductedfromlbr"]
}), }),
formInput: () => <Switch disabled={disabled} />, formInput: () => <Switch disabled={disabled} tabIndex={0} />,
additional: (record, index) => ( additional: (record, index) => (
<Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}> <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
{() => { {() => {
@@ -523,7 +530,7 @@ export function BillEnterModalLinesComponent({
rome: false rome: false
}) })
}), }),
formInput: () => <Switch disabled={disabled} /> formInput: () => <Switch disabled={disabled} tabIndex={0} />
} }
] ]
}), }),
@@ -538,7 +545,7 @@ export function BillEnterModalLinesComponent({
valuePropName: "checked", valuePropName: "checked",
name: [field.name, "applicable_taxes", "state"] name: [field.name, "applicable_taxes", "state"]
}), }),
formInput: () => <Switch disabled={disabled} /> formInput: () => <Switch disabled={disabled} tabIndex={0} />
}, },
...InstanceRenderManager({ ...InstanceRenderManager({
@@ -554,7 +561,7 @@ export function BillEnterModalLinesComponent({
valuePropName: "checked", valuePropName: "checked",
name: [field.name, "applicable_taxes", "local"] name: [field.name, "applicable_taxes", "local"]
}), }),
formInput: () => <Switch disabled={disabled} /> formInput: () => <Switch disabled={disabled} tabIndex={0} />
} }
] ]
}), }),
@@ -574,6 +581,7 @@ export function BillEnterModalLinesComponent({
icon={<DeleteFilled />} icon={<DeleteFilled />}
disabled={disabled || invLen > 0} disabled={disabled || invLen > 0}
onClick={() => remove(record.name)} onClick={() => remove(record.name)}
tabIndex={0}
/> />
{Simple_Inventory.treatment === "on" && ( {Simple_Inventory.treatment === "on" && (
@@ -645,12 +653,19 @@ export function BillEnterModalLinesComponent({
<Button <Button
disabled={disabled} disabled={disabled}
onClick={() => { onClick={() => {
const newIndex = fields.length;
add( add(
InstanceRenderManager({ InstanceRenderManager({
imex: { applicable_taxes: { federal: true } }, imex: { applicable_taxes: { federal: true } },
rome: { applicable_taxes: { federal: false } } rome: { applicable_taxes: { federal: false } }
}) })
); );
setTimeout(() => {
const firstField = firstFieldRefs.current[newIndex];
if (firstField?.focus) {
firstField.focus();
}
}, 100);
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
> >