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

70
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,59 +23,84 @@ 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">
<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) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <tr key={field.key}>
<LayoutFormRow> <td>
<Form.Item <Form.Item
label={t("joblines.fields.line_desc")} // label={t("joblines.fields.line_desc")}
key={`${index}line_desc`} key={`${index}line_desc`}
name={[field.name, "line_desc"]} name={[field.name, "line_desc"]}
> >
<ReadOnlyFormItem /> <ReadOnlyFormItem />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
span={2} span={2}
label={t("joblines.fields.part_type")} // label={t("joblines.fields.part_type")}
key={`${index}part_type`} key={`${index}part_type`}
name={[field.name, "part_type"]} name={[field.name, "part_type"]}
> >
<PartTypeFormItem /> <PartTypeFormItem />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
span={2} span={2}
label={t("joblines.fields.act_price")} // label={t("joblines.fields.act_price")}
key={`${index}act_price`} key={`${index}act_price`}
name={[field.name, "act_price"]} name={[field.name, "act_price"]}
> >
<ReadOnlyFormItem type="currency" /> <ReadOnlyFormItem type="currency" />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
span={2} span={2}
label={t("joblines.fields.op_code_desc")} //label={t("joblines.fields.op_code_desc")}
key={`${index}op_code_desc`} key={`${index}op_code_desc`}
name={[field.name, "op_code_desc"]} name={[field.name, "op_code_desc"]}
> >
<ReadOnlyFormItem /> <ReadOnlyFormItem />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
span={2} span={2}
label={t("joblines.fields.mod_lbr_ty")} //label={t("joblines.fields.mod_lbr_ty")}
key={`${index}mod_lbr_ty`} key={`${index}mod_lbr_ty`}
name={[field.name, "mod_lbr_ty"]} name={[field.name, "mod_lbr_ty"]}
> >
<LaborTypeFormItem /> <LaborTypeFormItem />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
span={2} span={2}
label={t("joblines.fields.mod_lb_hrs")} //label={t("joblines.fields.mod_lb_hrs")}
key={`${index}mod_lb_hrs`} key={`${index}mod_lb_hrs`}
name={[field.name, "mod_lb_hrs"]} name={[field.name, "mod_lb_hrs"]}
> >
<ReadOnlyFormItem /> <ReadOnlyFormItem />
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
label={t("joblines.fields.profitcenter_part")} //label={t("joblines.fields.profitcenter_part")}
key={`${index}profitcenter_part`} key={`${index}profitcenter_part`}
name={[field.name, "profitcenter_part"]} name={[field.name, "profitcenter_part"]}
rules={[ rules={[
@@ -95,15 +120,19 @@ export function JobsCloseLines({ bodyshop, joblines }) {
.indexOf(input.toLowerCase()) >= 0 .indexOf(input.toLowerCase()) >= 0
} }
> >
{bodyshop.md_responsibility_centers.profits.map((p) => ( {bodyshop.md_responsibility_centers.profits.map(
(p) => (
<Select.Option key={p.name} value={p.name}> <Select.Option key={p.name} value={p.name}>
{p.name} {p.name}
</Select.Option> </Select.Option>
))} )
)}
</Select> </Select>
</Form.Item> </Form.Item>
</td>
<td>
<Form.Item <Form.Item
label={t("joblines.fields.profitcenter_labor")} //label={t("joblines.fields.profitcenter_labor")}
key={`${index}profitcenter_labor`} key={`${index}profitcenter_labor`}
name={[field.name, "profitcenter_labor"]} name={[field.name, "profitcenter_labor"]}
rules={[ rules={[
@@ -123,17 +152,20 @@ export function JobsCloseLines({ bodyshop, joblines }) {
.indexOf(input.toLowerCase()) >= 0 .indexOf(input.toLowerCase()) >= 0
} }
> >
{bodyshop.md_responsibility_centers.profits.map((p) => ( {bodyshop.md_responsibility_centers.profits.map(
(p) => (
<Select.Option key={p.name} value={p.name}> <Select.Option key={p.name} value={p.name}>
{p.name} {p.name}
</Select.Option> </Select.Option>
))} )
)}
</Select> </Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </td>
</Form.Item> </tr>
))} ))}
</div> </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;
}
}