@nualang/nualang-ui-components 0.1.1236 → 0.1.1238

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -18,6 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function AssignmentCard({
   t = text => text,
+  index = 0,
   assignment,
   handleStartExercise,
   username,
@@ -27,10 +28,17 @@ function AssignmentCard({
   getCourses,
   deleteAssignment,
   handleEditAssignment,
+  progressHelpers,
+  preferred_username,
+  memberId,
+  fetchMemberCourseCompletions,
   lastClickedExerciseId,
   handleViewProgress
 }) {
   const [confirm] = (0, _useConfirm.default)(t);
+  const {
+    useQuery
+  } = _Queries.ReactQuery;
   const handleDeleteAssignment = async (classroomId, assignmentId) => {
     const confirmed = await confirm(t("delete_assignment"), t("delete_assignment_confirmation"));
     if (confirmed) {
@@ -95,6 +103,15 @@ function AssignmentCard({
     ...assignment,
     courses
   };
+  const memberCourseCompletionsQuery = useQuery({
+    queryKey: ["memberAssignmentCourseProgress", memberId, uniqueCourses],
+    queryFn: async () => {
+      const memberCourseCompletions = await fetchMemberCourseCompletions(memberId, uniqueCourses);
+      return memberCourseCompletions.Items;
+    },
+    staleTime: 500000
+  });
+  const memberCourseCompletions = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
     sx: {
       display: "flex",
@@ -109,39 +126,16 @@ function AssignmentCard({
         container: true,
         spacing: 2,
         alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           item: true,
           xs: true,
           flexDirection: "column",
           display: "flex",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             variant: "body1",
             component: "div",
             children: assignment.title
-          }), !isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
-              variant: "determinate",
-              value: assignment.completed / assignment.assignedStudents.length * 100 //change this to the actual value of student completed
-              ,
-              sx: {
-                height: 10,
-                borderRadius: 5,
-                width: "25%"
-              },
-              color: "success"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              variant: "body2",
-              sx: {
-                color: "text.secondary",
-                marginLeft: 1
-              },
-              children: `${Math.round(assignment.completed / assignment.assignedStudents.length * 100)}%`
-            })]
-          })]
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           item: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -154,12 +148,14 @@ function AssignmentCard({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("edit"),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+              "data-cy": `edit-assignment-${index}`,
               onClick: () => handleEditAssignment(assignment),
               children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Edit, {}), " "]
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("delete"),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+              "data-cy": `delete-assignment-${index}`,
               onClick: () => {
                 handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
               },
@@ -196,6 +192,9 @@ function AssignmentCard({
                 isCreator: isCreator,
                 viewOnly: true,
                 useCase: isCreator ? "assignment-view" : "assignment-start",
+                preferred_username: preferred_username,
+                progressHelpers: progressHelpers,
+                memberCourseCompletions: memberCourseCompletions,
                 lastClickedExerciseId: lastClickedExerciseId
               })
             })]

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -26,6 +26,11 @@ const AssignmentCardsList = ({
   deleteAssignment,
   handleEditAssignment,
   refreshAssignments,
+  username,
+  preferred_username,
+  progressHelpers,
+  fetchMemberCourseCompletions,
+  memberId,
   handleViewProgress
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = (0, _react.useState)(null);
@@ -48,7 +53,7 @@ const AssignmentCardsList = ({
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         alignItems: "center",
         sx: {
-          mb: 1
+          my: 2
         },
         display: "flex",
         flexDirection: "column",
@@ -126,7 +131,8 @@ const AssignmentCardsList = ({
         if (isCreator) return true;
         if (!assignment.scheduleDate) return true;
         return new Date(assignment.scheduleDate) <= new Date();
-      }).map(assignment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
+      }).map((assignment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
+        index: index,
         assignment: assignment,
         t: t,
         isCreator: isCreator,
@@ -136,6 +142,11 @@ const AssignmentCardsList = ({
         deleteAssignment: deleteAssignment,
         handleEditAssignment: handleEditAssignment,
         lastClickedExerciseId: lastClickedExerciseId,
+        progressHelpers: progressHelpers,
+        fetchMemberCourseCompletions: fetchMemberCourseCompletions,
+        username: username,
+        preferred_username: preferred_username,
+        memberId: memberId,
         handleViewProgress: handleViewProgress
       }, assignment.assignmentId))]
     })

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _material = require("@mui/material");
+var _ColorLinearProgress = _interopRequireDefault(require("../../Misc/ColorLinearProgress/ColorLinearProgress"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _AssignmentExerciseSelection = _interopRequireDefault(require("../AssignmentExerciseSelection/AssignmentExerciseSelection"));
 var _Queries = require("@nualang/nualang-api-and-queries/Queries");
+var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Course({
@@ -29,12 +31,16 @@ function Course({
   handleStartExercise,
   isCreator,
   viewOnly,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId
 }) {
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split('|') : [];
   const [open, setOpen] = (0, _react.useState)(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split('|')[3] === assignment.assignmentId));
   const [selectedSectionIds, setSelectedSectionIds] = (0, _react.useState)([]);
   const [filteredSections, setFilteredSections] = (0, _react.useState)([]);
+  const [courseSectionCompletion, setCourseSectionCompletion] = (0, _react.useState)(null);
   const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
     const response = await getCourseSections(courseId, filters);
     return response;
@@ -70,6 +76,13 @@ function Course({
       setFilteredSections(courseSections.filter(section => selectedSectionIds.includes(section.sectionId)));
     }
   }, [courseSections, selectedSectionIds, viewOnly]);
+  (0, _react.useEffect)(() => {
+    if (courseSections && memberCourseCompletions && selectedExercises) {
+      const sectionsWithProgress = (0, _utils.calcCompletions)(courseSections, memberCourseCompletions, selectedExercises);
+      const percentCompletion = (0, _utils.calcPercentageCompletion)(sectionsWithProgress);
+      setCourseSectionCompletion(percentCompletion);
+    }
+  }, [courseSections, memberCourseCompletions, selectedExercises]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
     disablePadding: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -92,7 +105,22 @@ function Course({
                 alt: ""
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: course.courseName,
-                secondary: course.description,
+                secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    variant: "body2",
+                    color: "textSecondary",
+                    children: course.description
+                  }), !isCreator && courseSectionCompletion && courseSectionCompletion !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    mt: 1,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                      title: `Completed ${courseSectionCompletion.completed} / ${courseSectionCompletion.total} exercises`,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
+                        variant: "determinate",
+                        value: courseSectionCompletion.percentage
+                      })
+                    })
+                  })]
+                }),
                 sx: {
                   marginLeft: 2
                 }
@@ -130,6 +158,10 @@ function Course({
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
           viewOnly: viewOnly,
+          username: username,
+          preferred_username: preferred_username,
+          progressHelpers: progressHelpers,
+          memberCourseCompletions: memberCourseCompletions,
           lastClickedExerciseId: lastClickedExerciseId
         })
       })
@@ -151,6 +183,9 @@ function AssignmentCourseSelection({
   handleStartExercise,
   isCreator,
   viewOnly,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId,
   ...otherProps
 }) {
@@ -171,6 +206,9 @@ function AssignmentCourseSelection({
       handleStartExercise: handleStartExercise,
       isCreator: isCreator,
       viewOnly: viewOnly,
+      preferred_username: preferred_username,
+      memberCourseCompletions: memberCourseCompletions,
+      progressHelpers: progressHelpers,
       lastClickedExerciseId: lastClickedExerciseId
     }))
   });

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -9,7 +9,6 @@ var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _ImageSearch = _interopRequireDefault(require("@mui/icons-material/ImageSearch"));
-var _PlayCircleOutline = _interopRequireDefault(require("@mui/icons-material/PlayCircleOutline"));
 var _Hearing = _interopRequireDefault(require("@mui/icons-material/Hearing"));
 var _SwapHoriz = _interopRequireDefault(require("@mui/icons-material/SwapHoriz"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
@@ -19,7 +18,13 @@ var _Forum = _interopRequireDefault(require("@mui/icons-material/Forum"));
 var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/OndemandVideo"));
 var _AssignmentRoleplaySelection = _interopRequireDefault(require("../AssignmentRoleplaySelection/AssignmentRoleplaySelection"));
 var _CardElements = require("../../Cards/CardElements");
+var _Progress = require("@nualang/nualang-api-and-queries/APIs/Progress");
+var _mui = require("tss-react/mui");
+var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _reactRouterDom = require("react-router-dom");
+var _Exercises = require("../../Lists/Exercises/Exercises");
+var _ColorLinearProgress = _interopRequireDefault(require("../../Misc/ColorLinearProgress/ColorLinearProgress"));
+var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Exercise({
@@ -35,11 +40,69 @@ function Exercise({
   selectedExercises,
   useCase,
   assignment,
+  progressHelpers,
+  username,
+  preferred_username,
+  isCreator,
+  memberCourseCompletions,
+  completion,
   lastClickedExerciseId
 }) {
   const [listeningHidden, setListeningHidden] = (0, _react.useState)(false);
   const [translationHidden, setTranslationHidden] = (0, _react.useState)(false);
   const [pronunciationHidden, setPronunciationHidden] = (0, _react.useState)(false);
+
+  //progress
+  const [pronunciationProgress, setPronunciationProgress] = (0, _react.useState)(null);
+  const [translationProgress, setTranslationProgress] = (0, _react.useState)(null);
+  const [listeningProgress, setListeningProgress] = (0, _react.useState)(null);
+  const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
+  const {
+    translation,
+    listening,
+    pronunciation
+  } = completion;
+  const courseSectionTopicProgressQuery = _Queries.progress.useTopicMemberProgress(async (courseId, sectionId, topicId, memberId, returnvalues) => {
+    const memberProgress = await (0, _Progress.getCourseSectionTopicProgress)(courseId, sectionId, topicId, memberId, returnvalues);
+    const formattedProgress = await progressHelpers.formatProgress(memberProgress.Items, username, preferred_username);
+    return formattedProgress;
+  }, {
+    courseId: courseId,
+    sectionId: sectionId,
+    topicId: topicId,
+    memberId: username,
+    returnvalues: null
+  }, {
+    enabled: !!username
+  });
+  const topicProgress = courseSectionTopicProgressQuery.isSuccess && Array.isArray(courseSectionTopicProgressQuery.data) && courseSectionTopicProgressQuery.data.length ? courseSectionTopicProgressQuery.data : [];
+  const getExerciseProgress = async exercise => {
+    const exerciseIndex = topicProgress.findIndex(p => p.exercise === exercise);
+    if (exerciseIndex > -1) {
+      return {
+        remainingQuestions: topicProgress[exerciseIndex].remainingQuestions,
+        existingAnswerAttempts: topicProgress[exerciseIndex].answerAttempts,
+        exerciseStartTime: topicProgress[exerciseIndex].exerciseStartTime
+      };
+    }
+    return {
+      remainingQuestions: null,
+      existingAnswerAttempts: null,
+      exerciseStartTime: null
+    };
+  };
+  (0, _react.useEffect)(() => {
+    if (!topicProgress || topicProgress.length === 0 || isCreator) return;
+    const fetchProgress = async () => {
+      const pronuncialtionResult = await getExerciseProgress("pronunciation");
+      setPronunciationProgress(pronuncialtionResult);
+      const translationResult = await getExerciseProgress("translation");
+      setTranslationProgress(translationResult);
+      const listeningProgress = await getExerciseProgress("listening");
+      setListeningProgress(listeningProgress);
+    };
+    fetchProgress();
+  }, [topicProgress, isCreator]);
   const isAssignmentExerciseSelected = selectedExercises?.some(e => e.name === name && e.courseSectionTopicId === courseSectionTopicId);
   const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
   const [roleplaysOpen, setRoleplaysOpen] = (0, _react.useState)(noRoleplays ? false : true);
@@ -48,13 +111,11 @@ function Exercise({
   const {
     classroomId
   } = params;
-  const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
   const addSearchParams = () => {
     const lastClickedExercise = {
       courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}`
     };
     localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    const assignmentParam = encodeURIComponent(JSON.stringify(assignment));
     navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}?exercise=${name}&assignmentId=${assignment.assignmentId}`);
   };
   const handleToggleRoleplays = () => {
@@ -124,8 +185,24 @@ function Exercise({
               courseSectionTopicId
             }]);
           }
-        }), useCase === "assignment-view" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
-          color: "primary"
+        }), useCase === "assignment-view" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), !isCreator && name.toLowerCase() === "pronunciation" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.InProgressBadge, {
+            progressCount: pronunciationProgress && pronunciationProgress.remainingQuestions?.length || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.ProgressBadge, {
+            completions: pronunciation && pronunciation.completedCount ? pronunciation.completedCount : 0
+          })]
+        }), !isCreator && name.toLowerCase() === "translation" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.InProgressBadge, {
+            progressCount: translationProgress && translationProgress.remainingQuestions?.length || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.ProgressBadge, {
+            completions: translation && translation.completedCount ? translation.completedCount : 0
+          })]
+        }), !isCreator && name.toLowerCase() === "listening" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.InProgressBadge, {
+            progressCount: listeningProgress && listeningProgress.remainingQuestions?.length || 0
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.ProgressBadge, {
+            completions: listening && listening.completedCount ? listening.completedCount : 0
+          })]
         })]
       })]
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
@@ -143,6 +220,9 @@ function Exercise({
           selectedExercises: selectedExercises,
           useCase: useCase,
           assignment: assignment,
+          memberCourseCompletions: memberCourseCompletions,
+          topicProgress: topicProgress,
+          isCreator: isCreator,
           lastClickedExerciseId: lastClickedExerciseId
         })
       })
@@ -167,7 +247,12 @@ function ExerciseList({
   assignment,
   handleStartExercise,
   isCreator,
+  progressHelpers,
+  memberCourseCompletions,
+  username,
+  preferred_username,
   lastClickedExerciseId,
+  completion,
   ...otherProps
 }) {
   const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
@@ -195,7 +280,12 @@ function ExerciseList({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
+        completion: completion,
         ...otherProps
       }, keyId);
     })
@@ -211,30 +301,25 @@ function Topic({
   description,
   picture,
   roleplays = [],
-  bots = [],
-  completions = [],
+  // bots = [],
   isMember,
-  nextTopic,
-  prevTopic,
-  handleViewCourseTopic,
   isTopicHidden,
-  completion = {},
-  sectionIndex,
-  index,
-  moveTopic,
-  onDropSection,
   phrases,
   section,
   isExerciseSelected,
   setIsExerciseSelected,
-  getRoleplays,
   handleSelectExercise,
   selectedExercises,
   useCase,
   assignment,
   handleStartExercise,
   isCreator,
+  username,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId,
+  completion,
   ...otherProps
 }) {
   const theme = (0, _styles.useTheme)();
@@ -402,6 +487,35 @@ function Topic({
                 children: description
               })
             })
+          }), !isCreator && completion && completion !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mt: 1,
+            mb: 1,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              display: "inline",
+              flexGrow: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: `Completed ${completion.completed} / ${completion.total} exercises`,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
+                  variant: "determinate",
+                  value: completion.percentage
+                })
+              })
+            })
+          }), isMember && !isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mt: 1,
+            width: isLargeScreen ? "40%" : "100%",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              ml: 1,
+              fontSize: 14,
+              minWidth: 35,
+              children: [completion && completion.percentage ? completion.percentage.toFixed(0) : 0, "%"]
+            })
           }), videoUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
             display: "flex",
             alignItems: "center",
@@ -445,7 +559,7 @@ function Topic({
           section: section,
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
-          roleplays: useCase === "assignment-select" ? selectedExercises?.length > 0 ? roleplays.filter(r => selectedExercises.some(e => e.roleplayId === r.roleplayId)) : roleplays : roleplays,
+          roleplays: roleplays,
           phrases: phrases,
           handleSelectExercise: handleSelectExercise,
           selectedExercises: selectedExercises,
@@ -453,8 +567,13 @@ function Topic({
           assignment: assignment,
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
+          username: username,
+          preferred_username: preferred_username,
+          progressHelpers: progressHelpers,
+          memberCourseCompletions: memberCourseCompletions,
           lastClickedExerciseId: lastClickedExerciseId,
-          ...otherProps
+          ...otherProps,
+          completion: completion
         })
       })]
     })
@@ -478,7 +597,12 @@ function Section({
   handleStartExercise,
   isCreator,
   viewOnly,
+  username,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId,
+  completion,
   ...otherProps
 }) {
   const root = {
@@ -509,15 +633,17 @@ function Section({
   }, [topics, selectedTopicIds, viewOnly]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !isHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
-      subheader: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListSubheader, {
-        disableGutters: true,
-        disableSticky: true,
-        component: "div",
-        id: `${sectionName}-section-list-subheader`,
-        sx: {
-          fontWeight: !isExerciseSelected ? "bold" : "normal"
-        },
-        children: sectionName
+      subheader: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListSubheader, {
+          disableGutters: true,
+          disableSticky: true,
+          component: "div",
+          id: `${sectionName}-section-list-subheader`,
+          sx: {
+            fontWeight: !isExerciseSelected ? "bold" : "normal"
+          },
+          children: sectionName
+        })
       }),
       sx: root,
       children: viewOnly ? filteredTopics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
@@ -531,6 +657,7 @@ function Section({
         t: t,
         ...topic,
         ...otherProps,
+        completion: topic.completion,
         picture: topic.picture,
         isExerciseSelected: isExerciseSelected,
         setIsExerciseSelected: setIsExerciseSelected,
@@ -541,7 +668,11 @@ function Section({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
-        lastClickedExerciseId: lastClickedExerciseId
+        lastClickedExerciseId: lastClickedExerciseId,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions
       }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
         index: i,
         topics: topics,
@@ -553,6 +684,7 @@ function Section({
         t: t,
         ...topic,
         ...otherProps,
+        completion: topic.completion,
         picture: topic.picture,
         isExerciseSelected: isExerciseSelected,
         setIsExerciseSelected: setIsExerciseSelected,
@@ -563,7 +695,11 @@ function Section({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
-        lastClickedExerciseId: lastClickedExerciseId
+        lastClickedExerciseId: lastClickedExerciseId,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions
       }, `${sectionId}-${topic.topicId}`))
     })
   });
@@ -584,11 +720,23 @@ function SectionList({
   handleStartExercise,
   isCreator,
   viewOnly,
+  username,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId,
   ...otherProps
 }) {
+  const [courseSectionWithProgress, setCourseSectionWithProgress] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    if (sections && memberCourseCompletions && selectedExercises) {
+      const sectionsWithProgress = (0, _utils.calcCompletions)(sections, memberCourseCompletions, selectedExercises);
+      setCourseSectionWithProgress(sectionsWithProgress);
+    }
+  }, [sections, memberCourseCompletions, selectedExercises]);
+  const courseSections = courseSectionWithProgress && courseSectionWithProgress.length ? courseSectionWithProgress : sections;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: sections.length > 0 ? sections.map((section, index) => {
+    children: courseSections.length > 0 ? courseSections.map((section, index) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
         index: index,
         handleFetchTopic: handleFetchTopic,
@@ -607,6 +755,10 @@ function SectionList({
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
         viewOnly: viewOnly,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
         ...otherProps
       }, section.sectionId);
@@ -635,6 +787,10 @@ function AssignmentExerciseSelection({
   assignment,
   handleStartExercise,
   viewOnly,
+  username,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId,
   ...otherProps
 }) {
@@ -656,6 +812,10 @@ function AssignmentExerciseSelection({
         assignment: assignment,
         handleStartExercise: handleStartExercise,
         viewOnly: viewOnly,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
         ...otherProps
       })
@@ -679,6 +839,10 @@ function AssignmentExerciseSelection({
       useCase: useCase,
       assignment: assignment,
       viewOnly: viewOnly,
+      username: username,
+      preferred_username: preferred_username,
+      progressHelpers: progressHelpers,
+      memberCourseCompletions: memberCourseCompletions,
       lastClickedExerciseId: lastClickedExerciseId,
       ...otherProps
     })

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -20,6 +20,9 @@ function AssignmentExerciseSelector({
   selectedExercises,
   viewOnly,
   useCase,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions,
   lastClickedExerciseId
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
@@ -35,6 +38,9 @@ function AssignmentExerciseSelector({
       selectedExercises: selectedExercises,
       viewOnly: viewOnly,
       useCase: useCase,
+      preferred_username: preferred_username,
+      progressHelpers: progressHelpers,
+      memberCourseCompletions: memberCourseCompletions,
       lastClickedExerciseId: lastClickedExerciseId
     })
   });