Added page for job closing BOD-131

This commit is contained in:
Patrick Fic
2020-05-15 16:43:27 -07:00
parent 58b4985319
commit 51ea04bf2c
15 changed files with 833 additions and 444 deletions

View File

@@ -15,433 +15,468 @@ export default function ShopInfoResponsibilityCenterComponent({ form }) {
const [options, setOptions] = useState(
[
...(form.getFieldValue(["md_responsibility_centers", "costs"]) || []),
...(form.getFieldValue(["md_responsibility_centers", "profits"]) || [])
...(form
.getFieldValue(["md_responsibility_centers", "costs"])
.map((i) => i.name) || []),
...(form
.getFieldValue(["md_responsibility_centers", "profits"])
.map((i) => i.name) || []),
] || []
);
const handleBlur = () => {
setOptions([
...(form.getFieldValue(["md_responsibility_centers", "costs"]) || []),
...(form.getFieldValue(["md_responsibility_centers", "profits"]) || [])
...(form
.getFieldValue(["md_responsibility_centers", "costs"])
.map((i) => i.name) || []),
...(form
.getFieldValue(["md_responsibility_centers", "profits"])
.map((i) => i.name) || []),
]);
};
return (
<div>
<strong>{t("bodyshop.labels.responsibilitycenters.title")}</strong>
<Row>
<Col span={8}>
<strong>{t("bodyshop.labels.responsibilitycenters.costs")}</strong>
<Form.List name={["md_responsibility_centers", "costs"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}`}
name={[field.name]}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("bodyshop.actions.newstatus")}
</Button>
<strong>{t("bodyshop.labels.responsibilitycenters.title")}</strong>=
<div>
<strong>{t("bodyshop.labels.responsibilitycenters.costs")}</strong>
<Form.List name={["md_responsibility_centers", "costs"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}name`}
name={[field.name, "name"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t(
"bodyshop.fields.responsibilitycenter_accountname"
)}
key={`${index}accountname`}
name={[field.name, "accountname"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t(
"bodyshop.fields.responsibilitycenter_accountnumber"
)}
key={`${index}accountnumber`}
name={[field.name, "accountnumber"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Col>
<Col span={8}>
<strong>{t("bodyshop.labels.responsibilitycenters.profits")}</strong>
<Form.List name={["md_responsibility_centers", "profits"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}`}
name={[field.name]}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("bodyshop.actions.newstatus")}
</Button>
))}
<Form.Item>
<Button
type='dashed'
onClick={() => {
add();
}}
style={{ width: "100%" }}>
{t("bodyshop.actions.newstatus")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</div>
<div>
<strong>{t("bodyshop.labels.responsibilitycenters.profits")}</strong>
<Form.List name={["md_responsibility_centers", "profits"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}name`}
name={[field.name, "name"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t(
"bodyshop.fields.responsibilitycenter_accountname"
)}
key={`${index}accountname`}
name={[field.name, "accountname"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t(
"bodyshop.fields.responsibilitycenter_accountnumber"
)}
key={`${index}accountnumber`}
name={[field.name, "accountnumber"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input onBlur={handleBlur} />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Col>
<Col span={8}>
<SelectorDiv>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.atp")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "ATP"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lab")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAB"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lad")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAD"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lae")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAE"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.laf")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAF"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lag")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAG"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lam")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAM"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lar")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAR"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.las")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAS"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lau")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "LAU"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.paa")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAA"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pac")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAC"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pal")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAL"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pam")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAM"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pan")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAN"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pao")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAO"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pap")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAP"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.par")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "PAR"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.tow")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
name={["md_responsibility_centers", "defaults", "TOW"]}
>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
</SelectorDiv>
</Col>
</Row>
<Form.Item>
<Button
type='dashed'
onClick={() => {
add();
}}
style={{ width: "100%" }}>
{t("bodyshop.actions.newstatus")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
</div>
<div>
<SelectorDiv>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.atp")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "ATP"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lab")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAB"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lad")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAD"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lae")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAE"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.laf")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAF"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lag")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAG"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lam")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAM"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lar")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAR"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.las")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAS"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.lau")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "LAU"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.paa")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAA"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pac")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAC"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pal")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAL"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pam")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAM"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pan")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAN"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pao")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAO"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.pap")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAP"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.par")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "PAR"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.tow")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["md_responsibility_centers", "defaults", "TOW"]}>
<Select>
{options.map((item, idx) => (
<Select.Option key={idx}>{item}</Select.Option>
))}
</Select>
</Form.Item>
</SelectorDiv>
</div>
</div>
);
}