From 9d9de14cf0adbdb3107f43754589525646ea176f Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Mon, 10 Feb 2020 09:17:59 -0800 Subject: [PATCH] Added vehicles list base page. --- bodyshop_translations.babel | 21 +++++ .../owners-list/owners-list.component.jsx | 4 +- .../owners-list/owners-list.container.jsx | 4 +- .../vehicles-list/vehicles-list.component.jsx | 77 +++++++++++++++++++ .../vehicles-list/vehicles-list.container.jsx | 20 +++++ client/src/graphql/vehicles.queries.js | 17 ++++ .../vehicles/vehicles.page.component.jsx | 9 +-- client/src/translations/en_us/common.json | 1 + client/src/translations/es/common.json | 1 + client/src/translations/fr/common.json | 1 + 10 files changed, 145 insertions(+), 10 deletions(-) create mode 100644 client/src/components/vehicles-list/vehicles-list.component.jsx create mode 100644 client/src/components/vehicles-list/vehicles-list.container.jsx diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 3cadf50c5..782dc3401 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -5466,6 +5466,27 @@ fields + + description + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + plate_no false diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx index c21d274df..beb3c3c1a 100644 --- a/client/src/components/owners-list/owners-list.component.jsx +++ b/client/src/components/owners-list/owners-list.component.jsx @@ -1,9 +1,9 @@ +import { Input, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { alphaSort } from "../../utils/sorters"; import { Link } from "react-router-dom"; import PhoneFormatter from "../../utils/PhoneFormatter"; -import { Table, Icon, Input } from "antd"; +import { alphaSort } from "../../utils/sorters"; export default function OwnersListComponent({ loading, owners, refetch }) { const [state, setState] = useState({ diff --git a/client/src/components/owners-list/owners-list.container.jsx b/client/src/components/owners-list/owners-list.container.jsx index 40af1f644..2dd0110ec 100644 --- a/client/src/components/owners-list/owners-list.container.jsx +++ b/client/src/components/owners-list/owners-list.container.jsx @@ -1,8 +1,8 @@ import React from "react"; -import OwnersListComponent from "./owners-list.component"; import { useQuery } from "react-apollo"; -import AlertComponent from "../alert/alert.component"; import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries"; +import AlertComponent from "../alert/alert.component"; +import OwnersListComponent from "./owners-list.component"; export default function OwnersListContainer() { const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS, { diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx new file mode 100644 index 000000000..466adfe05 --- /dev/null +++ b/client/src/components/vehicles-list/vehicles-list.component.jsx @@ -0,0 +1,77 @@ +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { alphaSort } from "../../utils/sorters"; +import { Link } from "react-router-dom"; +import PhoneFormatter from "../../utils/PhoneFormatter"; +import { Table, Icon, Input } from "antd"; + +export default function VehiclesListComponent({ loading, vehicles, refetch }) { + const [state, setState] = useState({ + sortedInfo: {}, + filteredInfo: { text: "" } + }); + + const { t } = useTranslation(); + + const columns = [ + { + title: t("vehicles.fields.v_vin"), + dataIndex: "v_vin", + key: "v_vin", + // onFilter: (value, record) => record.ro_number.includes(value), + // filteredValue: state.filteredInfo.text || null, + sorter: (a, b) => alphaSort(a.v_vin, b.v_vin), + sortOrder: + state.sortedInfo.columnKey === "v_vin" && state.sortedInfo.order, + + render: (text, record) => ( + {record.v_vin} + ) + }, + { + title: t("vehicles.fields.description"), + dataIndex: "description", + key: "description", + render: (text, record) => { + return ( + {`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`} + ); + } + }, + { + title: t("vehicles.fields.plate_no"), + dataIndex: "plate", + key: "plate", + render: (text, record) => { + return {`${record.plate_st} | ${record.plate_no}`}; + } + } + ]; + + const handleTableChange = (pagination, filters, sorter) => { + setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + }; + //TODO Implement searching & pagination + return ( + { + return ( + { + console.log(value); + }} + enterButton + /> + ); + }} + size="small" + pagination={{ position: "top" }} + columns={columns.map(item => ({ ...item }))} + rowKey="id" + dataSource={vehicles} + onChange={handleTableChange} + /> + ); +} diff --git a/client/src/components/vehicles-list/vehicles-list.container.jsx b/client/src/components/vehicles-list/vehicles-list.container.jsx new file mode 100644 index 000000000..97a982ed4 --- /dev/null +++ b/client/src/components/vehicles-list/vehicles-list.container.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import VehiclesListComponent from "./vehicles-list.component"; +import { useQuery } from "react-apollo"; +import AlertComponent from "../alert/alert.component"; +import { QUERY_ALL_VEHICLES } from "../../graphql/vehicles.queries"; + +export default function VehiclesListContainer() { + const { loading, error, data, refetch } = useQuery(QUERY_ALL_VEHICLES, { + fetchPolicy: "network-only" + }); + + if (error) return ; + return ( + + ); +} diff --git a/client/src/graphql/vehicles.queries.js b/client/src/graphql/vehicles.queries.js index 0ca51d30a..5efbad1c9 100644 --- a/client/src/graphql/vehicles.queries.js +++ b/client/src/graphql/vehicles.queries.js @@ -53,3 +53,20 @@ export const UPDATE_VEHICLE = gql` } } `; + +export const QUERY_ALL_VEHICLES = gql` + query QUERY_ALL_VEHICLES { + vehicles { + id + plate_no + plate_st + v_vin + v_model_yr + v_model_desc + v_make_desc + v_color + v_bstyle + updated_at + } + } +`; diff --git a/client/src/pages/vehicles/vehicles.page.component.jsx b/client/src/pages/vehicles/vehicles.page.component.jsx index 17af2f393..706a37a13 100644 --- a/client/src/pages/vehicles/vehicles.page.component.jsx +++ b/client/src/pages/vehicles/vehicles.page.component.jsx @@ -1,9 +1,6 @@ -import React from 'react' +import React from "react"; +import VehiclesListContainer from "../../components/vehicles-list/vehicles-list.container"; export default function VehiclesPageComponent() { - return ( -
- Vehiculos -
- ) + return ; } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 21d09e953..e58fea7bf 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -351,6 +351,7 @@ "validationtitle": "Validation Error" }, "fields": { + "description": "Vehicle Description", "plate_no": "License Plate", "plate_st": "Plate Jurisdiction", "trim_color": "Trim Color", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index c4a7e9b6a..d9d0f2b4b 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -351,6 +351,7 @@ "validationtitle": "Error de validacion" }, "fields": { + "description": "Descripcion del vehiculo", "plate_no": "Placa", "plate_st": "Jurisdicción de placas", "trim_color": "Recortar color", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 5c711f403..8316b3b07 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -351,6 +351,7 @@ "validationtitle": "Erreur de validation" }, "fields": { + "description": "Description du véhicule", "plate_no": "Plaque d'immatriculation", "plate_st": "Juridiction de la plaque", "trim_color": "Couleur de garniture",