- the great reformat

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

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -1,247 +1,247 @@
-import { Button, Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import { logImEXEvent } from "../../firebase/firebase.utils";
+import {Button, Card, Input, Space, Table} from "antd";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {Link} from "react-router-dom";
+import {logImEXEvent} from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, dateSort } from "../../utils/sorters";
+import {alphaSort, dateSort} from "../../utils/sorters";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import { DateFormatter } from "../../utils/DateFormatter";
+import {DateFormatter} from "../../utils/DateFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(AccountingReceivablesTableComponent);
 
 export function AccountingReceivablesTableComponent({
-  bodyshop,
-  loading,
-  jobs,
-  refetch,
-}) {
-  const { t } = useTranslation();
-  const [selectedJobs, setSelectedJobs] = useState([]);
-  const [transInProgress, setTransInProgress] = useState(false);
+                                                        bodyshop,
+                                                        loading,
+                                                        jobs,
+                                                        refetch,
+                                                    }) {
+    const {t} = useTranslation();
+    const [selectedJobs, setSelectedJobs] = useState([]);
+    const [transInProgress, setTransInProgress] = useState(false);
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    search: "",
-  });
+    const [state, setState] = useState({
+        sortedInfo: {},
+        search: "",
+    });
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    };
 
-  const columns = [
-    {
-      title: t("jobs.fields.ro_number"),
-      dataIndex: "ro_number",
-      key: "ro_number",
-      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-      sortOrder:
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-      render: (text, record) => (
-        <Link to={"/manage/jobs/" + record.id}>{record.ro_number}</Link>
-      ),
-    },
+    const columns = [
+        {
+            title: t("jobs.fields.ro_number"),
+            dataIndex: "ro_number",
+            key: "ro_number",
+            sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+            sortOrder:
+                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+            render: (text, record) => (
+                <Link to={"/manage/jobs/" + record.id}>{record.ro_number}</Link>
+            ),
+        },
 
-    {
-      title: t("jobs.fields.status"),
-      dataIndex: "status",
-      key: "status",
-      sorter: (a, b) => a.status - b.status,
-      sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-    },
-    {
-      title: t("jobs.fields.date_invoiced"),
-      dataIndex: "date_invoiced",
-      key: "date_invoiced",
-      sorter: (a, b) => dateSort(a.date_invoiced, b.date_invoiced),
-      sortOrder:
-        state.sortedInfo.columnKey === "date_invoiced" &&
-        state.sortedInfo.order,
-      render: (text, record) => (
-        <DateFormatter>{record.date_invoiced}</DateFormatter>
-      ),
-    },
-    {
-      title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.owner ? (
-          <Link to={"/manage/owners/" + record.owner.id}>
-            <OwnerNameDisplay ownerObject={record} />
-          </Link>
-        ) : (
-          <span>
-            <OwnerNameDisplay ownerObject={record} />
+        {
+            title: t("jobs.fields.status"),
+            dataIndex: "status",
+            key: "status",
+            sorter: (a, b) => a.status - b.status,
+            sortOrder:
+                state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+        },
+        {
+            title: t("jobs.fields.date_invoiced"),
+            dataIndex: "date_invoiced",
+            key: "date_invoiced",
+            sorter: (a, b) => dateSort(a.date_invoiced, b.date_invoiced),
+            sortOrder:
+                state.sortedInfo.columnKey === "date_invoiced" &&
+                state.sortedInfo.order,
+            render: (text, record) => (
+                <DateFormatter>{record.date_invoiced}</DateFormatter>
+            ),
+        },
+        {
+            title: t("jobs.fields.owner"),
+            dataIndex: "owner",
+            key: "owner",
+            sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sortOrder:
+                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+            render: (text, record) => {
+                return record.owner ? (
+                    <Link to={"/manage/owners/" + record.owner.id}>
+                        <OwnerNameDisplay ownerObject={record}/>
+                    </Link>
+                ) : (
+                    <span>
+            <OwnerNameDisplay ownerObject={record}/>
           </span>
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.vehicle"),
-      dataIndex: "vehicle",
-      key: "vehicle",
-      ellipsis: true,
-      render: (text, record) => {
-        return record.vehicleid ? (
-          <Link to={"/manage/vehicles/" + record.vehicleid}>
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-              record.v_model_desc || ""
-            }`}
-          </Link>
-        ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.clm_no"),
-      dataIndex: "clm_no",
-      key: "clm_no",
-      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-    },
-    {
-      title: t("jobs.fields.clm_total"),
-      dataIndex: "clm_total",
-      key: "clm_total",
-      sorter: (a, b) => a.clm_total - b.clm_total,
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-      render: (text, record) => {
-        return <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>;
-      },
-    },
-    {
-      title: t("exportlogs.labels.attempts"),
-      dataIndex: "attempts",
-      key: "attempts",
-      render: (text, record) => (
-        <ExportLogsCountDisplay logs={record.exportlogs} />
-      ),
-    },
-    {
-      title: t("general.labels.actions"),
-      dataIndex: "actions",
-      key: "actions",
+                );
+            },
+        },
+        {
+            title: t("jobs.fields.vehicle"),
+            dataIndex: "vehicle",
+            key: "vehicle",
+            ellipsis: true,
+            render: (text, record) => {
+                return record.vehicleid ? (
+                    <Link to={"/manage/vehicles/" + record.vehicleid}>
+                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                            record.v_model_desc || ""
+                        }`}
+                    </Link>
+                ) : (
+                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                        record.v_model_desc || ""
+                    }`}</span>
+                );
+            },
+        },
+        {
+            title: t("jobs.fields.clm_no"),
+            dataIndex: "clm_no",
+            key: "clm_no",
+            ellipsis: true,
+            sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+            sortOrder:
+                state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+        },
+        {
+            title: t("jobs.fields.clm_total"),
+            dataIndex: "clm_total",
+            key: "clm_total",
+            sorter: (a, b) => a.clm_total - b.clm_total,
+            sortOrder:
+                state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+            render: (text, record) => {
+                return <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>;
+            },
+        },
+        {
+            title: t("exportlogs.labels.attempts"),
+            dataIndex: "attempts",
+            key: "attempts",
+            render: (text, record) => (
+                <ExportLogsCountDisplay logs={record.exportlogs}/>
+            ),
+        },
+        {
+            title: t("general.labels.actions"),
+            dataIndex: "actions",
+            key: "actions",
 
-      render: (text, record) => (
-        <Space wrap>
-          <JobExportButton
-            jobId={record.id}
-            disabled={!!record.date_exported}
-            setSelectedJobs={setSelectedJobs}
-            refetch={refetch}
-          />
-          <Link to={`/manage/jobs/${record.id}/close`}>
-            <Button>{t("jobs.labels.viewallocations")}</Button>
-          </Link>
-        </Space>
-      ),
-    },
-  ];
+            render: (text, record) => (
+                <Space wrap>
+                    <JobExportButton
+                        jobId={record.id}
+                        disabled={!!record.date_exported}
+                        setSelectedJobs={setSelectedJobs}
+                        refetch={refetch}
+                    />
+                    <Link to={`/manage/jobs/${record.id}/close`}>
+                        <Button>{t("jobs.labels.viewallocations")}</Button>
+                    </Link>
+                </Space>
+            ),
+        },
+    ];
 
-  const handleSearch = (e) => {
-    setState({ ...state, search: e.target.value });
-    logImEXEvent("accounting_receivables_search");
-  };
+    const handleSearch = (e) => {
+        setState({...state, search: e.target.value});
+        logImEXEvent("accounting_receivables_search");
+    };
 
-  const dataSource = state.search
-    ? jobs.filter(
-        (v) =>
-          (v.ro_number || "")
-            .toString()
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.ownr_fn || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.ownr_ln || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.ownr_co_nm || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.v_model_desc || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.v_make_desc || "")
-            .toLowerCase()
-            .includes(state.search.toLowerCase()) ||
-          (v.clm_no || "").toLowerCase().includes(state.search.toLowerCase())
-      )
-    : jobs;
+    const dataSource = state.search
+        ? jobs.filter(
+            (v) =>
+                (v.ro_number || "")
+                    .toString()
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.ownr_fn || "")
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.ownr_ln || "")
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.ownr_co_nm || "")
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.v_model_desc || "")
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.v_make_desc || "")
+                    .toLowerCase()
+                    .includes(state.search.toLowerCase()) ||
+                (v.clm_no || "").toLowerCase().includes(state.search.toLowerCase())
+        )
+        : jobs;
 
-  return (
-    <Card
-      extra={
-        <Space wrap>
-          {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
-            <JobsExportAllButton
-              jobIds={selectedJobs}
-              disabled={transInProgress || selectedJobs.length === 0}
-              loadingCallback={setTransInProgress}
-              completedCallback={setSelectedJobs}
-              refetch={refetch}
+    return (
+        <Card
+            extra={
+                <Space wrap>
+                    {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
+                        <JobsExportAllButton
+                            jobIds={selectedJobs}
+                            disabled={transInProgress || selectedJobs.length === 0}
+                            loadingCallback={setTransInProgress}
+                            completedCallback={setSelectedJobs}
+                            refetch={refetch}
+                        />
+                    )}
+                    {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
+                        <QboAuthorizeComponent/>
+                    )}
+                    <Input.Search
+                        value={state.search}
+                        onChange={handleSearch}
+                        placeholder={t("general.labels.search")}
+                        allowClear
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                dataSource={dataSource}
+                pagination={{position: "top"}}
+                columns={columns}
+                rowKey="id"
+                onChange={handleTableChange}
+                rowSelection={{
+                    onSelectAll: (selected, selectedRows) =>
+                        setSelectedJobs(selectedRows.map((i) => i.id)),
+                    onSelect: (record, selected, selectedRows, nativeEvent) => {
+                        setSelectedJobs(selectedRows.map((i) => i.id));
+                    },
+                    getCheckboxProps: (record) => ({
+                        disabled: record.exported,
+                    }),
+                    selectedRowKeys: selectedJobs,
+                    type: "checkbox",
+                }}
             />
-          )}
-          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
-            <QboAuthorizeComponent />
-          )}
-          <Input.Search
-            value={state.search}
-            onChange={handleSearch}
-            placeholder={t("general.labels.search")}
-            allowClear
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        dataSource={dataSource}
-        pagination={{ position: "top" }}
-        columns={columns}
-        rowKey="id"
-        onChange={handleTableChange}
-        rowSelection={{
-          onSelectAll: (selected, selectedRows) =>
-            setSelectedJobs(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
-            setSelectedJobs(selectedRows.map((i) => i.id));
-          },
-          getCheckboxProps: (record) => ({
-            disabled: record.exported,
-          }),
-          selectedRowKeys: selectedJobs,
-          type: "checkbox",
-        }}
-      />
-    </Card>
-  );
+        </Card>
+    );
 }