diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
index 93e82b2841..9b90cd7a6c 100644
--- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap
+++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -1496,7 +1496,7 @@ exports[`
renders correctly with dashboard analytics data renders # cou
>
Filter by course
@@ -1630,7 +1630,7 @@ exports[`
renders correctly with dashboard analytics data renders # cou
>
renders correctly with dashboard analytics data renders # cou
>
Filter by start date
@@ -1688,7 +1688,7 @@ exports[`
renders correctly with dashboard analytics data renders # of
>
Filter by course
@@ -3175,7 +3175,7 @@ exports[`
renders correctly with dashboard analytics data renders # of
>
renders correctly with dashboard analytics data renders # of
>
Filter by start date
@@ -3233,7 +3233,7 @@ exports[`
renders correctly with dashboard analytics data renders # of
>
Filter by course
@@ -4720,7 +4720,7 @@ exports[`
renders correctly with dashboard analytics data renders # of
>
renders correctly with dashboard analytics data renders # of
>
Filter by start date
@@ -4778,7 +4778,7 @@ exports[`
renders correctly with dashboard analytics data renders colla
>
Filter by course
@@ -6265,7 +6265,7 @@ exports[`
renders correctly with dashboard analytics data renders colla
>
renders correctly with dashboard analytics data renders colla
>
Filter by start date
@@ -6323,7 +6323,7 @@ exports[`
renders correctly with dashboard analytics data renders full
>
Filter by course
@@ -7810,7 +7810,7 @@ exports[`
renders correctly with dashboard analytics data renders full
>
renders correctly with dashboard analytics data renders full
>
Filter by start date
@@ -7868,7 +7868,7 @@ exports[`
renders correctly with dashboard analytics data renders inact
>
Filter by course
@@ -9355,7 +9355,7 @@ exports[`
renders correctly with dashboard analytics data renders inact
>
renders correctly with dashboard analytics data renders inact
>
Filter by start date
@@ -9413,7 +9413,7 @@ exports[`
renders correctly with dashboard analytics data renders inact
>
Filter by course
@@ -10900,7 +10900,7 @@ exports[`
renders correctly with dashboard analytics data renders inact
>
renders correctly with dashboard analytics data renders inact
>
Filter by start date
@@ -10958,7 +10958,7 @@ exports[`
renders correctly with dashboard analytics data renders learn
>
Filter by course
@@ -12445,7 +12445,7 @@ exports[`
renders correctly with dashboard analytics data renders learn
>
renders correctly with dashboard analytics data renders learn
>
Filter by start date
@@ -12503,7 +12503,7 @@ exports[`
renders correctly with dashboard analytics data renders regis
>
Filter by course
@@ -13990,7 +13990,7 @@ exports[`
renders correctly with dashboard analytics data renders regis
>
renders correctly with dashboard analytics data renders regis
>
Filter by start date
@@ -14048,7 +14048,7 @@ exports[`
renders correctly with dashboard analytics data renders top a
>
Filter by course
@@ -15535,7 +15535,7 @@ exports[`
renders correctly with dashboard analytics data renders top a
>
renders correctly with dashboard analytics data renders top a
>
Filter by start date
@@ -15593,7 +15593,7 @@ exports[`
renders correctly with no dashboard insights data 1`] = `
>
Filter by course
@@ -20396,7 +20396,7 @@ exports[`
renders correctly with no dashboard insights data 1`] = `
>
renders correctly with no dashboard insights data 1`] = `
>
Filter by start date
@@ -20454,7 +20454,7 @@ exports[`
-
-
-
- There are no results.
+
+
+
+
+
+
+
+ Search email
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email
+
+
+
+
+
+
+
+
+
+
+ Account Created
+
+
+
+
+
+
+
+
+
+
+ Total Course Enrollment Count
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Page 1, Current Page, of -1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js b/src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js
new file mode 100644
index 0000000000..2944057a5f
--- /dev/null
+++ b/src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js
@@ -0,0 +1,106 @@
+import {
+ useCallback, useMemo, useRef, useState,
+} from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+import EVENT_NAMES from '../../../../eventTracking';
+
+const applySortByToOptions = (sortBy, options) => {
+ if (!sortBy || sortBy.length === 0) {
+ return;
+ }
+ const apiFieldsForColumnAccessor = {
+ lmsUserCreated: { key: 'lms_user_created' },
+ userEmail: { key: 'user_email' },
+ enrollmentCount: { key: 'enrollment_count' },
+ };
+ const orderingStrings = sortBy.map(({ id, desc }) => {
+ const apiFieldForColumnAccessor = apiFieldsForColumnAccessor[id];
+ if (!apiFieldForColumnAccessor) {
+ return undefined;
+ }
+ const apiFieldKey = apiFieldForColumnAccessor.key;
+ return desc ? `-${apiFieldKey}` : apiFieldKey;
+ }).filter(orderingString => !!orderingString);
+ Object.assign(options, {
+ ordering: orderingStrings.join(','),
+ });
+};
+
+const applyFiltersToOptions = (filters, options) => {
+ if (!filters || filters.length === 0) {
+ return;
+ }
+ const userEmailFilter = filters.find(filter => filter.id === 'userEmail')?.value;
+ if (userEmailFilter) {
+ Object.assign(options, { userEmail: userEmailFilter });
+ }
+};
+
+const useEnrolledLearners = (enterpriseId) => {
+ const shouldTrackFetchEvents = useRef(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [enrolledLearners, setEnrolledLearners] = useState(
+ {
+ itemCount: 0,
+ pageCount: 0,
+ results: [],
+ },
+ );
+
+ const fetchEnrolledLearners = useCallback(async (args) => {
+ try {
+ setIsLoading(true);
+ const options = {
+ page: args.pageIndex + 1,
+ pageSize: args.pageSize,
+ };
+ applySortByToOptions(args.sortBy, options);
+ applyFiltersToOptions(args.filters, options);
+
+ const response = await EnterpriseDataApiService.fetchEnrolledLearners(enterpriseId, options);
+ const data = camelCaseObject(response.data);
+ setEnrolledLearners({
+ itemCount: data.count,
+ pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+ results: data.results,
+ });
+ if (shouldTrackFetchEvents.current) {
+ // track event only after original API query to avoid sending event on initial page load. instead,
+ // only track event when user performs manual data operation (e.g., pagination, sort, filter) and
+ // send all table state as event properties.
+ sendEnterpriseTrackEvent(
+ enterpriseId,
+ EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
+ {
+ tableId: 'enrolled-learners',
+ ...options,
+ },
+ );
+ } else {
+ // set to true to enable tracking events on future API queries
+ shouldTrackFetchEvents.current = true;
+ }
+ } catch (error) {
+ logError(error);
+ } finally {
+ setIsLoading(false);
+ }
+ }, [enterpriseId]);
+
+ const debouncedFetchEnrolledLearners = useMemo(
+ () => debounce(fetchEnrolledLearners, 300),
+ [fetchEnrolledLearners],
+ );
+
+ return {
+ isLoading,
+ enrolledLearners,
+ fetchEnrolledLearners: debouncedFetchEnrolledLearners,
+ };
+};
+
+export default useEnrolledLearners;
diff --git a/src/components/EnrolledLearnersTable/index.jsx b/src/components/EnrolledLearnersTable/index.jsx
index e4e40e9103..8f33249170 100644
--- a/src/components/EnrolledLearnersTable/index.jsx
+++ b/src/components/EnrolledLearnersTable/index.jsx
@@ -2,61 +2,97 @@ import React from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
-import TableContainer from '../../containers/TableContainer';
+import { DataTable, TextFilter } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { DEFAULT_PAGE, PAGE_SIZE } from '../learner-credit-management/data';
+import useEnrolledLearners from './data/hooks/useEnrolledLearners';
import { i18nFormatTimestamp } from '../../utils';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
-const EnrolledLearnersTable = () => {
- const intl = useIntl();
+const FilterStatus = (rest) => {row.original.userEmail}
+);
+
+UserEmail.propTypes = {
+ row: PropTypes.shape({
+ original: PropTypes.shape({
+ userEmail: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+};
- const tableColumns = [
- {
- label: intl.formatMessage({
- id: 'admin.portal.lpr.enrolled.learners.table.user_email.column.heading',
- defaultMessage: 'Email',
- description: 'Column heading for the user email column in the enrolled learners table',
- }),
- key: 'user_email',
- columnSortable: true,
- },
- {
- label: intl.formatMessage({
- id: 'admin.portal.lpr.enrolled.learners.table.lms_user_created.column.heading',
- defaultMessage: 'Account Created',
- description: 'Column heading for the lms user created column in the enrolled learners table',
- }),
- key: 'lms_user_created',
- columnSortable: true,
- },
- {
- label: intl.formatMessage({
- id: 'admin.portal.lpr.enrolled.learners.table.enrollment_count.column.heading',
- defaultMessage: 'Total Course Enrollment Count',
- description: 'Column heading for the course enrollment count column in the enrolled learners table',
- }),
- key: 'enrollment_count',
- columnSortable: true,
- },
- ];
-
- const formatLearnerData = learners => learners.map(learner => ({
- ...learner,
- user_email: {learner.user_email} ,
- lms_user_created: i18nFormatTimestamp({
- intl, timestamp: learner.lms_user_created,
- }),
- }));
+const EnrolledLearnersTable = ({ enterpriseId }) => {
+ const intl = useIntl();
+ const {
+ isLoading,
+ enrolledLearners: tableData,
+ fetchEnrolledLearners: fetchTableData,
+ } = useEnrolledLearners(enterpriseId);
return (
- i18nFormatTimestamp({ intl, timestamp: row.values.lmsUserCreated }),
+ disableFilters: true,
+ },
+ {
+ Header: intl.formatMessage({
+ id: 'admin.portal.lpr.enrolled.learners.table.enrollment_count.column.heading',
+ defaultMessage: 'Total Course Enrollment Count',
+ description: 'Column heading for the course enrollment count column in the enrolled learners table',
+ }),
+ accessor: 'enrollmentCount',
+ disableFilters: true,
+ },
+ ]}
+ initialState={{
+ pageSize: PAGE_SIZE,
+ pageIndex: DEFAULT_PAGE,
+ sortBy: [
+ { id: 'lmsUserCreated', desc: true },
+ ],
+ }}
+ fetchData={fetchTableData}
+ data={tableData.results}
+ itemCount={tableData.itemCount}
+ pageCount={tableData.pageCount}
/>
);
};
-export default EnrolledLearnersTable;
+const mapStateToProps = state => ({
+ enterpriseId: state.portalConfiguration.enterpriseId,
+});
+
+EnrolledLearnersTable.propTypes = {
+ enterpriseId: PropTypes.string.isRequired,
+};
+
+export default connect(mapStateToProps)(EnrolledLearnersTable);
diff --git a/src/eventTracking.js b/src/eventTracking.js
index f7dfd9872f..7525d89a36 100644
--- a/src/eventTracking.js
+++ b/src/eventTracking.js
@@ -17,6 +17,7 @@ const SUBSCRIPTION_PREFIX = `${PROJECT_NAME}.subscriptions`;
const SETTINGS_PREFIX = `${PROJECT_NAME}.settings`;
const CONTENT_HIGHLIGHTS_PREFIX = `${PROJECT_NAME}.content_highlights`;
const LEARNER_CREDIT_MANAGEMENT_PREFIX = `${PROJECT_NAME}.learner_credit_management`;
+const PROGRESS_REPORT_PREFIX = `${PROJECT_NAME}.progress_report`;
// Sub-prefixes
// Subscriptions
@@ -95,6 +96,10 @@ export const CONTENT_HIGHLIGHTS_EVENTS = {
const SETTINGS_ACCESS_PREFIX = `${SETTINGS_PREFIX}.ACCESS`;
+export const PROGRESS_REPORT_EVENTS = {
+ DATATABLE_SORT_BY_OR_FILTER: `${PROGRESS_REPORT_PREFIX}.datatable.sort_by_or_filter.changed`,
+};
+
export const SETTINGS_ACCESS_EVENTS = {
UNIVERSAL_LINK_TOGGLE: `${SETTINGS_ACCESS_PREFIX}.universal-link.toggle.clicked`,
UNIVERSAL_LINK_GENERATE: `${SETTINGS_ACCESS_PREFIX}.universal-link.generate.clicked`,
@@ -184,6 +189,7 @@ const EVENT_NAMES = {
SUBSCRIPTIONS: SUBSCRIPTION_EVENTS,
CONTENT_HIGHLIGHTS: CONTENT_HIGHLIGHTS_EVENTS,
LEARNER_CREDIT_MANAGEMENT: LEARNER_CREDIT_MANAGEMENT_EVENTS,
+ PROGRESS_REPORT: PROGRESS_REPORT_EVENTS,
};
export default EVENT_NAMES;