Added vehicle detail form.
This commit is contained in:
Patrick Fic
@@ -5141,6 +5141,431 @@
|
|||||||
</translation>
|
</translation>
|
||||||
</translations>
|
</translations>
|
||||||
</concept_node>
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>plate_st</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>trim_color</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_bstyle</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_color</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_cond</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_engine</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_make_desc</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_makecode</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_mldgcode</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_model_desc</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_model_yr</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_options</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_paint_codes</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_prod_dt</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_stage</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_tone</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_trimcode</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_type</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
<concept_node>
|
||||||
|
<name>v_vin</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
|
</children>
|
||||||
|
</folder_node>
|
||||||
|
<folder_node>
|
||||||
|
<name>successes</name>
|
||||||
|
<children>
|
||||||
|
<concept_node>
|
||||||
|
<name>save</name>
|
||||||
|
<definition_loaded>false</definition_loaded>
|
||||||
|
<description></description>
|
||||||
|
<comment></comment>
|
||||||
|
<default_text></default_text>
|
||||||
|
<translations>
|
||||||
|
<translation>
|
||||||
|
<language>en-US</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>es-MX</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
<translation>
|
||||||
|
<language>fr-CA</language>
|
||||||
|
<approved>false</approved>
|
||||||
|
</translation>
|
||||||
|
</translations>
|
||||||
|
</concept_node>
|
||||||
</children>
|
</children>
|
||||||
</folder_node>
|
</folder_node>
|
||||||
</children>
|
</children>
|
||||||
|
|||||||
@@ -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
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -6,10 +6,13 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
|
|||||||
return (
|
return (
|
||||||
<Spin
|
<Spin
|
||||||
spinning={loading}
|
spinning={loading}
|
||||||
style={{ position: "absolute", top: "50%", left: "50%" }}
|
|
||||||
className="loading-spinner"
|
className="loading-spinner"
|
||||||
size="large"
|
size="large"
|
||||||
//delay="500"
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
alignContent: "center"
|
||||||
|
}}
|
||||||
|
delay={200}
|
||||||
tip={message ? message : null}
|
tip={message ? message : null}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
|||||||
@@ -1,3 +1,2 @@
|
|||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
);
|
||||||
@@ -36,3 +36,13 @@ export const QUERY_VEHICLE_BY_ID = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const UPDATE_VEHICLE = gql`
|
||||||
|
mutation UPDATE_VEHICLE($vehId: uuid!, $vehicle: vehicles_set_input!) {
|
||||||
|
update_vehicles(where: { id: { _eq: $vehId } }, _set: $vehicle) {
|
||||||
|
returning {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|||||||
@@ -1,22 +1,18 @@
|
|||||||
import { Alert, Button, Form, Icon, Tabs } from "antd";
|
import { Form, Icon, Tabs } from "antd";
|
||||||
import React, { useContext } from "react";
|
import React, { useContext } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
|
||||||
FaHardHat,
|
import ResetForm from "../../components/form-items-formatted/reset-form-item.component";
|
||||||
FaInfo,
|
|
||||||
FaRegStickyNote,
|
|
||||||
FaShieldAlt
|
|
||||||
} from "react-icons/fa";
|
|
||||||
import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
|
import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
|
||||||
import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
|
import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
|
||||||
|
import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
|
||||||
import JobsDetailFinancials from "../../components/jobs-detail-financial/jobs-detail-financial.component";
|
import JobsDetailFinancials from "../../components/jobs-detail-financial/jobs-detail-financial.component";
|
||||||
import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
|
import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
|
||||||
import JobsDetailInsurance from "../../components/jobs-detail-insurance/jobs-detail-insurance.component";
|
import JobsDetailInsurance from "../../components/jobs-detail-insurance/jobs-detail-insurance.component";
|
||||||
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
|
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
|
||||||
import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
|
import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
|
||||||
import JobDetailFormContext from "./jobs-detail.page.context";
|
|
||||||
import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
|
|
||||||
import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
|
import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
|
||||||
|
import JobDetailFormContext from "./jobs-detail.page.context";
|
||||||
|
|
||||||
export default function JobsDetailPage({
|
export default function JobsDetailPage({
|
||||||
job,
|
job,
|
||||||
@@ -60,19 +56,7 @@ export default function JobsDetailPage({
|
|||||||
updateJobStatus={updateJobStatus}
|
updateJobStatus={updateJobStatus}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{isFieldsTouched() ? (
|
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
|
||||||
<Alert
|
|
||||||
message={
|
|
||||||
<div>
|
|
||||||
{t("general.messages.unsavedchanges")}
|
|
||||||
<Button onClick={() => resetFields()}>
|
|
||||||
{t("general.actions.reset")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
closable
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<Tabs defaultActiveKey="claimdetail">
|
<Tabs defaultActiveKey="claimdetail">
|
||||||
<Tabs.TabPane
|
<Tabs.TabPane
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ export default connect(
|
|||||||
return () => {
|
return () => {
|
||||||
//
|
//
|
||||||
};
|
};
|
||||||
}, [data]);
|
}, [data, setBodyshop]);
|
||||||
|
|
||||||
return <ManagePage match={match} />;
|
return <ManagePage match={match} />;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,19 +1,15 @@
|
|||||||
import { BackTop, Layout, notification } from "antd";
|
import { BackTop, Layout } from "antd";
|
||||||
import React, { lazy, Suspense, useEffect } from "react";
|
import React, { lazy, Suspense, useEffect } from "react";
|
||||||
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
//This page will handle all routing for the entire application.
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import { Route } from "react-router";
|
import { Route } from "react-router";
|
||||||
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
|
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
|
||||||
import FooterComponent from "../../components/footer/footer.component";
|
import FooterComponent from "../../components/footer/footer.component";
|
||||||
//Component Imports
|
//Component Imports
|
||||||
import HeaderContainer from "../../components/header/header.container";
|
import HeaderContainer from "../../components/header/header.container";
|
||||||
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
|
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
|
||||||
//const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
|
|
||||||
import { setBodyshop } from "../../redux/user/user.actions";
|
|
||||||
import "./manage.page.styles.scss";
|
import "./manage.page.styles.scss";
|
||||||
|
|
||||||
|
|
||||||
const ManageRootPage = lazy(() =>
|
const ManageRootPage = lazy(() =>
|
||||||
import("../manage-root/manage-root.page.container")
|
import("../manage-root/manage-root.page.container")
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,9 +1,13 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container";
|
||||||
|
|
||||||
export default function VehicleDetailComponent({ vehicle }) {
|
export default function VehicleDetailComponent({ vehicle, refetch }) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
Veh detail <span>{vehicle.v_vin}</span>
|
Veh detail <span>{vehicle.v_vin}</span>
|
||||||
|
<div>Vehicle Fields</div>
|
||||||
|
<VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} />
|
||||||
|
<div>Associated Jobs</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,10 +17,10 @@ export default function VehicleDetailContainer({ match }) {
|
|||||||
if (loading) return <LoadingSpinner />;
|
if (loading) return <LoadingSpinner />;
|
||||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||||
|
|
||||||
console.log("vehId", vehId);
|
|
||||||
|
|
||||||
if (data.vehicles[0])
|
if (data.vehicles[0])
|
||||||
return <VehicleDetailComponent vehicle={data.vehicles[0]} />;
|
return (
|
||||||
|
<VehicleDetailComponent vehicle={data.vehicles[0]} refetch={refetch} />
|
||||||
|
);
|
||||||
else
|
else
|
||||||
return (
|
return (
|
||||||
<AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
|
<AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
|
||||||
|
|||||||
@@ -331,7 +331,29 @@
|
|||||||
"noaccess": "The vehicle does not exist or you do not have access to it."
|
"noaccess": "The vehicle does not exist or you do not have access to it."
|
||||||
},
|
},
|
||||||
"fields": {
|
"fields": {
|
||||||
"plate_no": "License Plate"
|
"plate_no": "License Plate",
|
||||||
|
"plate_st": "Plate Jurisdiction",
|
||||||
|
"trim_color": "Trim Color",
|
||||||
|
"v_bstyle": "Body Style",
|
||||||
|
"v_color": "Color",
|
||||||
|
"v_cond": "Condition",
|
||||||
|
"v_engine": "Engine",
|
||||||
|
"v_make_desc": "Make",
|
||||||
|
"v_makecode": "Make Code",
|
||||||
|
"v_mldgcode": "Molding Code",
|
||||||
|
"v_model_desc": "Model",
|
||||||
|
"v_model_yr": "Year",
|
||||||
|
"v_options": "Options",
|
||||||
|
"v_paint_codes": "Paint Codes",
|
||||||
|
"v_prod_dt": "Production Date",
|
||||||
|
"v_stage": "Stage",
|
||||||
|
"v_tone": "Tone",
|
||||||
|
"v_trimcode": "Trim Code",
|
||||||
|
"v_type": "Type",
|
||||||
|
"v_vin": "Vehicle Identification Number"
|
||||||
|
},
|
||||||
|
"successes": {
|
||||||
|
"save": "Vehicle saved successfully."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -331,7 +331,29 @@
|
|||||||
"noaccess": "El vehículo no existe o usted no tiene acceso a él."
|
"noaccess": "El vehículo no existe o usted no tiene acceso a él."
|
||||||
},
|
},
|
||||||
"fields": {
|
"fields": {
|
||||||
"plate_no": "Placa"
|
"plate_no": "Placa",
|
||||||
|
"plate_st": "Jurisdicción de placas",
|
||||||
|
"trim_color": "Recortar color",
|
||||||
|
"v_bstyle": "Tipo de cuerpo",
|
||||||
|
"v_color": "Color",
|
||||||
|
"v_cond": "condición",
|
||||||
|
"v_engine": "Motor",
|
||||||
|
"v_make_desc": "Hacer",
|
||||||
|
"v_makecode": "Hacer código",
|
||||||
|
"v_mldgcode": "Código de moldeo",
|
||||||
|
"v_model_desc": "Modelo",
|
||||||
|
"v_model_yr": "año",
|
||||||
|
"v_options": "Opciones",
|
||||||
|
"v_paint_codes": "Códigos de pintura",
|
||||||
|
"v_prod_dt": "Fecha de producción",
|
||||||
|
"v_stage": "Escenario",
|
||||||
|
"v_tone": "Tono",
|
||||||
|
"v_trimcode": "Código de recorte",
|
||||||
|
"v_type": "Tipo",
|
||||||
|
"v_vin": "Número de identificación del vehículo"
|
||||||
|
},
|
||||||
|
"successes": {
|
||||||
|
"save": "Vehículo guardado con éxito."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -331,7 +331,29 @@
|
|||||||
"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
|
"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
|
||||||
},
|
},
|
||||||
"fields": {
|
"fields": {
|
||||||
"plate_no": "Plaque d'immatriculation"
|
"plate_no": "Plaque d'immatriculation",
|
||||||
|
"plate_st": "Juridiction de la plaque",
|
||||||
|
"trim_color": "Couleur de garniture",
|
||||||
|
"v_bstyle": "Style corporel",
|
||||||
|
"v_color": "Couleur",
|
||||||
|
"v_cond": "Etat",
|
||||||
|
"v_engine": "moteur",
|
||||||
|
"v_make_desc": "Faire",
|
||||||
|
"v_makecode": "Faire du code",
|
||||||
|
"v_mldgcode": "Code de moulage",
|
||||||
|
"v_model_desc": "Modèle",
|
||||||
|
"v_model_yr": "année",
|
||||||
|
"v_options": "Les options",
|
||||||
|
"v_paint_codes": "Codes de peinture",
|
||||||
|
"v_prod_dt": "Date de production",
|
||||||
|
"v_stage": "Étape",
|
||||||
|
"v_tone": "ton",
|
||||||
|
"v_trimcode": "Code de coupe",
|
||||||
|
"v_type": "Type",
|
||||||
|
"v_vin": "Plaque d'immatriculation"
|
||||||
|
},
|
||||||
|
"successes": {
|
||||||
|
"save": "Le véhicule a été enregistré avec succès."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user