@nualang/nualang-ui-components 0.1.1232 → 0.1.1234

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -27,7 +27,8 @@ function AssignmentCard({
   getCourses,
   deleteAssignment,
   handleEditAssignment,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  handleViewProgress
 }) {
   const [confirm] = (0, _useConfirm.default)(t);
   const handleDeleteAssignment = async (classroomId, assignmentId) => {
@@ -242,6 +243,9 @@ function AssignmentCard({
                 marginTop: 2,
                 marginLeft: "15px"
               },
+              onClick: () => handleViewProgress({
+                assignmentId: assignment?.assignmentId
+              }),
               children: t("view_progress")
             })]
           })]

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -25,7 +25,8 @@ const AssignmentCardsList = ({
   getRoleplays,
   deleteAssignment,
   handleEditAssignment,
-  refreshAssignments
+  refreshAssignments,
+  handleViewProgress
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
@@ -134,7 +135,8 @@ const AssignmentCardsList = ({
         getRoleplays: getRoleplays,
         deleteAssignment: deleteAssignment,
         handleEditAssignment: handleEditAssignment,
-        lastClickedExerciseId: lastClickedExerciseId
+        lastClickedExerciseId: lastClickedExerciseId,
+        handleViewProgress: handleViewProgress
       }, assignment.assignmentId))]
     })
   });

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -372,16 +372,6 @@ function Classroom({
   userInitialValues,
   handleDuplicateCourse,
   freeTrial,
-  reportFilters = [],
-  filter,
-  handleFilterChange,
-  reportTypes = [],
-  reportType,
-  handleReportTypeChange,
-  assignmentOptions,
-  assignmentValue,
-  handleAssignmentChange,
-  selectedAssignment,
   handleDeleteClassroomMember,
   handleUpdateClassroomMember,
   vchatProps = {},
@@ -467,6 +457,12 @@ function Classroom({
       handleOpenCreatorNotSubscribedUpgradeModal();
     }
   }, [creatorSubscription]);
+  const handleViewProgress = ({
+    assignmentId
+  }) => {
+    setOverwriteValue(tabs.findIndex(tab => tab.id === "Progress"));
+    navigate(`?assignmentId=${assignmentId}&reportType=assignments#Progress`);
+  };
   (0, _react.useEffect)(() => {
     const handleHashChange = () => {
       if (window.location.hash === "#Settings" && tabs) {
@@ -871,18 +867,10 @@ function Classroom({
         memberId: !isCreator && username,
         username: username,
         getCourseSections: getCourseSections,
-        reportFilters: reportFilters,
-        filter: filter,
-        handleFilterChange: handleFilterChange,
-        reportTypes: reportTypes,
-        reportType: reportType,
-        handleReportTypeChange: handleReportTypeChange,
-        assignmentOptions: assignmentOptions,
-        assignmentValue: assignmentValue,
-        handleAssignmentChange: handleAssignmentChange,
-        selectedAssignment: selectedAssignment,
+        assignments: assignments,
         submissions: submissionsTableData,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        isVideoChatEnabled: isVideoChatEnabled && isVideoChatEnabledInSettings
       })
     }, `tab-content-progress`)
   }, ...(isUserInternal && process.env.REACT_APP_STAGE === "dev" ? [{
@@ -892,6 +880,7 @@ function Classroom({
     TabContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCardsList.default, {
         t: t,
+        handleViewProgress: handleViewProgress,
         isCreator: isCreator,
         assignments: assignments,
         courses: courses,

package/dist/Tables/Progress/Progress.js

@@ -36,22 +36,29 @@ const TableToolbar = ({
   selectedMembers,
   setSelectedMembers,
   generateOverview,
-  reportFilterOptions,
+  reportFilters,
   filter,
-  handleFilterChange,
-  reportTypeOptions,
-  handleReportTypeChange,
+  setFilter,
+  reportTypes,
+  setReportType,
   reportType,
-  assignmentOptions,
-  assignmentValue,
-  handleAssignmentChange,
+  assignments,
+  selectedAssignment,
+  setSelectedAssignment,
   currentView
 }) => {
-  // const queryClient = useQueryClient();
   const {
     useQueryClient
   } = _Queries.ReactQuery;
   const queryClient = useQueryClient();
+  const reportFilterOptions = reportFilters.map((r, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+    value: r,
+    children: t(r)
+  }, `classroomreportfilter_${idx}`));
+  const reportTypeOptions = reportTypes.map((r, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+    value: r,
+    children: t(r)
+  }, `classroomreporttype_${idx}`));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
     container: true,
     spacing: 1,
@@ -74,7 +81,7 @@ const TableToolbar = ({
         "data-cy": "report_type",
         label: t("report_type"),
         value: reportType,
-        onChange: handleReportTypeChange,
+        onChange: e => setReportType(e.target.value),
         margin: "dense",
         variant: "outlined",
         sx: {
@@ -91,7 +98,7 @@ const TableToolbar = ({
         "data-cy": "report_views",
         label: t("report_views"),
         value: filter,
-        onChange: handleFilterChange,
+        onChange: e => setFilter(e.target.value),
         margin: "dense",
         variant: "outlined",
         sx: {
@@ -107,16 +114,16 @@ const TableToolbar = ({
         name: t("assignment"),
         "data-cy": "assignment",
         label: t("assignment"),
-        value: assignmentValue,
-        onChange: handleAssignmentChange,
+        value: selectedAssignment?.assignmentId,
+        onChange: e => setSelectedAssignment(assignments.find(a => a.assignmentId === e.target.value)),
         margin: "dense",
         variant: "outlined",
         sx: {
           minWidth: 250
         },
-        children: assignmentOptions.map((assignment, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          value: assignment,
-          children: t(assignment)
+        children: assignments.map((assignment, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: assignment.assignmentId,
+          children: t(assignment.title)
         }, `assignment_${idx}`))
       })
     }), reportType !== "discuss" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
@@ -181,19 +188,11 @@ function Progress({
   memberId,
   username,
   getCourseSections,
-  reportFilters,
-  filter,
-  handleFilterChange,
-  reportTypes,
-  reportType,
-  handleReportTypeChange,
-  assignmentOptions,
-  assignmentValue,
-  handleAssignmentChange,
   submissions,
   courseIds,
   featureFlags,
-  selectedAssignment
+  assignments = [],
+  isVideoChatEnabled
 }) {
   const theme = (0, _styles.useTheme)();
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
@@ -202,26 +201,28 @@ function Progress({
     useQueries
   } = _Queries.ReactQuery;
   const queryClient = useQueryClient();
+  const [selectedAssignment, setSelectedAssignment] = (0, _react.useState)(null);
   const [selectedCourse, setSelectedCourse] = (0, _react.useState)(null);
   const [selectedSection, setSelectedSection] = (0, _react.useState)(null);
   const [selectedTopic, setSelectedTopic] = (0, _react.useState)(null);
   const [selectedRoleplay, setSelectedRoleplay] = (0, _react.useState)(null);
   const [roleplays, setRoleplays] = (0, _react.useState)([]);
   const [bots, setBots] = (0, _react.useState)([]);
+  const reportFilters = ["percentage_complete", "correct_answer_percentage", "avg_pronunciation_score"];
+  const [filter, setFilter] = (0, _react.useState)(reportFilters[0]);
+  const reportTypes = isVideoChatEnabled ? ["exercises", "assignments", "discuss"] : ["exercises", "assignments"];
+  const [reportType, setReportType] = (0, _react.useState)(reportTypes[0]);
   (0, _react.useEffect)(() => {
     if (selectedTopic) {
       setRoleplays(selectedTopic?.roleplays);
       setBots(selectedTopic?.bots);
     }
   }, [selectedTopic]);
-  const reportFilterOptions = reportFilters.map((r, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-    value: r,
-    children: t(r)
-  }, `classroomreportfilter_${idx}`));
-  const reportTypeOptions = reportTypes.map((r, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-    value: r,
-    children: t(r)
-  }, `classroomreporttype_${idx}`));
+  (0, _react.useEffect)(() => {
+    if (!selectedAssignment && assignments && assignments.length) {
+      setSelectedAssignment(assignments[0]);
+    }
+  }, [selectedAssignment, assignments]);
   const courseSectionsQueries = useQueries({
     queries: (courses || []).map(({
       courseId
@@ -262,6 +263,15 @@ function Progress({
     if ("URLSearchParams" in window) {
       const searchParams = (0, _utils2.searchStringToObj)(window.location.search);
       const courseId = searchParams.courseId;
+      const assignmentId = searchParams.assignmentId;
+      if (searchParams.reportType && reportTypes.includes(searchParams.reportType) && reportType !== searchParams.reportType) {
+        setReportType(searchParams.reportType);
+      }
+      if (assignmentId && !selectedAssignment && assignments && assignments.length) {
+        const assignmentIndex = assignments.findIndex(a => a.assignmentId === assignmentId);
+        const assignment = assignments[assignmentIndex];
+        setSelectedAssignment(assignment);
+      }
       if (courseId && !selectedCourse && coursesWithSections && coursesWithSections.length) {
         const courseIndex = coursesWithSections.findIndex(c => c.courseId === courseId);
         const course = coursesWithSections[courseIndex];
@@ -286,11 +296,21 @@ function Progress({
         }
       }
     }
-  }, [coursesWithSections, coursesWithSections.length, selectedCourse, selectedSection, selectedTopic, selectedRoleplay]); // on initial render, check for params in url and set the selected items
+  }, [coursesWithSections, coursesWithSections.length, selectedCourse, selectedSection, selectedTopic, selectedRoleplay, assignments, selectedAssignment]); // on initial render, check for params in url and set the selected items
 
   (0, _react.useEffect)(() => {
     if ("URLSearchParams" in window) {
       const searchParams = (0, _utils2.searchStringToObj)(window.location.search);
+      if (reportType && reportType !== reportTypes[0]) {
+        searchParams["reportType"] = reportType;
+      } else {
+        delete searchParams["reportType"];
+      }
+      if (selectedAssignment) {
+        searchParams["assignmentId"] = selectedAssignment.assignmentId;
+      } else {
+        delete searchParams["assignmentId"];
+      }
       if (selectedCourse) {
         searchParams["courseId"] = selectedCourse.courseId;
         if (selectedSection) {
@@ -312,7 +332,7 @@ function Progress({
       const newRelativePathQuery = window.location.pathname + "?" + (0, _utils2.objToSearchString)(searchParams) + window.location.hash;
       window.history.pushState(null, "", newRelativePathQuery);
     }
-  }, [selectedCourse, selectedSection, selectedTopic, selectedRoleplay]); // If selections change, update the url to reflect those changes
+  }, [selectedCourse, selectedSection, selectedTopic, selectedRoleplay, selectedAssignment, reportType]); // If selections change, update the url to reflect those changes
 
   let classroomMembers = members.sort((a, b) => (a.username || "").localeCompare(b.username || ""));
   let currentView = "all_courses";
@@ -441,15 +461,15 @@ function Progress({
         selectedMembers: selectedMembers,
         setSelectedMembers: setSelectedMembers,
         generateOverview: generateOverview,
-        reportFilterOptions: reportFilterOptions,
+        reportFilters: reportFilters,
         filter: filter,
-        handleFilterChange: handleFilterChange,
-        reportTypeOptions: reportTypeOptions,
-        handleReportTypeChange: handleReportTypeChange,
+        setFilter: setFilter,
+        reportTypes: reportTypes,
+        setReportType: setReportType,
         reportType: reportType,
-        assignmentOptions: assignmentOptions,
-        assignmentValue: assignmentValue,
-        handleAssignmentChange: handleAssignmentChange,
+        assignments: assignments,
+        selectedAssignment: selectedAssignment,
+        setSelectedAssignment: setSelectedAssignment,
         currentView: currentView
       }), reportType === "discuss" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
         container: true,
@@ -510,15 +530,15 @@ function Progress({
       selectedMembers: selectedMembers,
       setSelectedMembers: setSelectedMembers,
       generateOverview: generateOverview,
-      reportFilterOptions: reportFilterOptions,
+      reportFilters: reportFilters,
       filter: filter,
-      handleFilterChange: handleFilterChange,
-      reportTypeOptions: reportTypeOptions,
-      handleReportTypeChange: handleReportTypeChange,
+      setFilter: setFilter,
+      reportTypes: reportTypes,
+      setReportType: setReportType,
       reportType: reportType,
-      assignmentOptions: assignmentOptions,
-      assignmentValue: assignmentValue,
-      handleAssignmentChange: handleAssignmentChange,
+      assignments: assignments,
+      selectedAssignment: selectedAssignment,
+      setSelectedAssignment: setSelectedAssignment,
       currentView: currentView
     }), reportType === "discuss" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
       container: true,

package/dist/Tables/Progress/ProgressTable.js

@@ -811,11 +811,11 @@ function ProgressTable({
   featureFlags,
   reportType
 }) {
-  const selectedAssignmentTopics = selectedAssignment?.exercises.map(e => e.courseSectionTopicId);
+  const selectedAssignmentTopics = (selectedAssignment?.exercises || [])?.map(e => e.courseSectionTopicId);
   const assignmentTopics = courses.flatMap(c => c.sections.flatMap(s => s.topics)).filter(t => selectedAssignmentTopics?.includes(`${t.courseSectionId}|${t.topicId}`));
   const topics = reportType === "exercises" && selectedCourse && selectedSection ? selectedCourse.sections[selectedCourse.sections.findIndex(s => s.sectionId === selectedSection.sectionId)].topics : [];
   const tableTopics = reportType === "assignments" ? assignmentTopics : topics;
-  const assignmentExercises = reportType === "assignments" && selectedTopic ? selectedAssignment?.exercises.filter(e => e.courseSectionTopicId === `${selectedTopic.courseSectionId}|${selectedTopic.topicId}`) : [];
+  const assignmentExercises = reportType === "assignments" && selectedTopic ? (selectedAssignment?.exercises || []).filter(e => e.courseSectionTopicId === `${selectedTopic.courseSectionId}|${selectedTopic.topicId}`) : [];
   const exercises = ["translation", "listening", "pronunciation"];
   const tableExercises = assignmentExercises && assignmentExercises.length ? exercises.filter(e => assignmentExercises.some(ae => ae.name === e)) : exercises;
   const tableRoleplays = assignmentExercises && assignmentExercises.length ? roleplays.filter(r => assignmentExercises.some(ae => ae.roleplayId === r.roleplayId)) : roleplays;

package/package.json

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