WIP for invoice list items on inovice enter

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

@@ -1,126 +1,91 @@
 import { Button, Col, DatePicker, Form, Input, Row } from "antd";
-import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import ResetForm from "../form-items-formatted/reset-form-item.component";
-export default function VehicleDetailFormComponent({ vehicle, form }) {
+export default function VehicleDetailFormComponent() {
   const { t } = useTranslation();
-  const { isFieldsTouched, resetFields, getFieldDecorator } = form;
 
   return (
     <div>
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
       <Button type="primary" key="submit" htmlType="submit">
         {t("general.labels.save")}
       </Button>
       <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 label={t("vehicles.fields.v_vin")} name="v_vin">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.plate_no")}>
-            {getFieldDecorator("plate_no", {
-              initialValue: vehicle.plate_no
-            })(<Input name="plate_no" />)}
+          <Form.Item label={t("vehicles.fields.plate_no")} name="plate_no">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.plate_st")}>
-            {getFieldDecorator("plate_st", {
-              initialValue: vehicle.plate_st
-            })(<Input name="plate_st" />)}
+          <Form.Item label={t("vehicles.fields.plate_st")} name="plate_st">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_type")}>
-            {getFieldDecorator("v_type", {
-              initialValue: vehicle.v_type
-            })(<Input name="v_type" />)}
+          <Form.Item label={t("vehicles.fields.v_type")} name="v_type">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_trimcode")}>
-            {getFieldDecorator("v_trimcode", {
-              initialValue: vehicle.v_trimcode
-            })(<Input name="v_trimcode" />)}
+          <Form.Item label={t("vehicles.fields.v_trimcode")} name="v_trimcode">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_tone")}>
-            {getFieldDecorator("v_tone", {
-              initialValue: vehicle.v_tone
-            })(<Input name="v_tone" />)}
+          <Form.Item label={t("vehicles.fields.v_tone")} name="v_tone">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_bstyle")}>
-            {getFieldDecorator("v_bstyle", {
-              initialValue: vehicle.v_bstyle
-            })(<Input name="v_bstyle" />)}
+          <Form.Item label={t("vehicles.fields.v_bstyle")} name="v_bstyle">
+            <Input />
           </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 label={t("vehicles.fields.v_stage")} name="v_stage">
+            <Input />
           </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 label={t("vehicles.fields.v_prod_dt")} name="v_prod_dt">
+            <DatePicker />
           </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
+            label={t("vehicles.fields.v_paint_codes")}
+            name="v_paint_codes"
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_options")}>
-            {getFieldDecorator("v_options", {
-              initialValue: vehicle.v_options
-            })(<Input name="v_options" />)}
+          <Form.Item label={t("vehicles.fields.v_options")} name="v_options">
+            <Input />
           </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 label={t("vehicles.fields.v_model_yr")} name="v_model_yr">
+            <Input />
           </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
+            label={t("vehicles.fields.v_model_desc")}
+            name="v_model_desc"
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.trim_color")}>
-            {getFieldDecorator("trim_color", {
-              initialValue: vehicle.trim_color
-            })(<Input name="trim_color" />)}
+          <Form.Item label={t("vehicles.fields.trim_color")} name="trim_color">
+            <Input />
           </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 label={t("vehicles.fields.v_mldgcode")} name="v_mldgcode">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_makecode")}>
-            {getFieldDecorator("v_makecode", {
-              initialValue: vehicle.v_makecode
-            })(<Input name="v_makecode" />)}
+          <Form.Item label={t("vehicles.fields.v_makecode")} name="v_makecode">
+            <Input />
           </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
+            label={t("vehicles.fields.v_make_desc")}
+            name="v_make_desc"
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_engine")}>
-            {getFieldDecorator("v_engine", {
-              initialValue: vehicle.v_engine
-            })(<Input name="v_engine" />)}
+          <Form.Item label={t("vehicles.fields.v_engine")} name="v_engine">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_cond")}>
-            {getFieldDecorator("v_cond", {
-              initialValue: vehicle.v_cond
-            })(<Input name="v_cond" />)}
+          <Form.Item label={t("vehicles.fields.v_cond")} name="v_cond">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("vehicles.fields.v_color")}>
-            {getFieldDecorator("v_color", {
-              initialValue: vehicle.v_color
-            })(<Input name="v_color" />)}
+          <Form.Item label={t("vehicles.fields.v_color")} name="v_color">
+            <Input />
           </Form.Item>
         </Col>
       </Row>

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

@@ -3,13 +3,13 @@ import { Form, notification } from "antd";
 import { useMutation } from "react-apollo";
 import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";
+import moment from "moment";
 import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
 
 function VehicleDetailFormContainer({ vehicle, refetch }) {
   const { t } = useTranslation();
   const [updateVehicle] = useMutation(UPDATE_VEHICLE);
   const [form] = Form.useForm();
-  const { resetFields } = form;
 
   const handleFinish = values => {
     updateVehicle({
@@ -19,14 +19,21 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
         message: t("vehicles.successes.save")
       });
       //TODO Better way to reset the field decorators?
-      if (refetch) refetch().then();
-      resetFields();
+      if (refetch) refetch();
     });
   };
 
   return (
-    <Form onFinish={handleFinish} form={Form} autoComplete="off">
-      <VehicleDetailFormComponent vehicle={vehicle} form={form} />
+    <Form
+      onFinish={handleFinish}
+      form={form}
+      autoComplete="off"
+      initialValues={{
+        ...vehicle,
+        v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
+      }}
+    >
+      <VehicleDetailFormComponent />
     </Form>
   );
 }