UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx

@@ -2,6 +2,7 @@ import { DatePicker, Form, Input, Checkbox } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function JobsCreateVehicleInfoNewComponent() {
   const [state, setState] = useContext(JobCreateContext);
@@ -18,178 +19,181 @@ export default function JobsCreateVehicleInfoNewComponent() {
             vehicle: {
               ...state.vehicle,
               new: !state.vehicle.new,
-              selectedid: null
-            }
+              selectedid: null,
+            },
           });
-        }}
-      >
+        }}>
         {t("jobs.labels.create.newvehicle")}
       </Checkbox>
-      <Form.Item
-        label={t("vehicles.fields.v_vin")}
-        name={["vehicle", "data", "v_vin"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.plate_no")}
-        name={["vehicle", "data", "plate_no"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.plate_st")}
-        name={["vehicle", "data", "plate_st"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_type")}
-        name={["vehicle", "data", "v_type"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_trimcode")}
-        name={["vehicle", "data", "v_trimcode"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_tone")}
-        name={["vehicle", "data", "v_tone"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_bstyle")}
-        name={["vehicle", "data", "v_bstyle"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_stage")}
-        name={["vehicle", "data", "v_stage"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_prod_dt")}
-        name={["vehicle", "data", "v_prod_dt"]}
-      >
-        <DatePicker disabled={!state.vehicle.new} />
-      </Form.Item>
-      {
-        //TODO Add handling for paint code json
-      }
-      <Form.Item
-        label={t("vehicles.fields.v_paint_codes")}
-        name={["vehicle", "data", "v_paint_codes"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_options")}
-        name={["vehicle", "data", "v_options"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_model_yr")}
-        name={["vehicle", "data", "v_model_yr"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_model_desc")}
-        name={["vehicle", "data", "v_model_desc"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.trim_color")}
-        name={["vehicle", "data", "trim_color"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_mldgcode")}
-        name={["vehicle", "data", "v_mldgcode"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_makecode")}
-        name={["vehicle", "data", "v_makecode"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_make_desc")}
-        name={["vehicle", "data", "v_make_desc"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_engine")}
-        name={["vehicle", "data", "v_engine"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_cond")}
-        name={["vehicle", "data", "v_cond"]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
-      <Form.Item
-        label={t("vehicles.fields.v_color")}
-        name={["vehicle", "data", "v_color"]}
-        rules={[
-          {
-            required: state.vehicle.new,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
-        <Input disabled={!state.vehicle.new} />
-      </Form.Item>
+      
+      <LayoutFormRow header={t("vehicles.forms.detail")} grow>
+        <Form.Item
+          label={t("vehicles.fields.v_vin")}
+          name={["vehicle", "data", "v_vin"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_color")}
+          name={["vehicle", "data", "v_color"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_model_yr")}
+          name={["vehicle", "data", "v_model_yr"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_make_desc")}
+          name={["vehicle", "data", "v_make_desc"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_model_desc")}
+          name={["vehicle", "data", "v_model_desc"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("vehicles.forms.registration")} grow>
+        <Form.Item
+          label={t("vehicles.fields.plate_st")}
+          name={["vehicle", "data", "plate_st"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.plate_no")}
+          name={["vehicle", "data", "plate_no"]}
+          rules={[
+            {
+              required: state.vehicle.new,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("vehicles.forms.misc")} grow>
+        <Form.Item
+          label={t("vehicles.fields.v_type")}
+          name={["vehicle", "data", "v_type"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_trimcode")}
+          name={["vehicle", "data", "v_trimcode"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_tone")}
+          name={["vehicle", "data", "v_tone"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_bstyle")}
+          name={["vehicle", "data", "v_bstyle"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_stage")}
+          name={["vehicle", "data", "v_stage"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_prod_dt")}
+          name={["vehicle", "data", "v_prod_dt"]}>
+          <DatePicker disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_paint_codes")}
+          name={["vehicle", "data", "v_paint_codes"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_options")}
+          name={["vehicle", "data", "v_options"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.trim_color")}
+          name={["vehicle", "data", "trim_color"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_mldgcode")}
+          name={["vehicle", "data", "v_mldgcode"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_makecode")}
+          name={["vehicle", "data", "v_makecode"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+        <Form.Item
+          label={t("vehicles.fields.v_engine")}
+          name={["vehicle", "data", "v_engine"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow grow>
+        <Form.Item
+          label={t("vehicles.fields.v_cond")}
+          name={["vehicle", "data", "v_cond"]}>
+          <Input disabled={!state.vehicle.new} />
+        </Form.Item>
+      </LayoutFormRow>
     </div>
   );
 }