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

Added jobs list to vehicle detail page.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-07 14:25:22 -08:00
parent 71bd8df208
commit 7f06df66fd
11 changed files with 277 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
bodyshop_translations.babel
View File

@@ -5008,6 +5008,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>vehicledetail</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>
<folder_node> <folder_node>
@@ -5115,6 +5136,48 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>validation</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>validationtitle</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>
<folder_node> <folder_node>

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

@@ -1,4 +1,4 @@
import { Button, DatePicker, Form, Input } from "antd"; import { Button, DatePicker, Form, Input, Row, Col } from "antd";
import moment from "moment"; import moment from "moment";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -13,107 +13,117 @@ export default function VehicleDetailFormComponent({ vehicle, form }) {
<Button type="primary" key="submit" htmlType="submit"> <Button type="primary" key="submit" htmlType="submit">
{t("general.labels.save")} {t("general.labels.save")}
</Button> </Button>
The Form <Row>
<Form.Item label={t("vehicles.fields.v_vin")}> <Col span={8}>
{getFieldDecorator("v_vin", { <Form.Item label={t("vehicles.fields.v_vin")}>
initialValue: vehicle.v_vin {getFieldDecorator("v_vin", {
})(<Input name="v_vin" />)} initialValue: vehicle.v_vin
</Form.Item> })(<Input name="v_vin" />)}
<Form.Item label={t("vehicles.fields.plate_no")}> </Form.Item>
{getFieldDecorator("plate_no", { <Form.Item label={t("vehicles.fields.plate_no")}>
initialValue: vehicle.plate_no {getFieldDecorator("plate_no", {
})(<Input name="plate_no" />)} initialValue: vehicle.plate_no
</Form.Item> })(<Input name="plate_no" />)}
<Form.Item label={t("vehicles.fields.plate_st")}> </Form.Item>
{getFieldDecorator("plate_st", { <Form.Item label={t("vehicles.fields.plate_st")}>
initialValue: vehicle.plate_st {getFieldDecorator("plate_st", {
})(<Input name="plate_st" />)} initialValue: vehicle.plate_st
</Form.Item> })(<Input name="plate_st" />)}
<Form.Item label={t("vehicles.fields.v_type")}> </Form.Item>
{getFieldDecorator("v_type", { <Form.Item label={t("vehicles.fields.v_type")}>
initialValue: vehicle.v_type {getFieldDecorator("v_type", {
})(<Input name="v_type" />)} initialValue: vehicle.v_type
</Form.Item> })(<Input name="v_type" />)}
<Form.Item label={t("vehicles.fields.v_trimcode")}> </Form.Item>
{getFieldDecorator("v_trimcode", { <Form.Item label={t("vehicles.fields.v_trimcode")}>
initialValue: vehicle.v_trimcode {getFieldDecorator("v_trimcode", {
})(<Input name="v_trimcode" />)} initialValue: vehicle.v_trimcode
</Form.Item> })(<Input name="v_trimcode" />)}
<Form.Item label={t("vehicles.fields.v_tone")}> </Form.Item>
{getFieldDecorator("v_tone", { <Form.Item label={t("vehicles.fields.v_tone")}>
initialValue: vehicle.v_tone {getFieldDecorator("v_tone", {
})(<Input name="v_tone" />)} initialValue: vehicle.v_tone
</Form.Item> })(<Input name="v_tone" />)}
<Form.Item label={t("vehicles.fields.v_stage")}> </Form.Item>
{getFieldDecorator("v_stage", { <Form.Item label={t("vehicles.fields.v_bstyle")}>
initialValue: vehicle.v_stage {getFieldDecorator("v_bstyle", {
})(<Input name="v_stage" />)} initialValue: vehicle.v_bstyle
</Form.Item> })(<Input name="v_bstyle" />)}
<Form.Item label={t("vehicles.fields.v_prod_dt")}> </Form.Item>
{getFieldDecorator("v_prod_dt", { </Col>
initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null <Col span={8}>
})(<DatePicker name="v_prod_dt" />)} <Form.Item label={t("vehicles.fields.v_stage")}>
</Form.Item> {getFieldDecorator("v_stage", {
<Form.Item label={t("vehicles.fields.v_paint_codes")}> initialValue: vehicle.v_stage
{getFieldDecorator("v_paint_codes", { })(<Input name="v_stage" />)}
initialValue: JSON.stringify(vehicle.v_paint_codes) </Form.Item>
})(<Input name="v_paint_codes" />)} <Form.Item label={t("vehicles.fields.v_prod_dt")}>
</Form.Item> {getFieldDecorator("v_prod_dt", {
<Form.Item label={t("vehicles.fields.v_options")}> initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
{getFieldDecorator("v_options", { })(<DatePicker name="v_prod_dt" />)}
initialValue: vehicle.v_options </Form.Item>
})(<Input name="v_options" />)} {
</Form.Item> //TODO Add handling for paint code json
<Form.Item label={t("vehicles.fields.v_model_yr")}> }
{getFieldDecorator("v_model_yr", { <Form.Item label={t("vehicles.fields.v_paint_codes")}>
initialValue: vehicle.v_model_yr {getFieldDecorator("v_paint_codes", {
})(<Input name="v_model_yr" />)} initialValue: JSON.stringify(vehicle.v_paint_codes)
</Form.Item> })(<Input name="v_paint_codes" />)}
<Form.Item label={t("vehicles.fields.v_model_desc")}> </Form.Item>
{getFieldDecorator("v_model_desc", { <Form.Item label={t("vehicles.fields.v_options")}>
initialValue: vehicle.v_model_desc {getFieldDecorator("v_options", {
})(<Input name="v_model_desc" />)} initialValue: vehicle.v_options
</Form.Item> })(<Input name="v_options" />)}
<Form.Item label={t("vehicles.fields.v_mldgcode")}> </Form.Item>
{getFieldDecorator("v_mldgcode", { <Form.Item label={t("vehicles.fields.v_model_yr")}>
initialValue: vehicle.v_mldgcode {getFieldDecorator("v_model_yr", {
})(<Input name="v_mldgcode" />)} initialValue: vehicle.v_model_yr
</Form.Item> })(<Input name="v_model_yr" />)}
<Form.Item label={t("vehicles.fields.v_makecode")}> </Form.Item>
{getFieldDecorator("v_makecode", { <Form.Item label={t("vehicles.fields.v_model_desc")}>
initialValue: vehicle.v_makecode {getFieldDecorator("v_model_desc", {
})(<Input name="v_makecode" />)} initialValue: vehicle.v_model_desc
</Form.Item> })(<Input name="v_model_desc" />)}
<Form.Item label={t("vehicles.fields.v_make_desc")}> </Form.Item>
{getFieldDecorator("v_make_desc", { <Form.Item label={t("vehicles.fields.trim_color")}>
initialValue: vehicle.v_make_desc {getFieldDecorator("trim_color", {
})(<Input name="v_make_desc" />)} initialValue: vehicle.trim_color
</Form.Item> })(<Input name="trim_color" />)}
<Form.Item label={t("vehicles.fields.v_engine")}> </Form.Item>
{getFieldDecorator("v_engine", { </Col>
initialValue: vehicle.v_engine <Col span={8}>
})(<Input name="v_engine" />)} <Form.Item label={t("vehicles.fields.v_mldgcode")}>
</Form.Item> {getFieldDecorator("v_mldgcode", {
<Form.Item label={t("vehicles.fields.v_cond")}> initialValue: vehicle.v_mldgcode
{getFieldDecorator("v_cond", { })(<Input name="v_mldgcode" />)}
initialValue: vehicle.v_cond </Form.Item>
})(<Input name="v_cond" />)} <Form.Item label={t("vehicles.fields.v_makecode")}>
</Form.Item> {getFieldDecorator("v_makecode", {
<Form.Item label={t("vehicles.fields.v_color")}> initialValue: vehicle.v_makecode
{getFieldDecorator("v_color", { })(<Input name="v_makecode" />)}
initialValue: vehicle.v_color </Form.Item>
})(<Input name="v_color" />)} <Form.Item label={t("vehicles.fields.v_make_desc")}>
</Form.Item> {getFieldDecorator("v_make_desc", {
<Form.Item label={t("vehicles.fields.v_bstyle")}> initialValue: vehicle.v_make_desc
{getFieldDecorator("v_bstyle", { })(<Input name="v_make_desc" />)}
initialValue: vehicle.v_bstyle </Form.Item>
})(<Input name="v_bstyle" />)} <Form.Item label={t("vehicles.fields.v_engine")}>
</Form.Item> {getFieldDecorator("v_engine", {
<Form.Item label={t("vehicles.fields.trim_color")}> initialValue: vehicle.v_engine
{getFieldDecorator("trim_color", { })(<Input name="v_engine" />)}
initialValue: vehicle.trim_color </Form.Item>
})(<Input name="trim_color" />)} <Form.Item label={t("vehicles.fields.v_cond")}>
</Form.Item> {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>
</Col>
</Row>
</div> </div>
); );
} }

59
client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx Normal file
View File

@@ -0,0 +1,59 @@
import React from "react";
import { Table } from "antd";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
export default function VehicleDetailJobsComponent({ vehicle }) {
const { t } = useTranslation();
const columns = [
{
title: t("jobs.fields.ro_number"),
dataIndex: "ro_number",
key: "ro_number",
ellipsis: true,
render: (text, record) => (
<Link to={`/manage/jobs/${record.id}`}>
{record.ro_number ? record.ro_number : `EST ${record.est_number}`}
</Link>
)
},
{
title: t("jobs.fields.owner"),
dataIndex: "owner",
key: "owner",
render: (text, record) => (
<Link to={`/manage/owners/${record.owner.id}`}>
{`${record.ownr_fn} ${record.ownr_ln}`}
</Link>
)
},
{
title: t("jobs.fields.clm_no"),
dataIndex: "clm_no",
key: "clm_no"
},
{
title: t("jobs.fields.status"),
dataIndex: "status",
key: "status"
},
{
title: t("jobs.fields.clm_total"),
dataIndex: "clm_total",
key: "clm_total",
render: (text, record) => (
<CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
)
}
];
return (
<Table
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={vehicle.jobs}
/>
);
}

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

@@ -28,10 +28,17 @@ export const QUERY_VEHICLE_BY_ID = gql`
updated_at updated_at
trim_color trim_color
jobs { jobs {
id
ro_number ro_number
ownr_fn ownr_fn
est_number
ownr_ln ownr_ln
owner {
id
}
clm_no clm_no
status
clm_total
} }
} }
} }

9
client/src/pages/profile/profile.container.page.jsx
View File

@@ -1,6 +1,11 @@
import React from "react"; import React, { useEffect } from "react";
import ProfilePage from "./profile.page"; import ProfilePage from "./profile.page";
import { useTranslation } from "react-i18next";
export default function ProfileContainerPage() { export default function ProfileContainerPage() {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.profile");
}, [t]);
return <ProfilePage />; return <ProfilePage />;
} }

11
client/src/pages/profile/profile.page.jsx
View File

@@ -1,16 +1,9 @@
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Layout } from "antd"; import { Layout } from "antd";
import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component"; import React, { useState } from "react";
import ProfileContent from "../../components/profile-content/profile-content.component"; import ProfileContent from "../../components/profile-content/profile-content.component";
import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
export default function ProfilePage() { export default function ProfilePage() {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.profile");
}, [t]);
const [sidebarSelection, setSidebarSelection] = useState({ key: "profile" }); const [sidebarSelection, setSidebarSelection] = useState({ key: "profile" });
return ( return (
<Layout> <Layout>

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

@@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container"; import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container";
import VehicleDetailJobsComponent from "../../components/vehicle-detail-jobs/vehicle-detail-jobs.component";
export default function VehicleDetailComponent({ vehicle, refetch }) { export default function VehicleDetailComponent({ vehicle, refetch }) {
return ( return (
@@ -7,7 +8,7 @@ export default function VehicleDetailComponent({ vehicle, refetch }) {
Veh detail <span>{vehicle.v_vin}</span> Veh detail <span>{vehicle.v_vin}</span>
<div>Vehicle Fields</div> <div>Vehicle Fields</div>
<VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} /> <VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} />
<div>Associated Jobs</div> <VehicleDetailJobsComponent vehicle={vehicle} />
</div> </div>
); );
} }

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

@@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect } from "react";
import VehicleDetailComponent from "./vehicles-detail.page.component"; import VehicleDetailComponent from "./vehicles-detail.page.component";
import { useQuery } from "react-apollo"; import { useQuery } from "react-apollo";
import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries"; import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
@@ -14,6 +14,15 @@ export default function VehicleDetailContainer({ match }) {
fetchPolicy: "network-only" fetchPolicy: "network-only"
}); });
useEffect(() => {
document.title = t("titles.vehicledetail", {
vehicle:
data && data.vehicles[0]
? `${data.vehicles[0].v_model_yr} ${data.vehicles[0].v_make_desc} ${data.vehicles[0].v_model_desc}`
: ""
});
}, [t, data]);
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" />;

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

@@ -315,7 +315,8 @@
"jobsdetail": "Job {{ro_number}} | $t(titles.app)", "jobsdetail": "Job {{ro_number}} | $t(titles.app)",
"jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)", "jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)",
"profile": "My Profile | $t(titles.app)", "profile": "My Profile | $t(titles.app)",
"schedule": "Schedule | $t(titles.app)" "schedule": "Schedule | $t(titles.app)",
"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)"
}, },
"user": { "user": {
"actions": { "actions": {
@@ -328,7 +329,9 @@
}, },
"vehicles": { "vehicles": {
"errors": { "errors": {
"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.",
"validation": "Please ensure all fields are entered correctly.",
"validationtitle": "Validation Error"
}, },
"fields": { "fields": {
"plate_no": "License Plate", "plate_no": "License Plate",

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

@@ -315,7 +315,8 @@
"jobsdetail": "Trabajo {{ro_number}} | $t(titles.app)", "jobsdetail": "Trabajo {{ro_number}} | $t(titles.app)",
"jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)", "jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)",
"profile": "Mi perfil | $t(titles.app)", "profile": "Mi perfil | $t(titles.app)",
"schedule": "Horario | $t(titles.app)" "schedule": "Horario | $t(titles.app)",
"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)"
}, },
"user": { "user": {
"actions": { "actions": {
@@ -328,7 +329,9 @@
}, },
"vehicles": { "vehicles": {
"errors": { "errors": {
"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.",
"validation": "Asegúrese de que todos los campos se ingresen correctamente.",
"validationtitle": "Error de validacion"
}, },
"fields": { "fields": {
"plate_no": "Placa", "plate_no": "Placa",

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

@@ -315,7 +315,8 @@
"jobsdetail": "Travail {{ro_number}} | $t(titles.app)", "jobsdetail": "Travail {{ro_number}} | $t(titles.app)",
"jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)", "jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)",
"profile": "Mon profil | $t(titles.app)", "profile": "Mon profil | $t(titles.app)",
"schedule": "Horaire | $t(titles.app)" "schedule": "Horaire | $t(titles.app)",
"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)"
}, },
"user": { "user": {
"actions": { "actions": {
@@ -328,7 +329,9 @@
}, },
"vehicles": { "vehicles": {
"errors": { "errors": {
"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.",
"validation": "Veuillez vous assurer que tous les champs sont correctement entrés.",
"validationtitle": "Erreur de validation"
}, },
"fields": { "fields": {
"plate_no": "Plaque d'immatriculation", "plate_no": "Plaque d'immatriculation",