feat: lpr budgets filtering

src/components/Admin/AdminSearchForm.jsx

@@ -14,17 +14,18 @@
 
 class AdminSearchForm extends React.Component {
  componentDidUpdate(prevProps) {
- const { searchParams: { searchQuery, searchCourseQuery, searchDateQuery } } = this.props;
+ const { searchParams: { searchQuery, searchCourseQuery, searchDateQuery, searchBudgetQuery } } = this.props;
  const {
  searchParams: {
  searchQuery: prevSearchQuery,
  searchCourseQuery: prevSearchCourseQuery,
  searchDateQuery: prevSearchDateQuery,
+ searchBudgetQuery: prevSearchBudgetQuery,
  },
  } = prevProps;
 
  if (searchQuery !== prevSearchQuery || searchCourseQuery !== prevSearchCourseQuery
- || searchDateQuery !== prevSearchDateQuery) {
+ || searchDateQuery !== prevSearchDateQuery || searchBudgetQuery !== prevSearchBudgetQuery) {
  this.handleSearch();
  }
  }
@@ -45,11 +46,24 @@
  updateUrl(navigate, location.pathname, updateParams);
  }
 
+ onBudgetSelect(event) {
+ const { navigate, location } = this.props;
+ const updateParams = {
+ budget_uuid: event.target.value,
+ page: 1,
+ };
+ if (event.target.value === '') {
+ updateParams.budget_uuid = '';
+ }
+ updateUrl(navigate, location.pathname, updateParams);
+ }
+
  render() {
  const {
  intl,
  tableData,
- searchParams: { searchCourseQuery, searchDateQuery, searchQuery },
+ budgets,
+ searchParams: { searchCourseQuery, searchDateQuery, searchQuery, searchBudgetQuery },
  } = this.props;
  const courseTitles = Array.from(new Set(tableData.map(en => en.course_title).sort()));
  const courseDates = Array.from(new Set(tableData.map(en => en.course_start_date).sort().reverse()));
@@ -151,7 +165,7 @@
  </Form.Control>
  </Form.Group>
  </div>
- <div className="col-12 col-md-6 my-2 my-md-0 px-0 px-md-2 px-lg-3">
+ <div className="col-12 col-md-3 my-2 my-md-0 px-0 px-md-2 px-lg-3">
  <Form.Label id="search-email-label" className="mb-2">
  <FormattedMessage
  id="admin.portal.lpr.filter.by.email.input.label"
@@ -176,6 +190,39 @@
  inputProps={{ 'data-hj-suppress': true }}
  />
  </div>
+ <div className="col-12 col-md-3 my-2 my-md-0 px-0 px-md-2 px-lg-3">
+ <Form.Group>
+ <Form.Label className="search-label mb-2">
+ <FormattedMessage
+ id="admin.portal.lpr.filter.by.budget.dropdown.label"
+ defaultMessage="Filter by budget"
+ description="Label for the budget filter dropdown in the admin portal LPR page."
+ />
+ </Form.Label>
+ <Form.Control
+ className="w-100"
+ as="select"
+ value={searchBudgetQuery}
+ onChange={e => this.onBudgetSelect(e)}
+ >
+ <option value="">
+ {intl.formatMessage({
+ id: 'admin.portal.lpr.filter.by.budget.dropdown.option.all.budgets',
+ defaultMessage: 'All budgets',
+ description: 'Label for the all budgets option in the budget filter dropdown in the admin portal LPR page.',
+ })}
+ </option>
+ {budgets.map(budget => (
+ <option
+ value={budget.subsidy_access_policy_display_name}
+ key={budget.subsidy_access_policy_uuid}
+ >
+ {budget.subsidy_access_policy_display_name}
+ </option>
+ ))}
+ </Form.Control>
+ </Form.Group>
+ </div>
  </div>
  </div>
  </div>

src/components/Admin/index.jsx

@@ -49,6 +49,7 @@
  if (enterpriseId) {
  this.props.fetchDashboardAnalytics(enterpriseId);
  this.props.fetchDashboardInsights(enterpriseId);
+ this.props.fetchEnterpriseBudgets(enterpriseId);
  }
  }
 
@@ -57,13 +58,15 @@
  if (enterpriseId && enterpriseId !== prevProps.enterpriseId) {
  this.props.fetchDashboardAnalytics(enterpriseId);
  this.props.fetchDashboardInsights(enterpriseId);
+ this.props.fetchEnterpriseBudgets(enterpriseId);
  }
  }
 
  componentWillUnmount() {
  // Clear the overview data
  this.props.clearDashboardAnalytics();
  this.props.clearDashboardInsights();
+ this.props.clearEnterpriseBudgets();
  }
 
  getMetadataForAction(actionSlug) {
@@ -403,6 +406,7 @@
  insights,
  insightsLoading,
  intl,
+ budgets
  } = this.props;
  const { activeTab } = this.state;
 
@@ -412,10 +416,13 @@
  const tableMetadata = this.getMetadataForAction(actionSlug);
  const csvErrorMessage = this.getCsvErrorMessage(tableMetadata.csvButtonId);
 
+ console.log('budgets', budgets);
+
  const searchParams = {
  searchQuery: queryParams.get('search') || '',
  searchCourseQuery: queryParams.get('search_course') || '',
  searchDateQuery: queryParams.get('search_start_date') || '',
+ searchBudgetQuery: queryParams.get('budget_uuid') || '',
  };
 
  return (
@@ -531,6 +538,7 @@
  searchParams={searchParams}
  searchEnrollmentsList={() => this.props.searchEnrollmentsList()}
  tableData={this.getTableData() ? this.getTableData().results : []}
+ budgets={budgets}
  />
  )}
  </>

src/containers/AdminPage/index.jsx

@@ -9,6 +9,7 @@ import Admin from '../../components/Admin';
 import { paginateTable } from '../../data/actions/table';
 import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
 import { fetchDashboardInsights, clearDashboardInsights } from '../../data/actions/dashboardInsights';
+import { fetchEnterpriseBudgets, clearEnterpriseBudgets } from '../../data/actions/enterpriseBudgets';
 
 const mapStateToProps = state => ({
  loading: state.dashboardAnalytics.loading,
@@ -23,6 +24,8 @@ const mapStateToProps = state => ({
  table: state.table,
  insightsLoading: state.dashboardInsights.loading,
  insights: state.dashboardInsights.insights,
+ budgetsLoading: state.enterpriseBudgets.loading,
+ budgets: state.enterpriseBudgets.budgets,
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -41,6 +44,12 @@ const mapDispatchToProps = dispatch => ({
  clearDashboardInsights: () => {
  dispatch(clearDashboardInsights());
  },
+ fetchEnterpriseBudgets: (enterpriseId) => {
+ dispatch(fetchEnterpriseBudgets(enterpriseId));
+ },
+ clearEnterpriseBudgets: () => {
+ dispatch(clearEnterpriseBudgets());
+ },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Admin);

src/data/actions/enterpriseBudgets.js

@@ -0,0 +1,41 @@
+import { logError } from '@edx/frontend-platform/logging';
+import {
+ FETCH_ENTERPRISE_BUDGETS_REQUEST,
+ FETCH_ENTERPRISE_BUDGETS_SUCCESS,
+ FETCH_ENTERPRISE_BUDGETS_FAILURE,
+ CLEAR_ENTERPRISE_BUDGETS,
+} from '../constants/enterpriseBudgets';
+import EnterpriseDataApiService from '../services/EnterpriseDataApiService';
+
+const fetchEnterpriseBudgetsRequest = () => ({ type: FETCH_ENTERPRISE_BUDGETS_REQUEST });
+const fetchEnterpriseBudgetsSuccess = data => ({
+ type: FETCH_ENTERPRISE_BUDGETS_SUCCESS,
+ payload: { data },
+});
+const fetchEnterpriseBudgetsFailure = error => ({
+ type: FETCH_ENTERPRISE_BUDGETS_FAILURE,
+ payload: { error },
+});
+
+const fetchEnterpriseBudgets = enterpriseId => (
+ (dispatch) => {
+ dispatch(fetchEnterpriseBudgetsRequest());
+ return EnterpriseDataApiService.fetchEnterpriseBudgets(enterpriseId)
+ .then((response) => {
+ dispatch(fetchEnterpriseBudgetsSuccess(response.data));
+ })
+ .catch((error) => {
+ logError(error);
+ dispatch(fetchEnterpriseBudgetsFailure(error));
+ });
+ }
+);
+
+const clearEnterpriseBudgets = () => dispatch => (dispatch({
+ type: CLEAR_ENTERPRISE_BUDGETS,
+}));
+
+export {
+ fetchEnterpriseBudgets,
+ clearEnterpriseBudgets,
+};

src/data/constants/enterpriseBudgets.js

@@ -0,0 +1,11 @@
+const FETCH_ENTERPRISE_BUDGETS_REQUEST = 'FETCH_ENTERPRISE_BUDGETS_REQUEST';
+const FETCH_ENTERPRISE_BUDGETS_SUCCESS = 'FETCH_ENTERPRISE_BUDGETS_SUCCESS';
+const FETCH_ENTERPRISE_BUDGETS_FAILURE = 'FETCH_ENTERPRISE_BUDGETS_FAILURE';
+const CLEAR_ENTERPRISE_BUDGETS = 'CLEAR_ENTERPRISE_BUDGETS';
+
+export {
+ FETCH_ENTERPRISE_BUDGETS_REQUEST,
+ FETCH_ENTERPRISE_BUDGETS_SUCCESS,
+ FETCH_ENTERPRISE_BUDGETS_FAILURE,
+ CLEAR_ENTERPRISE_BUDGETS,
+};

src/data/reducers/enterpriseBudgets.js

@@ -0,0 +1,47 @@
+import {
+ FETCH_ENTERPRISE_BUDGETS_REQUEST,
+ FETCH_ENTERPRISE_BUDGETS_SUCCESS,
+ FETCH_ENTERPRISE_BUDGETS_FAILURE,
+ CLEAR_ENTERPRISE_BUDGETS,
+} from '../constants/enterpriseBudgets';
+
+const initialState = {
+ loading: false,
+ error: null,
+ budgets: null,
+};
+
+const enterpriseBudgets = (state = initialState, action) => {
+ switch (action.type) {
+ case FETCH_ENTERPRISE_BUDGETS_REQUEST:
+ return {
+ ...state,
+ loading: true,
+ error: null,
+ };
+ case FETCH_ENTERPRISE_BUDGETS_SUCCESS:
+ return {
+ ...state,
+ loading: false,
+ budgets: action.payload.data,
+ };
+ case FETCH_ENTERPRISE_BUDGETS_FAILURE:
+ return {
+ ...state,
+ loading: false,
+ error: action.payload.error,
+ budgets: null,
+ };
+ case CLEAR_ENTERPRISE_BUDGETS:
+ return {
+ ...state,
+ loading: false,
+ error: null,
+ budgets: null,
+ };
+ default:
+ return state;
+ }
+};
+
+export default enterpriseBudgets;

src/data/reducers/index.js

@@ -14,6 +14,7 @@ import emailTemplate from './emailTemplate';
 import licenseRemind from './licenseRemind';
 import userSubscription from './userSubscription';
 import dashboardInsights from './dashboardInsights';
+import enterpriseBudgets from './enterpriseBudgets';
 
 const identityReducer = (state) => {
  const newState = { ...state };
@@ -38,6 +39,7 @@ const rootReducer = combineReducers({
  licenseRemind,
  userSubscription,
  dashboardInsights,
+ enterpriseBudgets,
 });
 
 export default rootReducer;

src/data/services/EnterpriseDataApiService.js

@@ -182,6 +182,12 @@ class EnterpriseDataApiService {
  return EnterpriseDataApiService.apiClient().get(url);
  }
 
+ static fetchEnterpriseBudgets(enterpriseId) {
+ const enterpriseUUID = EnterpriseDataApiService.getEnterpriseUUID(enterpriseId);
+ const url = `${EnterpriseDataApiService.enterpriseBaseUrl}${enterpriseUUID}/budgets/`;
+ return EnterpriseDataApiService.apiClient().get(url);
+ }
+
  static fetchEnterpriseModuleActivityReport(enterpriseId, options, { csv } = {}) {
  const enterpriseUUID = EnterpriseDataApiService.getEnterpriseUUID(enterpriseId);
  const endpoint = csv ? 'module-performance.csv' : 'module-performance';