From 42b8375682a3c36555201f054d7fd7808b4de1d0 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.budginas@gmail.com>
Date: Mon, 13 Jan 2025 16:03:11 +0200
Subject: [PATCH] Add operation types filter to ranges section on account page
---
components/account/AccountPagination.tsx | 32 +-----------
.../tabs/operations/OperationsTabContent.tsx | 51 +++++++++++++------
2 files changed, 36 insertions(+), 47 deletions(-)
diff --git a/components/account/AccountPagination.tsx b/components/account/AccountPagination.tsx
index dceb9817..ff6199ce 100644
--- a/components/account/AccountPagination.tsx
+++ b/components/account/AccountPagination.tsx
@@ -1,56 +1,26 @@
import { config } from "@/Config";
import Hive from "@/types/Hive";
-import { getOperationButtonTitle } from "@/utils/UI";
-import {
- convertBooleanArrayToIds,
- convertIdsToBooleanArray,
-} from "@/lib/utils";
-import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes";
import JumpToPage from "../JumpToPage";
-import OperationTypesDialog from "../OperationTypesDialog";
+
import CustomPagination from "../CustomPagination";
interface AccountPaginationProps {
- accountName: string;
page: number;
setPage: (page: number | undefined) => void;
accountOperations: Hive.OperationsCount;
- onOperationsSelect: (filters: boolean[]) => void;
- selectedFilters: boolean[];
}
const AccountPagination: React.FC<AccountPaginationProps> = ({
- accountName,
page,
setPage,
accountOperations,
- onOperationsSelect,
- selectedFilters,
}) => {
- const handleOperationSelect = (filters: number[]) => {
- onOperationsSelect(convertIdsToBooleanArray(filters));
- };
-
const onLatestButtonClick = () => {
setPage(undefined);
};
- const { accountOperationTypes } = useAccountOperationTypes(accountName);
-
return (
<div className="flex-col w-full">
- <div className="flex justify-end w-full flex-wrap">
- <OperationTypesDialog
- operationTypes={accountOperationTypes}
- setSelectedOperations={handleOperationSelect}
- selectedOperations={convertBooleanArrayToIds(selectedFilters)}
- buttonClassName="bg-theme"
- triggerTitle={getOperationButtonTitle(
- convertBooleanArrayToIds(selectedFilters),
- accountOperationTypes
- )}
- />
- </div>
<div
className="flex w-full justify-center flex-wrap my-4"
data-testid="account-top-bar"
diff --git a/components/account/tabs/operations/OperationsTabContent.tsx b/components/account/tabs/operations/OperationsTabContent.tsx
index 1ad12a75..2b9ed2bf 100644
--- a/components/account/tabs/operations/OperationsTabContent.tsx
+++ b/components/account/tabs/operations/OperationsTabContent.tsx
@@ -17,11 +17,15 @@ import { defaultSearchParams } from "@/pages/[accountName]";
import useOperationsFormatter from "@/hooks/common/useOperationsFormatter";
import {
convertBooleanArrayToIds,
+ convertIdsToBooleanArray,
convertOperationResultsToTableOperations,
} from "@/lib/utils";
import Hive from "@/types/Hive";
import AccountPagination from "../../AccountPagination";
import useAccountOperations from "@/hooks/api/accountPage/useAccountOperations";
+import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes";
+import OperationTypesDialog from "@/components/OperationTypesDialog";
+import { getOperationButtonTitle } from "@/utils/UI";
interface OpeationTabContentProps {
liveDataEnabled: boolean;
@@ -90,7 +94,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
setFilters([]);
};
- const handleOperationTypeChange = (newFilters: boolean[]) => {
+ const { accountOperationTypes } =
+ useAccountOperationTypes(accountNameFromRoute);
+
+ const handleOperationSelect = (filters: number[]) => {
+ const newFilters = convertIdsToBooleanArray(filters);
setFilters(newFilters);
setParams({ ...paramsState, filters: newFilters, page: undefined });
};
@@ -118,14 +126,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
>
{accountOperations && (page || lastPage) && (
<AccountPagination
- accountName={accountNameFromRoute}
page={page ? page : lastPage || 0}
setPage={(page: number | undefined) =>
setParams({ ...paramsState, page })
}
accountOperations={accountOperations}
- onOperationsSelect={handleOperationTypeChange}
- selectedFilters={filters}
/>
)}
</div>
@@ -240,18 +245,32 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
<CardContent>
<SearchRanges rangesProps={searchRanges} />
<div className="flex items-center justify-between m-2">
- <Button
- onClick={() => handleSearch(true)}
- data-testid="apply-filters"
- >
- <span>Apply filters</span>{" "}
- </Button>
- <Button
- onClick={handleFilterClear}
- data-testid="clear-filters"
- >
- <span>Clear filters</span>{" "}
- </Button>
+ <div className="flex min-w-[120px] gap-2">
+ <Button
+ onClick={() => handleSearch(true)}
+ data-testid="apply-filters"
+ >
+ <span>Apply filters</span>{" "}
+ </Button>
+ </div>
+ <div className="flex w-full justify-end flex-wrap gap-2">
+ <OperationTypesDialog
+ operationTypes={accountOperationTypes}
+ setSelectedOperations={handleOperationSelect}
+ selectedOperations={convertBooleanArrayToIds(filters)}
+ buttonClassName="bg-theme"
+ triggerTitle={getOperationButtonTitle(
+ convertBooleanArrayToIds(filters),
+ accountOperationTypes
+ )}
+ />
+ <Button
+ onClick={handleFilterClear}
+ data-testid="clear-filters"
+ >
+ <span>Clear filters</span>{" "}
+ </Button>
+ </div>
</div>
</CardContent>
</Card>
--
GitLab