Add vendor name sort on all bills page IO-482

client/src/pages/bills/bills.page.component.jsx

@@ -39,9 +39,20 @@ export function BillsListPage({
       title: t("bills.fields.vendorname"),
       dataIndex: "vendorname",
       key: "vendorname",
-      //   sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
-      //   sortOrder:
-      //        state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
+      sortObject: (direction) => {
+        return {
+          vendor: {
+            name: direction
+              ? direction === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        };
+      },
+      sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
+      sortOrder:
+        state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
       render: (text, record) => <span>{record.vendor.name}</span>,
     },
     {
@@ -138,8 +149,15 @@ export function BillsListPage({
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
     search.page = pagination.current;
-    search.sortcolumn = sorter.columnKey;
-    search.sortorder = sorter.order;
+    if (sorter && sorter.column && sorter.column.sortObject) {
+      search.searchObj = JSON.stringify(sorter.column.sortObject(sorter.order));
+    } else {
+      delete search.searchObj;
+      search.sortcolumn = sorter.order ? sorter.columnKey : null;
+      search.sortorder = sorter.order;
+    }
+
+    search.sort = JSON.stringify({ [sorter.columnKey]: sorter.order });
     history.push({ search: queryString.stringify(search) });
   };
 

client/src/pages/bills/bills.page.container.jsx

@@ -4,15 +4,15 @@ import { useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
+import AlertComponent from "../../components/alert/alert.component";
 import BillDetailEditContainer from "../../components/bill-detail-edit/bill-detail-edit.container";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_ALL_BILLS_PAGINATED } from "../../graphql/bills.queries";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import BillsPageComponent from "./bills.page.component";
-import AlertComponent from "../../components/alert/alert.component";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, searchObj } = searchParams;
 
   useEffect(() => {
     document.title = t("titles.bills-list");
@@ -40,13 +40,15 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
         offset: page ? (page - 1) * 25 : 0,
         limit: 25,
         order: [
-          {
-            [sortcolumn || "date"]: sortorder
-              ? sortorder === "descend"
-                ? "desc"
-                : "asc"
-              : "desc",
-          },
+          searchObj
+            ? JSON.parse(searchObj)
+            : {
+                [sortcolumn || "date"]: sortorder
+                  ? sortorder === "descend"
+                    ? "desc"
+                    : "asc"
+                  : "desc",
+              },
         ],
       },
     }