IO-2663 Export Pages Sorters and Filters

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>
2024-03-06 15:29:24 -08:00
parent e47731702a
commit 58ab7afbb3
3 changed files with 89 additions and 23 deletions
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -8,14 +8,16 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -75,7 +77,8 @@ export function AccountingPayablesTableComponent({
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
      sortOrder:
        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
      render: (text, record) => {
@@ -94,6 +97,8 @@ export function AccountingPayablesTableComponent({
      title: t("payments.fields.amount"),
      dataIndex: "amount",
      key: "amount",
+      sorter: (a, b) => a.amount - b.amount,
+      sortOrder: state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
      render: (text, record) => (
        <CurrencyFormatter>{record.amount}</CurrencyFormatter>
      ),
@@ -112,18 +117,20 @@ export function AccountingPayablesTableComponent({
      title: t("payments.fields.created_at"),
      dataIndex: "created_at",
      key: "created_at",
+      sorter: (a, b) => dateSort(a.created_at, b.created_at),
+      sortOrder: state.sortedInfo.columnKey === "created_at" && state.sortedInfo.order,
      render: (text, record) => (
        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
      ),
    },
-    {
-      title: t("payments.fields.exportedat"),
-      dataIndex: "exportedat",
-      key: "exportedat",
-      render: (text, record) => (
-        <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
-      ),
-    },
+    // {
+    //   title: t("payments.fields.exportedat"),
+    //   dataIndex: "exportedat",
+    //   key: "exportedat",
+    //   render: (text, record) => (
+    //     <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+    //   ),
+    // },
    {
      title: t("exportlogs.labels.attempts"),
      dataIndex: "attempts",
--- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
+++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
@@ -4,17 +4,19 @@ 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, statusSort } 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 QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 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";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -63,7 +65,7 @@ export function AccountingReceivablesTableComponent({
      title: t("jobs.fields.status"),
      dataIndex: "status",
      key: "status",
-      sorter: (a, b) => a.status - b.status,
+      sorter: (a, b) => statusSort(a, b, bodyshop.md_ro_statuses.statuses),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
    },
@@ -83,7 +85,8 @@ export function AccountingReceivablesTableComponent({
      title: t("jobs.fields.owner"),
      dataIndex: "owner",
      key: "owner",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
      sortOrder:
        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
      render: (text, record) => {
@@ -103,6 +106,15 @@ export function AccountingReceivablesTableComponent({
      dataIndex: "vehicle",
      key: "vehicle",
      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
      render: (text, record) => {
        return record.vehicleid ? (
          <Link to={"/manage/vehicles/" + record.vehicleid}>
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -12,7 +12,8 @@ import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import {pageLimit} from "../../utils/config";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "./../../utils/sorters";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -34,11 +35,43 @@ export function ExportLogsPageComponent({ bodyshop }) {
        limit: pageLimit,
        order: [
          {
-            [sortcolumn || "created_at"]: sortorder
-              ? sortorder === "descend"
-                ? "desc"
-                : "asc"
-              : "desc",
+            ...(sortcolumn === "ro_number"
+              ? {
+                  job: {
+                    [sortcolumn || "created_at"]: sortorder
+                      ? sortorder === "descend"
+                        ? "desc"
+                        : "asc"
+                      : "desc",
+                  },
+                }
+              : sortcolumn === "invoice_number"
+              ? {
+                  bill: {
+                    [sortcolumn || "created_at"]: sortorder
+                      ? sortorder === "descend"
+                        ? "desc"
+                        : "asc"
+                      : "desc",
+                  },
+                }
+              : sortcolumn === "paymentnum"
+              ? {
+                  payment: {
+                    [sortcolumn || "created_at"]: sortorder
+                      ? sortorder === "descend"
+                        ? "desc"
+                        : "asc"
+                      : "desc",
+                  },
+                }
+              : {
+                  [sortcolumn || "created_at"]: sortorder
+                    ? sortorder === "descend"
+                      ? "desc"
+                      : "asc"
+                    : "desc",
+                }),
          },
        ],
      },
@@ -68,6 +101,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
      title: t("general.labels.created_at"),
      dataIndex: "created_at",
      key: "created_at",
+      sorter: (a, b) => dateSort(a.created_at, b.created_at),
+      sortOrder: sortcolumn === "created_at" && sortorder,
      render: (text, record) => (
        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
      ),
@@ -81,7 +116,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
      title: t("jobs.fields.ro_number"),
      dataIndex: "ro_number",
      key: "ro_number",
-
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder: sortcolumn === "ro_number" && sortorder,
      render: (text, record) =>
        record.job && (
          <Link to={`/manage/jobs/${record.job.id}`}>
@@ -93,6 +129,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
      title: t("bills.fields.invoice_number"),
      dataIndex: "invoice_number",
      key: "invoice_number",
+      sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
+      sortOrder: sortcolumn === "invoice_number" && sortorder,
      render: (text, record) =>
        record.bill && (
          <Link to={"/manage/bills?billid=" + (record.bill && record.bill.id)}>
@@ -104,6 +142,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
      title: t("payments.fields.paymentnum"),
      dataIndex: "paymentnum",
      key: "paymentnum",
+      sorter: (a, b) => alphaSort(a.paymentnum, b.paymentnum),
+      sortOrder: sortcolumn === "paymentnum" && sortorder,
      render: (text, record) =>
        record.payment && (
          <Link
@@ -120,6 +160,13 @@ export function ExportLogsPageComponent({ bodyshop }) {
      title: t("general.labels.successful"),
      dataIndex: "successful",
      key: "successful",
+      sorter: (a, b) => Number(a.successful) - Number(b.successful),
+      sortOrder: sortcolumn === "successful" && sortorder,
+      filters: [
+        { text: "True", value: true },
+        { text: "False", value: false },
+      ],
+      onFilter: (value, record) => record.successful === value,
      render: (text, record) => (
        <Checkbox disabled checked={record.successful} />
      ),