+
+ // //
+ // //
+ // //
+ // //
+ // //
+ // //
+ // //
+ // // );
+ // });
+
+ // const badgeProgressTabData = Factory.build('badgeProgressTabData');
+ // let courseMetadata = Factory.build('courseHomeMetadata', { user_timezone: 'America/New_York' });
+ // const { id: courseId } = courseMetadata;
+
+ // const badgeProgressUrl = `${getConfig().LMS_BASE_URL}/api/badges/v1/progress/${courseId}`;
+ // let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+ // courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+
+ // function setMetadata(attributes, options) { // eslint-disable-line no-unused-vars
+ // courseMetadata = Factory.build('courseHomeMetadata', { id: courseId, ...attributes }, options);
+ // axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+ // }
+
+ it('Todo: Need Test', () => {
+
+ });
+
+ // describe('when receiving a full set of dates data', () => {
+ // beforeEach(() => {
+ // axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+ // axiosMock.onGet(badgeProgressUrl).reply(200, badgeProgressTabData);
+ // history.push(`/course/${courseId}/badges/progress`); // so tab can pull course id from url
+
+ // render(component);
+ // });
+
+ // it('handles unreleased & complete', async () => {
+ // // const { header } = await getDay('Sun, May 3, 2020');
+ // // const badges = within(header).getAllByTestId('dates-badge');
+ // // expect(badges).toHaveLength(2);
+ // // expect(badges[0]).toHaveTextContent('Completed');
+ // // expect(badges[1]).toHaveTextContent('Not yet released');
+ // });
+ // });
+});
diff --git a/src/course-home/badges-tab/assets/logo-badgr-black.svg b/src/course-home/badges-tab/assets/logo-badgr-black.svg
new file mode 100644
index 0000000000..ec6300017a
--- /dev/null
+++ b/src/course-home/badges-tab/assets/logo-badgr-black.svg
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/src/course-home/badges-tab/assets/logo-badgr-white.svg b/src/course-home/badges-tab/assets/logo-badgr-white.svg
new file mode 100644
index 0000000000..0bca86431b
--- /dev/null
+++ b/src/course-home/badges-tab/assets/logo-badgr-white.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/src/course-home/badges-tab/badge-header/BadgeTabsNavigation.jsx b/src/course-home/badges-tab/badge-header/BadgeTabsNavigation.jsx
new file mode 100644
index 0000000000..8a861a9867
--- /dev/null
+++ b/src/course-home/badges-tab/badge-header/BadgeTabsNavigation.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+// import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+import Tabs from '../../../generic/tabs/Tabs';
+import LinkedLogo from '../logos'; // eslint-disable-line no-unused-vars
+import logo from '../assets/logo-badgr-black.svg'; // eslint-disable-line no-unused-vars
+
+function BadgeTabsNavigation({
+ activeTabSlug, className, intl,
+}) {
+ const tabs = [
+ {
+ title: 'Progress',
+ priority: 1,
+ slug: 'progress',
+ type: 'progress',
+ url: './progress',
+ disabled: false,
+ },
+ {
+ title: 'Leaderboard',
+ priority: 2,
+ slug: 'leaderboard',
+ type: 'leaderboard',
+ url: './leaderboard',
+ disabled: true,
+ },
+ ];
+ // flex-shrink-0
+ return (
+
+
+
+ {/*
+ {title}
+
+ ))}
+
+
+
+ { hasProgress && (
+ <>
+
+
{getPathTitle()}
+
+
+
+ {getPathSubHeading()}
+
+
+
+ )}
+
+ { !hasProgress && (
+
This course either has no learner progress or is not setup for badging.
+ )}
+
+
+ {getBadgeImage('minimal')}
+
+
+
+
+
+
+ {getBadgeImage()}
+
+
+
{data.badgeClass.displayName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{progress.badgeClass.displayName}
+
+
+
+ {progress.badgeClass.description}
+
+
+
+
+
+
+
+
+
+
+
+ View Backpack
+
+
+
+ {progress.assertion.issuedOn && progress.blockDisplayName && (
+
+ {badgeProgressCardStatus}
+
+ )}
+ {progress.assertion.recipient.plaintextIdentity && (
+
+
Recipient
+
{progress.assertion.recipient.plaintextIdentity}
+
+ )}
+ {progress.badgeClass.criteria && (
+
+
Criteria
+ {progress.badgeClass.criteria}
+
+ )}
+ {progress.assertion.issuer && (
+
+
Issuer
+
+
+ {progress.assertion.issuer.name} {progress.assertion.issuer.email}
+
+
+
+ )}
+
+
+
+
+
+
Share your Open Badge with Badgr
+
+ Your achievement has been recognized with an Open Badge , a digital image file with information
+ embedded in it that uniquely identifies your accomplishments.
+
+
+ Badgr is a service that creates and stores Open Badges and lets you share them with others.
+ To share your badge using Badgr, you can send a link to a web page about your badge to others.
+ You can also send the badge image file directly to others, and they can use a badge verification service from Badgr to confirm your accomplishment.
+ For more options, you must first have a Badgr account.
+ You should have received an email the first time you received a badge with
+ instructions about creating a Badgr account. Once you have a Badgr account, you can organize
+ your badges in a Backpack and access tools to help share your badges on social media, embed
+ them in web pages, and more.
+
+
+
+
+
+
+ Create a Badgr account, or log in to your existing account;
+ Share this public URL to your badge ; or
+ Download your badge (right-click or option-click, save as) and share it
+ directly with others. They can verify it's really yours at badgecheck.io .
+
+
+
+
+ {getBadgrLogo()}
+
+
+
+
+
+
+
+ Close
+
+
+
+
+
+ );
+
+ return renderModal();
+};
+
+BadgeProgressCardDetailsModal.propTypes = {
+ progress: PropTypes.shape({
+ courseId: PropTypes.string,
+ blockId: PropTypes.string,
+ blockDisplayName: PropTypes.string,
+ blockOrder: PropTypes.number,
+ eventType: PropTypes.string,
+ badgeClass: PropTypes.shape({
+ slug: PropTypes.string,
+ issuingComponent: PropTypes.string,
+ displayName: PropTypes.string,
+ courseId: PropTypes.string,
+ description: PropTypes.string,
+ criteria: PropTypes.string,
+ image: PropTypes.string,
+ }),
+ assertion: PropTypes.shape({
+ issuedOn: PropTypes.string,
+ entityId: PropTypes.string,
+ expires: PropTypes.string,
+ revoked: PropTypes.bool,
+ imageUrl: PropTypes.string,
+ assertionUrl: PropTypes.string,
+ recipient: PropTypes.shape({
+ plaintextIdentity: PropTypes.string,
+ }),
+ issuer: PropTypes.shape({
+ entityType: PropTypes.string,
+ entityId: PropTypes.string,
+ openBadgeId: PropTypes.string,
+ name: PropTypes.string,
+ image: PropTypes.string,
+ email: PropTypes.string,
+ description: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ }),
+ }).isRequired,
+ minimal: PropTypes.string,
+ badgeProgressCardStatus: PropTypes.oneOfType([PropTypes.object]).isRequired,
+};
+
+BadgeProgressCardDetailsModal.defaultProps = {
+ minimal: '',
+};
+
+export default BadgeProgressCardDetailsModal;
diff --git a/src/course-home/badges-tab/badge-progress/card/BadgeProgressCardStatus.jsx b/src/course-home/badges-tab/badge-progress/card/BadgeProgressCardStatus.jsx
new file mode 100644
index 0000000000..844486e394
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/card/BadgeProgressCardStatus.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Moment from 'react-moment';
+import classNames from 'classnames';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle } from '@fortawesome/free-regular-svg-icons';
+
+const BadgeProgressCardStatus = (props) => {
+ const { status, title, earned } = props;
+
+ const getStatusEarned = () => {
+ // Set the output format for every react-moment instance.
+ Moment.globalFormat = 'MMMM D, YYYY';
+
+ // Set the timezone for every instance.
+ // Moment.globalTimezone = 'America/Los_Angeles';
+
+ // Set the output timezone for local for every instance.
+ Moment.globalLocal = true;
+
+ // Use a tag for every react-moment instance.
+ Moment.globalElement = 'span';
+
+ return (
+ <>
+ {earned && (
+
+ Earned: {earned}
+
+ )}
+
+ );
+ };
+
+ const getStatusIndicator = () => {
+ const indicatorIcon = (status ? faCheckCircle : faCircle);
+ const indicatorStatus = (status ? 'complete' : 'incomplete');
+ return (
+
+ {stripNumPrefix}
+
+ );
+ };
+
+ return (
+ <>
+ {!earned && (
+
+ {getStatusIndicator()}
+ {getStatusTitle()}
+
+ )}
+ {earned && (
+
+
+
+ {getStatusIndicator()}
+ {getStatusTitle()}
+ {getStatusEarned()}
+
+
+
console.log(`This function will be called with the value: ${JSON.stringify(currentState)}}`)}
+ data={getProgressCourseListData()}
+ columns={headings}
+ >
+
+
+ );
+};
+
+BadgeProgressCourseList.propTypes = {
+ data: PropTypes.arrayOf(PropTypes.shape({
+ courseId: PropTypes.string,
+ blockId: PropTypes.string,
+ blockDisplayName: PropTypes.string,
+ blockOrder: PropTypes.number,
+ eventType: PropTypes.string,
+ badgeClass: PropTypes.shape({
+ slug: PropTypes.string,
+ issuingComponent: PropTypes.string,
+ displayName: PropTypes.string,
+ courseId: PropTypes.string,
+ description: PropTypes.string,
+ criteria: PropTypes.string,
+ image: PropTypes.string,
+ }),
+ assertion: PropTypes.shape({
+ issuedOn: PropTypes.string,
+ entityId: PropTypes.string,
+ expires: PropTypes.string,
+ revoked: PropTypes.bool,
+ imageUrl: PropTypes.string,
+ assertionUrl: PropTypes.string,
+ recipient: PropTypes.shape({
+ plaintextIdentity: PropTypes.string,
+ }),
+ issuer: PropTypes.shape({
+ entityType: PropTypes.string,
+ entityId: PropTypes.string,
+ openBadgeId: PropTypes.string,
+ name: PropTypes.string,
+ image: PropTypes.string,
+ email: PropTypes.string,
+ description: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ }),
+ })).isRequired,
+ headings: PropTypes.arrayOf(PropTypes.shape({
+ label: PropTypes.string,
+ key: PropTypes.string,
+ })).isRequired,
+};
+
+export default BadgeProgressCourseList;
diff --git a/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTable.jsx b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTable.jsx
new file mode 100644
index 0000000000..3999c8dec5
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTable.jsx
@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { DataTableContext } from '@edx/paragon';
+
+import BadgeProgressCourseListTableHeaderRow from './BadgeProgressCourseListTableHeaderRow';
+import BadgeProgressCourseListTableRow from './BadgeProgressCourseListTableRow';
+
+const BadgeProgressCourseListTable = ({ isStriped }) => {
+ const useRows = () => {
+ const {
+ getTableProps, prepareRow, page, rows, headerGroups, getTableBodyProps,
+ } = useContext(DataTableContext);
+
+ const displayRows = page || rows;
+
+ return {
+ getTableProps, prepareRow, displayRows, headerGroups, getTableBodyProps,
+ };
+ };
+
+ const {
+ getTableProps, prepareRow, displayRows, headerGroups, getTableBodyProps,
+ } = useRows();
+
+ const renderRows = () => displayRows.map((row) => {
+ prepareRow(row);
+ return (
+
+
+ {column.id === 'username' && (
+ render('Cell')
+ )}
+ {column.id !== 'username' && (
+
+
+);
+
+BadgeProgressCourseListTableCell.defaultProps = {
+ value: '',
+};
+
+BadgeProgressCourseListTableCell.propTypes = {
+ /** Props for the td element */
+ getCellProps: PropTypes.func.isRequired,
+ /** Function that renders the cell contents. Will be called with the string 'Cell' */
+ render: PropTypes.func.isRequired,
+ /** Table column */
+ column: PropTypes.shape({
+ cellClassName: PropTypes.string,
+ id: PropTypes.string,
+ }).isRequired,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.shape(),
+ ]),
+};
+
+export default BadgeProgressCourseListTableCell;
diff --git a/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableHeaderRow.jsx b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableHeaderRow.jsx
new file mode 100644
index 0000000000..edced33f02
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableHeaderRow.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableHeaderCell } from '@edx/paragon';
+
+const BadgeProgressCourseListTableHeaderRow = ({ headerGroups }) => (
+
+ {headerGroups.map(headerGroup => (
+
+ {headerGroup.headers.map(column => (
+
+ ))}
+
+);
+
+BadgeProgressCourseListTableHeaderRow.propTypes = {
+ headerGroups: PropTypes.arrayOf(PropTypes.shape({
+ headers: PropTypes.arrayOf(PropTypes.shape({
+ /** Props for the TableHeaderCell component. Must include a key */
+ getHeaderProps: PropTypes.func.isRequired,
+ })).isRequired,
+ /** Returns props for the header tr element */
+ getHeaderGroupProps: PropTypes.func.isRequired,
+ })).isRequired,
+};
+
+export default BadgeProgressCourseListTableHeaderRow;
diff --git a/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableRow.jsx b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableRow.jsx
new file mode 100644
index 0000000000..ee0a6107df
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/course-list/BadgeProgressCourseListTableRow.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import snakeCase from 'lodash.snakecase';
+
+import BadgeProgressCourseListTableCell from './BadgeProgressCourseListTableCell';
+
+/* key={`${cell.column.Header}${id}`} */
+const BadgeProgressCourseListTableRow = ({
+ getRowProps, cells, id, isSelected,
+}) => (
+
+ {cells.map(cell =>
+);
+
+BadgeProgressCourseListTableRow.defaultProps = {
+ isSelected: false,
+};
+
+BadgeProgressCourseListTableRow.propTypes = {
+ /** props to include on the tr tag (must include id) */
+ getRowProps: PropTypes.func.isRequired,
+ /** cells in the row */
+ cells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+ /** row id */
+ id: PropTypes.string.isRequired,
+ /** indicates if row has been selected */
+ isSelected: PropTypes.bool,
+};
+
+export default BadgeProgressCourseListTableRow;
diff --git a/src/course-home/badges-tab/badge-progress/course-list/index.scss b/src/course-home/badges-tab/badge-progress/course-list/index.scss
new file mode 100644
index 0000000000..3d2c6a0810
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/course-list/index.scss
@@ -0,0 +1,87 @@
+
+/* BadgeProgressCourseList
+ --------------------------------------- */
+.badge-progress-course-list {
+
+ thead {
+ border-bottom: solid 3px theme-color('dark', 400);
+ background-color: theme-color('gray', 200);
+ }
+
+}
+
+.thead-overflow-hidden {
+
+ thead {
+
+ th {
+ overflow: hidden visible;
+ overflow: -moz-hidden-unscrollable;
+ text-overflow: clip;
+ text-transform: uppercase;
+
+ /* Controls the max-width of the badges in table view using table-responsive as well.
+ This is in change of using 'hasFixedColumnWidths' for the table.
+ */
+
+ @media only screen and (min-width: 320px) {
+ max-width: 100px;
+ }
+ @media only screen and (min-width: 768px) {
+ max-width: 100px;
+ }
+ @media only screen and (min-width: 1024px) {
+ max-width: 100px;
+ }
+ @media only screen and (min-width: 1200px) {
+ max-width: 140px;
+ }
+ @media only screen and (min-width: 1400px) {
+ max-width: 140px;
+ }
+ @media only screen and (min-width: 2560px) {
+ max-width: 140px;
+ }
+ }
+
+ }
+
+}
+
+/* BadgeProgressCourseListTable
+ --------------------------------------- */
+.progress-list-item {
+
+ .badge-name {
+
+ min-width: 400px;
+
+ img {
+ max-height: 50px;
+ max-width: 50px;
+ }
+
+ span {
+ display: inline-block;
+ margin-left: 20px;
+ }
+ }
+
+}
+
+.asserted {
+ color: rgba(0,0,0,1);
+}
+
+.not-asserted {
+ color: rgba(0,0,0,0.25);
+
+ .badge-name {
+
+ img {
+ opacity: 0.25;
+ filter: alpha(opacity=25);
+ }
+ }
+}
+
diff --git a/src/course-home/badges-tab/badge-progress/index.js b/src/course-home/badges-tab/badge-progress/index.js
new file mode 100644
index 0000000000..6ddbba0298
--- /dev/null
+++ b/src/course-home/badges-tab/badge-progress/index.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+export { default as BadgeProgressBanner } from './banner/BadgeProgressBanner';
+export { default as BadgeProgressCard } from './card/BadgeProgressCard';
+export { default as BadgeProgressCourseList } from './course-list/BadgeProgressCourseList';
+export { default as BadgeProgressCourseListTable } from './course-list/BadgeProgressCourseListTable';
diff --git a/src/course-home/badges-tab/index.js b/src/course-home/badges-tab/index.js
new file mode 100644
index 0000000000..9e82bd06bc
--- /dev/null
+++ b/src/course-home/badges-tab/index.js
@@ -0,0 +1,2 @@
+export { default as BadgeProgressTab } from './BadgeProgressTab';
+export { default as BadgeLeaderboardTab } from './BadgeLeaderboardTab';
diff --git a/src/course-home/badges-tab/logos.jsx b/src/course-home/badges-tab/logos.jsx
new file mode 100644
index 0000000000..9605f70270
--- /dev/null
+++ b/src/course-home/badges-tab/logos.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function LinkedLogo({
+ href,
+ src,
+ alt,
+ ...attributes
+}) {
+ return (
+
+
+ );
+}
+
+LinkedLogo.propTypes = {
+ href: PropTypes.string.isRequired,
+ src: PropTypes.string.isRequired,
+ alt: PropTypes.string.isRequired,
+};
+
+export default LinkedLogo;
diff --git a/src/course-home/badges-tab/messages.js b/src/course-home/badges-tab/messages.js
new file mode 100644
index 0000000000..25bdbcdc81
--- /dev/null
+++ b/src/course-home/badges-tab/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messagesBadgeProgress = defineMessages({
+ failure: {
+ id: 'badge.progress.loading.failure',
+ defaultMessage: 'There was an error loading the course badge progress.',
+ description: 'Message when course badge progress page fails to load',
+ },
+ loading: {
+ id: 'badge.progress.loading',
+ defaultMessage: 'Loading course badge progress page...',
+ description: 'Message when course badge progress page is being loaded',
+ },
+});
+
+export default messagesBadgeProgress;
diff --git a/src/course-home/badges-tab/utils.js b/src/course-home/badges-tab/utils.js
new file mode 100644
index 0000000000..fb37713a89
--- /dev/null
+++ b/src/course-home/badges-tab/utils.js
@@ -0,0 +1,83 @@
+/* eslint-disable import/prefer-default-export */
+
+import snakeCase from 'lodash.snakecase';
+import { DropdownFilter } from '@edx/paragon';
+import { isEmptyObject } from '../../utils/empty';
+
+// Defines a custom filter filter function for finding badge assertion
+const filterContainsBadgeAssertion = (rows, id, filterValue) => {
+ const isBadgeProgressComplete = (data) => {
+ if (isEmptyObject(data.assertion)) {
+ return false;
+ }
+ return data.assertion.imageUrl.length > 0;
+ };
+
+ return rows.filter(row => {
+ const rowValue = row.values[id];
+ const badgeAsserted = isBadgeProgressComplete(rowValue.props.data);
+
+ return badgeAsserted ? snakeCase(`${rowValue.props.data.blockDisplayName} awarded`) === filterValue : snakeCase(`${rowValue.props.data.blockDisplayName} not awarded`) === filterValue;
+ });
+};
+
+// This is an autoRemove method on the filter function that
+// when given the new filter value and returns true, the filter
+// will be automatically removed. Normally this is just an undefined
+// check, but here, we want to remove the filter if it's not a string or string is empty
+filterContainsBadgeAssertion.autoRemove = val => typeof val !== 'string' || !val;
+
+const headingMapper = (filterKey, data) => {
+ // eslint-disable-next-line no-unused-vars
+ const dataSortable = data.slice();
+
+ function all(entry) {
+ if (entry) {
+ const results = [{
+ Header: 'Student',
+ label: 'Student',
+ key: 'username',
+ accessor: 'username',
+ width: 'col-2',
+ }];
+
+ const progressHeadings = entry.progress
+ .filter(blocks => blocks.blockDisplayName)
+ .map(b => ({
+ Header: b.blockDisplayName.replace(/[0-9]+\./g, ''),
+ accessor: snakeCase(b.blockDisplayName),
+ Filter: DropdownFilter,
+ filter: filterContainsBadgeAssertion,
+ filterChoices: [
+ {
+ name: 'Awarded',
+ value: snakeCase(`${b.blockDisplayName} awarded`),
+ },
+ {
+ name: 'Not Awarded',
+ value: snakeCase(`${b.blockDisplayName} not awarded`),
+ },
+ ],
+ }));
+
+ return results.concat(progressHeadings);
+ }
+ return [];
+ }
+
+ // Todo: Need to implement this.
+ // eslint-disable-next-line no-unused-vars
+ function some(entry) {
+ return [{
+ label: '',
+ key: '',
+ width: 'col-1',
+ }];
+ }
+
+ return filterKey === 'All' ? all : some;
+};
+
+export {
+ headingMapper,
+};
diff --git a/src/course-home/data/__factories__/badgeProgress.factory.js b/src/course-home/data/__factories__/badgeProgress.factory.js
new file mode 100644
index 0000000000..2eda245627
--- /dev/null
+++ b/src/course-home/data/__factories__/badgeProgress.factory.js
@@ -0,0 +1,121 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+Factory.define('badge-progress')
+ .attrs({
+ course_id: 'course-v1:edX+DemoX+Demo_Course',
+ block_id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@dc1e160e5dc348a48a98fa0f4a6e8675',
+ block_display_name: 'Example Week 1: Getting Started',
+ event_type: 'chapter_complete',
+ });
+
+// Default to one badge_class. If badge_class was given, fill in
+// whatever attributes might be missing.
+// .attr('badge_class', ['badge_class'], (badge_class) => {
+// if (!badge_class) {
+// badge_class = [{}];
+// }
+// return badge_class.map((data) => Factory.attributes('badge_class', data));
+// })
+
+// Default to one assertion. If assertion was given, fill in
+// whatever attributes might be missing.
+// .attr('assertion', ['assertion'], (assertion) => {
+// if (!assertion) {
+// assertion = [{}];
+// }
+// return assertion.map((data) => Factory.attributes('assertion', data));
+// })
+
+// {
+// course_id: 'course-v1:edX+DemoX+Demo_Course',
+// block_id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@dc1e160e5dc348a48a98fa0f4a6e8675',
+// block_display_name: 'Example Week 1: Getting Started',
+// event_type: 'chapter_complete',
+// badge_class: {
+// slug: 'special_award',
+// issuing_component: 'openedx__course',
+// display_name: 'Very Special Award',
+// course_id: 'course-v1:edX+DemoX+Demo_Course',
+// description: 'Awarded for people who did something incredibly special',
+// criteria: 'Do something incredibly special.',
+// image: 'http://example.com/media/badge_classes/badges/special_xdpqpBv_9FYOZwN.png'
+// },
+// assertion: {
+// issuedOn: '2019-04-20T02:43:06.566955Z',
+// expires: '2019-04-30T00:00:00.000000Z',
+// revoked: false,
+// image_url: 'http://badges.example.com/media/issued/cd75b69fc1c979fcc1697c8403da2bdf.png',
+// assertion_url: 'http://badges.example.com/public/assertions/07020647-e772-44dd-98b7-d13d34335ca6',
+// recipient: {
+// plaintextIdentity: 'john.doe@example.com'
+// },
+// issuer: {
+// entityType: 'Issuer',
+// entityId: 'npqlh0acRFG5pKKbnb4SRg',
+// openBadgeId: 'https://api.badgr.io/public/issuers/npqlh0acRFG5pKKbnb4SRg',
+// name: 'EducateWorkforce',
+// image: 'https://media.us.badgr.io/uploads/issuers/issuer_logo_77bb4498-838b-45b7-8722-22878fedb5e8.svg',
+// email: 'cucwd.developer@gmail.com',
+// description: 'An online learning solution offered with partnering 2-year colleges to help integrate'
+// 'web and digital solutions into their existing courses. The platform was designed by'
+// 'multiple instructional design, usability, and computing experts to include research-based'
+// 'learning features.',
+// url: 'https://ew-localhost.com'
+// }
+// }
+// },
+
+Factory.define('badge_class')
+ .attrs({
+ slug: 'special_award',
+ issuing_component: 'openedx__course',
+ display_name: 'Very Special Award',
+ course_id: 'course-v1:edX+DemoX+Demo_Course',
+ description: 'Awarded for people who did something incredibly special',
+ criteria: 'Do something incredibly special.',
+ image: 'http://example.com/media/badge_classes/badges/special_xdpqpBv_9FYOZwN.png',
+ });
+
+Factory.define('assertion')
+ .attrs({
+ issuedOn: '2019-04-20T02:43:06.566955Z',
+ expires: '2019-04-30T00:00:00.000000Z',
+ revoked: false,
+ image_url: 'http://badges.example.com/media/issued/cd75b69fc1c979fcc1697c8403da2bdf.png',
+ assertion_url: 'http://badges.example.com/public/assertions/07020647-e772-44dd-98b7-d13d34335ca6',
+ })
+
+ // Default to one recipient. If recipient was given, fill in
+ // whatever attributes might be missing.
+ .attr('recipient', ['recipient'], (recipient) => {
+ if (!recipient) {
+ return {};
+ }
+ return recipient.map((data) => Factory.attributes('recipient', data));
+ })
+
+ // Default to one issuer. If issuer was given, fill in
+ // whatever attributes might be missing.
+ .attr('issuer', ['issuer'], (issuer) => {
+ if (!issuer) {
+ return {};
+ }
+ return issuer.map((data) => Factory.attributes('issuer', data));
+ });
+
+Factory.define('recipient')
+ .attrs({
+ plaintextIdentity: 'john.doe@example.com',
+ });
+
+Factory.define('issuer')
+ .attrs({
+ entityType: 'Issuer',
+ entityId: 'npqlh0acRFG5pKKbnb4SRg',
+ openBadgeId: 'https://api.badgr.io/public/issuers/npqlh0acRFG5pKKbnb4SRg',
+ name: 'EducateWorkforce',
+ image: 'https://media.us.badgr.io/uploads/issuers/issuer_logo_77bb4498-838b-45b7-8722-22878fedb5e8.svg',
+ email: 'cucwd.developer@gmail.com',
+ description: 'An online learning solution offered with partnering 2-year colleges to help integrate web and digital solutions into their existing courses. The platform was designed by multiple instructional design, usability, and computing experts to include research-based learning features.',
+ url: 'https://ew-localhost.com',
+ });
diff --git a/src/course-home/data/__factories__/badgeProgressTabData.factory.js b/src/course-home/data/__factories__/badgeProgressTabData.factory.js
new file mode 100644
index 0000000000..6086b31124
--- /dev/null
+++ b/src/course-home/data/__factories__/badgeProgressTabData.factory.js
@@ -0,0 +1,61 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+import './badgeProgress.factory';
+
+// Sample data helpful when developing & testing, to see a variety of configurations.
+// This set of data is not realistic (mix of having access and not), but it
+// is intended to demonstrate many UI results.
+Factory.define('badgeProgressTabData')
+ .sequence('id', (i) => `course-v1:edX+DemoX+Demo_Course_${i}`)
+ .sequence('user_id')
+ .attrs({
+ user_name: 'TestUser',
+ name: 'Test Username',
+ email: 'test@edx.org',
+ })
+ .attrs(
+ 'progress', ['id'], (id) => { // eslint-disable-line no-unused-vars
+ const progress = [
+ Factory.build(
+ 'badge-progress',
+ {
+ course_id: 'course-v1:edX+DemoX+Demo_Course',
+ block_id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@dc1e160e5dc348a48a98fa0f4a6e8675',
+ block_display_name: 'Example Week 1: Getting Started',
+ event_type: 'chapter_complete',
+ badge_class: {
+ slug: 'special_award',
+ issuing_component: 'openedx__course',
+ display_name: 'Very Special Award',
+ course_id: 'course-v1:edX+DemoX+Demo_Course',
+ description: 'Awarded for people who did something incredibly special',
+ criteria: 'Do something incredibly special.',
+ image: 'http://example.com/media/badge_classes/badges/special_xdpqpBv_9FYOZwN.png',
+ },
+ assertion: {
+ issuedOn: '2019-04-20T02:43:06.566955Z',
+ expires: '2019-04-30T00:00:00.000000Z',
+ revoked: false,
+ image_url: 'http://badges.example.com/media/issued/cd75b69fc1c979fcc1697c8403da2bdf.png',
+ assertion_url: 'http://badges.example.com/public/assertions/07020647-e772-44dd-98b7-d13d34335ca6',
+ recipient: {
+ plaintextIdentity: 'john.doe@example.com',
+ },
+ issuer: {
+ entityType: 'Issuer',
+ entityId: 'npqlh0acRFG5pKKbnb4SRg',
+ openBadgeId: 'https://api.badgr.io/public/issuers/npqlh0acRFG5pKKbnb4SRg',
+ name: 'EducateWorkforce',
+ image: 'https://media.us.badgr.io/uploads/issuers/issuer_logo_77bb4498-838b-45b7-8722-22878fedb5e8.svg',
+ email: 'cucwd.developer@gmail.com',
+ description: 'An online learning solution offered with partnering 2-year colleges to help integrate web and digital solutions into their existing courses. The platform was designed by multiple instructional design, usability, and computing experts to include research-based learning features.',
+ url: 'https://ew-localhost.com',
+ },
+ },
+ },
+ ),
+ ];
+
+ return progress;
+ },
+ );
diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap
index 7be629c665..0e67f6f830 100644
--- a/src/course-home/data/__snapshots__/redux.test.js.snap
+++ b/src/course-home/data/__snapshots__/redux.test.js.snap
@@ -68,6 +68,11 @@ Object {
"title": "Dates",
"url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/dates",
},
+ Object {
+ "slug": "badges-progress",
+ "title": "Badges",
+ "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/badges-progress",
+ },
],
"title": "Demonstration Course",
"userTimezone": "UTC",
@@ -372,6 +377,11 @@ Object {
"title": "Dates",
"url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/dates",
},
+ Object {
+ "slug": "badges-progress",
+ "title": "Badges",
+ "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/badges-progress",
+ },
],
"title": "Demonstration Course",
"userTimezone": "UTC",
@@ -407,6 +417,7 @@ Object {
},
"sections": Object {
"block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
+ "badgeProgress": undefined,
"complete": false,
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"estimatedTime": undefined,
@@ -558,6 +569,11 @@ Object {
"title": "Dates",
"url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/dates",
},
+ Object {
+ "slug": "badges-progress",
+ "title": "Badges",
+ "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/badges-progress",
+ },
],
"title": "Demonstration Course",
"userTimezone": "UTC",
diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
index aaadebf08c..08c6df5b16 100644
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -1,5 +1,5 @@
import { camelCaseObject, getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { logInfo } from '@edx/frontend-platform/logging';
import { appendBrowserTimezoneToUrl } from '../../utils';
@@ -123,6 +123,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
case 'chapter':
models.sections[block.id] = {
+ badgeProgress: block.badge_progress,
complete: block.complete,
id: block.id,
title: block.display_name,
@@ -192,10 +193,54 @@ export async function getCourseHomeCourseMetadata(courseId) {
return normalizeCourseHomeCourseMetadata(data);
}
+export async function getBadgeProgressTabData(courseId) {
+ const { administrator, username } = getAuthenticatedUser();
+ const getProgressApiEndPoint = () => (
+ administrator
+ ? `${getConfig().LMS_BASE_URL}/api/badges/v1/progress/${courseId}`
+ : `${getConfig().LMS_BASE_URL}/api/badges/v1/progress/${courseId}/user/${username}`
+ );
+
+ try {
+ const { data } = await getAuthenticatedHttpClient().get(getProgressApiEndPoint());
+ return camelCaseObject(data);
+ } catch (error) {
+ const { httpErrorStatus } = error && error.customAttributes;
+ if (httpErrorStatus === 404) {
+ global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/badges/progress`);
+ return {};
+ }
+ if (httpErrorStatus === 401) {
+ // The backend sends this for unenrolled and unauthenticated learners, but we handle those cases by examining
+ // courseAccess in the metadata call, so just ignore this status for now.
+ return {};
+ }
+ throw error;
+ }
+}
+
+export async function getBadgeLeaderboardTabData(courseId) {
+ // Todo: Need to define an Badge Leaderboard API endpoint for the LMS
+ // and return the result.
+ const url = `${getConfig().LMS_BASE_URL}/api/badges/v1/leaderboard/courses/${courseId}`;
+ try {
+ const { data } = await getAuthenticatedHttpClient().get(url);
+ return camelCaseObject(data);
+ } catch (error) {
+ const { httpErrorStatus } = error && error.customAttributes;
+ if (httpErrorStatus === 404) {
+ // global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/badges/progress`);
+ return {};
+ }
+ throw error;
+ }
+}
+
// For debugging purposes, you might like to see a fully loaded dates tab.
// Just uncomment the next few lines and the immediate 'return' in the function below
// import { Factory } from 'rosie';
// import './__factories__';
+
export async function getDatesTabData(courseId) {
// return camelCaseObject(Factory.build('datesTabData'));
const url = `${getConfig().LMS_BASE_URL}/api/course_home/dates/${courseId}`;
@@ -286,6 +331,41 @@ export async function getProgressTabData(courseId, targetUserId) {
}
}
+export async function getGlossaryTabData(courseId) {
+ const url = `${getConfig().LMS_BASE_URL}/api/course_home/glossary/${courseId}`;
+ try {
+ const { data } = await getAuthenticatedHttpClient().get(url);
+ return camelCaseObject(data);
+ } catch (error) {
+ const { httpErrorStatus } = error && error.customAttributes;
+ if (httpErrorStatus === 404) {
+ global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/glossary`);
+ return {};
+ }
+ if (httpErrorStatus === 401) {
+ // The backend sends this for unenrolled and unauthenticated learners, but we handle those cases by examining
+ // courseAccess in the metadata call, so just ignore this status for now.
+ return {};
+ }
+ throw error;
+ }
+}
+
+export async function getGlossaryData(courseId) {
+ const encodedCourse = courseId.replace(' ', '+');
+ const url = `http://localhost:18500/api/v1/course_terms?course_id=${encodedCourse}`;
+ try {
+ const { data } = await getAuthenticatedHttpClient().get(url);
+ return data;
+ } catch (error) {
+ const { httpErrorStatus } = error && error.customAttributes;
+ if (httpErrorStatus === 404) {
+ return {};
+ }
+ throw error;
+ }
+}
+
export async function getProctoringInfoData(courseId, username) {
let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
if (username) {
diff --git a/src/course-home/data/index.js b/src/course-home/data/index.js
index c5f79fa6f6..8541ce730d 100644
--- a/src/course-home/data/index.js
+++ b/src/course-home/data/index.js
@@ -1,7 +1,10 @@
export {
+ fetchBadgeProgressTab,
+ fetchBadgeLeaderboardTab,
fetchDatesTab,
fetchOutlineTab,
fetchProgressTab,
+ fetchGlossaryTab,
resetDeadlines,
saveCourseGoal,
} from './thunks';
diff --git a/src/course-home/data/slice.js b/src/course-home/data/slice.js
index b195b420ed..b8efcfe565 100644
--- a/src/course-home/data/slice.js
+++ b/src/course-home/data/slice.js
@@ -9,7 +9,7 @@ export const DENIED = 'denied';
const slice = createSlice({
name: 'course-home',
initialState: {
- courseStatus: 'loading',
+ courseStatus: LOADING,
courseId: null,
toastBodyText: null,
toastBodyLink: null,
diff --git a/src/course-home/data/thunks.js b/src/course-home/data/thunks.js
index 99fdc6fdf8..e1a0424a62 100644
--- a/src/course-home/data/thunks.js
+++ b/src/course-home/data/thunks.js
@@ -3,9 +3,12 @@ import { camelCaseObject } from '@edx/frontend-platform';
import {
executePostFromPostEvent,
getCourseHomeCourseMetadata,
+ getBadgeProgressTabData,
+ getBadgeLeaderboardTabData,
getDatesTabData,
getOutlineTabData,
getProgressTabData,
+ getGlossaryTabData,
postCourseDeadlines,
postCourseGoals,
postDismissWelcomeMessage,
@@ -74,6 +77,14 @@ export function fetchTab(courseId, tab, getTabData, targetUserId) {
};
}
+export function fetchBadgeProgressTab(courseId) {
+ return fetchTab(courseId, 'badge-progress', getBadgeProgressTabData);
+}
+
+export function fetchBadgeLeaderboardTab(courseId) {
+ return fetchTab(courseId, 'badge-leaderboard', getBadgeLeaderboardTabData);
+}
+
export function fetchDatesTab(courseId) {
return fetchTab(courseId, 'dates', getDatesTabData);
}
@@ -82,6 +93,10 @@ export function fetchProgressTab(courseId, targetUserId) {
return fetchTab(courseId, 'progress', getProgressTabData, parseInt(targetUserId, 10) || targetUserId);
}
+export function fetchGlossaryTab(courseId) {
+ return fetchTab(courseId, 'glossary', getGlossaryTabData);
+}
+
export function fetchOutlineTab(courseId) {
return fetchTab(courseId, 'outline', getOutlineTabData);
}
diff --git a/src/course-home/glossary-tab/GlossaryTab.jsx b/src/course-home/glossary-tab/GlossaryTab.jsx
new file mode 100644
index 0000000000..2226c302e9
--- /dev/null
+++ b/src/course-home/glossary-tab/GlossaryTab.jsx
@@ -0,0 +1,362 @@
+import React, {
+ useState,
+ useEffect,
+ useContext,
+ createContext,
+} from 'react';
+
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import './GlossaryTab.scss';
+
+import {
+ DropdownButton,
+ Collapsible,
+ Icon,
+ ActionRow,
+ SearchField,
+ Pagination,
+ Form,
+} from '@edx/paragon';
+
+import { ExpandLess, ExpandMore } from '@edx/paragon/icons';
+import { getGlossaryData } from '../data/api';
+import messages from './messages';
+
+// Getting all necessary contexts and variables
+export const CourseContext = createContext();
+export const KeyTermContext = createContext();
+const ListViewContext = createContext();
+const queryParams = new URLSearchParams(window.location.search);
+const scrolltoParam = queryParams.get('scrollTo');
+const paginationLength = 15;
+
+// Lists all resources
+function ResourceList() {
+ const { resources } = useContext(KeyTermContext);
+
+ resources.sort((a, b) => (a.friendly_name > b.friendly_name ? 1 : -1));
+
+ if (resources.length > 0) {
+ return (
+
+ );
+ }
+ return null;
+}
+
+// Lists all lessons
+function Lessons() {
+ const { lessons } = useContext(KeyTermContext);
+
+ // Sorting list by module name then by lesson name
+ lessons.sort((a, b) => {
+ if (a.module_name === b.module_name) {
+ if (a.lesson_name > b.lesson_name) { return 1; }
+ return -1;
+ }
+ if (a.module_name > b.module_name) { return 1; }
+
+ return -1;
+ });
+
+ if (lessons.length > 0) {
+ return (
+
+ Lessons
+ {
+ lessons.map(lesson => (
+
+ );
+ }
+ return null;
+}
+
+// Gets a specific textbook
+function Lesson({ lesson }) {
+ const { courseId } = useContext(CourseContext);
+ const encodedCourse = courseId.replace(' ', '+');
+ return (
+
+
+ {lesson.module_name}>{lesson.lesson_name}>{lesson.unit_name}
+
+
+ );
+}
+
+// Gets a specific textbook
+function Textbook({ textbook }) {
+ const { courseId } = useContext(CourseContext);
+ const assetId = courseId.replace('course', 'asset');
+
+ const lmsTextbookLink = `http://localhost:18000/${assetId}+type@asset+block@${textbook.textbook_link}#page=${textbook.page_num}`;
+
+ return (
+
+ {textbook.chapter}, pg. {textbook.page_num}
+
+ );
+}
+
+// Lists all textbooks
+function TextbookList() {
+ const { textbooks } = useContext(KeyTermContext);
+ if (textbooks.length > 0) {
+ return (
+
+ Textbooks
+ {
+ textbooks.map(textbook => (
+
+ );
+ }
+ return null;
+}
+
+// Lists all definitions
+function DefinitionsList() {
+ const { definitions } = useContext(KeyTermContext);
+ if (definitions.length > 0) {
+ return (
+
+
Definitions
+ {definitions.map((descr) => (
+
+ ))}
+
+ {key_name}}
+ styling="card-lg"
+ iconWhenOpen={
+
+ );
+ /* eslint-enable camelcase */
+}
+
+// All the data needed for a keyterm.
+function KeyTermData() {
+ return (
+
+
+ );
+}
+
+// Filter modules button
+function ModuleDropdown(termData) {
+ const { filterModules, setFilterModules } = useContext(ListViewContext);
+ const lessons = [];
+ const newSet = new Set();
+
+ termData.value.termData.filter(keyTerm => keyTerm.lessons.forEach(lesson => {
+ if (lessons.find(object => object.module_name === lesson.module_name) === undefined) { lessons.push(lesson); }
+ }));
+
+ lessons.sort((a, b) => (a.module_name > b.module_name ? 1 : -1));
+
+ const handleChange = e => {
+ filterModules.forEach(item => { newSet.add(item); });
+ if (e.target.checked) { newSet.add(e.target.value); } else { newSet.delete(e.target.value); }
+ return setFilterModules(newSet);
+ };
+
+ const buttontitle = filterModules.size > 0 ? `Filter Modules (${filterModules.size})` : 'Filter Modules';
+ return (
+
+
+
+ {lessons.map(lesson => {lesson.module_name} )}
+
+
+
+ );
+}
+
+// Lists all keyterms
+function KeyTermList() {
+ const {
+ filterModules, searchQuery, selectedPage, setPagination,
+ } = useContext(ListViewContext);
+ const { termData } = useContext(CourseContext);
+
+ function paginate(termList, pageSize, pageNumber) {
+ return termList.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
+ }
+
+ const displayTerms = termData
+ .filter(keyTerm => (
+ // First finds all keyterms that have been filtered for
+ filterModules.size === 0
+ || keyTerm.lessons.find(object => filterModules.has(object.module_name)) !== undefined)
+ // Returns keyterms with names or definitions matching search query
+ && (keyTerm.key_name.toString().toLowerCase().includes(searchQuery.toLowerCase())
+ || keyTerm.definitions.find(object => object.description.toLowerCase()
+ .includes(searchQuery.toLowerCase())) !== undefined))
+ .sort((a, b) => {
+ if (a.key_name < b.key_name) { return -1; }
+ if (a.key_name > b.key_name) { return 1; }
+ return 0;
+ });
+
+ setPagination(displayTerms.length / paginationLength);
+ if (displayTerms.length === 0) { setPagination(0); }
+
+ return (
+
+ {displayTerms.length === 0 ? (
No Terms to Display... ) : null}
+ {paginate(displayTerms, paginationLength, selectedPage).map((keyTerm, index) => (
+
+
+ ))}
+
+ );
+}
+
+// Refers to the whole glossary page
+function GlossaryTab({ intl }) {
+ const { courseId } = useSelector(state => state.courseHome);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [filterModules, setFilterModules] = useState(new Set());
+ const [termData, setTermData] = useState([]);
+ const [selectedPage, setSelectedPage] = useState(1);
+ const [pagination, setPagination] = useState();
+ const [expandAll, setExpandAll] = useState(false);
+
+ useEffect(() => {
+ getGlossaryData(courseId)
+ .then((keytermData) => setTermData(keytermData));
+ }, []);
+
+ return (
+ <>
+ {/* Header */}
+
+ {intl.formatMessage(messages.glossaryHeader)}
+
+
+ {/* Search Functions */}
+
+
+ Displaying {pagination > 0 ? 1 + paginationLength * (selectedPage - 1) : 0}
+ -
+ {pagination * paginationLength < paginationLength
+ ? parseInt(pagination * paginationLength, 10)
+ : paginationLength * selectedPage}{' '}
+ of {parseInt(pagination * paginationLength, 10)} items
+
+ {
+ setSearchQuery(value);
+ }}
+ onClear={() => setSearchQuery('')}
+ placeholder="Search"
+ />
+
+
+
+
+ {/* List of Key Terms */}
+
+
+
+
+
+ {pagination === 0 ? null : (
+
parseInt(pagination, 10)
+ ? parseInt(pagination, 10) + 1
+ : pagination
+ }
+ onPageSelect={(value) => setSelectedPage(value)}
+ />
+ )}
+
+
+
+ );
+}
+
+GlossaryTab.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+Textbook.propTypes = {
+ textbook: PropTypes.shape({
+ textbook_link: PropTypes.string,
+ chapter: PropTypes.string,
+ page_num: PropTypes.number,
+ }).isRequired,
+};
+
+Lesson.propTypes = {
+ lesson: PropTypes.shape({
+ id: PropTypes.number,
+ lesson_link: PropTypes.string,
+ module_name: PropTypes.string,
+ lesson_name: PropTypes.string,
+ unit_name: PropTypes.string,
+ }).isRequired,
+};
+
+KeyTerm.propTypes = {
+ index: PropTypes.number.isRequired,
+};
+
+export default injectIntl(GlossaryTab);
diff --git a/src/course-home/glossary-tab/GlossaryTab.scss b/src/course-home/glossary-tab/GlossaryTab.scss
new file mode 100644
index 0000000000..693a740681
--- /dev/null
+++ b/src/course-home/glossary-tab/GlossaryTab.scss
@@ -0,0 +1,138 @@
+
+ .dashboard-container {
+ min-height: 80vh;
+ }
+
+ .key-term_list {
+ display: flex;
+ flex-direction: column;
+ padding:10px;
+ }
+
+ #dropdown-basic-button {
+ margin-left: 10px;
+ }
+
+ .key-term_search {
+ padding-right: 10px;
+ width: 50%;
+ }
+
+ .dropdown-menu {
+ max-height: 250px;
+ overflow-y: scroll;
+ padding: 10px;
+ }
+
+ .pgn__form-label {
+ width: 200px;
+ }
+ // .key-term-container {
+ // display: flex;
+ // flex-direction: column;
+ // }
+
+ .flex-col {
+ display: flex;
+ flex-direction: column;
+ padding-right: 15px;
+ padding-left: 15px;
+ width: 25%;
+ // border-right: 2px solid lightgray;
+ }
+
+ .flex-row {
+ display: flex;
+ flex: 1;
+ }
+
+ .key-term-info {
+ display: flex;
+ align-content: flex-start;
+ flex: 1;
+ }
+
+ .row {
+ width:100%;
+ }
+
+ p {
+ font-size: 0.75em;
+ line-height: 1.5em;
+ /* max-width: 35%; */
+ }
+
+ .sidebar > p {
+ text-align: center;
+ }
+
+ .textbook-container {
+ flex: 1;
+ }
+
+ .menu-bar {
+ padding-bottom: 10px;
+ }
+
+ .bulk-insert-container {
+ text-align: center;
+ }
+
+ .filter-container {
+ text-align: center;
+ }
+
+ .create-key-term {
+ text-align: center;
+ margin-top: 1em;
+ }
+
+ .drag-n-drop {
+ padding-left: 1em;
+ padding-right: 1em;
+ margin-bottom: 10px;
+ }
+
+ p.drag-n-drop {
+ padding-left: 1em;
+ padding-right: 1em;
+ margin-bottom: 25px;
+ margin-top: 10px;
+ }
+
+ br.drag-n-drop {
+ margin: 10px;
+ }
+
+ .footer-container {
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ }
+
+ .modal-col-left {
+ width: 45%;
+ margin: 10px;
+ }
+
+ .modal-col-right {
+ width: 45%;
+ margin: 10px;
+ }
+
+ .action-row {
+ margin-left: 1.5em;
+ margin-right: 0.5em;
+ }
+
+ .float-left {
+ float: left;
+ }
+
+ .float-right {
+ float: right;
+ }
+
+ p.error-message {
+ color: red;
+ }
\ No newline at end of file
diff --git a/src/course-home/glossary-tab/GlossaryTab.test.jsx b/src/course-home/glossary-tab/GlossaryTab.test.jsx
new file mode 100644
index 0000000000..86327f1538
--- /dev/null
+++ b/src/course-home/glossary-tab/GlossaryTab.test.jsx
@@ -0,0 +1,14 @@
+import { screen } from '@testing-library/react';
+
+import {
+ initializeMockApp,
+} from '../../setupTest';
+
+initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');
+
+describe('Glossary Tab', () => {
+ it('has a title', async () => {
+ expect(screen.getByText('Glossary')).toBeInTheDocument();
+ });
+});
diff --git a/src/course-home/glossary-tab/index.jsx b/src/course-home/glossary-tab/index.jsx
new file mode 100644
index 0000000000..d684d52048
--- /dev/null
+++ b/src/course-home/glossary-tab/index.jsx
@@ -0,0 +1,3 @@
+import GlossaryTab from './GlossaryTab';
+
+export default GlossaryTab;
diff --git a/src/course-home/glossary-tab/messages.js b/src/course-home/glossary-tab/messages.js
new file mode 100644
index 0000000000..7011568bf9
--- /dev/null
+++ b/src/course-home/glossary-tab/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ glossaryHeader: {
+ id: 'glossary.header',
+ defaultMessage: 'Glossary',
+ },
+ studioLink: {
+ id: 'glossary.link.studio',
+ defaultMessage: 'View grading in Studio',
+ },
+});
+
+export default messages;
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index 65cd84f396..00eebe37f1 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@edx/paragon';
+import { Button, Collapsible, IconButton } from '@edx/paragon';
import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -20,6 +20,7 @@ function Section({
section,
}) {
const {
+ badgeProgress,
complete,
sequenceIds,
title,
@@ -42,6 +43,7 @@ function Section({
}, []);
const estimatedTimeMinutes = parseInt(estimatedTime / 60, 10) + (estimatedTime % 60 > 0);
+ const badgeProgressUrl = './badges/progress';
const sectionTitle = (
@@ -74,6 +76,19 @@ function Section({
, {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
+ {badgeProgress ? (
+ <>
+ {badgeProgressUrl && (
+
+
+ Badge Progress
+
+
+ )}
+
+ ) : (
+ <>
+ )}
);
diff --git a/src/index.jsx b/src/index.jsx
index fd6d8c3567..b3486b16ba 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -20,12 +20,16 @@ import OutlineTab from './course-home/outline-tab';
import { CourseExit } from './courseware/course/course-exit';
import CoursewareContainer from './courseware';
import CoursewareRedirectLandingPage from './courseware/CoursewareRedirectLandingPage';
+import { BadgeProgressTab, BadgeLeaderboardTab } from './course-home/badges-tab';
import DatesTab from './course-home/dates-tab';
import GoalUnsubscribe from './course-home/goal-unsubscribe';
import ProgressTab from './course-home/progress-tab/ProgressTab';
+import GlossaryTab from './course-home/glossary-tab';
import { TabContainer } from './tab-page';
-import { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from './course-home/data';
+import {
+ fetchBadgeProgressTab, fetchBadgeLeaderboardTab, fetchDatesTab, fetchOutlineTab, fetchProgressTab, fetchGlossaryTab,
+} from './course-home/data';
import { fetchCourse } from './courseware/data';
import initializeStore from './store';
import NoticesProvider from './generic/notices';
@@ -43,11 +47,26 @@ subscribe(APP_READY, () => {
+
+
+
+
+
+
+
+
+
+
+
- {intl.formatMessage(messages.failure)}
+ {intl.formatMessage(notificationMessage)}
diff --git a/src/utils/empty.js b/src/utils/empty.js
new file mode 100644
index 0000000000..16351140ec
--- /dev/null
+++ b/src/utils/empty.js
@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+
+export const isEmptyObject = (obj) => {
+ Object.keys(obj).forEach(k => {
+ if (Object.prototype.hasOwnProperty.call(obj, k)) {
+ return false;
+ }
+ return true;
+ });
+};
+