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

Added vehicle detail form.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-07 11:55:37 -08:00
parent b070b0918c
commit 71bd8df208
15 changed files with 712 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
bodyshop_translations.babel
View File

@@ -5141,6 +5141,431 @@
</translation>
</translations>
</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>
</folder_node>
</children>

21
client/src/components/form-items-formatted/reset-form-item.component.jsx Normal file
View File

@@ -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
/>
);
}

7
client/src/components/loading-spinner/loading-spinner.component.jsx
View File

@@ -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}

1
client/src/components/loading-spinner/loading-spinner.styles.scss
View File

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

119
client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx Normal file
View File

@@ -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>
);
}

46
client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx Normal file
View File

@@ -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
);

10
client/src/graphql/vehicles.queries.js
View File

@@ -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
}
}
}
`;

28
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -1,22 +1,18 @@
import { Alert, Button, Form, Icon, Tabs } from "antd";
import { Form, Icon, Tabs } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import {
FaHardHat,
FaInfo,
FaRegStickyNote,
FaShieldAlt
} from "react-icons/fa";
import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
import ResetForm from "../../components/form-items-formatted/reset-form-item.component";
import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
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 JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
import JobsDetailInsurance from "../../components/jobs-detail-insurance/jobs-detail-insurance.component";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.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 JobDetailFormContext from "./jobs-detail.page.context";
export default function JobsDetailPage({
job,
@@ -60,19 +56,7 @@ export default function JobsDetailPage({
updateJobStatus={updateJobStatus}
/>
{isFieldsTouched() ? (
<Alert
message={
<div>
{t("general.messages.unsavedchanges")}
<Button onClick={() => resetFields()}>
{t("general.actions.reset")}
</Button>
</div>
}
closable
/>
) : null}
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Tabs defaultActiveKey="claimdetail">
<Tabs.TabPane

2
client/src/pages/manage/manage.page.container.jsx
View File

@@ -28,7 +28,7 @@ export default connect(
return () => {
//
};
}, [data]);
}, [data, setBodyshop]);
return <ManagePage match={match} />;
});

8
client/src/pages/manage/manage.page.jsx
View File

@@ -1,19 +1,15 @@
import { BackTop, Layout, notification } from "antd";
import { BackTop, Layout } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
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 ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import HeaderContainer from "../../components/header/header.container";
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";
const ManageRootPage = lazy(() =>
import("../manage-root/manage-root.page.container")
);

6
client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
View File

@@ -1,9 +1,13 @@
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 (
<div>
Veh detail <span>{vehicle.v_vin}</span>
<div>Vehicle Fields</div>
<VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} />
<div>Associated Jobs</div>
</div>
);
}

6
client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
View File

@@ -17,10 +17,10 @@ export default function VehicleDetailContainer({ match }) {
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
console.log("vehId", vehId);
if (data.vehicles[0])
return <VehicleDetailComponent vehicle={data.vehicles[0]} />;
return (
<VehicleDetailComponent vehicle={data.vehicles[0]} refetch={refetch} />
);
else
return (
<AlertComponent message={t("vehicles.errors.noaccess")} type="error" />

24
client/src/translations/en_us/common.json
View File

@@ -331,7 +331,29 @@
"noaccess": "The vehicle does not exist or you do not have access to it."
},
"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."
}
}
}

24
client/src/translations/es/common.json
View File

@@ -331,7 +331,29 @@
"noaccess": "El vehículo no existe o usted no tiene acceso a él."
},
"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."
}
}
}

24
client/src/translations/fr/common.json
View File

@@ -331,7 +331,29 @@
"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
},
"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."
}
}
}