{displayActivePeriod(activePeriod)}
| {obligateBy} |
{convertCodeForDisplay("methodOfTransfer", transfer)} |
-
-
- |
+ {fyBudget === 0 ? (
+ TBD |
+ ) : (
+
+
+ |
+ )}
(
+
+);
+const StyledSlider = styled(ReactSlider)`
+ width: 100%;
+ height: 25px;
+ z-index: 0;
+`;
+
+const Thumb = ({ key, ...props }) => (
+
+);
+
+const Track = ({ key, ...props }) => (
+
+);
+
+const StyledTrack = styled.div`
+ top: 5px;
+ bottom: 0;
+ background: white;
+ border-radius: 999px;
+ border: 1px solid black;
+`;
+
+const StyledThumb = styled.div`
+ height: 30px;
+ line-height: 30px;
+ width: 30px;
+ background-color: whitesmoke;
+ border: 2px solid gray;
+ border-radius: 50%;
+ cursor: grab;
+`;
+export default DoubleRangeSlider;
diff --git a/frontend/src/components/UI/DoubleRangeSlider/index.js b/frontend/src/components/UI/DoubleRangeSlider/index.js
new file mode 100644
index 0000000000..f6ff31b58f
--- /dev/null
+++ b/frontend/src/components/UI/DoubleRangeSlider/index.js
@@ -0,0 +1 @@
+export { default } from "./DoubleRangeSlider";
diff --git a/frontend/src/components/UI/FilterButton/FilterButton.jsx b/frontend/src/components/UI/FilterButton/FilterButton.jsx
index 974368e5e5..2446bca39e 100644
--- a/frontend/src/components/UI/FilterButton/FilterButton.jsx
+++ b/frontend/src/components/UI/FilterButton/FilterButton.jsx
@@ -9,9 +9,10 @@ import customStyles from "./FilterButton.module.css";
* @param {Function} props.applyFilter - A function to call after clicking the Apply button.
* @param {Function} props.resetFilter - A function to call after clicking the Reset button.
* @param {Object []} props.fieldsetList - An array of fieldsets to display in the modal.
+ * @param {boolean} props.disabled - Whether the button is disabled.
* @returns {JSX.Element} - The procurement shop select element.
*/
-export const FilterButton = ({ applyFilter, resetFilter, fieldsetList }) => {
+export const FilterButton = ({ applyFilter, resetFilter, fieldsetList, disabled = false }) => {
const [showModal, setShowModal] = React.useState(false);
const handleApplyFilter = () => {
@@ -35,10 +36,11 @@ export const FilterButton = ({ applyFilter, resetFilter, fieldsetList }) => {
!showModal ? "usa-button--outline text-primary" : "bg-primary-darker"
} display-flex flex-align-center margin-right-0 ${customStyles.filterButton}`}
onClick={() => (showModal ? setShowModal(false) : setShowModal(true))}
+ disabled={disabled}
>
diff --git a/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx b/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx
index be34469d18..67ad39dd8f 100644
--- a/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx
+++ b/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx
@@ -4,6 +4,7 @@ import CANPortfolioComboBox from "../../../../components/CANs/CANPortfolioComboB
import CANTransferComboBox from "../../../../components/CANs/CANTransferComboBox";
import FilterButton from "../../../../components/UI/FilterButton";
import useCANFilterButton from "./CANFilterButton.hooks";
+import CANFYBudgetRangeSlider from "../../../../components/CANs/CANFYBudgetRangeSlider";
/**
* @typedef {import('./CANFilterTypes').FilterOption} FilterOption
@@ -14,11 +15,23 @@ import useCANFilterButton from "./CANFilterButton.hooks";
* @param {import ('./CANFilterTypes').Filters} props.filters - The current filters.
* @param {Function} props.setFilters - A function to call to set the filters.
* @param {FilterOption[]} props.portfolioOptions - The portfolio options.
+ * @param {[number, number]} props.fyBudgetRange - The fiscal year budget range.
+ * @param {boolean} props.disabled - Whether the button is disabled.
* @returns {JSX.Element} - The CAN filter button.
*/
-export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
- const { activePeriod, setActivePeriod, transfer, setTransfer, portfolio, setPortfolio, applyFilter, resetFilter } =
- useCANFilterButton(filters, setFilters);
+export const CANFilterButton = ({ filters, setFilters, portfolioOptions, fyBudgetRange, disabled }) => {
+ const {
+ activePeriod,
+ setActivePeriod,
+ transfer,
+ setTransfer,
+ portfolio,
+ setPortfolio,
+ budget,
+ setBudget,
+ applyFilter,
+ resetFilter
+ } = useCANFilterButton(filters, setFilters, fyBudgetRange);
const fieldStyles = "usa-fieldset margin-bottom-205";
const legendStyles = "usa-legend font-sans-3xs margin-top-0 padding-bottom-1 text-base-dark";
@@ -56,6 +69,17 @@ export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
legendClassname={legendStyles}
overrideStyles={{ width: "22.7rem" }}
/>
+ ,
+
];
@@ -66,6 +90,7 @@ export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
applyFilter={applyFilter}
resetFilter={resetFilter}
fieldsetList={fieldsetList}
+ disabled={disabled}
/>
);
};
diff --git a/frontend/src/pages/cans/list/CANFilterButton/CANFilterButton.hooks.js b/frontend/src/pages/cans/list/CANFilterButton/CANFilterButton.hooks.js
index 27d3269931..e30fdf99be 100644
--- a/frontend/src/pages/cans/list/CANFilterButton/CANFilterButton.hooks.js
+++ b/frontend/src/pages/cans/list/CANFilterButton/CANFilterButton.hooks.js
@@ -3,12 +3,14 @@ import React from "react";
/**
* A filter for CANs list.
* @param {import ('./CANFilterTypes').Filters} filters - The current filters.
+ * @param{[number, number]} fyBudgetRange - The fiscal year budget range.
* @param {Function} setFilters - A function to call to set the filters.
*/
-export const useCANFilterButton = (filters, setFilters) => {
+export const useCANFilterButton = (filters, setFilters, fyBudgetRange) => {
const [activePeriod, setActivePeriod] = React.useState([]);
const [transfer, setTransfer] = React.useState([]);
const [portfolio, setPortfolio] = React.useState([]);
+ const [budget, setBudget] = React.useState([]);
// The useEffect() hook calls below are used to set the state appropriately when the filter tags (X) are clicked.
React.useEffect(() => {
@@ -29,13 +31,23 @@ export const useCANFilterButton = (filters, setFilters) => {
}
}, [filters.portfolio]);
+ React.useEffect(() => {
+ if (fyBudgetRange !== undefined) {
+ setBudget(fyBudgetRange);
+ }
+ if (filters.budget && Array.isArray(filters.budget) && filters.budget.length === 2) {
+ setBudget([filters.budget[0], filters.budget[1]]);
+ }
+ }, [fyBudgetRange, filters.budget]);
+
const applyFilter = () => {
setFilters((prevState) => {
return {
...prevState,
activePeriod: activePeriod,
transfer: transfer,
- portfolio: portfolio
+ portfolio: portfolio,
+ budget: budget
};
});
};
@@ -43,11 +55,9 @@ export const useCANFilterButton = (filters, setFilters) => {
setFilters({
activePeriod: [],
transfer: [],
- portfolio: []
+ portfolio: [],
+ budget: []
});
- setActivePeriod([]);
- setTransfer([]);
- setPortfolio([]);
};
return {
@@ -57,6 +67,8 @@ export const useCANFilterButton = (filters, setFilters) => {
setTransfer,
portfolio,
setPortfolio,
+ budget,
+ setBudget,
applyFilter,
resetFilter
};
diff --git a/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.hooks.js b/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.hooks.js
index d7432c1119..40191c8952 100644
--- a/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.hooks.js
+++ b/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.hooks.js
@@ -9,6 +9,7 @@ import { useState, useEffect, useCallback } from "react";
* @property {FilterItem[]} activePeriod
* @property {FilterItem[]} portfolio
* @property {FilterItem[]} transfer
+ * @property {[number, number]} budget
*/
/**
@@ -20,9 +21,10 @@ import { useState, useEffect, useCallback } from "react";
/**
* Custom hook for managing tags list
* @param {Filters} filters
+ * @param {[number, number]} fyBudgetRange
* @returns {Tag[]}
*/
-export const useTagsList = (filters) => {
+export const useTagsList = (filters, fyBudgetRange) => {
const [tagsList, setTagsList] = useState([]);
/**
@@ -31,16 +33,26 @@ export const useTagsList = (filters) => {
*/
const updateTags = useCallback(
(filterKey, filterName) => {
- if (!Array.isArray(filters[filterKey])) return;
+ if (filterKey === "budget") {
+ if (Array.isArray(filters.budget) && filters.budget.length === 2) {
+ const [min, max] = filters.budget;
+ setTagsList((prevState) => [
+ ...prevState.filter((t) => t.filter !== filterName),
+ { tagText: `$${min} - $${max}`, filter: filterName }
+ ]);
+ } else {
+ setTagsList((prevState) => prevState.filter((t) => t.filter !== filterName));
+ }
+ } else if (Array.isArray(filters[filterKey])) {
+ const selectedTags = filters[filterKey].map((item) => ({
+ tagText: item.title,
+ filter: filterName
+ }));
- const selectedTags = filters[filterKey].map((item) => ({
- tagText: item.title,
- filter: filterName
- }));
-
- setTagsList((prevState) => [...prevState.filter((t) => t.filter !== filterName), ...selectedTags]);
+ setTagsList((prevState) => [...prevState.filter((t) => t.filter !== filterName), ...selectedTags]);
+ }
},
- [filters]
+ [filters, fyBudgetRange]
);
useEffect(() => {
@@ -55,6 +67,10 @@ export const useTagsList = (filters) => {
updateTags("transfer", "transfer");
}, [filters.transfer, updateTags]);
+ useEffect(() => {
+ updateTags("budget", "budget");
+ }, [filters.budget, updateTags]);
+
return tagsList;
};
@@ -83,6 +99,12 @@ export const removeFilter = (tag, setFilters) => {
transfer: prevState.transfer.filter((transfer) => transfer.title !== tag.tagText)
}));
break;
+ case "budget":
+ setFilters((prevState) => ({
+ ...prevState,
+ budget: []
+ }));
+ break;
default:
console.warn(`Unknown filter type: ${tag.filter}`);
}
diff --git a/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.jsx b/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.jsx
index 821bfcb849..35765e403d 100644
--- a/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.jsx
+++ b/frontend/src/pages/cans/list/CANFilterTags/CANFilterTags.jsx
@@ -8,15 +8,14 @@ import { useTagsList, removeFilter } from "./CANFilterTags.hooks";
* @param {Object} props - The component props.
* @param {import('./CANFilterTags.hooks').Filters} props.filters - The current filters.
* @param {() => void} props.setFilters - A function to call to set the filters.
+ * @param {[number, number]} props.fyBudgetRange - The initial budget range.
* @returns {JSX.Element|null} The filter tags component or null if no tags.
*/
-export const CANFilterTags = ({ filters, setFilters }) => {
- const tagsList = useTagsList(filters);
+const CANFilterTags = ({ filters, setFilters, fyBudgetRange }) => {
+ const tagsList = useTagsList(filters, fyBudgetRange);
const tagsListByFilter = _.groupBy(tagsList, "filter");
- const tagsListByFilterMerged = Object.values(tagsListByFilter)
- .flat()
- .sort((a, b) => a.tagText.localeCompare(b.tagText));
+ const tagsListByFilterMerged = Object.values(tagsListByFilter).flat();
if (tagsList.length === 0) {
return null;
diff --git a/frontend/src/pages/cans/list/CanList.helpers.js b/frontend/src/pages/cans/list/CanList.helpers.js
index 74c1b7534a..29b5244983 100644
--- a/frontend/src/pages/cans/list/CanList.helpers.js
+++ b/frontend/src/pages/cans/list/CanList.helpers.js
@@ -72,6 +72,7 @@ const sortCANs = (cans) => {
*/
const applyAdditionalFilters = (cans, filters) => {
let filteredCANs = cans;
+ console.log({ filters, cans });
// Filter by active period
if (filters.activePeriod && filters.activePeriod.length > 0) {
@@ -94,6 +95,15 @@ const applyAdditionalFilters = (cans, filters) => {
)
);
}
+
+ if (filters.budget && filters.budget.length > 0) {
+ filteredCANs = filteredCANs.filter((can) => {
+ return can.funding_budgets.some((budget) => {
+ return budget.budget >= filters.budget[0] && budget.budget <= filters.budget[1];
+ });
+ });
+ }
+
// TODO: Add other filters here
// Example:
// if (filters.someOtherFilter && filters.someOtherFilter.length > 0) {
@@ -126,3 +136,18 @@ export const getPortfolioOptions = (cans) => {
title: portfolio
}));
};
+
+export const getSortedFYBudgets = (cans) => {
+ if (!cans || cans.length === 0) {
+ return [];
+ }
+
+ const funding_budgets = cans.reduce((acc, can) => {
+ acc.add(can.funding_budgets);
+ return acc;
+ }, new Set());
+
+ return Array.from(funding_budgets)
+ .flatMap((itemArray) => itemArray.map((item) => item.budget))
+ .sort((a, b) => a - b);
+};
diff --git a/frontend/src/pages/cans/list/CanList.jsx b/frontend/src/pages/cans/list/CanList.jsx
index f12e1e5964..0cf8dd700b 100644
--- a/frontend/src/pages/cans/list/CanList.jsx
+++ b/frontend/src/pages/cans/list/CanList.jsx
@@ -10,8 +10,8 @@ import FiscalYear from "../../../components/UI/FiscalYear";
import { setSelectedFiscalYear } from "../../../pages/cans/detail/canDetailSlice";
import ErrorPage from "../../ErrorPage";
import CANFilterButton from "./CANFilterButton";
+import { sortAndFilterCANs, getPortfolioOptions, getSortedFYBudgets } from "./CanList.helpers";
import CANFilterTags from "./CANFilterTags";
-import { getPortfolioOptions, sortAndFilterCANs } from "./CanList.helpers";
/**
* Page for the CAN List.
@@ -29,10 +29,17 @@ const CanList = () => {
const [filters, setFilters] = React.useState({
activePeriod: [],
transfer: [],
- portfolio: []
+ portfolio: [],
+ budget: []
});
- const sortedCANs = sortAndFilterCANs(canList, myCANsUrl, activeUser, filters) || [];
+ const filteredCANsByFiscalYear = React.useMemo(() => {
+ if (!fiscalYear || !canList) return [];
+ return canList.filter((can) => can.funding_details.fiscal_year === fiscalYear);
+ }, [canList, fiscalYear]);
+ const sortedCANs = sortAndFilterCANs(filteredCANsByFiscalYear, myCANsUrl, activeUser, filters) || [];
const portfolioOptions = getPortfolioOptions(canList);
+ const sortedFYBudgets = getSortedFYBudgets(filteredCANsByFiscalYear);
+ const [minFYBudget, maxFYBudget] = [sortedFYBudgets[0], sortedFYBudgets[sortedFYBudgets.length - 1]];
if (isLoading) {
return (
@@ -44,7 +51,6 @@ const CanList = () => {
if (isError) {
return ;
}
-
const CANFiscalYearSelect = () => {
return (
{
filters={filters}
setFilters={setFilters}
portfolioOptions={portfolioOptions}
+ fyBudgetRange={[minFYBudget, maxFYBudget]}
+ disabled={sortedCANs.length === 0}
/>
}
FYSelect={}
@@ -84,6 +92,7 @@ const CanList = () => {
}
/>
|