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