Added vehicle and owner pages/routes.

This commit is contained in:
Patrick Fic
2020-02-07 10:54:08 -08:00
parent b86586241a
commit b070b0918c
20 changed files with 316 additions and 35 deletions

View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2">
<babeledit_project version="1.2" be_version="2.6.1">
<!--
BabelEdit project file
@@ -4038,6 +4038,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>customers</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>home</name>
<definition_loaded>false</definition_loaded>
@@ -4080,6 +4101,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>owners</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>schedule</name>
<definition_loaded>false</definition_loaded>
@@ -4101,6 +4143,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicles</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>
@@ -5028,6 +5091,32 @@
<folder_node>
<name>vehicles</name>
<children>
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>noaccess</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>fields</name>
<children>

View File

@@ -13,7 +13,7 @@ import PrivateRoute from "../utils/private-route";
import "./App.css";
const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page"));
const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
const Unauthorized = lazy(() =>
import("../pages/unauthorized/unauthorized.component")
@@ -28,8 +28,7 @@ const mapDispatchToProps = dispatch => ({
export default connect(
mapStateToProps,
mapDispatchToProps
)(({ checkUserSession, currentUser, setBodyshop }) => {
)(({ checkUserSession, currentUser }) => {
useEffect(() => {
checkUserSession();
return () => {};

View File

@@ -49,6 +49,21 @@ export default ({ landingHeader, selectedNavItem }) => {
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title={t("menus.header.customers")}>
<Menu.Item key="owners">
<Link to="/manage/owners">
<Icon type="team" />
{t("menus.header.owners")}
</Link>
</Menu.Item>
<Menu.Item key="vehicles">
<Link to="/manage/vehicles">
<Icon type="car" />
{t("menus.header.vehicles")}
</Link>
</Menu.Item>
</Menu.SubMenu>
{!landingHeader ? null : (
<Menu.Item>
<ManageSignInButton />

View File

@@ -106,7 +106,7 @@ export default withRouter(function JobsList({
ellipsis: true,
render: (text, record) => {
return record.vehicle ? (
<Link to={"manage/vehicles/" + record.vehicle.id}>
<Link to={"/manage/vehicles/" + record.vehicle.id}>
{record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
{record.vehicle.v_model_desc}
</Link>

View File

@@ -6,6 +6,7 @@ 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"

View File

@@ -11,6 +11,7 @@ export default function ScheduleDayViewComponent({ data, day }) {
<ScheduleCalendarWrapperComponent
events={data}
defaultView="day"
views={["day"]}
style={{ height: "40vh" }}
defaultDate={new Date(day)}
//onNavigate={e => console.log("e", e)}

View File

@@ -0,0 +1,38 @@
import { gql } from "apollo-boost";
export const QUERY_VEHICLE_BY_ID = gql`
query QUERY_VEHICLE_BY_ID($id: uuid!) {
vehicles(where: { id: { _eq: $id } }) {
created_at
db_v_code
id
plate_no
plate_st
v_vin
v_type
v_trimcode
v_tone
v_stage
v_prod_dt
v_paint_codes
v_options
v_model_yr
v_model_desc
v_mldgcode
v_makecode
v_make_desc
v_engine
v_cond
v_color
v_bstyle
updated_at
trim_color
jobs {
ro_number
ownr_fn
ownr_ln
clm_no
}
}
}
`;

View File

@@ -1,6 +1,34 @@
import React from "react";
import React, { useEffect } from "react";
import ManagePage from "./manage.page";
import { useQuery } from "react-apollo";
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
import { setBodyshop } from "../../redux/user/user.actions";
import { connect } from "react-redux";
import { notification } from "antd";
import { useTranslation } from "react-i18next";
export default function ManagePageContainer() {
return <ManagePage />;
}
const mapDispatchToProps = dispatch => ({
setBodyshop: bs => dispatch(setBodyshop(bs))
});
export default connect(
null,
mapDispatchToProps
)(function ManagePageContainer({ match, setBodyshop }) {
const { error, data } = useQuery(QUERY_BODYSHOP, {
fetchPolicy: "network-only"
});
const { t } = useTranslation();
if (error) {
notification["error"]({ message: t("bodyshop.errors.loading") });
}
useEffect(() => {
if (data) setBodyshop(data.bodyshops[0]);
return () => {
//
};
}, [data]);
return <ManagePage match={match} />;
});

View File

@@ -1,6 +1,6 @@
import { BackTop, Layout, notification } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
import { useQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
//This page will handle all routing for the entire application.
import { connect } from "react-redux";
@@ -10,7 +10,6 @@ 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";
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
//const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
import { setBodyshop } from "../../redux/user/user.actions";
import "./manage.page.styles.scss";
@@ -35,29 +34,21 @@ const ChatWindowContainer = lazy(() =>
const ScheduleContainer = lazy(() =>
import("../schedule/schedule.page.container")
);
const VehiclesContainer = lazy(() =>
import("../vehicles/vehicles.page.container")
);
const VehiclesDetailContainer = lazy(() =>
import("../vehicles-detail/vehicles-detail.page.container")
);
const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
const OwnersDetailContainer = lazy(() =>
import("../owners-detail/owners-detail.page.container")
);
const { Header, Content, Footer } = Layout;
const mapDispatchToProps = dispatch => ({
setBodyshop: bs => dispatch(setBodyshop(bs))
});
export default connect(
null,
mapDispatchToProps
)(function Manage({ match, setBodyshop }) {
export default function Manage({ match }) {
const { t } = useTranslation();
const { error, data } = useQuery(QUERY_BODYSHOP, {
fetchPolicy: "network-only"
});
if (error) {
notification["error"]({ message: t("bodyshop.errors.loading") });
}
if (data) {
setBodyshop(data.bodyshops[0]);
}
useEffect(() => {
document.title = t("titles.app");
}, [t]);
@@ -96,7 +87,26 @@ export default connect(
path={`${match.path}/profile`}
component={ProfilePage}
/>
<Route
exact
path={`${match.path}/vehicles`}
component={VehiclesContainer}
/>
<Route
exact
path={`${match.path}/vehicles/:vehId`}
component={VehiclesDetailContainer}
/>
<Route
exact
path={`${match.path}/owners`}
component={OwnersContainer}
/>
<Route
exact
path={`${match.path}/owners/:ownerId`}
component={OwnersDetailContainer}
/>
<Route
exact
path={`${match.path}/schedule`}
@@ -118,4 +128,4 @@ export default connect(
<BackTop />
</Layout>
);
});
}

View File

@@ -0,0 +1,5 @@
import React from "react";
export default function OwnersDetailComponent() {
return <div>Owner Detail</div>;
}

View File

@@ -0,0 +1,8 @@
import React from "react";
import OwnersDetailComponent from "./owners-detail.page.component";
export default function OwnersDetailContainer({ match }) {
const { ownerId } = match.params;
console.log("ownerId", ownerId);
return <OwnersDetailComponent />;
}

View File

@@ -0,0 +1,9 @@
import React from 'react'
export default function OwnersPageComponent() {
return (
<div>
Owners Page
</div>
)
}

View File

@@ -0,0 +1,8 @@
import React from 'react'
import OwnersPageComponent from './owners.page.component'
export default function OwnersPageContainer() {
return (
<OwnersPageComponent />
)
}

View File

@@ -0,0 +1,9 @@
import React from "react";
export default function VehicleDetailComponent({ vehicle }) {
return (
<div>
Veh detail <span>{vehicle.v_vin}</span>
</div>
);
}

View File

@@ -0,0 +1,28 @@
import React from "react";
import VehicleDetailComponent from "./vehicles-detail.page.component";
import { useQuery } from "react-apollo";
import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import { useTranslation } from "react-i18next";
export default function VehicleDetailContainer({ match }) {
const { vehId } = match.params;
const { t } = useTranslation();
const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
variables: { id: vehId },
fetchPolicy: "network-only"
});
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]} />;
else
return (
<AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
);
}

View File

@@ -0,0 +1,9 @@
import React from 'react'
export default function VehiclesPageComponent() {
return (
<div>
Vehiculos
</div>
)
}

View File

@@ -0,0 +1,6 @@
import React from "react";
import VehiclesPageComponent from "./vehicles.page.component";
export default function VehiclesPageContainer() {
return <VehiclesPageComponent />;
}

View File

@@ -246,9 +246,12 @@
"header": {
"activejobs": "Active Jobs",
"availablejobs": "Available Jobs",
"customers": "Customers",
"home": "Home",
"jobs": "Jobs",
"schedule": "Schedule"
"owners": "Owners",
"schedule": "Schedule",
"vehicles": "Vehicles"
},
"jobsdetail": {
"claimdetail": "Claim Details",
@@ -324,6 +327,9 @@
}
},
"vehicles": {
"errors": {
"noaccess": "The vehicle does not exist or you do not have access to it."
},
"fields": {
"plate_no": "License Plate"
}

View File

@@ -246,9 +246,12 @@
"header": {
"activejobs": "Empleos activos",
"availablejobs": "Trabajos disponibles",
"customers": "Clientes",
"home": "Casa",
"jobs": "Trabajos",
"schedule": "Programar"
"owners": "propietarios",
"schedule": "Programar",
"vehicles": "Vehículos"
},
"jobsdetail": {
"claimdetail": "Detalles de la reclamación",
@@ -324,6 +327,9 @@
}
},
"vehicles": {
"errors": {
"noaccess": "El vehículo no existe o usted no tiene acceso a él."
},
"fields": {
"plate_no": "Placa"
}

View File

@@ -246,9 +246,12 @@
"header": {
"activejobs": "Emplois actifs",
"availablejobs": "Emplois disponibles",
"customers": "Les clients",
"home": "Accueil",
"jobs": "Emplois",
"schedule": "Programme"
"owners": "Propriétaires",
"schedule": "Programme",
"vehicles": "Véhicules"
},
"jobsdetail": {
"claimdetail": "Détails de la réclamation",
@@ -324,6 +327,9 @@
}
},
"vehicles": {
"errors": {
"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
},
"fields": {
"plate_no": "Plaque d'immatriculation"
}