admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Patrick Fic
2020-06-12 17:54:20 -07:00
parent a88785fc43
commit 05bf94e808
37 changed files with 1339 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
View File

@@ -1,94 +1,160 @@
import { Button, Col, DatePicker, Form, Input, Row } from "antd";
import { Button, DatePicker, Form, Input, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function VehicleDetailFormComponent() {
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function VehicleDetailFormComponent({ form }) {
const { t } = useTranslation();
return (
<div>
<Button type="primary" key="submit" htmlType="submit">
{t("general.actions.save")}
</Button>
<Row>
<Col span={8}>
<Form.Item label={t("vehicles.fields.v_vin")} name="v_vin">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.plate_no")} name="plate_no">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.plate_st")} name="plate_st">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_type")} name="v_type">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_trimcode")} name="v_trimcode">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_tone")} name="v_tone">
<Input />
</Form.Item>
<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")} name="v_stage">
<Input />
</Form.Item>
<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")}
name="v_paint_codes"
>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_options")} name="v_options">
<Input />
</Form.Item>
<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")}
name="v_model_desc"
>
<Input />
</Form.Item>
<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")} name="v_mldgcode">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_makecode")} name="v_makecode">
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_make_desc")}
name="v_make_desc"
>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_engine")} name="v_engine">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_cond")} name="v_cond">
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_color")} name="v_color">
<Input />
</Form.Item>
</Col>
</Row>
<div className='imex-flex-row imex-flex-row__flex-space-around'>
<Button
className='imex-flex-row__margin-large'
type='primary'
key='submit'
htmlType='submit'>
{t("general.actions.save")}
</Button>
<div className='imex-flex-row__grow imex-flex-row__margin-large'>
<FormFieldsChanged form={form} />
</div>
</div>
<LayoutFormRow header={t("vehicles.forms.detail")}>
<Form.Item
label={t("vehicles.fields.v_model_yr")}
name='v_model_yr'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<InputNumber precision={0} />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_make_desc")}
name='v_make_desc'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_model_desc")}
name='v_model_desc'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_color")}
name='v_color'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.v_vin")}
name='v_vin'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("vehicles.forms.registration")}>
<Form.Item
label={t("vehicles.fields.plate_st")}
name='plate_st'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("vehicles.fields.plate_no")}
name='plate_no'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("vehicles.forms.misc")}>
<Form.Item label={t("vehicles.fields.v_type")} name='v_type'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_trimcode")} name='v_trimcode'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_tone")} name='v_tone'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_bstyle")} name='v_bstyle'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_stage")} name='v_stage'>
<Input />
</Form.Item>
<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")}
name='v_paint_codes'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_options")} name='v_options'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.trim_color")} name='trim_color'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_mldgcode")} name='v_mldgcode'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_makecode")} name='v_makecode'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_engine")} name='v_engine'>
<Input />
</Form.Item>
<Form.Item label={t("vehicles.fields.v_cond")} name='v_cond'>
<Input />
</Form.Item>
</LayoutFormRow>
</div>
);
}

18
client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
View File

@@ -11,12 +11,12 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
const [updateVehicle] = useMutation(UPDATE_VEHICLE);
const [form] = Form.useForm();
const handleFinish = values => {
const handleFinish = (values) => {
updateVehicle({
variables: { vehId: vehicle.id, vehicle: values }
}).then(r => {
variables: { vehId: vehicle.id, vehicle: values },
}).then((r) => {
notification["success"]({
message: t("vehicles.successes.save")
message: t("vehicles.successes.save"),
});
//TODO Better way to reset the field decorators?
if (refetch) refetch();
@@ -27,13 +27,13 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
<Form
onFinish={handleFinish}
form={form}
autoComplete="off"
autoComplete='off'
layout='vertical'
initialValues={{
...vehicle,
v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
}}
>
<VehicleDetailFormComponent />
v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null,
}}>
<VehicleDetailFormComponent form={form} />
</Form>
);
}