From 929523bd30f0dd059e913886986c1271370662a1 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 16 Sep 2020 13:44:17 -0700
Subject: [PATCH] Final formatting for Refactor of invoice close. BOD-383

---
 .../jobs-close-lines.component.jsx            | 252 ++++++++++--------
 .../jobs-close-lines.styles.scss              |  18 ++
 2 files changed, 160 insertions(+), 110 deletions(-)
 create mode 100644 client/src/components/jobs-close-lines/jobs-close-lines.styles.scss

diff --git a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
index 51e7835c8..702b0a028 100644
--- a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
@@ -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>
diff --git a/client/src/components/jobs-close-lines/jobs-close-lines.styles.scss b/client/src/components/jobs-close-lines/jobs-close-lines.styles.scss
new file mode 100644
index 000000000..578d57155
--- /dev/null
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.styles.scss
@@ -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;
+  }
+}