Merge in badging frontend from Feature.nutmeg/badges

package.json

@@ -44,12 +44,20 @@
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.1",
     "core-js": "3.21.1",
+    "iframe-resizer": "^4.3.2",
     "js-cookie": "3.0.1",
     "lodash.camelcase": "4.3.0",
+    "lodash.snakecase": "^4.1.1",
+    "mime-types": "^2.1.34",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.34",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-download-link": "^2.3.0",
     "react-helmet": "6.1.0",
+    "react-markdown": "^8.0.0",
+    "react-moment": "^1.1.1",
     "react-redux": "7.2.8",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",

src/course-home/badges-tab/BadgeLeaderboardTab.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+// import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../generic/model-store';
+
+import { BadgeTabsNavigation } from './badge-header';
+
+// {
+//   intl
+// }
+function BadgeLeaderboardTab() {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const { administrator, username } = getAuthenticatedUser();
+
+  const {
+    enrollmentMode,
+  } = useModel('courses', courseId);
+
+  const activeTabSlug = 'leaderboard';
+
+  return (
+    <>
+      <main className="d-flex flex-column">
+        <BadgeTabsNavigation className="mb-3 py-2" activeTabSlug={activeTabSlug} />
+        <div className="container-fluid">
+          <section>
+            <div className="mb-4">
+              the user is {username} and they are enrolled as an {enrollmentMode} learner
+              {administrator
+              && <div><p>the user is admin</p></div>}
+            </div>
+          </section>
+        </div>
+      </main>
+    </>
+  );
+}
+
+// BadgeLeaderboardTab.propTypes = {
+//   intl: intlShape.isRequired,
+// };
+
+// export default injectIntl(BadgeLeaderboardTab);
+export default BadgeLeaderboardTab;

src/course-home/badges-tab/BadgeProgressTab.jsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+// import PropTypes from 'prop-types';
+import snakeCase from 'lodash.snakecase';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { StatusAlert } from '@edx/paragon';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { useModel } from '../../generic/model-store';
+
+import { BadgeTabsNavigation } from './badge-header';
+import { BadgeProgressBanner, BadgeProgressCard, BadgeProgressCourseList } from './badge-progress';
+
+import { headingMapper } from './utils';
+
+function BadgeProgressTab({ intl }) { // eslint-disable-line
+  const activeTabSlug = 'progress';
+
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    administrator,
+    username,
+    roles // eslint-disable-line
+  } = getAuthenticatedUser();
+
+  const hasInstructorStaffRights = () => administrator;
+
+  const [progress, setProgress] = useState([]);
+
+  const {
+    id,
+    ...badgeProgressState
+  } = useModel('badge-progress', courseId);
+
+  const hasBadgeProgress = () => progress && progress.length > 0;
+  useEffect(() => {
+    let classProgressExists = 0;
+    let badgeProgress = Object.values(badgeProgressState); // eslint-disable-line
+    if (hasInstructorStaffRights()) {
+      badgeProgress.forEach(student => {
+        if (student.progress.length) {
+          classProgressExists += 1;
+        }
+      });
+      if (classProgressExists) {
+        setProgress(badgeProgress);
+      }
+    } else {
+      setProgress(badgeProgress);
+    }
+  }, [courseId, administrator]);
+
+  const renderBadgeProgress = () => {
+    const defaultAssignmentFilter = 'All';
+
+    if (hasInstructorStaffRights()) {
+      return (
+        <>
+          <BadgeTabsNavigation className="mb-3 py-2" activeTabSlug={activeTabSlug} />
+          <BadgeProgressBanner
+            hasProgress={hasBadgeProgress()}
+            hasRights={hasInstructorStaffRights()}
+          />
+          <BadgeProgressCourseList
+            data={progress}
+            headings={headingMapper(defaultAssignmentFilter, progress)(progress[0])}
+          />
+        </>
+      );
+    }
+
+    /*
+      <section>
+        <div className="mb-4">
+          the user is {username} and they are enrolled as an {enrollmentMode} learner
+          {administrator
+          && <div><p>the user is admin</p></div>}
+        </div>
+      </section>
+    */
+    return (
+      <>
+        <div className="d-flex flex-column">
+          <BadgeTabsNavigation className="mb-3 py-2" activeTabSlug={activeTabSlug} />
+          <BadgeProgressBanner hasProgress={hasBadgeProgress()} hasRights={hasInstructorStaffRights()} />
+          <div className="container-fluid">
+            <section className="row">
+              <div className="col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                {progress && (
+                  <div className="row equal-col-height">
+                    {progress.map(learnerProgress => {
+                      const itemKey = snakeCase(`card ${learnerProgress.blockDisplayName} ${username}`);
+                      return (
+                        <BadgeProgressCard key={`${itemKey}`} data={learnerProgress} />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </section>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const renderNoBadgeProgress = () => (
+    <StatusAlert
+      dialog={(
+        <>
+          <FontAwesomeIcon icon={faExclamationCircle} className="mr-2" />
+          There is no course badge progress to show.
+        </>
+      )}
+      alertType="info"
+      dismissible={false}
+      open
+    />
+  );
+
+  return (
+    <>
+      {hasBadgeProgress() && (
+        renderBadgeProgress()
+      )}
+      {!hasBadgeProgress() && (
+        renderNoBadgeProgress()
+      )}
+    </>
+  );
+}
+
+BadgeProgressTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BadgeProgressTab);