diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx index be151ba2a..02f2ab9ed 100644 --- a/client/src/pages/bills/bills.page.component.jsx +++ b/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) => {record.vendor.name}, }, { @@ -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) }); }; diff --git a/client/src/pages/bills/bills.page.container.jsx b/client/src/pages/bills/bills.page.container.jsx index 0bd15bdd1..f46c90c06 100644 --- a/client/src/pages/bills/bills.page.container.jsx +++ b/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", + }, ], }, }