Added jobs list to vehicle detail page.

client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx

@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form, Input } from "antd";
+import { Button, DatePicker, Form, Input, Row, Col } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -13,107 +13,117 @@ export default function VehicleDetailFormComponent({ vehicle, form }) {
       <Button type="primary" key="submit" htmlType="submit">
         {t("general.labels.save")}
       </Button>
-      The Form
-      <Form.Item label={t("vehicles.fields.v_vin")}>
-        {getFieldDecorator("v_vin", {
-          initialValue: vehicle.v_vin
-        })(<Input name="v_vin" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.plate_no")}>
-        {getFieldDecorator("plate_no", {
-          initialValue: vehicle.plate_no
-        })(<Input name="plate_no" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.plate_st")}>
-        {getFieldDecorator("plate_st", {
-          initialValue: vehicle.plate_st
-        })(<Input name="plate_st" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_type")}>
-        {getFieldDecorator("v_type", {
-          initialValue: vehicle.v_type
-        })(<Input name="v_type" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_trimcode")}>
-        {getFieldDecorator("v_trimcode", {
-          initialValue: vehicle.v_trimcode
-        })(<Input name="v_trimcode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_tone")}>
-        {getFieldDecorator("v_tone", {
-          initialValue: vehicle.v_tone
-        })(<Input name="v_tone" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_stage")}>
-        {getFieldDecorator("v_stage", {
-          initialValue: vehicle.v_stage
-        })(<Input name="v_stage" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_prod_dt")}>
-        {getFieldDecorator("v_prod_dt", {
-          initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
-        })(<DatePicker name="v_prod_dt" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_paint_codes")}>
-        {getFieldDecorator("v_paint_codes", {
-          initialValue: JSON.stringify(vehicle.v_paint_codes)
-        })(<Input name="v_paint_codes" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_options")}>
-        {getFieldDecorator("v_options", {
-          initialValue: vehicle.v_options
-        })(<Input name="v_options" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_model_yr")}>
-        {getFieldDecorator("v_model_yr", {
-          initialValue: vehicle.v_model_yr
-        })(<Input name="v_model_yr" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_model_desc")}>
-        {getFieldDecorator("v_model_desc", {
-          initialValue: vehicle.v_model_desc
-        })(<Input name="v_model_desc" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_mldgcode")}>
-        {getFieldDecorator("v_mldgcode", {
-          initialValue: vehicle.v_mldgcode
-        })(<Input name="v_mldgcode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_makecode")}>
-        {getFieldDecorator("v_makecode", {
-          initialValue: vehicle.v_makecode
-        })(<Input name="v_makecode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_make_desc")}>
-        {getFieldDecorator("v_make_desc", {
-          initialValue: vehicle.v_make_desc
-        })(<Input name="v_make_desc" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_engine")}>
-        {getFieldDecorator("v_engine", {
-          initialValue: vehicle.v_engine
-        })(<Input name="v_engine" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_cond")}>
-        {getFieldDecorator("v_cond", {
-          initialValue: vehicle.v_cond
-        })(<Input name="v_cond" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_color")}>
-        {getFieldDecorator("v_color", {
-          initialValue: vehicle.v_color
-        })(<Input name="v_color" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_bstyle")}>
-        {getFieldDecorator("v_bstyle", {
-          initialValue: vehicle.v_bstyle
-        })(<Input name="v_bstyle" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.trim_color")}>
-        {getFieldDecorator("trim_color", {
-          initialValue: vehicle.trim_color
-        })(<Input name="trim_color" />)}
-      </Form.Item>
+      <Row>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_vin")}>
+            {getFieldDecorator("v_vin", {
+              initialValue: vehicle.v_vin
+            })(<Input name="v_vin" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.plate_no")}>
+            {getFieldDecorator("plate_no", {
+              initialValue: vehicle.plate_no
+            })(<Input name="plate_no" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.plate_st")}>
+            {getFieldDecorator("plate_st", {
+              initialValue: vehicle.plate_st
+            })(<Input name="plate_st" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_type")}>
+            {getFieldDecorator("v_type", {
+              initialValue: vehicle.v_type
+            })(<Input name="v_type" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_trimcode")}>
+            {getFieldDecorator("v_trimcode", {
+              initialValue: vehicle.v_trimcode
+            })(<Input name="v_trimcode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_tone")}>
+            {getFieldDecorator("v_tone", {
+              initialValue: vehicle.v_tone
+            })(<Input name="v_tone" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_bstyle")}>
+            {getFieldDecorator("v_bstyle", {
+              initialValue: vehicle.v_bstyle
+            })(<Input name="v_bstyle" />)}
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_stage")}>
+            {getFieldDecorator("v_stage", {
+              initialValue: vehicle.v_stage
+            })(<Input name="v_stage" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_prod_dt")}>
+            {getFieldDecorator("v_prod_dt", {
+              initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
+            })(<DatePicker name="v_prod_dt" />)}
+          </Form.Item>
+          {
+            //TODO Add handling for paint code json
+          }
+          <Form.Item label={t("vehicles.fields.v_paint_codes")}>
+            {getFieldDecorator("v_paint_codes", {
+              initialValue: JSON.stringify(vehicle.v_paint_codes)
+            })(<Input name="v_paint_codes" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_options")}>
+            {getFieldDecorator("v_options", {
+              initialValue: vehicle.v_options
+            })(<Input name="v_options" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_model_yr")}>
+            {getFieldDecorator("v_model_yr", {
+              initialValue: vehicle.v_model_yr
+            })(<Input name="v_model_yr" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_model_desc")}>
+            {getFieldDecorator("v_model_desc", {
+              initialValue: vehicle.v_model_desc
+            })(<Input name="v_model_desc" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.trim_color")}>
+            {getFieldDecorator("trim_color", {
+              initialValue: vehicle.trim_color
+            })(<Input name="trim_color" />)}
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_mldgcode")}>
+            {getFieldDecorator("v_mldgcode", {
+              initialValue: vehicle.v_mldgcode
+            })(<Input name="v_mldgcode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_makecode")}>
+            {getFieldDecorator("v_makecode", {
+              initialValue: vehicle.v_makecode
+            })(<Input name="v_makecode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_make_desc")}>
+            {getFieldDecorator("v_make_desc", {
+              initialValue: vehicle.v_make_desc
+            })(<Input name="v_make_desc" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_engine")}>
+            {getFieldDecorator("v_engine", {
+              initialValue: vehicle.v_engine
+            })(<Input name="v_engine" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_cond")}>
+            {getFieldDecorator("v_cond", {
+              initialValue: vehicle.v_cond
+            })(<Input name="v_cond" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_color")}>
+            {getFieldDecorator("v_color", {
+              initialValue: vehicle.v_color
+            })(<Input name="v_color" />)}
+          </Form.Item>
+        </Col>
+      </Row>
     </div>
   );
 }

client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+export default function VehicleDetailJobsComponent({ vehicle }) {
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      ellipsis: true,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.id}`}>
+          {record.ro_number ? record.ro_number : `EST ${record.est_number}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      render: (text, record) => (
+        <Link to={`/manage/owners/${record.owner.id}`}>
+          {`${record.ownr_fn} ${record.ownr_ln}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no"
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status"
+    },
+
+    {
+      title: t("jobs.fields.clm_total"),
+      dataIndex: "clm_total",
+      key: "clm_total",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+      )
+    }
+  ];
+
+  return (
+    <Table
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={vehicle.jobs}
+    />
+  );
+}