- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,122 +1,123 @@
-import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import {SyncOutlined} from "@ant-design/icons";
+import {Button, Card, Input, Space, Table, Typography} from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 import {pageLimit} from "../../utils/config";
+
 export default function VehiclesListComponent({
-  loading,
-  vehicles,
-  total,
-  refetch,
-}) {
-  const search = queryString.parse(useLocation().search);
-  const {
-    page,
-    //sortcolumn, sortorder,
-  } = search;
-  const history = useNavigate();
+                                                  loading,
+                                                  vehicles,
+                                                  total,
+                                                  refetch,
+                                              }) {
+    const search = queryString.parse(useLocation().search);
+    const {
+        page,
+        //sortcolumn, sortorder,
+    } = search;
+    const history = useNavigate();
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+    const [state, setState] = useState({
+        sortedInfo: {},
+        filteredInfo: {text: ""},
+    });
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
-  const columns = [
-    {
-      title: t("vehicles.fields.v_vin"),
-      dataIndex: "v_vin",
-      key: "v_vin",
-      render: (text, record) => (
-        <Link to={"/manage/vehicles/" + record.id}>
-          <VehicleVinDisplay>{record.v_vin || "N/A"}</VehicleVinDisplay>
-        </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 columns = [
+        {
+            title: t("vehicles.fields.v_vin"),
+            dataIndex: "v_vin",
+            key: "v_vin",
+            render: (text, record) => (
+                <Link to={"/manage/vehicles/" + record.id}>
+                    <VehicleVinDisplay>{record.v_vin || "N/A"}</VehicleVinDisplay>
+                </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 });
-    search.page = pagination.current;
-    search.sortcolumn = sorter.columnKey;
-    search.sortorder = sorter.order;
-    history({ search: queryString.stringify(search) });
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+        search.page = pagination.current;
+        search.sortcolumn = sorter.columnKey;
+        search.sortorder = sorter.order;
+        history({search: queryString.stringify(search)});
+    };
 
-  return (
-    <Card
-      title={t("menus.header.vehicles")}
-      extra={
-        <Space wrap>
-          {search.search && (
-            <>
-              <Typography.Title level={4}>
-                {t("general.labels.searchresults", { search: search.search })}
-              </Typography.Title>
-              <Button
-                onClick={() => {
-                  delete search.search;
-                  history({ search: queryString.stringify(search) });
+    return (
+        <Card
+            title={t("menus.header.vehicles")}
+            extra={
+                <Space wrap>
+                    {search.search && (
+                        <>
+                            <Typography.Title level={4}>
+                                {t("general.labels.searchresults", {search: search.search})}
+                            </Typography.Title>
+                            <Button
+                                onClick={() => {
+                                    delete search.search;
+                                    history({search: queryString.stringify(search)});
+                                }}
+                            >
+                                {t("general.actions.clear")}
+                            </Button>
+                        </>
+                    )}
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined/>
+                    </Button>
+                    <Input.Search
+                        placeholder={search.search || t("general.labels.search")}
+                        onSearch={(value) => {
+                            search.search = value;
+                            history({search: queryString.stringify(search)});
+                        }}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                pagination={{
+                    position: "top",
+                    pageSize: pageLimit,
+                    current: parseInt(page || 1),
+                    total: total,
                 }}
-              >
-                {t("general.actions.clear")}
-              </Button>
-            </>
-          )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={search.search || t("general.labels.search")}
-            onSearch={(value) => {
-              search.search = value;
-              history({ search: queryString.stringify(search) });
-            }}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: total,
-        }}
-        columns={columns}
-        rowKey="id"
-        scroll={{ x: true }}
-        dataSource={vehicles}
-        onChange={handleTableChange}
-      />
-    </Card>
-  );
+                columns={columns}
+                rowKey="id"
+                scroll={{x: true}}
+                dataSource={vehicles}
+                onChange={handleTableChange}
+            />
+        </Card>
+    );
 }

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

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