diff --git a/govtool/frontend/src/components/molecules/DataActionsBar.tsx b/govtool/frontend/src/components/molecules/DataActionsBar.tsx index 08e27a1db..24363490a 100644 --- a/govtool/frontend/src/components/molecules/DataActionsBar.tsx +++ b/govtool/frontend/src/components/molecules/DataActionsBar.tsx @@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction } from "react"; import { Box, InputBase } from "@mui/material"; import Search from "@mui/icons-material/Search"; -import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules"; +import { DataActionsFilters, DataActionsSorting } from "@molecules"; import { OrderActionsChip } from "./OrderActionsChip"; import { theme } from "@/theme"; @@ -12,6 +12,10 @@ type DataActionsBarProps = { chosenSorting: string; closeFilters?: () => void; closeSorts: () => void; + filterOptions?: { + key: string; + label: string; + }[]; filtersOpen?: boolean; isFiltering?: boolean; searchText: string; @@ -22,6 +26,10 @@ type DataActionsBarProps = { setSortOpen: Dispatch>; sortingActive: boolean; sortOpen: boolean; + sortOptions?: { + key: string; + label: string; + }[]; }; export const DataActionsBar: FC = ({ ...props }) => { @@ -31,6 +39,7 @@ export const DataActionsBar: FC = ({ ...props }) => { chosenSorting, closeFilters = () => {}, closeSorts, + filterOptions = [], filtersOpen, isFiltering = true, searchText, @@ -41,6 +50,7 @@ export const DataActionsBar: FC = ({ ...props }) => { setSortOpen, sortingActive, sortOpen, + sortOptions = [], } = props; const { palette: { boxShadow2 }, @@ -87,17 +97,19 @@ export const DataActionsBar: FC = ({ ...props }) => { sortOpen={sortOpen} > {filtersOpen && ( - )} {sortOpen && ( - )} diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx b/govtool/frontend/src/components/molecules/DataActionsFilters.tsx similarity index 94% rename from govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx rename to govtool/frontend/src/components/molecules/DataActionsFilters.tsx index 29bf5cc99..2b1eab424 100644 --- a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx +++ b/govtool/frontend/src/components/molecules/DataActionsFilters.tsx @@ -7,19 +7,23 @@ import { Typography, } from "@mui/material"; -import { GOVERNANCE_ACTIONS_FILTERS } from "@consts"; import { useOnClickOutside, useScreenDimension, useTranslation } from "@hooks"; interface Props { chosenFilters: string[]; setChosenFilters: Dispatch>; closeFilters: () => void; + options: { + key: string; + label: string; + }[]; } -export const GovernanceActionsFilters = ({ +export const DataActionsFilters = ({ chosenFilters, setChosenFilters, closeFilters, + options }: Props) => { const handleFilterChange = useCallback( (e: React.ChangeEvent) => { @@ -70,7 +74,7 @@ export const GovernanceActionsFilters = ({ > {t("govActions.filterTitle")} - {GOVERNANCE_ACTIONS_FILTERS.map((item) => ( + {options.map((item) => ( >; closeSorts: () => void; + options: { + key: string; + label: string; + }[]; } -export const GovernanceActionsSorting = ({ +export const DataActionsSorting = ({ chosenSorting, setChosenSorting, closeSorts, + options, }: Props) => { const { t } = useTranslation(); @@ -63,7 +67,7 @@ export const GovernanceActionsSorting = ({ setChosenSorting(e.target.value); }} > - {GOVERNANCE_ACTIONS_SORTING.map((item) => ( + {options.map((item) => ( { flexDirection="column" > <> - + {!proposals || !voter || isEnableLoading || isProposalsLoading ? ( { { /> )} - + {!proposals || isProposalsLoading ? ( {