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

import { Form, Input } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import JobsCreateVehicleInfoPredefined from "./jobs-create-vehicle-info.predefined.component";

export default function JobsCreateVehicleInfoNewComponent({ form }) {
  const [state] = useContext(JobCreateContext);

  const { t } = useTranslation();
  return (
    <div>
      <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 noDivider>
        <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 noDivider>
        <Form.Item
          span={10}
          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
          span={11}
          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>
        <JobsCreateVehicleInfoPredefined
          disabled={!state.vehicle.new}
          form={form}
          span={1}
        />
      </LayoutFormRow>

      <LayoutFormRow header={t("vehicles.forms.registration")} grow>
        <Form.Item
          label={t("vehicles.fields.plate_st")}
          name={["vehicle", "data", "plate_st"]}
        >
          <Input disabled={!state.vehicle.new} />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.plate_no")}
          name={["vehicle", "data", "plate_no"]}
        >
          <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"]}
        >
          <FormDatePicker 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>
  );
}