@nualang/nualang-ui-components 0.1.1237 → 0.1.1238

package/dist/Tables/Progress/ProgressTable.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
+var _luxon = require("luxon");
 var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _Timeline = _interopRequireDefault(require("@mui/icons-material/Timeline"));
 var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
@@ -159,6 +160,8 @@ function DataCell({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HtmlTooltip, {
       tabIndex: `${index + 1}`,
       open: tooltipOpen,
+      disableHoverListener: !type,
+      disableFocusListener: !type,
       onOpen: () => setTooltipOpen(true),
       onClose: () => setTooltipOpen(false),
       title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -219,6 +222,7 @@ function ExerciseCell({
 function DataCellContainer({
   t,
   isLoading,
+  isNotAssigned,
   error,
   data,
   memberActivityLink,
@@ -236,6 +240,12 @@ function DataCellContainer({
       data: "A problem has occurred.",
       index: index
     });
+  } else if (isNotAssigned) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataCell, {
+      t: t,
+      data: t('not_assigned'),
+      index: index
+    });
   } else if (data === null || data === undefined || data.percentage === null || data.percentage === undefined || isNaN(data.percentage)) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataCell, {
       t: t,
@@ -325,6 +335,39 @@ function DataCellContainer({
     index: index
   });
 }
+function AssignmentCellData({
+  t,
+  data,
+  isLoading,
+  isNotAssigned,
+  error,
+  memberActivityLink,
+  filter,
+  index
+}) {
+  let cellData = null;
+  if (data) {
+    if (filter === "percentage_complete" && data.percentComplete) {
+      cellData = data.percentComplete;
+      cellData.type = "percent";
+    } else if (filter === "correct_answer_percentage" && data.percentCorrect) {
+      cellData = data.percentCorrect;
+      cellData.type = "correct";
+    } else if (filter === "avg_pronunciation_score" && data.avgPronunciationScore) {
+      cellData = data.avgPronunciationScore;
+      cellData.type = "avgPronuc";
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataCellContainer, {
+    t: t,
+    data: cellData,
+    isLoading: isLoading,
+    error: error,
+    memberActivityLink: memberActivityLink,
+    index: index,
+    isNotAssigned: isNotAssigned
+  });
+}
 function CourseCellData({
   t,
   data,
@@ -546,7 +589,8 @@ function TableRow({
   tableRoleplays,
   tableRoleplayGames,
   tableBots,
-  tableTopics
+  tableTopics,
+  assignments
 }) {
   const {
     memberId
@@ -564,7 +608,8 @@ function TableRow({
     error,
     isLoading
   } = memberCourseCompletionsQuery;
-  const tableData = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length ? (0, _utils.formatMemberCourseCompletions)(courses, memberCourseCompletionsQuery.data.Items, reportType === "assignments" ? selectedAssignment?.exercises : null) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, reportType]);
+  const tableData = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length ? (0, _utils.formatMemberCourseCompletions)(courses, memberCourseCompletionsQuery.data.Items, reportType === "assignments" && selectedAssignment ? selectedAssignment?.exercises : null) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, reportType, selectedAssignment]);
+  const assignmentsTableData = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data.Items) && memberCourseCompletionsQuery.data.Items.length && assignments && assignments.length ? (0, _utils.formatMemberAssignmentCompletions)(assignments, courses, memberCourseCompletionsQuery.data.Items) : [], [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, assignments]);
   let memberActivityLink = `/classrooms/${classroomId}/activity/member/${member.memberId}`;
   if (currentView === "course") {
     memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}`;
@@ -719,7 +764,7 @@ function TableRow({
         data: data,
         isLoading: isLoading,
         error: error,
-        memberActivityLink: `${memberActivityLink}/${tpc.topicId}`,
+        memberActivityLink: `${memberActivityLink}/${currentView === "section" ? tpc.topicId : ""}`,
         filter: filter,
         index: index * 2 * tableTopics.length + i * 2 + 1
       }, `student-progress-data-cell-${i}`);
@@ -783,6 +828,19 @@ function TableRow({
         index: index * 2 * tableRoleplayGames.length + i * 2 + 1,
         roleplayCompletion: tableData[courseId]?.sections[sectionId]?.topics[selectedTopic.topicId].completions.filter(completion => completion.roleplayId === selectedRoleplay?.roleplayId && completion.exercise.replace("roleplay-", "") === roleplay)[0]
       }, i);
+    }), reportType === "assignments" && currentView === "assignments" && assignments.map((a, i) => {
+      const data = assignmentsTableData[a.assignmentId];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(AssignmentCellData, {
+        t: t,
+        data: data,
+        isLoading: isLoading,
+        isNotAssigned: !a?.assignedStudents.includes(memberId),
+        error: error,
+        memberActivityLink: `${memberActivityLink}`,
+        index: index // used to set tabindex for keyboard accessibility
+        ,
+        filter: filter
+      }, `student-progress-data-cell-${i}`);
     })]
   });
 }
@@ -791,13 +849,13 @@ function ProgressTable({
   classroomId,
   courses = [],
   members = [],
-  classroomMembers2 = [],
   fetchMemberCourseCompletions = () => {},
   currentView,
   filter,
   selectedCourse,
   setSelectedCourse,
   deleteCourseId,
+  deleteAssignmentId,
   selectedSection,
   setSelectedSection,
   selectedTopic,
@@ -805,6 +863,8 @@ function ProgressTable({
   selectedRoleplay,
   setSelectedRoleplay,
   selectedAssignment,
+  setSelectedAssignment,
+  assignments,
   hideSorting,
   roleplays,
   bots,
@@ -849,10 +909,15 @@ function ProgressTable({
       } else {
         const aCompletions = queryClient.getQueryData(["memberCourseProgress", a.memberId, courseIds]).Items;
         const bCompletions = queryClient.getQueryData(["memberCourseProgress", b.memberId, courseIds]).Items;
-        const assignmentExercises = reportType === "assignments" ? selectedAssignment?.exercises : null;
-        a.completions = (0, _utils.formatMemberCourseCompletions)(courses, aCompletions, assignmentExercises);
-        b.completions = (0, _utils.formatMemberCourseCompletions)(courses, bCompletions, assignmentExercises);
-        if (currentView === "all_courses") {
+        if (currentView === "assignments") {
+          a.completions = (0, _utils.formatMemberAssignmentCompletions)(courses, aCompletions, assignmentExercises);
+          b.completions = (0, _utils.formatMemberAssignmentCompletions)(courses, bCompletions, assignmentExercises);
+        } else {
+          const assignmentExercises = reportType === "assignments" && selectedAssignment ? selectedAssignment?.exercises : null;
+          a.completions = (0, _utils.formatMemberCourseCompletions)(courses, aCompletions, assignmentExercises);
+          b.completions = (0, _utils.formatMemberCourseCompletions)(courses, bCompletions, assignmentExercises);
+        }
+        if (currentView === "all_courses" || currentView === "assignments") {
           a1 = a.completions[property][percentageAccessor].percentage;
           b1 = b.completions[property][percentageAccessor].percentage;
         } else if (currentView === "course") {
@@ -923,7 +988,7 @@ function ProgressTable({
                   sx: {
                     fontWeight: "bold"
                   },
-                  children: t("student_progress")
+                  children: t("courses")
                 })
               })
             }), currentView === "course" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -961,7 +1026,7 @@ function ProgressTable({
                       sx: {
                         fontWeight: "bold"
                       },
-                      children: t("student_progress")
+                      children: t("courses")
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                       variant: "subtitle1",
                       component: "div",
@@ -1008,7 +1073,7 @@ function ProgressTable({
                       sx: {
                         fontWeight: "bold"
                       },
-                      children: [t("student_progress"), " | ", selectedCourse.courseName]
+                      children: [t("courses"), " | ", selectedCourse.courseName]
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                       variant: "subtitle1",
                       component: "div",
@@ -1048,7 +1113,7 @@ function ProgressTable({
                     sx: {
                       fontWeight: "bold"
                     },
-                    children: [t("student_progress"), " | ", selectedCourse.courseName]
+                    children: [t("courses"), " | ", selectedCourse.courseName]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
                     variant: "subtitle1",
                     component: "div",
@@ -1096,8 +1161,31 @@ function ProgressTable({
                   })]
                 })]
               })
-            }), reportType === "assignments" && currentView === "assignment-topics" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            }), reportType === "assignments" && currentView === "assignments" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                sx: () => ({
+                  width: "100%",
+                  justifyContent: "center"
+                }),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+                  active: sortColumn === "student" && !hideSorting,
+                  direction: sortDirection || "asc",
+                  onClick: () => {
+                    handleSort("student");
+                  },
+                  disabled: hideSorting,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    variant: "subtitle1",
+                    component: "div",
+                    sx: {
+                      fontWeight: "bold"
+                    },
+                    children: t("assignments")
+                  })
+                })
+              })
+            }), reportType === "assignments" && currentView === "assignment-topics" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
                 sx: () => ({
                   display: "flex",
                   // padding: `${theme.spacing(2)} !important`,
@@ -1105,7 +1193,15 @@ function ProgressTable({
                   textAlign: "left",
                   alignItems: "center"
                 }),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                  sx: {
+                    minWidth: 56
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                    onClick: () => deleteAssignmentId(),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBack.default, {})
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
                   active: sortColumn === "student" && !hideSorting,
                   direction: sortDirection || "asc",
                   onClick: () => {
@@ -1118,12 +1214,10 @@ function ProgressTable({
                       textAlign: "left"
                     },
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                      variant: selectedAssignment ? "caption" : "subtitle1",
+                      variant: "caption",
                       component: "div",
-                      sx: {
-                        fontWeight: "bold"
-                      },
-                      children: t("student_progress")
+                      children: `${selectedAssignment?.assignedStudents.length}
+                              ${t("assigned")} | ${t("due_date")} ${_luxon.DateTime.fromISO(selectedAssignment?.dueDate).toLocaleString(_luxon.DateTime.DATE_MED)}`
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                       variant: "subtitle1",
                       component: "div",
@@ -1133,7 +1227,7 @@ function ProgressTable({
                       children: selectedAssignment?.title
                     })]
                   })
-                })
+                })]
               })
             }), reportType === "assignments" && currentView === "assignment-topic" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -1388,6 +1482,56 @@ function ProgressTable({
               },
               children: t(roleplay.replaceAll("-", "_"))
             })
+          }, i)), currentView === "assignments" && assignments.map((assignment, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
+            scope: "col",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                width: "100%",
+                justifyContent: "center"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+                active: sortColumn === assignment.assignmentId,
+                direction: sortDirection || "asc",
+                onClick: () => {
+                  handleSort(assignment.assignmentId);
+                },
+                disabled: hideSorting,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                  sx: {
+                    flex: "1 1 auto"
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    variant: "caption",
+                    component: "div",
+                    sx: {
+                      marginLeft: "20px"
+                    },
+                    children: `${_luxon.DateTime.fromISO(assignment?.dueDate).toLocaleString(_luxon.DateTime.DATE_MED)}`
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    variant: "subtitle1",
+                    component: "div",
+                    sx: {
+                      fontWeight: "bold",
+                      marginLeft: "20px"
+                    },
+                    children: assignment.title
+                  })]
+                })
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultColourButton.default, {
+              "aria-expanded": Boolean(currentView === "assignments"),
+              tabIndex: 0,
+              endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {}),
+              size: "small",
+              onClick: () => setSelectedAssignment(assignment),
+              sx: {
+                fontSize: "0.75rem",
+                "@media print": {
+                  display: "none"
+                }
+              },
+              children: t("view_assignment")
+            })]
           }, i))]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableBody, {
@@ -1412,7 +1556,8 @@ function ProgressTable({
           tableRoleplays: tableRoleplays,
           tableRoleplayGames: tableRoleplayGames,
           tableBots: tableBots,
-          tableTopics: tableTopics
+          tableTopics: tableTopics,
+          assignments: assignments
         }, `student-progress-table-row-${i}`))
       })]
     })

package/dist/Tables/Progress/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatMemberCourseCompletions = void 0;
+exports.formatMemberCourseCompletions = exports.formatMemberAssignmentCompletions = void 0;
 var _utils = require("../../utils");
 const formatMemberCourseCompletions = (courses = [], completions = [], assignmentExercises) => {
   const initialStatsObject = courses.reduce((obj, v) => {
@@ -87,4 +87,45 @@ const formatMemberCourseCompletions = (courses = [], completions = [], assignmen
   }, initialStatsObject);
   return stats;
 };
-exports.formatMemberCourseCompletions = formatMemberCourseCompletions;
+exports.formatMemberCourseCompletions = formatMemberCourseCompletions;
+const formatMemberAssignmentCompletions = (assignments = [], courses = [], completions = []) => {
+  const stats = assignments.reduce((obj, v) => {
+    const assignmentCourseCompletions = formatMemberCourseCompletions(courses, completions, v?.exercises);
+    const result = Object.values(assignmentCourseCompletions).reduce((a, course) => {
+      if (a && course && course.percentComplete) {
+        a.percentComplete.completed += course.percentComplete.completed;
+        a.percentComplete.total += course.percentComplete.total;
+        a.percentComplete.percentage = Math.floor(a.percentComplete.completed / a.percentComplete.total * 100);
+      }
+      if (a && course && course.percentCorrect) {
+        a.percentCorrect.completed += course.percentCorrect.completed;
+        a.percentCorrect.total += course.percentCorrect.total;
+        a.percentCorrect.percentage = Math.floor(a.percentCorrect.completed / a.percentCorrect.total * 100);
+      }
+      if (a && course && course.avgPronunciationScore && course.avgPronunciationScore.percentage > 0) {
+        a.avgPronunciationScore.total += 1;
+        a.avgPronunciationScore.percentage = Math.floor(course.avgPronunciationScore.percentage / a.avgPronunciationScore.total);
+      }
+      return a;
+    }, {
+      percentComplete: {
+        completed: 0,
+        total: 0,
+        percentage: 0
+      },
+      percentCorrect: {
+        completed: 0,
+        total: 0,
+        percentage: 0
+      },
+      avgPronunciationScore: {
+        total: 0,
+        percentage: 0
+      }
+    });
+    obj[v.assignmentId] = result;
+    return obj;
+  }, {});
+  return stats;
+};
+exports.formatMemberAssignmentCompletions = formatMemberAssignmentCompletions;

package/dist/utils/index.js

@@ -118,26 +118,28 @@ const getScoreValues = (type, id, completions) => {
     total: 0,
     percentage: 0
   };
-  completions.forEach(c => {
-    let idMatches = false;
-    if (type === "course") {
-      idMatches = id === c.courseId;
-    } else if (type === "section") {
-      idMatches = `${c.courseId}|${id}` === c.courseSectionId;
-    } else if (type === "topic") {
-      idMatches = `${c.courseSectionId}|${id}` === c.courseSectionTopicId;
-    }
-    if (idMatches) {
-      if (!invalidExercisesCorrectness.includes(c.exercise)) {
-        totalAnswers += c.totalAnswers;
-        totalAnswersCorrect += c.totalAnswersCorrect;
+  if (Array.isArray(completions)) {
+    completions.forEach(c => {
+      let idMatches = false;
+      if (type === "course") {
+        idMatches = id === c.courseId;
+      } else if (type === "section") {
+        idMatches = `${c.courseId}|${id}` === c.courseSectionId;
+      } else if (type === "topic") {
+        idMatches = `${c.courseSectionId}|${id}` === c.courseSectionTopicId;
       }
-      if (validExercisesPronunciation.includes(c.exercise) && c.avgPronunciationScore !== -1) {
-        totalPronunciationScore += c.avgPronunciationScore;
-        pronunciationScoreCount++;
+      if (idMatches) {
+        if (!invalidExercisesCorrectness.includes(c.exercise)) {
+          totalAnswers += c.totalAnswers;
+          totalAnswersCorrect += c.totalAnswersCorrect;
+        }
+        if (validExercisesPronunciation.includes(c.exercise) && c.avgPronunciationScore !== -1) {
+          totalPronunciationScore += c.avgPronunciationScore;
+          pronunciationScoreCount++;
+        }
       }
-    }
-  });
+    });
+  }
   percentCorrect.completed = totalAnswersCorrect;
   percentCorrect.total = totalAnswers;
   percentCorrect.percentage = totalAnswers > 0 ? Math.floor(totalAnswersCorrect / totalAnswers * 100) : 0;
@@ -208,9 +210,9 @@ const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignme
       totalExercises++;
     }
   }
-  const completedPronunciation = completions.filter(c => c.topicId === topic.topicId && c.exercise === "pronunciation").length;
-  const completedTranslation = completions.filter(c => c.topicId === topic.topicId && c.exercise === "translation").length;
-  const completedListening = completions.filter(c => c.topicId === topic.topicId && c.exercise === "listening").length;
+  const completedPronunciation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "pronunciation").length : 0;
+  const completedTranslation = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "translation").length : 0;
+  const completedListening = Array.isArray(completions) ? completions.filter(c => c.topicId === topic.topicId && c.exercise === "listening").length : 0;
   completedExerciseCount += !isPronunciationHidden && completedPronunciation > 0 ? 1 : 0;
   completedExerciseCount += !isTranslationHidden && completedTranslation > 0 ? 1 : 0;
   completedExerciseCount += !isListeningHidden && completedListening > 0 ? 1 : 0;
@@ -224,12 +226,12 @@ const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignme
         completedCount: 0
       };
     }
-    const completedCount = completions.reduce((acc, completion) => {
+    const completedCount = Array.isArray(completions) ? completions.reduce((acc, completion) => {
       if (completion && completion.topicId === topic.topicId && completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplay.roleplayId) {
         acc++;
       }
       return acc;
-    }, 0);
+    }, 0) : 0;
     if (completedCount > 0) {
       completedRoleplays++;
       completedExerciseCount++;
@@ -248,12 +250,12 @@ const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignme
         completedCount: 0
       };
     }
-    const completedCount = completions.reduce((acc, completion) => {
+    const completedCount = Array.isArray(completions) ? completions.reduce((acc, completion) => {
       if (completion && completion.exercise === "bot" && completion.botId === bot.botId) {
         acc++;
       }
       return acc;
-    }, 0);
+    }, 0) : 0;
     if (completedCount > 0) {
       completedBots++;
       completedExerciseCount++;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1237",
+  "version": "0.1.1238",
   "main": "dist/index.js",
   "files": [
     "dist",