Added vehicle detail form.

client/src/components/form-items-formatted/reset-form-item.component.jsx

@@ -0,0 +1,21 @@
+import { Button } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../alert/alert.component";
+
+export default function ResetForm({ resetFields }) {
+  const { t } = useTranslation();
+  return (
+    <AlertComponent
+      message={
+        <div>
+          {t("general.messages.unsavedchanges")}
+          <Button onClick={() => resetFields()}>
+            {t("general.actions.reset")}
+          </Button>
+        </div>
+      }
+      closable
+    />
+  );
+}

client/src/components/loading-spinner/loading-spinner.component.jsx

@@ -6,10 +6,13 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
   return (
     <Spin
       spinning={loading}
-      style={{ position: "absolute", top: "50%", left: "50%" }}
       className="loading-spinner"
       size="large"
-      //delay="500"
+      style={{
+        position: "relative",
+        alignContent: "center"
+      }}
+      delay={200}
       tip={message ? message : null}
     >
       {props.children}

client/src/components/loading-spinner/loading-spinner.styles.scss

@@ -1,3 +1,2 @@
 .loading-spinner {
-  text-align: center;
 }

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

@@ -0,0 +1,119 @@
+import { Button, DatePicker, Form, Input } 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 }) {
+  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>
+      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>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Form, notification } from "antd";
+import { useMutation } from "react-apollo";
+import VehicleDetailFormComponent from "./vehicle-detail-form.component";
+import { useTranslation } from "react-i18next";
+import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
+
+function VehicleDetailFormContainer({ form, vehicle, refetch }) {
+  const { t } = useTranslation();
+  const [updateVehicle] = useMutation(UPDATE_VEHICLE);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("vehicles.errors.validationtitle"),
+          description: t("vehicles.errors.validation")
+        });
+      }
+      if (!err) {
+        updateVehicle({
+          variables: { vehId: vehicle.id, vehicle: values }
+        }).then(r => {
+          notification["success"]({
+            message: t("vehicles.successes.save")
+          });
+          //TODO: Better way to reset the field decorators?
+          if (refetch) refetch().then();
+          form.resetFields();
+        });
+      }
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} autoComplete="off">
+      <VehicleDetailFormComponent form={form} vehicle={vehicle} />
+    </Form>
+  );
+}
+
+export default Form.create({ name: "VehicleDetailFormContainer" })(
+  VehicleDetailFormContainer
+);