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

Final formatting for Refactor of invoice close. BOD-383

Browse Source
This commit is contained in:
Patrick Fic
2020-09-16 13:44:17 -07:00
parent 2e99a2eee2
commit 929523bd30
2 changed files with 160 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
View File

@@ -7,7 +7,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component"; import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component";
import PartTypeFormItem from "../form-items-formatted/part-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 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({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -23,117 +23,149 @@ export function JobsCloseLines({ bodyshop, joblines }) {
<Form.List name={["joblines"]}> <Form.List name={["joblines"]}>
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
<div> <table className="jobs-close-table">
{fields.map((field, index) => ( <thead>
<Form.Item key={field.key}> <tr>
<LayoutFormRow> <th>{t("joblines.fields.line_desc")}</th>
<Form.Item <th>{t("joblines.fields.part_type")}</th>
label={t("joblines.fields.line_desc")} <th>{t("joblines.fields.act_price")}</th>
key={`${index}line_desc`} <th>{t("joblines.fields.op_code_desc")}</th>
name={[field.name, "line_desc"]} <th>{t("joblines.fields.mod_lbr_ty")}</th>
> <th>{t("joblines.fields.mod_lb_hrs")}</th>
<ReadOnlyFormItem /> <th>{t("joblines.fields.profitcenter_part")}</th>
</Form.Item> <th>{t("joblines.fields.profitcenter_labor")}</th>
<Form.Item </tr>
span={2} </thead>
label={t("joblines.fields.part_type")} <tbody>
key={`${index}part_type`} {fields.map((field, index) => (
name={[field.name, "part_type"]} <tr key={field.key}>
> <td>
<PartTypeFormItem /> <Form.Item
</Form.Item> // label={t("joblines.fields.line_desc")}
<Form.Item key={`${index}line_desc`}
span={2} name={[field.name, "line_desc"]}
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
}
> >
{bodyshop.md_responsibility_centers.profits.map((p) => ( <ReadOnlyFormItem />
<Select.Option key={p.name} value={p.name}> </Form.Item>
{p.name} </td>
</Select.Option> <td>
))} <Form.Item
</Select> span={2}
</Form.Item> // label={t("joblines.fields.part_type")}
<Form.Item key={`${index}part_type`}
label={t("joblines.fields.profitcenter_labor")} name={[field.name, "part_type"]}
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) => ( <PartTypeFormItem />
<Select.Option key={p.name} value={p.name}> </Form.Item>
{p.name} </td>
</Select.Option> <td>
))} <Form.Item
</Select> span={2}
</Form.Item> // label={t("joblines.fields.act_price")}
</LayoutFormRow> key={`${index}act_price`}
</Form.Item> name={[field.name, "act_price"]}
))} >
</div> <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> </Form.List>

18
client/src/components/jobs-close-lines/jobs-close-lines.styles.scss Normal file
View File

@@ -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;
}
}