From 7bc2d41a688d3afee63ef12134483f507fa5ea2c Mon Sep 17 00:00:00 2001 From: Allan Carr Date: Mon, 28 Jul 2025 14:05:59 -0700 Subject: [PATCH] IO-3316 Local Storage Sort Signed-off-by: Allan Carr --- .../accounting-payables-table.component.jsx | 9 +++++---- .../accounting-payments-table.component.jsx | 9 +++++---- .../accounting-receivables-table.component.jsx | 9 +++++---- client/src/pages/bills/bills.page.component.jsx | 7 ++++--- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx index 1e21ebe34..b7853bd44 100644 --- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx +++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx @@ -1,6 +1,6 @@ import { Card, Checkbox, Input, Space, Table } from "antd"; import queryString from "query-string"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; @@ -16,12 +16,13 @@ import PayableExportAll from "../payable-export-all-button/payable-export-all-bu import PayableExportButton from "../payable-export-button/payable-export-button.component"; import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component"; import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component"; +import useLocalStorage from "./../../utils/useLocalStorage"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref const { t } = useTranslation(); const [selectedBills, setSelectedBills] = useState([]); const [transInProgress, setTransInProgress] = useState(false); - const [state, setState] = useState({ + const [state, setState] = useLocalStorage("accounting-payables-table-state", { sortedInfo: {}, search: "" }); @@ -181,7 +182,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref onChange={handleTableChange} rowSelection={{ onSelectAll: (selected, selectedRows) => setSelectedBills(selectedRows.map((i) => i.id)), - onSelect: (record, selected, selectedRows, nativeEvent) => { + onSelect: (record, selected, selectedRows) => { setSelectedBills(selectedRows.map((i) => i.id)); }, getCheckboxProps: (record) => ({ diff --git a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx index edaa05187..680b04b65 100644 --- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx +++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx @@ -1,5 +1,5 @@ import { Card, Input, Space, Table } from "antd"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; @@ -10,6 +10,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter"; import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter"; import { exportPageLimit } from "../../utils/config"; import { alphaSort, dateSort } from "../../utils/sorters"; +import useLocalStorage from "../../utils/useLocalStorage"; import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component"; import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; import PaymentExportButton from "../payment-export-button/payment-export-button.component"; @@ -21,7 +22,7 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments, const { t } = useTranslation(); const [selectedPayments, setSelectedPayments] = useState([]); const [transInProgress, setTransInProgress] = useState(false); - const [state, setState] = useState({ + const [state, setState] = useLocalStorage("accounting-payments-table-state", { sortedInfo: {}, search: "" }); @@ -194,7 +195,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments, onChange={handleTableChange} rowSelection={{ onSelectAll: (selected, selectedRows) => setSelectedPayments(selectedRows.map((i) => i.id)), - onSelect: (record, selected, selectedRows, nativeEvent) => { + onSelect: (record, selected, selectedRows) => { setSelectedPayments(selectedRows.map((i) => i.id)); }, getCheckboxProps: (record) => ({ diff --git a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx index cd3a1cc28..7775fbb8f 100644 --- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx +++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx @@ -1,5 +1,5 @@ import { Button, Card, Input, Space, Table } from "antd"; -import React, { useState } from "react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link } from "react-router-dom"; @@ -10,6 +10,7 @@ import { exportPageLimit } from "../../utils/config"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; import { DateFormatter } from "../../utils/DateFormatter"; import { alphaSort, dateSort, statusSort } from "../../utils/sorters"; +import useLocalStorage from "../../utils/useLocalStorage"; import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component"; import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component"; import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component"; @@ -20,7 +21,7 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = () => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); export default connect(mapStateToProps, mapDispatchToProps)(AccountingReceivablesTableComponent); @@ -30,7 +31,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r const [selectedJobs, setSelectedJobs] = useState([]); const [transInProgress, setTransInProgress] = useState(false); - const [state, setState] = useState({ + const [state, setState] = useLocalStorage("accounting-receivables-table-state", { sortedInfo: {}, search: "" }); @@ -207,7 +208,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r onChange={handleTableChange} rowSelection={{ onSelectAll: (selected, selectedRows) => setSelectedJobs(selectedRows.map((i) => i.id)), - onSelect: (record, selected, selectedRows, nativeEvent) => { + onSelect: (record, selected, selectedRows) => { setSelectedJobs(selectedRows.map((i) => i.id)); }, getCheckboxProps: (record) => ({ diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx index 175f6a5c0..5fed28b3c 100644 --- a/client/src/pages/bills/bills.page.component.jsx +++ b/client/src/pages/bills/bills.page.component.jsx @@ -2,7 +2,7 @@ import { EditFilled, SyncOutlined } from "@ant-design/icons"; import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd"; import axios from "axios"; import queryString from "query-string"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Link, useLocation, useNavigate } from "react-router-dom"; @@ -13,8 +13,9 @@ import { setModalContext } from "../../redux/modals/modals.actions"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; import { DateFormatter } from "../../utils/DateFormatter"; import { TemplateList } from "../../utils/TemplateConstants"; -import { alphaSort, dateSort } from "../../utils/sorters"; import { pageLimit } from "../../utils/config"; +import { alphaSort, dateSort } from "../../utils/sorters"; +import useLocalStorage from "../../utils/useLocalStorage"; const mapDispatchToProps = (dispatch) => ({ setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })), @@ -27,7 +28,7 @@ export function BillsListPage({ loading, data, refetch, total, setPartsOrderCont const [searchLoading, setSearchLoading] = useState(false); const { page } = search; const history = useNavigate(); - const [state, setState] = useState({ + const [state, setState] = useLocalStorage("bills_list_sort", { sortedInfo: {}, filteredInfo: { text: "" } });