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

IO-1454 Disable production colors & add feature flags.

Browse Source
This commit is contained in:
Patrick Fic
2021-10-21 14:03:48 -07:00
parent 8ad1d5929a
commit 52a383ffb7
7 changed files with 141 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -24,6 +24,7 @@ import ProductionListSaveConfigButton from "../production-list-save-config-butto
import ProductionListPrint from "./production-list-print.component";
import ProductionListTableViewSelect from "./production-list-table-view-select.component";
import ResizeableTitle from "./production-list-table.resizeable.component";
import { useTreatments } from "@splitsoftware/splitio-react";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -39,7 +40,9 @@ export function ProductionListTable({
currentUser,
}) {
const [searchText, setSearchText] = useState("");
const { Production_List_Status_Colors } = useTreatments([
"Production_List_Status_Colors",
]);
const assoc = bodyshop.associations.find(
(a) => a.useremail === currentUser.email
);
@@ -221,21 +224,24 @@ export function ProductionListTable({
pagination={false}
size="small"
className="production-list-table"
onRow={(record, index) => {
if (!bodyshop.md_ro_statuses.production_colors) return null;
onRow={
Production_List_Status_Colors.treatment === "on" &&
((record, index) => {
if (!bodyshop.md_ro_statuses.production_colors) return null;
const color = bodyshop.md_ro_statuses.production_colors.find(
(x) => x.status === record.status
);
const color = bodyshop.md_ro_statuses.production_colors.find(
(x) => x.status === record.status
);
if (!color) return null;
if (!color) return null;
return {
style: {
backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
},
};
}}
return {
style: {
backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
},
};
})
}
components={{
header: {
cell: ResizeableTitle,

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

@@ -1,4 +1,5 @@
import { DeleteFilled } from "@ant-design/icons";
import { useTreatments } from "@splitsoftware/splitio-react";
import { Button, Form, Select, Space } from "antd";
import React, { useState } from "react";
import { ChromePicker } from "react-color";
@@ -14,6 +15,9 @@ const SelectorDiv = styled.div`
export default function ShopInfoROStatusComponent({ form }) {
const { t } = useTranslation();
const { Production_List_Status_Colors } = useTreatments([
"Production_List_Status_Colors",
]);
const [options, setOptions] = useState(
form.getFieldValue(["md_ro_statuses", "statuses"]) || []
@@ -260,24 +264,50 @@ export default function ShopInfoROStatusComponent({ form }) {
</Select>
</Form.Item>
</LayoutFormRow>
<LayoutFormRow
grow
header={t("bodyshop.fields.statuses.production_colors")}
>
<Form.List name={["md_ro_statuses", "production_colors"]}>
{(fields, { add, remove, move }) => {
return (
<div>
<LayoutFormRow>
{fields.map((field, index) => (
<Form.Item key={field.key}>
<Space direction="vertical">
<div style={{ display: "flex" }}>
{Production_List_Status_Colors.treatment === "on" && (
<LayoutFormRow
grow
header={t("bodyshop.fields.statuses.production_colors")}
>
<Form.List name={["md_ro_statuses", "production_colors"]}>
{(fields, { add, remove, move }) => {
return (
<div>
<LayoutFormRow>
{fields.map((field, index) => (
<Form.Item key={field.key}>
<Space direction="vertical">
<div style={{ display: "flex" }}>
<Form.Item
style={{ flex: 1 }}
label={t("jobs.fields.status")}
key={`${index}status`}
name={[field.name, "status"]}
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
<Form.Item
style={{ flex: 1 }}
label={t("jobs.fields.status")}
key={`${index}status`}
name={[field.name, "status"]}
label={t("bodyshop.fields.statuses.color")}
key={`${index}color`}
name={[field.name, "color"]}
rules={[
{
required: true,
@@ -285,53 +315,29 @@ export default function ShopInfoROStatusComponent({ form }) {
},
]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx} value={item}>
{item}
</Select.Option>
))}
</Select>
<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>
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("general.actions.add")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</LayoutFormRow>
</Space>
</Form.Item>
))}
</LayoutFormRow>
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("general.actions.add")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</LayoutFormRow>
)}
</SelectorDiv>
);
}