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

IO-3624 Refresh shop config list rows and color UX

Browse Source
This commit is contained in:
Dave
2026-03-24 10:54:42 -04:00
parent f904fa4e18
commit d23a182650
22 changed files with 3100 additions and 1809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
client/src/components/shop-info/shop-info.rostatus.component.jsx
View File

@@ -1,10 +1,11 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Select, Space } from "antd";
import { useState } from "react";
import { ChromePicker } from "react-color";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { DEFAULT_TRANSLUCENT_CARD_COLOR, getTintedCardSurfaceStyles } from "./shop-info.color.utils";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -28,6 +29,11 @@ const SelectorDiv = styled.div`
export function ShopInfoROStatusComponent({ bodyshop, form }) {
const { t } = useTranslation();
const statusOptions = Form.useWatch(["md_ro_statuses", "statuses"], form) || [];
const productionStatuses = Form.useWatch(["md_ro_statuses", "production_statuses"], form) || [];
const additionalBoardStatuses = Form.useWatch(["md_ro_statuses", "additional_board_statuses"], form) || [];
const productionColors = Form.useWatch(["md_ro_statuses", "production_colors"], form) || [];
const availableProductionStatuses = [...new Set([...productionStatuses, ...additionalBoardStatuses].filter(Boolean))];
const {
treatments: { Production_List_Status_Colors }
@@ -37,23 +43,6 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
splitKey: bodyshop.imexshopid
});
const [options, setOptions] = useState(form.getFieldValue(["md_ro_statuses", "statuses"]) || []);
const [productionStatus, setProductionStatus] = useState(
(form.getFieldValue(["md_ro_statuses", "production_statuses"]) || []).concat(
form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]) || []
) || []
);
const handleBlur = () => {
setOptions(form.getFieldValue(["md_ro_statuses", "statuses"]));
setProductionStatus(
form
.getFieldValue(["md_ro_statuses", "production_statuses"])
.concat(form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]))
);
};
return (
<SelectorDiv id="jobstatus">
<Form.Item
@@ -67,7 +56,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="tags" onBlur={handleBlur} />
<Select mode="tags" />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "active_statuses"]}
@@ -80,7 +69,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "pre_production_statuses"]}
@@ -93,7 +82,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "production_statuses"]}
@@ -106,7 +95,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "post_production_statuses"]}
@@ -119,7 +108,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "ready_statuses"]}
@@ -132,7 +121,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
name={["md_ro_statuses", "additional_board_statuses"]}
@@ -145,7 +134,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
<Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<LayoutFormRow noDivider>
<Form.Item
@@ -158,7 +147,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_scheduled"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_arrived")}
@@ -170,7 +159,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_arrived"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_exported")}
@@ -182,7 +171,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_exported"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_imported")}
@@ -194,7 +183,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_imported"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_invoiced")}
@@ -206,7 +195,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_invoiced"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_completed")}
@@ -218,7 +207,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_completed"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_delivered")}
@@ -230,7 +219,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_delivered"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.default_void")}
@@ -242,7 +231,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
]}
name={["md_ro_statuses", "default_void"]}
>
<Select options={options.map((item) => ({ value: item, label: item }))} />
<Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
</Form.Item>
</LayoutFormRow>
{Production_List_Status_Colors.treatment === "on" && (
@@ -251,13 +240,41 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
{(fields, { add, remove }) => {
return (
<div>
<Space size="large" wrap>
{fields.map((field, index) => (
<Form.Item key={field.key}>
<Space orientation="vertical">
<div style={{ display: "flex" }}>
<Space size="large" wrap align="start">
{fields.map((field, index) => {
const productionColor = productionColors[field.name] || {};
const productionColorSurfaceStyles = getTintedCardSurfaceStyles(productionColor.color);
const selectedProductionColorStatuses = productionColors
.map((item) => item?.status)
.filter(Boolean);
const productionColorStatusOptions = [
...new Set([productionColor.status, ...availableProductionStatuses])
]
.filter(Boolean)
.filter(
(status) =>
status === productionColor.status || !selectedProductionColorStatuses.includes(status)
);
return (
<LayoutFormRow
key={field.key}
noDivider
title={getFormListItemTitle(t("jobs.fields.status"), index, productionColor.status)}
extra={
<Button
type="text"
icon={<DeleteFilled />}
onClick={() => {
remove(field.name);
}}
/>
}
{...productionColorSurfaceStyles}
style={{ width: 260, marginBottom: 0 }}
>
<div>
<Form.Item
style={{ flex: 1 }}
label={t("jobs.fields.status")}
key={`${index}status`}
name={[field.name, "status"]}
@@ -268,36 +285,35 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
}
]}
>
<Select options={productionStatus.map((item) => ({ value: item, label: item }))} />
<Select
options={productionColorStatusOptions.map((item) => ({ value: item, label: item }))}
/>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.color")}
key={`${index}color`}
name={[field.name, "color"]}
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
<ColorPicker />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
<Form.Item
label={t("bodyshop.fields.statuses.color")}
key={`${index}color`}
name={[field.name, "color"]}
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
<ColorPicker />
</Form.Item>
</Space>
</Form.Item>
))}
</LayoutFormRow>
);
})}
</Space>
<Form.Item>
<Form.Item style={{ marginTop: 8 }}>
<Button
type="dashed"
onClick={() => {
add();
add({
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
});
}}
style={{ width: "100%" }}
>