Added vehicles list base page.

bodyshop_translations.babel

@@ -5466,6 +5466,27 @@
                             <folder_node>
                                 <name>fields</name>
                                 <children>
+                                    <concept_node>
+                                        <name>description</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>plate_no</name>
                                         <definition_loaded>false</definition_loaded>

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({

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, {

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) => (
+        <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
+      )
+    },
+    {
+      title: t("vehicles.fields.description"),
+      dataIndex: "description",
+      key: "description",
+      render: (text, record) => {
+        return (
+          <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
+        );
+      }
+    },
+    {
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate",
+      key: "plate",
+      render: (text, record) => {
+        return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
+      }
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+  //TODO Implement searching & pagination
+  return (
+    <Table
+      loading={loading}
+      title={() => {
+        return (
+          <Input.Search
+            placeholder="Search..."
+            onSearch={value => {
+              console.log(value);
+            }}
+            enterButton
+          />
+        );
+      }}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={vehicles}
+      onChange={handleTableChange}
+    />
+  );
+}

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 <AlertComponent message={error.message} type="error" />;
+  return (
+    <VehiclesListComponent
+      loading={loading}
+      vehicles={data ? data.vehicles : null}
+      refetch={refetch}
+    />
+  );
+}

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

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 (
-        <div>
-            Vehiculos
-        </div>
-    )
+  return <VehiclesListContainer />;
 }

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",

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",

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",