@nualang/nualang-ui-components 0.1.1225 → 0.1.1227

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
     }))
   });
 }