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

feature/IO-3624-Shop-Config-UX-Refresh -Final Push!

Browse Source
This commit is contained in:
Dave
2026-03-25 15:58:51 -04:00
parent e49500887d
commit d497ec9f7d
9 changed files with 51 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/layout-form-row/inline-form-row-title.utils.js
View File

@@ -1,3 +1,5 @@
import { UnorderedListOutlined } from "@ant-design/icons";
export const inlineFormRowTitleStyles = Object.freeze({
input: Object.freeze({
background: "transparent",
@@ -68,6 +70,7 @@ export const inlineFormRowTitleStyles = Object.freeze({
export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
export const InlineTitleListIcon = UnorderedListOutlined;
export const INLINE_TITLE_SWITCH_GROUP_STYLE = Object.freeze({
...inlineFormRowTitleStyles.group,
flex: "0 0 auto"

12
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
@@ -38,7 +38,8 @@ import {
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE,
INLINE_TITLE_TEXT_STYLE
INLINE_TITLE_TEXT_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component.jsx";
@@ -92,13 +93,10 @@ export function ShopEmployeesFormComponent({ bodyshop, form, onDirtyChange, isDi
const updateDirtyState = useCallback(
(nextDirtyState) => {
if (typeof isDirty !== "boolean") {
setInternalIsDirty(nextDirtyState);
}
onDirtyChange?.(nextDirtyState);
},
[isDirty, onDirtyChange]
[onDirtyChange]
);
const client = useApolloClient();
@@ -482,7 +480,7 @@ export function ShopEmployeesFormComponent({ bodyshop, form, onDirtyChange, isDi
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.cost_center")}</div>
<Form.Item

25
client/src/components/shop-info/shop-info.general.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -19,7 +19,8 @@ import {
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE
INLINE_TITLE_SWITCH_GROUP_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
const timeZonesList = Intl.supportedValuesOf("timeZone");
@@ -593,7 +594,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.messaginglabel_short")}</div>
<Form.Item
@@ -687,7 +688,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.noteslabel_short")}</div>
<Form.Item
@@ -781,7 +782,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.partslocation")}</div>
<Form.Item
@@ -885,7 +886,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.md_ins_co.name")}</div>
<Form.Item
@@ -1012,7 +1013,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.est_ct_fn_short")}</div>
<Form.Item noStyle name={[field.name, "est_ct_fn"]}>
@@ -1131,7 +1132,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.ins_ct_fn_short")}</div>
<Form.Item noStyle name={[field.name, "ins_ct_fn"]}>
@@ -1243,7 +1244,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("general.labels.label")}</div>
<Form.Item
@@ -1397,7 +1398,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("general.labels.label")}</div>
<Form.Item
@@ -1584,7 +1585,7 @@ export function ShopInfoGeneral({ form }) {
titleOnly
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("general.labels.label")}</div>
<Form.Item
@@ -1679,7 +1680,7 @@ export function ShopInfoGeneral({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("general.labels.label")}</div>
<Form.Item

9
client/src/components/shop-info/shop-info.intake.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
@@ -15,7 +15,8 @@ import {
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE
INLINE_TITLE_SWITCH_GROUP_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
const SelectorDiv = styled.div`
@@ -126,7 +127,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.name")}</div>
<Form.Item
@@ -283,7 +284,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.name")}</div>
<Form.Item

7
client/src/components/shop-info/shop-info.laborrates.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Space } from "antd";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
@@ -11,7 +11,8 @@ import {
INLINE_TITLE_HANDLE_STYLE,
INLINE_TITLE_INPUT_STYLE,
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE
INLINE_TITLE_ROW_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
export default function ShopInfoLaborRates() {
@@ -59,7 +60,7 @@ export default function ShopInfoLaborRates() {
noDivider={index === 0}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.labor_rate_desc")}</div>
<Form.Item

7
client/src/components/shop-info/shop-info.parts-scan.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Select, Space, Switch } from "antd";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
@@ -13,7 +13,8 @@ import {
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE
INLINE_TITLE_SWITCH_GROUP_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import i18n from "i18next";
@@ -117,7 +118,7 @@ export default function ShopInfoPartsScan({ form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.md_parts_scan.field")}</div>
<Form.Item

11
client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Col, DatePicker, Divider, Form, Input, InputNumber, Radio, Row, Select, Space, Switch } from "antd";
import { useState } from "react";
@@ -22,7 +22,8 @@ import {
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE
INLINE_TITLE_SWITCH_GROUP_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
import ShopInfoResponsibilitycentersTaxesComponent from "./shop-info.responsibilitycenters.taxes.component";
@@ -741,7 +742,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter")}
@@ -889,7 +890,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter")}
@@ -3626,7 +3627,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description")}

7
client/src/components/shop-info/shop-info.speedprint.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select, Space } from "antd";
import { useTranslation } from "react-i18next";
import { TemplateList } from "../../utils/TemplateConstants";
@@ -12,7 +12,8 @@ import {
INLINE_TITLE_INPUT_STYLE,
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE
INLINE_TITLE_SEPARATOR_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
@@ -60,7 +61,7 @@ export default function ShopInfoSpeedPrint() {
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.speedprint.id")}</div>
<Form.Item

12
client/src/components/shop-teams/shop-employee-teams.form.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { DeleteFilled } from "@ant-design/icons";
import { useMutation, useQuery } from "@apollo/client/react";
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Skeleton, Space, Switch, Typography } from "antd";
@@ -24,7 +24,8 @@ import {
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE,
INLINE_TITLE_SWITCH_GROUP_STYLE
INLINE_TITLE_SWITCH_GROUP_STYLE,
InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import {
@@ -87,13 +88,10 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop, form, onDirtyChange,
const updateDirtyState = useCallback(
(nextDirtyState) => {
if (typeof isDirty !== "boolean") {
setInternalIsDirty(nextDirtyState);
}
onDirtyChange?.(nextDirtyState);
},
[isDirty, onDirtyChange]
[onDirtyChange]
);
const clearTeamFormMeta = useCallback(() => {
@@ -376,7 +374,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop, form, onDirtyChange,
grow
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
<div style={INLINE_TITLE_GROUP_STYLE}>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employee_teams.fields.employeeid")}</div>
<Form.Item