Final formatting for Refactor of invoice close. BOD-383
This commit is contained in:
Patrick Fic
@@ -7,7 +7,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component";
|
||||
import PartTypeFormItem from "../form-items-formatted/part-type-form-item.component";
|
||||
import ReadOnlyFormItem from "../form-items-formatted/read-only-form-item.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import "./jobs-close-lines.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -23,117 +23,149 @@ export function JobsCloseLines({ bodyshop, joblines }) {
|
||||
<Form.List name={["joblines"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
>
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={2}
|
||||
label={t("joblines.fields.part_type")}
|
||||
key={`${index}part_type`}
|
||||
name={[field.name, "part_type"]}
|
||||
>
|
||||
<PartTypeFormItem />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={2}
|
||||
label={t("joblines.fields.act_price")}
|
||||
key={`${index}act_price`}
|
||||
name={[field.name, "act_price"]}
|
||||
>
|
||||
<ReadOnlyFormItem type="currency" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={2}
|
||||
label={t("joblines.fields.op_code_desc")}
|
||||
key={`${index}op_code_desc`}
|
||||
name={[field.name, "op_code_desc"]}
|
||||
>
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={2}
|
||||
label={t("joblines.fields.mod_lbr_ty")}
|
||||
key={`${index}mod_lbr_ty`}
|
||||
name={[field.name, "mod_lbr_ty"]}
|
||||
>
|
||||
<LaborTypeFormItem />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={2}
|
||||
label={t("joblines.fields.mod_lb_hrs")}
|
||||
key={`${index}mod_lb_hrs`}
|
||||
name={[field.name, "mod_lb_hrs"]}
|
||||
>
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.profitcenter_part")}
|
||||
key={`${index}profitcenter_part`}
|
||||
name={[field.name, "profitcenter_part"]}
|
||||
rules={[
|
||||
{
|
||||
required: !!joblines[index].act_price,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
optionFilterProp="children"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
<table className="jobs-close-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("joblines.fields.line_desc")}</th>
|
||||
<th>{t("joblines.fields.part_type")}</th>
|
||||
<th>{t("joblines.fields.act_price")}</th>
|
||||
<th>{t("joblines.fields.op_code_desc")}</th>
|
||||
<th>{t("joblines.fields.mod_lbr_ty")}</th>
|
||||
<th>{t("joblines.fields.mod_lb_hrs")}</th>
|
||||
<th>{t("joblines.fields.profitcenter_part")}</th>
|
||||
<th>{t("joblines.fields.profitcenter_labor")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{fields.map((field, index) => (
|
||||
<tr key={field.key}>
|
||||
<td>
|
||||
<Form.Item
|
||||
// label={t("joblines.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
>
|
||||
{bodyshop.md_responsibility_centers.profits.map((p) => (
|
||||
<Select.Option key={p.name} value={p.name}>
|
||||
{p.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.profitcenter_labor")}
|
||||
key={`${index}profitcenter_labor`}
|
||||
name={[field.name, "profitcenter_labor"]}
|
||||
rules={[
|
||||
{
|
||||
required: !!joblines[index].mod_lbr_ty,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
optionFilterProp="children"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
span={2}
|
||||
// label={t("joblines.fields.part_type")}
|
||||
key={`${index}part_type`}
|
||||
name={[field.name, "part_type"]}
|
||||
>
|
||||
{bodyshop.md_responsibility_centers.profits.map((p) => (
|
||||
<Select.Option key={p.name} value={p.name}>
|
||||
{p.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
</div>
|
||||
<PartTypeFormItem />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
span={2}
|
||||
// label={t("joblines.fields.act_price")}
|
||||
key={`${index}act_price`}
|
||||
name={[field.name, "act_price"]}
|
||||
>
|
||||
<ReadOnlyFormItem type="currency" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
span={2}
|
||||
//label={t("joblines.fields.op_code_desc")}
|
||||
key={`${index}op_code_desc`}
|
||||
name={[field.name, "op_code_desc"]}
|
||||
>
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
span={2}
|
||||
//label={t("joblines.fields.mod_lbr_ty")}
|
||||
key={`${index}mod_lbr_ty`}
|
||||
name={[field.name, "mod_lbr_ty"]}
|
||||
>
|
||||
<LaborTypeFormItem />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
span={2}
|
||||
//label={t("joblines.fields.mod_lb_hrs")}
|
||||
key={`${index}mod_lb_hrs`}
|
||||
name={[field.name, "mod_lb_hrs"]}
|
||||
>
|
||||
<ReadOnlyFormItem />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
//label={t("joblines.fields.profitcenter_part")}
|
||||
key={`${index}profitcenter_part`}
|
||||
name={[field.name, "profitcenter_part"]}
|
||||
rules={[
|
||||
{
|
||||
required: !!joblines[index].act_price,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
optionFilterProp="children"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
{bodyshop.md_responsibility_centers.profits.map(
|
||||
(p) => (
|
||||
<Select.Option key={p.name} value={p.name}>
|
||||
{p.name}
|
||||
</Select.Option>
|
||||
)
|
||||
)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item
|
||||
//label={t("joblines.fields.profitcenter_labor")}
|
||||
key={`${index}profitcenter_labor`}
|
||||
name={[field.name, "profitcenter_labor"]}
|
||||
rules={[
|
||||
{
|
||||
required: !!joblines[index].mod_lbr_ty,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
optionFilterProp="children"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
{bodyshop.md_responsibility_centers.profits.map(
|
||||
(p) => (
|
||||
<Select.Option key={p.name} value={p.name}>
|
||||
{p.name}
|
||||
</Select.Option>
|
||||
)
|
||||
)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
.jobs-close-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user