IO-2280 added config anchors

This commit is contained in:
swtmply
2023-05-26 02:24:34 +08:00
parent 209245187f
commit c2aaf8844f
7 changed files with 123 additions and 33 deletions

View File

@@ -15,6 +15,8 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
import ShopInfoROStatusComponent from "./shop-info.rostatus.component"; import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
import ShopInfoSchedulingComponent from "./shop-info.scheduling.component"; import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
import ShopInfoSpeedPrint from "./shop-info.speedprint.component"; import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
import { useHistory, useLocation } from "react-router-dom";
import queryString from "query-string";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -31,6 +33,10 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
bodyshop.imexshopid bodyshop.imexshopid
); );
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory();
const location = useLocation();
const search = queryString.parse(location.search);
return ( return (
<Card <Card
extra={ extra={
@@ -43,7 +49,12 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
</Button> </Button>
} }
> >
<Tabs> <Tabs
defaultActiveKey={search.subtab}
onChange={(key) =>
history.push({ search: `?tab=${search.tab}&subtab=${key}` })
}
>
<Tabs.TabPane key="general" tab={t("bodyshop.labels.shopinfo")}> <Tabs.TabPane key="general" tab={t("bodyshop.labels.shopinfo")}>
<ShopInfoGeneral form={form} /> <ShopInfoGeneral form={form} />
</Tabs.TabPane> </Tabs.TabPane>

View File

@@ -24,9 +24,13 @@ const timeZonesList = momentTZ.tz.names();
export default function ShopInfoGeneral({ form }) { export default function ShopInfoGeneral({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
<LayoutFormRow header={t("bodyshop.labels.businessinformation")}> <LayoutFormRow
header={t("bodyshop.labels.businessinformation")}
id="businessinformation"
>
<Form.Item <Form.Item
label={t("bodyshop.fields.shopname")} label={t("bodyshop.fields.shopname")}
name="shopname" name="shopname"
@@ -155,7 +159,10 @@ export default function ShopInfoGeneral({ form }) {
<InputNumber min={0} /> <InputNumber min={0} />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.accountingsetup")}> <LayoutFormRow
header={t("bodyshop.labels.accountingsetup")}
id="accountingsetup"
>
<Form.Item <Form.Item
label={t("bodyshop.labels.qbo")} label={t("bodyshop.labels.qbo")}
valuePropName="checked" valuePropName="checked"
@@ -386,7 +393,10 @@ export default function ShopInfoGeneral({ form }) {
<Select mode="tags" /> <Select mode="tags" />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")}> <LayoutFormRow
header={t("bodyshop.labels.scoreboardsetup")}
id="scoreboardsetup"
>
<Form.Item <Form.Item
label={t("bodyshop.fields.dailypainttarget")} label={t("bodyshop.fields.dailypainttarget")}
name={["scoreboard_target", "dailyPaintTarget"]} name={["scoreboard_target", "dailyPaintTarget"]}
@@ -445,7 +455,10 @@ export default function ShopInfoGeneral({ form }) {
<InputNumber min={1} precision={1} /> <InputNumber min={1} precision={1} />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.systemsettings")}> <LayoutFormRow
header={t("bodyshop.labels.systemsettings")}
id="systemsettings"
>
<Form.Item <Form.Item
name={["md_referral_sources"]} name={["md_referral_sources"]}
label={t("bodyshop.fields.md_referral_sources")} label={t("bodyshop.fields.md_referral_sources")}
@@ -655,7 +668,11 @@ export default function ShopInfoGeneral({ form }) {
<Input /> <Input />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.messagingpresets")}> <LayoutFormRow
grow
header={t("bodyshop.labels.messagingpresets")}
id="messagingpresets"
>
<Form.List name={["md_messaging_presets"]}> <Form.List name={["md_messaging_presets"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -720,7 +737,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.notespresets")}> <LayoutFormRow
grow
header={t("bodyshop.labels.notespresets")}
id="notespresets"
>
<Form.List name={["md_notes_presets"]}> <Form.List name={["md_notes_presets"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -785,7 +806,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.partslocations")}> <LayoutFormRow
grow
header={t("bodyshop.labels.partslocations")}
id="partslocations"
>
<Form.List name={["md_parts_locations"]}> <Form.List name={["md_parts_locations"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -839,7 +864,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.insurancecos")}> <LayoutFormRow
grow
header={t("bodyshop.labels.insurancecos")}
id="insurancecos"
>
<Form.List name={["md_ins_cos"]}> <Form.List name={["md_ins_cos"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -935,7 +964,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.estimators")}> <LayoutFormRow
grow
header={t("bodyshop.labels.estimators")}
id="estimators"
>
<Form.List name={["md_estimators"]}> <Form.List name={["md_estimators"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -1024,7 +1057,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.filehandlers")}> <LayoutFormRow
grow
header={t("bodyshop.labels.filehandlers")}
id="filehandlers"
>
<Form.List name={["md_filehandlers"]}> <Form.List name={["md_filehandlers"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -1106,7 +1143,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")}> <LayoutFormRow
grow
header={t("bodyshop.fields.md_ccc_rates")}
id="md_ccc_rates"
>
<Form.List name={["md_ccc_rates"]}> <Form.List name={["md_ccc_rates"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -1223,7 +1264,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")}> <LayoutFormRow
grow
header={t("bodyshop.fields.md_jobline_presets")}
id="md_jobline_presets"
>
<Form.List name={["md_jobline_presets"]}> <Form.List name={["md_jobline_presets"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -1404,7 +1449,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.fields.md_parts_order_comment")}> <LayoutFormRow
grow
header={t("bodyshop.fields.md_parts_order_comment")}
id="md_parts_order_comment"
>
<Form.List name={["md_parts_order_comment"]}> <Form.List name={["md_parts_order_comment"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -1470,7 +1519,11 @@ export default function ShopInfoGeneral({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow grow header={t("bodyshop.labels.md_to_emails")}> <LayoutFormRow
grow
header={t("bodyshop.labels.md_to_emails")}
id="md_to_emails"
>
<Form.List name={["md_to_emails"]}> <Form.List name={["md_to_emails"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (

View File

@@ -20,7 +20,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
const TemplateListGenerated = TemplateList(); const TemplateListGenerated = TemplateList();
return ( return (
<div> <div>
<LayoutFormRow header={t("bodyshop.labels.intakechecklist")}> <LayoutFormRow
header={t("bodyshop.labels.intakechecklist")}
id="intakechecklist"
>
<Form.List name={["intakechecklist", "form"]}> <Form.List name={["intakechecklist", "form"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -188,7 +191,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
</Form.Item> </Form.Item>
</SelectorDiv> </SelectorDiv>
<LayoutFormRow header={t("bodyshop.labels.deliverchecklist")}> <LayoutFormRow
header={t("bodyshop.labels.deliverchecklist")}
id="deliverchecklist"
>
<Form.List name={["deliverchecklist", "form"]}> <Form.List name={["deliverchecklist", "form"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (

View File

@@ -95,7 +95,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
{form.getFieldValue("pbs_serialnumber")} {form.getFieldValue("pbs_serialnumber")}
</DataLabel> </DataLabel>
)} )}
<LayoutFormRow> <LayoutFormRow>
<Form.Item <Form.Item
label={t("bodyshop.fields.dms.default_journal")} label={t("bodyshop.fields.dms.default_journal")}
@@ -315,7 +314,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</DataLabel> </DataLabel>
</> </>
)} )}
<LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.costs")}> <LayoutFormRow
header={t("bodyshop.labels.responsibilitycenters.costs")}
id="costs"
>
<Form.List name={["md_responsibility_centers", "costs"]}> <Form.List name={["md_responsibility_centers", "costs"]}>
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
@@ -462,6 +464,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<LayoutFormRow <LayoutFormRow
header={t("bodyshop.labels.responsibilitycenters.profits")} header={t("bodyshop.labels.responsibilitycenters.profits")}
id="profits"
> >
<Form.List name={["md_responsibility_centers", "profits"]}> <Form.List name={["md_responsibility_centers", "profits"]}>
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
@@ -601,7 +604,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <Form.Item key={field.key}>
<div> <div>
<LayoutFormRow> <LayoutFormRow id="mappingname">
<Form.Item <Form.Item
label={t("bodyshop.fields.dms.mappingname")} label={t("bodyshop.fields.dms.mappingname")}
key={`${index}name`} key={`${index}name`}
@@ -631,6 +634,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow <LayoutFormRow
header={t("bodyshop.labels.defaultcostsmapping")} header={t("bodyshop.labels.defaultcostsmapping")}
id="defaultcostsmapping"
> >
<Form.Item <Form.Item
label={t( label={t(
@@ -4088,6 +4092,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<LayoutFormRow <LayoutFormRow
header={t("bodyshop.labels.responsibilitycenters.tax_accounts")} header={t("bodyshop.labels.responsibilitycenters.tax_accounts")}
id="tax_accounts"
> >
<Form.Item <Form.Item
label={t("bodyshop.fields.responsibilitycenters.federal_tax")} label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
@@ -4202,7 +4207,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
{DmsAp.treatment === "on" && ( {DmsAp.treatment === "on" && (
<LayoutFormRow> <LayoutFormRow id="federal_tax_itc">
<Form.Item <Form.Item
label={t("bodyshop.fields.responsibilitycenters.federal_tax_itc")} label={t("bodyshop.fields.responsibilitycenters.federal_tax_itc")}
rules={[ rules={[
@@ -4316,7 +4321,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
)} )}
<LayoutFormRow> <LayoutFormRow id="state_tax">
<Form.Item <Form.Item
label={t("bodyshop.fields.responsibilitycenters.state_tax")} label={t("bodyshop.fields.responsibilitycenters.state_tax")}
rules={[ rules={[
@@ -4414,7 +4419,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<InputNumber precision={2} /> <InputNumber precision={2} />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow> <LayoutFormRow id="local_tax">
<Form.Item <Form.Item
label={t("bodyshop.fields.responsibilitycenters.local_tax")} label={t("bodyshop.fields.responsibilitycenters.local_tax")}
rules={[ rules={[
@@ -4512,7 +4517,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<InputNumber precision={2} /> <InputNumber precision={2} />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow header={<div>AR</div>}> <LayoutFormRow header={<div>AR</div>} id="AR">
{/* <Form.Item {/* <Form.Item
label={t("bodyshop.fields.responsibilitycenters.ar")} label={t("bodyshop.fields.responsibilitycenters.ar")}
rules={[ rules={[
@@ -4576,7 +4581,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</LayoutFormRow> </LayoutFormRow>
{DmsAp.treatment === "on" && ( {DmsAp.treatment === "on" && (
<LayoutFormRow header={t("bodyshop.fields.responsibilitycenters.ap")}> <LayoutFormRow
header={t("bodyshop.fields.responsibilitycenters.ap")}
id="ap"
>
{/* <Form.Item {/* <Form.Item
label={t("bodyshop.fields.responsibilitycenters.ap")} label={t("bodyshop.fields.responsibilitycenters.ap")}
rules={[ rules={[
@@ -4639,7 +4647,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
)} )}
<LayoutFormRow header={<div>Refund</div>}> <LayoutFormRow header={<div>Refund</div>} id="refund">
{/* <Form.Item {/* <Form.Item
label={t("bodyshop.fields.responsibilitycenters.refund")} label={t("bodyshop.fields.responsibilitycenters.refund")}
rules={[ rules={[
@@ -4702,7 +4710,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
{Qb_Multi_Ar.treatment === "on" && ( {Qb_Multi_Ar.treatment === "on" && (
<LayoutFormRow header={<div>Multiple Payers Item</div>}> <LayoutFormRow
header={<div>Multiple Payers Item</div>}
id="accountitem"
>
<Form.Item <Form.Item
label={t("bodyshop.fields.responsibilitycenter_accountitem")} label={t("bodyshop.fields.responsibilitycenter_accountitem")}
rules={[ rules={[
@@ -4730,7 +4741,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<div> <div>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <Form.Item key={field.key}>
<LayoutFormRow> <LayoutFormRow id="sales_tax_codes">
<Form.Item <Form.Item
label={t( label={t(
"bodyshop.fields.responsibilitycenters.sales_tax_codes.description" "bodyshop.fields.responsibilitycenters.sales_tax_codes.description"

View File

@@ -44,7 +44,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}; };
return ( return (
<SelectorDiv> <SelectorDiv id="jobstatus">
<Form.Item <Form.Item
name={["md_ro_statuses", "statuses"]} name={["md_ro_statuses", "statuses"]}
label={t("bodyshop.labels.alljobstatuses")} label={t("bodyshop.labels.alljobstatuses")}
@@ -322,6 +322,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
<LayoutFormRow <LayoutFormRow
grow grow
header={t("bodyshop.fields.statuses.production_colors")} header={t("bodyshop.fields.statuses.production_colors")}
id="production_colors"
> >
<Form.List name={["md_ro_statuses", "production_colors"]}> <Form.List name={["md_ro_statuses", "production_colors"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {

View File

@@ -92,7 +92,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider> <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
<Space wrap size="large"> <Space wrap size="large" id="workingdays">
<Form.Item <Form.Item
label={t("general.labels.sunday")} label={t("general.labels.sunday")}
name={["workingdays", "sunday"]} name={["workingdays", "sunday"]}
@@ -143,7 +143,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
<Switch /> <Switch />
</Form.Item> </Form.Item>
</Space> </Space>
<LayoutFormRow header={t("bodyshop.labels.apptcolors")}> <LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
<Form.List name={["appt_colors"]}> <Form.List name={["appt_colors"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
@@ -208,7 +208,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
}} }}
</Form.List> </Form.List>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.ssbuckets")}> <LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
<Form.List name={["ssbuckets"]}> <Form.List name={["ssbuckets"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (

View File

@@ -1,5 +1,7 @@
import { Tabs } from "antd"; import { Tabs } from "antd";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useHistory, useLocation } from "react-router-dom";
import queryString from "query-string";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container"; import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
import ShopInfoContainer from "../../components/shop-info/shop-info.container"; import ShopInfoContainer from "../../components/shop-info/shop-info.container";
@@ -24,6 +26,9 @@ const mapDispatchToProps = (dispatch) => ({
export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) { export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
const { t } = useTranslation(); const { t } = useTranslation();
const history = useHistory();
const search = queryString.parse(useLocation().search);
useEffect(() => { useEffect(() => {
document.title = t("titles.shop"); document.title = t("titles.shop");
setSelectedHeader("shop"); setSelectedHeader("shop");
@@ -37,7 +42,10 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
return ( return (
<RbacWrapper action="shop:config"> <RbacWrapper action="shop:config">
<Tabs> <Tabs
defaultActiveKey={search.tab}
onChange={(key) => history.push({ search: `?tab=${key}` })}
>
<Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info"> <Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
<ShopInfoContainer /> <ShopInfoContainer />
</Tabs.TabPane> </Tabs.TabPane>