Added vehicle search function + paginated vehicles page BOD-116

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -3,12 +3,11 @@ import { Button, Input, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
-import { useHistory } from "react-router-dom";
 
 export default function JobsList({ refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);

client/src/components/tech-sider/tech-sider.component.jsx

@@ -45,13 +45,6 @@ export function TechSider({ technician, techLogout }) {
         >
           <Link to={`/tech/jobclockin`}>{t("menus.tech.jobclockin")}</Link>
         </Menu.Item>
-        <Menu.Item
-          key="4"
-          disabled={!!!technician}
-          icon={<Icon component={MdTimerOff} />}
-        >
-          <Link to={`/tech/clockout`}>{t("menus.tech.clockout")}</Link>
-        </Menu.Item>
         <Menu.Item key="5" disabled={!!!technician} icon={<SearchOutlined />}>
           <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
         </Menu.Item>

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -1,11 +1,21 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Input, Table } from "antd";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 
-export default function VehiclesListComponent({ loading, vehicles, refetch }) {
+export default function VehiclesListComponent({
+  loading,
+  vehicles,
+  total,
+  refetch,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = search;
+  const history = useHistory();
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -18,10 +28,6 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
       title: t("vehicles.fields.v_vin"),
       dataIndex: "v_vin",
       key: "v_vin",
-      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>
       ),
@@ -48,6 +54,10 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history.push({ search: queryString.stringify(search) });
   };
 
   return (
@@ -55,26 +65,31 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
       loading={loading}
       title={() => {
         return (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
             <Input.Search
-              className='imex-table-header__search'
+              className="imex-table-header__search"
               placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                //setSearchText(e.target.value);
+              onSearch={(value) => {
+                search.search = value;
+                history.push({ search: queryString.stringify(search) });
               }}
-              //vale={searchText}
               enterButton
             />
           </div>
         );
       }}
-      size='small'
-      pagination={{ position: "top" }}
+      size="small"
+      pagination={{
+        position: "top",
+        pageSize: 25,
+        current: parseInt(page || 1),
+        total: total,
+      }}
       columns={columns}
-      rowKey='id'
+      rowKey="id"
       scroll={{ x: true }}
       dataSource={vehicles}
       onChange={handleTableChange}

client/src/components/vehicles-list/vehicles-list.container.jsx

@@ -2,18 +2,40 @@ import React from "react";
 import VehiclesListComponent from "./vehicles-list.component";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
-import { QUERY_ALL_VEHICLES } from "../../graphql/vehicles.queries";
+import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 export default function VehiclesListContainer() {
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_VEHICLES, {
-    fetchPolicy: "network-only"
-  });
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, search } = searchParams;
+
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ALL_VEHICLES_PAGINATED,
+    {
+      variables: {
+        search: search || "",
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <VehiclesListComponent
       loading={loading}
-      vehicles={data ? data.vehicles : null}
+      vehicles={data ? data.search_vehicles : null}
+      total={data ? data.search_vehicles_aggregate.aggregate.count : 0}
       refetch={refetch}
     />
   );