@nualang/nualang-ui-components 0.1.1225 → 0.1.1226

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -6,27 +6,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = AssignmentCard;
 var _react = _interopRequireWildcard(require("react"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _AssignmentExerciseSelector = _interopRequireDefault(require("../../Misc/AssignmentExerciseSelector/AssignmentExerciseSelector"));
+var _AssignmentExerciseSelector = _interopRequireDefault(require("../AssignmentExerciseSelector/AssignmentExerciseSelector"));
+var _Queries = require("@nualang/nualang-api-and-queries/Queries");
+var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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,
+  t = text => text,
   assignment,
   handleStartExercise,
   username,
   getCourseSections,
   getRoleplays,
-  isCreator
+  isCreator,
+  getCourses,
+  deleteAssignment,
+  handleEditAssignment
 }) {
-  t = text => text;
   const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [confirm] = (0, _useConfirm.default)(t);
+  const handleDeleteAssignment = async (classroomId, assignmentId) => {
+    const confirmed = await confirm(t('delete_assignment'), t('delete_assignment_confirmation'));
+    if (confirmed) {
+      await deleteAssignment(classroomId, assignmentId);
+    }
+  };
   const calculateDaysUntilDue = dueDate => {
     const now = new Date();
     const due = new Date(dueDate);
@@ -46,6 +56,38 @@ function AssignmentCard({
     event.stopPropagation();
     setExpanded(prev => !prev);
   };
+  const {
+    uniqueCourses
+  } = (0, _react.useMemo)(() => {
+    const courses = new Set();
+    assignment?.exercises?.forEach(({
+      courseSectionTopicId,
+      name
+    }) => {
+      if (courseSectionTopicId) {
+        const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
+        courses.add(courseId);
+      }
+    });
+    return {
+      uniqueCourses: [...courses]
+    };
+  }, [assignment?.exercises]);
+  const coursesQuery = _Queries.courses.useCourses(async filters => {
+    const response = await getCourses(filters);
+    return response;
+  }, {
+    filters: {
+      courseIds: uniqueCourses?.toString()
+    }
+  }, {
+    enabled: !!uniqueCourses?.length
+  });
+  const courses = (0, _react.useMemo)(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
+  assignment = {
+    ...assignment,
+    courses
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
     sx: {
       display: "flex",
@@ -60,16 +102,7 @@ function AssignmentCard({
         container: true,
         spacing: 2,
         alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          item: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-            sx: {
-              width: 50,
-              height: 50
-            },
-            src: assignment.image
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
           item: true,
           xs: true,
           flexDirection: "column",
@@ -85,7 +118,7 @@ function AssignmentCard({
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
               variant: "determinate",
-              value: assignment.completed / assignment.assigned * 100 //change this to the actual value of student completed
+              value: assignment.completed / assignment.assignedStudents.length * 100 //change this to the actual value of student completed
               ,
               sx: {
                 height: 10,
@@ -99,17 +132,21 @@ function AssignmentCard({
                 color: "text.secondary",
                 marginLeft: 1
               },
-              children: `${Math.round(assignment.completed / assignment.assigned * 100)}%`
+              children: `${Math.round(assignment.completed / assignment.assignedStudents.length * 100)}%`
             })]
           })]
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
           item: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            onClick: () => handleEditAssignment(assignment),
             color: "primary",
             children: t("edit")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
             color: "primary",
-            children: t("delete")
+            onClick: () => {
+              handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
+            },
+            children: [t("delete"), " "]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           item: true,
@@ -140,7 +177,7 @@ function AssignmentCard({
             md: 9.5,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               variant: "body2",
-              children: assignment.description
+              children: assignment.instructions
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
               mt: 2,
               width: "80%",
@@ -151,8 +188,9 @@ function AssignmentCard({
                 username: username,
                 getCourseSections: getCourseSections,
                 getRoleplays: getRoleplays,
-                isAssignment: true,
-                isCreator: isCreator
+                isCreator: isCreator,
+                viewOnly: true,
+                useCase: isCreator ? "assignment-view" : "assignment-start"
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
@@ -169,7 +207,7 @@ function AssignmentCard({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "h4",
-                  children: assignment.completed
+                  children: "2"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "body2",
                   color: "text.secondary",
@@ -186,7 +224,7 @@ function AssignmentCard({
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "h4",
-                  children: assignment.assigned
+                  children: assignment.assignedStudents.length
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "body2",
                   color: "text.secondary",
@@ -215,6 +253,7 @@ AssignmentCard.propTypes = {
     dueDate: _propTypes.default.string.isRequired,
     completed: _propTypes.default.number,
     assigned: _propTypes.default.number,
+    assignedStudents: _propTypes.default.array,
     t: _propTypes.default.func
   }).isRequired
 };

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -17,8 +17,13 @@ const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
   isCreator,
-  onRefresh,
-  handleCreateAssignment
+  handleCreateAssignment,
+  getCourses,
+  getCourseSections,
+  getRoleplays,
+  deleteAssignment,
+  handleEditAssignment,
+  refreshAssignments
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
     mt: 3,
@@ -95,7 +100,7 @@ const AssignmentCardsList = ({
           placement: "left",
           title: t("refresh_assignments"),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-            onClick: onRefresh,
+            onClick: refreshAssignments,
             "aria-label": "refresh",
             size: "large",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Refresh.default, {})
@@ -104,7 +109,12 @@ const AssignmentCardsList = ({
       }), assignments.map(assignment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
         assignment: assignment,
         t: t,
-        isCreator: isCreator
+        isCreator: isCreator,
+        getCourses: getCourses,
+        getCourseSections: getCourseSections,
+        getRoleplays: getRoleplays,
+        deleteAssignment: deleteAssignment,
+        handleEditAssignment: handleEditAssignment
       }, assignment.id))]
     })
   });

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -18,8 +18,7 @@ function Course({
   getCourseSections,
   getRoleplays,
   username,
-  handleCreateGame,
-  t,
+  t = text => text,
   isExerciseSelected,
   setIsExerciseSelected,
   isDialogOpen,
@@ -28,10 +27,12 @@ function Course({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
-  isCreator
+  isCreator,
+  viewOnly
 }) {
   const [open, setOpen] = (0, _react.useState)(false);
+  const [selectedSectionIds, setSelectedSectionIds] = (0, _react.useState)([]);
+  const [filteredSections, setFilteredSections] = (0, _react.useState)([]);
   const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
     const response = await getCourseSections(courseId, filters);
     return response;
@@ -44,8 +45,29 @@ function Course({
   }, {
     enabled: !!course.courseId && isDialogOpen
   });
+  (0, _react.useEffect)(() => {
+    assignment?.exercises?.forEach(exercise => {
+      if (exercise.courseSectionTopicId) {
+        const sectionId = exercise.courseSectionTopicId.split("|")[1];
+        setSelectedSectionIds(prev => [...prev, sectionId]);
+      }
+    });
+  }, [selectedExercises]);
+  (0, _react.useEffect)(() => {
+    selectedExercises?.forEach(exercise => {
+      if (exercise.courseSectionTopicId) {
+        const sectionId = exercise.courseSectionTopicId.split("|")[1];
+        setSelectedSectionIds(prev => [...prev, sectionId]);
+      }
+    });
+  }, [selectedExercises]);
   const courseSections = (0, _react.useMemo)(() => sectionsQuery.isSuccess && Array.isArray(sectionsQuery.data.Items) && sectionsQuery.data.Items.length ? sectionsQuery.data.Items : [], [sectionsQuery.data, sectionsQuery.isSuccess]);
   const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading ? true : false;
+  (0, _react.useEffect)(() => {
+    if (viewOnly) {
+      setFilteredSections(courseSections.filter(section => selectedSectionIds.includes(section.sectionId)));
+    }
+  }, [courseSections, selectedSectionIds, viewOnly]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
     disablePadding: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -93,9 +115,8 @@ function Course({
         ml: 3.5,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelection.default, {
           t: t,
-          sections: courseSections,
+          sections: viewOnly ? filteredSections : courseSections,
           isLoading: sectionsQuery.isLoading,
-          handleCreateGame: handleCreateGame,
           courseId: course.courseId,
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
@@ -105,8 +126,8 @@ function Course({
           useCase: useCase,
           assignment: assignment,
           handleStartExercise: handleStartExercise,
-          isAssignment: isAssignment,
-          isCreator: isCreator
+          isCreator: isCreator,
+          viewOnly: viewOnly
         })
       })
     })]
@@ -117,8 +138,7 @@ function AssignmentCourseSelection({
   getCourseSections,
   getRoleplays,
   username,
-  handleCreateGame,
-  t,
+  t = text => text,
   isExerciseSelected,
   setIsExerciseSelected,
   handleSelectExercise,
@@ -126,8 +146,8 @@ function AssignmentCourseSelection({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
   isCreator,
+  viewOnly,
   ...otherProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -137,17 +157,16 @@ function AssignmentCourseSelection({
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
       username: username,
-      handleCreateGame: handleCreateGame,
       t: t,
       isExerciseSelected: isExerciseSelected,
       setIsExerciseSelected: setIsExerciseSelected,
       handleSelectExercise: handleSelectExercise,
-      selectedExercises: selectedExercises,
+      selectedExercises: assignment ? assignment.exercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[0] === course?.courseId) : selectedExercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[0] === course?.courseId),
       useCase: useCase,
       assignment: assignment,
       handleStartExercise: handleStartExercise,
-      isAssignment: isAssignment,
-      isCreator: isCreator
+      isCreator: isCreator,
+      viewOnly: viewOnly
     }))
   });
 }

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -19,14 +19,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 _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _reactRouterDom = require("react-router-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Exercise({
   name,
   description,
   courseSectionTopicId,
-  handleCreateGame,
   section,
   t,
   isExerciseSelected,
@@ -35,30 +34,26 @@ function Exercise({
   phrases,
   handleSelectExercise = null,
   selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isAssignment,
-  isCreator
+  useCase
 }) {
   const [listeningHidden, setListeningHidden] = (0, _react.useState)(false);
   const [translationHidden, setTranslationHidden] = (0, _react.useState)(false);
   const [pronunciationHidden, setPronunciationHidden] = (0, _react.useState)(false);
-  const isAssignmentExerciseSelected = selectedExercises.some(e => e.name === name && e.courseSectionTopicId === courseSectionTopicId);
+  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);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const params = (0, _reactRouterDom.useParams)();
+  const {
+    classroomId
+  } = params;
+  const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
+  const addSearchParams = () => {
+    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}?exercise=${name}`);
+  };
   const handleToggleRoleplays = () => {
     setRoleplaysOpen(!roleplaysOpen);
   };
-  const handleExerciseSelected = () => {
-    setIsExerciseSelected(true);
-    handleCreateGame({
-      courseSectionTopicId: courseSectionTopicId,
-      exercise: name,
-      timer: 30,
-      answerOption: 0
-    });
-  };
   (0, _react.useEffect)(() => {
     section.topics.forEach(topic => {
       if (topic.hiddenExercises && topic.hiddenExercises.includes("listening")) {
@@ -80,10 +75,10 @@ function Exercise({
     title: name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : !isValidExercise ? t("minimum_two_phrases") : "",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       onClick: () => {
-        name.toLowerCase() === "roleplays" ? handleToggleRoleplays() : useCase === "assignment" ? handleSelectExercise([{
+        name.toLowerCase() === "roleplays" ? handleToggleRoleplays() : useCase === "assignment-select" ? handleSelectExercise([{
           name,
           courseSectionTopicId
-        }]) : handleExerciseSelected();
+        }]) : useCase === "assignment-start" ? addSearchParams() : null;
       },
       display: "flex",
       alignItems: "center",
@@ -110,8 +105,8 @@ function Exercise({
         })
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
         children: roleplaysOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
-      }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-        children: isAssignment ? useCase === "assignment" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+      }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
+        children: [useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
           checked: isAssignmentExerciseSelected,
           onClick: event => {
             event.stopPropagation();
@@ -123,14 +118,9 @@ function Exercise({
               courseSectionTopicId
             }]);
           }
-        }) :
-        /*#__PURE__*/
-        //add check to see if the exercise is completed
-        (0, _jsxRuntime.jsx)(_CheckCircle.default, {
-          color: "success"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
+        }), useCase === "assignment-view" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
           color: "primary"
-        })
+        })]
       })]
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
       in: roleplaysOpen,
@@ -140,7 +130,6 @@ function Exercise({
         ml: 7,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentRoleplaySelection.default, {
           roleplays: roleplays,
-          handleCreateGame: handleCreateGame,
           courseSectionTopicId: courseSectionTopicId,
           t: t,
           isExerciseSelected: isExerciseSelected,
@@ -159,7 +148,6 @@ function ExerciseList({
   courseId,
   sectionId,
   topicId,
-  handleCreateGame,
   section,
   isExerciseSelected,
   setIsExerciseSelected,
@@ -170,7 +158,6 @@ function ExerciseList({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
   isCreator,
   ...otherProps
 }) {
@@ -185,7 +172,6 @@ function ExerciseList({
         ...exercise,
         isMember: isMember,
         courseSectionTopicId: courseSectionTopicId,
-        handleCreateGame: handleCreateGame,
         section: section,
         isExerciseSelected: isExerciseSelected,
         setIsExerciseSelected: setIsExerciseSelected,
@@ -199,7 +185,6 @@ function ExerciseList({
         useCase: useCase,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isAssignment: isAssignment,
         isCreator: isCreator,
         ...otherProps
       }, keyId);
@@ -228,7 +213,6 @@ function Topic({
   index,
   moveTopic,
   onDropSection,
-  handleCreateGame,
   phrases,
   section,
   isExerciseSelected,
@@ -239,7 +223,6 @@ function Topic({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
   isCreator,
   ...otherProps
 }) {
@@ -247,32 +230,70 @@ function Topic({
   const isLargeScreen = (0, _useMediaQuery.default)(theme.breakpoints.up("sm"));
   const [isExerciseListOpen, setExerciseListOpen] = (0, _react.useState)(false);
   const [isWholeTopicSelected, setIsWholeTopicSelected] = (0, _react.useState)(false);
-  const exercises = useCase === "assignment" ? [{
-    name: "translation",
-    description: `translation_exercise_desc`
-  }, {
-    name: "listening",
-    description: `listening_exercise_desc`
-  }, {
-    name: "pronunciation",
-    description: `pronunciation_exercise_desc`
-  }, {
-    name: "roleplays",
-    description: `roleplay_exercise_desc`
-  }] : [{
-    name: "translation",
-    description: `translation_exercise_desc`
-  }, {
-    name: "listening",
-    description: `listening_exercise_desc`
-  }, {
-    name: "roleplays",
-    description: `roleplay_exercise_desc`
-  }];
-  const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
+  let exercises;
+  switch (useCase) {
+    case "assignment-select":
+      exercises = [{
+        name: "translation",
+        description: `translation_exercise_desc`
+      }, {
+        name: "listening",
+        description: `listening_exercise_desc`
+      }, {
+        name: "pronunciation",
+        description: `pronunciation_exercise_desc`
+      }, {
+        name: "roleplays",
+        description: `roleplay_exercise_desc`
+      }];
+      break;
+    case "assignment-view":
+      exercises = [{
+        name: "translation",
+        description: `translation_exercise_desc`
+      }, {
+        name: "listening",
+        description: `listening_exercise_desc`
+      }, {
+        name: "pronunciation",
+        description: `pronunciation_exercise_desc`
+      }, {
+        name: "roleplays",
+        description: `roleplay_exercise_desc`
+      }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId));
+      break;
+    case "assignment-start":
+      exercises = [{
+        name: "translation",
+        description: `translation_exercise_desc`
+      }, {
+        name: "listening",
+        description: `listening_exercise_desc`
+      }, {
+        name: "pronunciation",
+        description: `pronunciation_exercise_desc`
+      }, {
+        name: "roleplays",
+        description: `roleplay_exercise_desc`
+      }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId));
+      break;
+    default:
+      exercises = [];
+  }
+  let games;
+  switch (useCase) {
+    case "assignment-view":
+      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(game => selectedExercises.some(e => e.game === game));
+      break;
+    case "assignment-start":
+      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(game => selectedExercises.some(e => e.game === game));
+      break;
+    default:
+      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
+  }
   (0, _react.useEffect)(() => {
-    const exerciseCount = selectedExercises.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}`).length;
-    const roleplayCount = selectedExercises.filter(exercise => exercise.roleplayId && roleplays.some(roleplay => roleplay.roleplayId === exercise.roleplayId)).length;
+    const exerciseCount = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}`).length;
+    const roleplayCount = selectedExercises?.filter(exercise => exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId)).length;
     const total = roleplays.length * 6 + 3;
     if (exerciseCount + roleplayCount === total) {
       setIsWholeTopicSelected(true);
@@ -282,12 +303,12 @@ function Topic({
   }, [selectedExercises]);
   const handleSelectAll = () => {
     if (isWholeTopicSelected) {
-      const removeExercises = selectedExercises.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` || exercise.roleplayId && roleplays.some(roleplay => roleplay.roleplayId === exercise.roleplayId));
+      const removeExercises = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` || exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId));
       handleSelectExercise(removeExercises);
     } else {
       let exercisesToAdd = [];
-      exercises.filter(e => e.name !== "roleplays").forEach(exercise => {
-        if (!selectedExercises.some(e => e.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` && e.name === exercise.name)) {
+      exercises?.filter(e => e.name !== "roleplays").forEach(exercise => {
+        if (!selectedExercises?.some(e => e.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}` && e.name === exercise.name)) {
           exercisesToAdd = [...exercisesToAdd, {
             courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
             name: exercise.name
@@ -296,7 +317,7 @@ function Topic({
       });
       roleplays.forEach(roleplay => {
         games.forEach(game => {
-          if (!selectedExercises.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
+          if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
             exercisesToAdd = [...exercisesToAdd, {
               roleplayId: roleplay.roleplayId,
               game
@@ -310,7 +331,7 @@ function Topic({
   const toggleExerciseList = () => {
     setExerciseListOpen(!isExerciseListOpen);
   };
-  const hasNonEmptyRoleplay = roleplays.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
+  const hasNonEmptyRoleplay = roleplays?.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tooltip, {
       title: phrases.length === 0 ? t("topic_no_phrases") : "",
@@ -373,7 +394,7 @@ function Topic({
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           children: isExerciseListOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
-        }), useCase === "assignment" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+        }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
             checked: isWholeTopicSelected,
             onClick: event => {
@@ -397,18 +418,16 @@ function Topic({
           courseId: courseId,
           sectionId: sectionId,
           topicId: topicId,
-          handleCreateGame: handleCreateGame,
           section: section,
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
-          roleplays: roleplays,
+          roleplays: useCase === "assignment-select" ? selectedExercises?.length > 0 ? roleplays.filter(r => selectedExercises.some(e => e.roleplayId === r.roleplayId)) : roleplays : roleplays,
           phrases: phrases,
           handleSelectExercise: handleSelectExercise,
           selectedExercises: selectedExercises,
           useCase: useCase,
           assignment: assignment,
           handleStartExercise: handleStartExercise,
-          isAssignment: isAssignment,
           isCreator: isCreator,
           ...otherProps
         })
@@ -423,7 +442,6 @@ function Section({
   sectionName,
   isHidden,
   topics = [],
-  handleCreateGame,
   section,
   isExerciseSelected,
   setIsExerciseSelected,
@@ -433,13 +451,36 @@ function Section({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
   isCreator,
+  viewOnly,
   ...otherProps
 }) {
   const root = {
     width: "100%"
   };
+  const [selectedTopicIds, setSelectedTopicIds] = (0, _react.useState)([]);
+  const [filteredTopics, setFilteredTopics] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    assignment?.exercises?.forEach(exercise => {
+      if (exercise.courseSectionTopicId) {
+        const topicId = exercise.courseSectionTopicId.split("|")[2];
+        setSelectedTopicIds(prev => [...prev, topicId]);
+      }
+    });
+  }, [selectedExercises]);
+  (0, _react.useEffect)(() => {
+    selectedExercises?.forEach(exercise => {
+      if (exercise.courseSectionTopicId) {
+        const topicId = exercise.courseSectionTopicId.split("|")[2];
+        setSelectedTopicIds(prev => [...prev, topicId]);
+      }
+    });
+  }, [selectedExercises]);
+  (0, _react.useEffect)(() => {
+    if (viewOnly) {
+      setFilteredTopics(topics.filter(topic => selectedTopicIds.includes(topic.topicId)));
+    }
+  }, [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, {
@@ -453,12 +494,32 @@ function Section({
         children: sectionName
       }),
       sx: root,
-      children: topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
+      children: viewOnly ? filteredTopics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
+        index: i,
+        topics: topics,
+        topicLength: topics.length,
+        sectionId: sectionId,
+        courseId: courseId,
+        phrases: topic.phrases,
+        section: section,
+        t: t,
+        ...topic,
+        ...otherProps,
+        picture: topic.picture,
+        isExerciseSelected: isExerciseSelected,
+        setIsExerciseSelected: setIsExerciseSelected,
+        getRoleplays: getRoleplays,
+        handleSelectExercise: handleSelectExercise,
+        selectedExercises: assignment ? assignment.exercises?.filter(exercise => exercise.roleplayId || exercise.courseSectionTopicId.split("|")[2] === topic.topicId) : selectedExercises?.filter(exercise => exercise.roleplayId || exercise.courseSectionTopicId.split("|")[2] === topic.topicId),
+        useCase: useCase,
+        assignment: assignment,
+        handleStartExercise: handleStartExercise,
+        isCreator: isCreator
+      }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
         index: i,
         topics: topics,
         topicLength: topics.length,
         sectionId: sectionId,
-        handleCreateGame: handleCreateGame,
         courseId: courseId,
         phrases: topic.phrases,
         section: section,
@@ -474,7 +535,6 @@ function Section({
         useCase: useCase,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isAssignment: isAssignment,
         isCreator: isCreator
       }, `${sectionId}-${topic.topicId}`))
     })
@@ -484,7 +544,6 @@ function SectionList({
   sections = [],
   handleFetchTopic,
   teachClassrooms,
-  handleCreateGame,
   courseId,
   t,
   isExerciseSelected,
@@ -495,8 +554,8 @@ function SectionList({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
   isCreator,
+  viewOnly,
   ...otherProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -505,7 +564,6 @@ function SectionList({
         index: index,
         handleFetchTopic: handleFetchTopic,
         teachClassrooms: teachClassrooms,
-        handleCreateGame: handleCreateGame,
         courseId: courseId,
         t: t,
         ...section,
@@ -514,12 +572,12 @@ function SectionList({
         section: section,
         getRoleplays: getRoleplays,
         handleSelectExercise: handleSelectExercise,
-        selectedExercises: selectedExercises,
+        selectedExercises: selectedExercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[1] === section.sectionId),
         useCase: useCase,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isAssignment: isAssignment,
         isCreator: isCreator,
+        viewOnly: viewOnly,
         ...otherProps
       }, section.sectionId);
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -538,7 +596,6 @@ function AssignmentExerciseSelection({
   handleSwitchChange,
   isLoading,
   teachClassrooms,
-  handleCreateGame,
   isExerciseSelected,
   setIsExerciseSelected,
   getRoleplays,
@@ -547,7 +604,7 @@ function AssignmentExerciseSelection({
   useCase,
   assignment,
   handleStartExercise,
-  isAssignment,
+  viewOnly,
   ...otherProps
 }) {
   if (isLoading) {
@@ -562,13 +619,12 @@ function AssignmentExerciseSelection({
         isPublic: isPublic,
         handleSwitchChange: handleSwitchChange,
         teachClassrooms: teachClassrooms,
-        handleCreateGame: handleCreateGame,
         isExerciseSelected: isExerciseSelected,
         setIsExerciseSelected: setIsExerciseSelected,
         getRoleplays: getRoleplays,
         assignment: assignment,
         handleStartExercise: handleStartExercise,
-        isAssignment: isAssignment,
+        viewOnly: viewOnly,
         ...otherProps
       })
     });
@@ -584,14 +640,13 @@ function AssignmentExerciseSelection({
       isPublic: isPublic,
       handleSwitchChange: handleSwitchChange,
       teachClassrooms: teachClassrooms,
-      handleCreateGame: handleCreateGame,
       isExerciseSelected: isExerciseSelected,
       setIsExerciseSelected: setIsExerciseSelected,
       handleSelectExercise: handleSelectExercise,
       selectedExercises: selectedExercises,
       useCase: useCase,
-      isAssignment: isAssignment,
       assignment: assignment,
+      viewOnly: viewOnly,
       ...otherProps
     })
   });

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -16,8 +16,10 @@ function AssignmentExerciseSelector({
   username,
   getCourseSections,
   getRoleplays,
-  isAssignment,
-  isCreator
+  isCreator,
+  selectedExercises,
+  viewOnly,
+  useCase
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCourseSelection.default, {
@@ -28,8 +30,10 @@ function AssignmentExerciseSelector({
       courses: assignment.courses,
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
-      isAssignment: isAssignment,
-      isCreator: isCreator
+      isCreator: isCreator,
+      selectedExercises: selectedExercises,
+      viewOnly: viewOnly,
+      useCase: useCase
     })
   });
 }

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -12,25 +12,37 @@ var _RateReview = _interopRequireDefault(require("@mui/icons-material/RateReview
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _AutoStories = _interopRequireDefault(require("@mui/icons-material/AutoStories"));
+var _reactRouterDom = require("react-router-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Roleplay({
   roleplay,
-  handleCreateGame,
   courseSectionTopicId,
   isRoleplaySelected,
-  setIsRoleplaySelected,
   t,
   isExerciseSelected,
   handleSelectExercise = null,
   selectedExercises,
   useCase
 }) {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const params = (0, _reactRouterDom.useParams)();
+  const {
+    classroomId
+  } = params;
+  const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
+  const addSearchParams = exercise => {
+    if (!classroomId || !courseId || !sectionId || !topicId || !roleplay?.roleplayId) {
+      console.error('Missing required parameters for navigation');
+      return;
+    }
+    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/roleplays/${roleplay?.roleplayId}?game=${encodeURIComponent(exercise)}`);
+  };
   const [open, setOpen] = (0, _react.useState)(false);
   const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
   const [isSelectAllChecked, setIsSelectAllChecked] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
-    const count = selectedExercises.filter(exercise => exercise.roleplayId === roleplay.roleplayId).length;
+    const count = selectedExercises?.filter(exercise => exercise.roleplayId === roleplay.roleplayId).length;
     setIsSelectAllChecked(count === games.length);
   }, [selectedExercises, roleplay.roleplayId, games.length]);
   const handleSelectAll = () => {
@@ -43,7 +55,7 @@ function Roleplay({
     } else {
       let gamesToAdd = [];
       games.forEach(game => {
-        if (!selectedExercises.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
+        if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
           gamesToAdd = [...gamesToAdd, {
             roleplayId: roleplay.roleplayId,
             game
@@ -53,16 +65,6 @@ function Roleplay({
       handleSelectExercise(gamesToAdd);
     }
   };
-  const handleRoleplaySelected = exerciseName => () => {
-    setIsRoleplaySelected(true);
-    handleCreateGame({
-      courseSectionTopicId: courseSectionTopicId,
-      exercise: exerciseName,
-      timer: 30,
-      answerOption: 0,
-      roleplayId: roleplay.roleplayId
-    });
-  };
   const isRoleplayEmpty = roleplay?.script?.length === 0 || !roleplay?.script?.some(line => line.text !== undefined);
   const numberOfRoleplayQuestions = roleplay?.script?.filter(item => Object.hasOwn(item, "question")).length;
   const numberOfRoleplayInteractions = roleplay?.script?.length - numberOfRoleplayQuestions;
@@ -71,12 +73,12 @@ function Roleplay({
   const isRoleplayValid = roleplayHasInteractions && roleplayHasQuestions;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-      title: roleplay?.script?.length === 0 ? t("roleplay_no_interactions") : !isRoleplayValid ? t("roleplay_not_valid") : "",
+      title: !isRoleplayValid ? t("roleplay_not_valid") : "",
       placement: "left",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => setOpen(!open),
-          disabled: isRoleplaySelected || isRoleplayEmpty || isExerciseSelected || !isRoleplayValid,
+          disabled: isRoleplaySelected || isRoleplayEmpty || isExerciseSelected,
           sx: {
             display: "flex",
             alignItems: "center",
@@ -157,7 +159,7 @@ function Roleplay({
                 color: "#757575"
               }
             })
-          }), useCase === "assignment" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("select_all"),
             placement: "top",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
@@ -176,14 +178,13 @@ function Roleplay({
       in: open,
       timeout: "auto",
       unmountOnExit: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         ml: 3.5,
-        children: useCase === "assignment" ? games.map(game => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
-          onClick: isRoleplayValid ? () => handleSelectExercise([{
+        children: [useCase === "assignment-select" && games.map((game, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+          onClick: () => handleSelectExercise([{
             roleplayId: roleplay.roleplayId,
             game
-          }]) : null,
-          disabled: !isRoleplayValid,
+          }]),
           sx: {
             display: "flex",
             alignItems: "center",
@@ -200,12 +201,13 @@ function Roleplay({
             secondary: t("story_description")
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
-              checked: selectedExercises.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)
+              checked: selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)
             })
           })]
-        })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
-          onClick: handleRoleplaySelected("roleplay-story"),
-          disabled: isRoleplaySelected || isExerciseSelected || !isRoleplayValid,
+        }, `${roleplay.roleplayId}-${game}-${index}`)), useCase === "assignment-view" || useCase === "assignment-start" ? games.map(game => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+          onClick: () => {
+            useCase === "assignment-start" ? addSearchParams(game.replace(/roleplay-/, "")) : null;
+          },
           sx: {
             display: "flex",
             alignItems: "center",
@@ -218,21 +220,20 @@ function Roleplay({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {})
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: t("roleplay-story"),
-            secondary: t("story_description")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            primary: t(game.replace(/roleplay-/, "").replace(/-/g, "_")),
+            secondary: t(game.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
+          }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
               color: "primary"
             })
           })]
-        })
+        })) : null]
       })
     })]
   });
 }
 function AssignmentRoleplaySelection({
   roleplays = [],
-  handleCreateGame,
   courseSectionTopicId,
   t,
   isExerciseSelected,
@@ -243,7 +244,6 @@ function AssignmentRoleplaySelection({
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
   return roleplays.map((roleplay, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
     roleplay: roleplay,
-    handleCreateGame: handleCreateGame,
     isRoleplaySelected: isRoleplaySelected,
     setIsRoleplaySelected: setIsRoleplaySelected,
     courseSectionTopicId: courseSectionTopicId,

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _AssignmentCourseSelection = _interopRequireDefault(require("../AssignmentCourseSelection/AssignmentCourseSelection"));
+var _ResponsiveDialog = _interopRequireDefault(require("../../Dialogs/ResponsiveDialog/ResponsiveDialog"));
+var _system = require("@mui/system");
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AssignmentSelectExercise({
+  t = text => text,
+  open,
+  handleClose,
+  courses,
+  getCourseSections,
+  getRoleplays,
+  username,
+  useCase,
+  selectedExercises = [],
+  setSelectedExercises,
+  setSubmittedExercises
+}) {
+  const [isExerciseSelected, setIsExerciseSelected] = (0, _react.useState)(false);
+  const handleSelectExercise = (exercises = []) => {
+    setSelectedExercises(prevSelectedExercises => {
+      let updatedExercises = [...prevSelectedExercises];
+      exercises.forEach(exercise => {
+        if (exercise.courseSectionTopicId && updatedExercises.some(e => e.courseSectionTopicId === exercise.courseSectionTopicId && e.name === exercise.name)) {
+          updatedExercises = updatedExercises.filter(e => e.courseSectionTopicId !== exercise.courseSectionTopicId || e.name !== exercise.name);
+        } else if (exercise.roleplayId && updatedExercises.some(e => e.roleplayId === exercise.roleplayId && e.game === exercise.game)) {
+          updatedExercises = updatedExercises.filter(e => !!e.courseSectionTopicId || e.roleplayId !== exercise.roleplayId || e.game !== exercise.game);
+        } else {
+          updatedExercises.push(exercise);
+        }
+      });
+      return updatedExercises;
+    });
+  };
+  const handleSubmitExercises = () => {
+    setSelectedExercises(selectedExercises);
+    setSubmittedExercises(selectedExercises);
+    handleClose();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
+    open: open,
+    handleClose: handleClose,
+    dialogTitle: t("assignment"),
+    maxWidth: "md",
+    handleSubmit: () => {
+      handleSubmitExercises();
+    },
+    submitText: t("add_exercises"),
+    isSubmitDisabled: selectedExercises.length === 0,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+      children: t("assign_exercises_description")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
+      mt: 1,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCourseSelection.default, {
+        courses: courses,
+        getCourseSections: getCourseSections,
+        getRoleplays: getRoleplays,
+        username: username,
+        t: t,
+        isExerciseSelected: isExerciseSelected,
+        setIsExerciseSelected: setIsExerciseSelected,
+        isDialogOpen: open,
+        useCase: useCase,
+        selectedExercises: selectedExercises,
+        handleSelectExercise: useCase === "assignment-select" ? handleSelectExercise : null,
+        viewOnly: false
+      })
+    })]
+  });
+}
+var _default = exports.default = AssignmentSelectExercise;

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -16,8 +16,9 @@ var _mui = require("tss-react/mui");
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
-var _SelectExercise = _interopRequireDefault(require("../../Dialogs/SelectExercise"));
+var _AssignmentSelectExercise = _interopRequireDefault(require("../AssignmentSelectExercise/AssignmentSelectExercise"));
 var _Queries = require("@nualang/nualang-api-and-queries/Queries");
+var _AssignmentExerciseSelector = _interopRequireDefault(require("../AssignmentExerciseSelector/AssignmentExerciseSelector"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -29,7 +30,8 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
   dialogContent: {
     display: "flex",
     gap: theme.spacing(2),
-    padding: theme.spacing(3)
+    padding: theme.spacing(3),
+    marginBottom: theme.spacing(7)
   }
 }));
 function Transition(props) {
@@ -51,12 +53,15 @@ function CreateAssignmentDialog({
   username,
   getMemberDetails,
   getClassroom,
-  getCourses
+  getCourses,
+  initialData = {},
+  dialogTitle
 }) {
   const {
     classes
   } = useStyles();
   const [selectedExercises, setSelectedExercises] = (0, _react.useState)([]);
+  const [submittedExercises, setSubmittedExercises] = (0, _react.useState)(initialData.exercises ? initialData.exercises : []);
   const [members, setMembers] = (0, _react.useState)([]);
   const [assignment, setAssignment] = (0, _react.useState)({
     classroomId: "",
@@ -66,7 +71,8 @@ function CreateAssignmentDialog({
     type: "assignment",
     scheduleDate: (0, _dayjs.default)(),
     dueDate: (0, _dayjs.default)().add(1, "day"),
-    exercises: selectedExercises
+    exercises: submittedExercises,
+    ...initialData
   });
   const classroomQuery = _Queries.classrooms.useClassroom(async classroomId => {
     const response = await getClassroom(classroomId);
@@ -97,6 +103,13 @@ function CreateAssignmentDialog({
     enabled: !!assignment.classroomId
   });
   const selectedCourses = (0, _react.useMemo)(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
+  (0, _react.useEffect)(() => {
+    let filteredCourses = selectedCourses.filter(course => submittedExercises.some(exercise => exercise.courseSectionTopicId?.split("|")[0] === course.courseId));
+    setAssignment({
+      ...assignment,
+      courses: filteredCourses
+    });
+  }, [selectedCourses, submittedExercises]);
   const selectedMembers = (0, _react.useMemo)(() => membersQuery.isSuccess && Array.isArray(membersQuery.data.Items) && membersQuery.data.Items.length ? membersQuery.data.Items : [], [membersQuery.data, membersQuery.isSuccess]);
   const classroomMembers = async selectedMembers => {
     const formattedMembers = await getMemberDetails(selectedMembers);
@@ -108,9 +121,9 @@ function CreateAssignmentDialog({
   (0, _react.useEffect)(() => {
     setAssignment(prev => ({
       ...prev,
-      exercises: selectedExercises
+      exercises: submittedExercises
     }));
-  }, [selectedExercises]);
+  }, [submittedExercises]);
   (0, _react.useEffect)(() => {
     setAssignment(prev => ({
       ...prev,
@@ -178,7 +191,7 @@ function CreateAssignmentDialog({
           variant: "h5",
           fontWeight: "bold",
           textAlign: "center",
-          children: t("create_assignment")
+          children: t(dialogTitle)
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -214,7 +227,7 @@ function CreateAssignmentDialog({
               onChange: handleChange("classroomId"),
               required: true,
               disabled: classroom,
-              children: classrooms.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+              children: classrooms?.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
                 value: classroom.classroomId,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
                   sx: {
@@ -254,6 +267,14 @@ function CreateAssignmentDialog({
             startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {}),
             onClick: () => setIsSelectExerciseOpen(true),
             children: t("add_exercise")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelector.default, {
+            selectedExercises: submittedExercises,
+            t: t,
+            assignment: assignment,
+            getCourseSections: getCourseSections,
+            getRoleplays: getRoleplays,
+            viewOnly: true,
+            useCase: "assignment-view"
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
@@ -286,7 +307,7 @@ function CreateAssignmentDialog({
               required: true,
               value: assignment.assignedStudents,
               onChange: handleChange("assignedStudents"),
-              renderValue: selected => selected.map(memberId => members?.find(member => member.memberId === memberId)).map(member => member?.username).join(", "),
+              renderValue: selected => selected?.map(memberId => members?.find(member => member.memberId === memberId))?.map(member => member?.username).join(", "),
               children: members?.map(member => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
                 value: member.memberId,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -393,7 +414,7 @@ function CreateAssignmentDialog({
           })]
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectExercise.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentSelectExercise.default, {
       t: t,
       open: isSelectExerciseOpen,
       handleClose: handleCloseSelectExercise,
@@ -401,13 +422,11 @@ function CreateAssignmentDialog({
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
       username: username,
-      useCase: "assignment",
+      useCase: "assignment-select",
       selectedExercises: selectedExercises,
       setSelectedExercises: setSelectedExercises,
-      isAssignment: true
-    }), selectedExercises?.map(exercise => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-      children: [exercise.name ? exercise.name : exercise.game, " | ", exercise.courseSectionTopicId ? exercise.courseSectionTopicId : exercise.roleplayId]
-    }))]
+      setSubmittedExercises: setSubmittedExercises
+    })]
   });
 }
 CreateAssignmentDialog.propTypes = {

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

@@ -55,7 +55,7 @@ var _Share = _interopRequireDefault(require("@mui/icons-material/Share"));
 var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _ExitToApp = _interopRequireDefault(require("@mui/icons-material/ExitToApp"));
-var _AssignmentCardsList = _interopRequireDefault(require("../../../Lists/AssignmentCardsList/AssignmentCardsList"));
+var _AssignmentCardsList = _interopRequireDefault(require("../../../Assignments/AssignmentCardsList/AssignmentCardsList"));
 var _Lightbulb = _interopRequireDefault(require("@mui/icons-material/Lightbulb"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -391,6 +391,9 @@ function Classroom({
   assignments,
   handleCreateAssignment,
   deleteAssignment,
+  handleEditAssignment,
+  getCourses,
+  refreshAssignments,
   ...otherProps
 }) {
   const {
@@ -867,7 +870,11 @@ function Classroom({
         username: username,
         getCourseSections: getCourseSections,
         handleCreateAssignment: handleCreateAssignment,
-        deleteAssignment: deleteAssignment
+        deleteAssignment: deleteAssignment,
+        handleEditAssignment: handleEditAssignment,
+        getRoleplays: getRoleplays,
+        getCourses: getCourses,
+        refreshAssignments: refreshAssignments
       })
     }, `tab-content-assignments`)
   }] : []), ...(isWaysideClassroom && isVideoChatEnabled && isNualangLiveEnabled && (isMember && isVideoChatEnabledInSettings || isCreator) ? [{

package/package.json

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