@nualang/nualang-ui-components 0.1.1255 → 0.1.1257

package/README.md

@@ -1,65 +1,65 @@
-# Nualang ui-components
-This is the ui-components repository for the Nualang product. The components
-are developed, reviewed and tested with storybook and a library is then published
-to `npm` and consumed from there by nualang web apps.
-
-## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
-
-## Develop
-```
-npm start
-```
-
-## Create Local Package
-Compile and pack (This will create a '.tgz' file):
-```
-npm run localpack
-```
-
-Install package (Inside webapp):
-```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
-```
-
-If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
-```
-
-## Publish to npm
-Make sure that the version number has been updayed in package.json.
-Ensure that you have committed the latest version to git.
-Execute:-
-```bash
-npm run postversion
-```
-npm will complain if you try to re-publish a previously used version number.
-
-
-## Additional Scripts
-In the project directory, you can run:
-
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You should also see any lint errors in the console.
-
-### `npm run test`
-Launches the test runner in interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run lint`
-Check for any lint errors or warnings.
-
-### `npm run compile`
-Run the babel compiler to compile es6 to js.
-
-### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
-
-### `npm run chromatic`
+# Nualang ui-components
+This is the ui-components repository for the Nualang product. The components
+are developed, reviewed and tested with storybook and a library is then published
+to `npm` and consumed from there by nualang web apps.
+
+## Getting Started
+Clone this repository and then execute `npm install`. `npm start` will start
+[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+
+## Develop
+```
+npm start
+```
+
+## Create Local Package
+Compile and pack (This will create a '.tgz' file):
+```
+npm run localpack
+```
+
+Install package (Inside webapp):
+```
+npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+```
+
+If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
+```
+yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```
+
+## Publish to npm
+Make sure that the version number has been updayed in package.json.
+Ensure that you have committed the latest version to git.
+Execute:-
+```bash
+npm run postversion
+```
+npm will complain if you try to re-publish a previously used version number.
+
+
+## Additional Scripts
+In the project directory, you can run:
+
+### `npm run storybook`
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You should also see any lint errors in the console.
+
+### `npm run test`
+Launches the test runner in interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run lint`
+Check for any lint errors or warnings.
+
+### `npm run compile`
+Run the babel compiler to compile es6 to js.
+
+### `npm run postversion`
+Publish a new version of the pacakage to npm. npm will complain
+
+### `npm run chromatic`
 Publish a new version of the pacakage to https://www.chromatic.com/ 

package/dist/Assignments/AssignmentBotSelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentBotSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentBotSelection.js"
-  }
+{
+    "name": "AssignmentBotSelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentBotSelection.js"
+  }
   

package/dist/Assignments/AssignmentCard/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCard",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCard.js"
-  }
+{
+    "name": "AssignmentCard",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCard.js"
+  }
   

package/dist/Assignments/AssignmentCardsList/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCardsList",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCardsList.js"
-  }
+{
+    "name": "AssignmentCardsList",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCardsList.js"
+  }
   

package/dist/Assignments/AssignmentCourseSelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCourseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCourseSelection.js"
-  }
+{
+    "name": "AssignmentCourseSelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCourseSelection.js"
+  }
   

package/dist/Assignments/AssignmentExerciseSelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentExerciseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelection.js"
-  }
+{
+    "name": "AssignmentExerciseSelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentExerciseSelection.js"
+  }
   

package/dist/Assignments/AssignmentExerciseSelector/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentExerciseSelector",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelector.js"
-  }
+{
+    "name": "AssignmentExerciseSelector",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentExerciseSelector.js"
+  }
   

package/dist/Assignments/AssignmentRoleplaySelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentRoleplaySelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentRoleplaySelection.js"
-  }
+{
+    "name": "AssignmentRoleplaySelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentRoleplaySelection.js"
+  }
   

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -79,33 +79,51 @@ function CreateAssignmentDialog({
     exercises: submittedExercises,
     ...initialData
   });
-  const classroomQuery = _Queries.classrooms.useClassroom(async classroomId => {
-    const allClassroomsCourses = [];
-    await Promise.all(classroomId.map(async cId => {
-      if (!cId) return;
-      const response = await getClassroom(cId);
-      allClassroomsCourses.push(response?.Item?.courses || []);
-    }));
-    const flatClassrooms = allClassroomsCourses.flat();
-    const seen = new Set();
-    const uniqueClassroomsCourses = flatClassrooms.filter(classR => {
-      if (seen.has(classR)) return false;
-      seen.add(classR);
-      return true;
-    });
-    return uniqueClassroomsCourses;
-  }, {
-    classroomId: assignment?.classroomId
-  }, {
-    enabled: !!(assignment.classroomId.length > 0)
+  const classroomQuery = useQueries({
+    queries: (Array.isArray(assignment.classroomId) ? assignment.classroomId : [assignment.classroomId]).map(cId => ({
+      queryKey: _Queries.classrooms.classroomKeys.item(cId, username),
+      queryFn: () => getClassroom(cId, filters),
+      queryOptions: {
+        enabled: !!(Array.isArray(assignment.classroomId) ? assignment.classroomId.length > 0 : assignment.classroomId)
+      }
+    })),
+    combine: results => {
+      const normalizedData = results.map(result => {
+        const data = result.data;
+        if (data?.classroomId) {
+          return data;
+        }
+        if (data?.Item?.classroomId) {
+          return data.Item;
+        }
+        return null;
+      }).filter(Boolean);
+      return {
+        data: normalizedData,
+        pending: results.some(result => result.isPending)
+      };
+    }
   });
-  const selectedClassroom = (0, _react.useMemo)(() => classroomQuery.isSuccess && classroomQuery.data ? classroomQuery.data : {}, [classroomQuery.data, classroomQuery.isSuccess]);
+  const selectedClassroomCourses = (0, _react.useMemo)(() => {
+    if (!classroomQuery.pending && classroomQuery.data.length > 0) {
+      const allCourses = classroomQuery.data.flatMap(classroom => classroom.courses || []);
+      const seen = new Set();
+      const uniqueCourses = allCourses.filter(courseId => {
+        if (seen.has(courseId)) return false;
+        seen.add(courseId);
+        return true;
+      });
+      return uniqueCourses;
+    } else {
+      return [];
+    }
+  }, [classroomQuery.data, classroomQuery.pending]);
   const coursesQuery = _Queries.courses.useCourses(async filters => {
     const response = await getCourses(filters);
     return response;
   }, {
     filters: {
-      courseIds: selectedClassroom?.toString()
+      courseIds: selectedClassroomCourses?.toString()
     }
   }, {
     enabled: !!assignment.classroomId
@@ -122,17 +140,22 @@ function CreateAssignmentDialog({
       }
     })),
     combine: results => {
+      const allMembers = results.flatMap(result => {
+        if (Array.isArray(result?.data?.Items)) {
+          return result.data.Items;
+        }
+        return [];
+      });
       return {
-        data: results.map(result => result.data),
+        data: allMembers,
         pending: results.some(result => result.isPending)
       };
     }
   });
-  const selectedMembers = (0, _react.useMemo)(() => {
-    if (!classroomMembersQueries.pending && Array.isArray(classroomMembersQueries.data[0].Items) && classroomMembersQueries.data[0].Items.length) {
-      const flatMembers = classroomMembersQueries.data[0].Items.flat();
+  const uniqueClassroomMembers = (0, _react.useMemo)(() => {
+    if (!classroomMembersQueries.pending && classroomMembersQueries.data.length > 0) {
       const seen = new Set();
-      const uniqueMembers = flatMembers.filter(member => {
+      const uniqueMembers = classroomMembersQueries.data.filter(member => {
         if (seen.has(member.memberId)) return false;
         seen.add(member.memberId);
         return true;
@@ -160,13 +183,13 @@ function CreateAssignmentDialog({
       courses: filteredCourses
     });
   }, [selectedCourses, submittedExercises]);
-  const classroomMembers = async selectedMembers => {
-    const formattedMembers = await getMemberDetails(selectedMembers);
+  const classroomMembers = async uniqueClassroomMembers => {
+    const formattedMembers = await getMemberDetails(uniqueClassroomMembers);
     setMembers(formattedMembers);
   };
   (0, _react.useEffect)(() => {
-    classroomMembers(selectedMembers);
-  }, [selectedMembers]);
+    classroomMembers(uniqueClassroomMembers);
+  }, [uniqueClassroomMembers]);
   (0, _react.useEffect)(() => {
     setAssignment(prev => ({
       ...prev,
@@ -227,7 +250,7 @@ function CreateAssignmentDialog({
   const handleCreateAssignment = async () => {
     try {
       await Promise.all(assignment.classroomId.map(async cId => {
-        const selectedClassroomMembers = selectedMembers.filter(member => member.classroomId === cId).map(student => student.memberId).filter(studentId => assignment?.assignedStudents.includes(studentId));
+        const selectedClassroomMembers = uniqueClassroomMembers.filter(member => member.classroomId === cId).map(student => student.memberId).filter(studentId => assignment?.assignedStudents.includes(studentId));
         const formattedAssignment = {
           ...assignment,
           classroomId: cId,
@@ -295,7 +318,33 @@ function CreateAssignmentDialog({
               label: t("select_classroom"),
               onChange: handleChange("classroomId"),
               required: true,
-              renderValue: selected => selected?.map(classroomId => classrooms?.find(c => c.classroomId === classroomId))?.map(c => c?.classroomName)?.filter(n => n).join(", "),
+              renderValue: selected => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  display: "inline-block",
+                  maxWidth: "100%",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: selected?.map(classroomId => classrooms?.find(c => c.classroomId === classroomId))?.map(c => c?.classroomName)?.filter(n => n).join(", ")
+              }),
+              MenuProps: {
+                PaperProps: {
+                  sx: {
+                    width: 'auto',
+                    maxWidth: 400
+                  }
+                },
+                getContentAnchorEl: null,
+                anchorOrigin: {
+                  vertical: "bottom",
+                  horizontal: "left"
+                },
+                transformOrigin: {
+                  vertical: "top",
+                  horizontal: "left"
+                }
+              },
               children: classrooms.filter(c => c.createdBy === username || c.collaborators.includes(userEmail)).map(c => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
                 value: c.classroomId,
                 disabled: c.classroomId === classroom,
@@ -303,14 +352,37 @@ function CreateAssignmentDialog({
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 0.5
+                    justifyContent: "space-between",
+                    width: "100%"
                   },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
-                      src: c.picture
-                    })
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                    primary: c.classroomName
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      flex: 1,
+                      minWidth: 0,
+                      gap: 1
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: c.picture,
+                      sx: {
+                        width: 32,
+                        height: 32
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                      primary: c.classroomName,
+                      primaryTypographyProps: {
+                        noWrap: true,
+                        sx: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        }
+                      },
+                      sx: {
+                        minWidth: 0,
+                        flex: 1
+                      }
+                    })]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
                     disabled: c.classroomId === classroom,
                     checked: assignment.classroomId?.includes(c.classroomId) || c.classroomId === classroom

package/dist/Assignments/CreateAssignmentDialog/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "CreateAssignmentDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./CreateAssignmentDialog.js"
-  }
+{
+    "name": "CreateAssignmentDialog",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./CreateAssignmentDialog.js"
+  }
   

package/dist/Assignments/SelectAssignmentTypeDialog/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "SelectAssignmentTypeDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./SelectAssignmentTypeDialog.js"
-  }
+{
+    "name": "SelectAssignmentTypeDialog",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./SelectAssignmentTypeDialog.js"
+  }
   

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -11,11 +11,13 @@ var _Public = _interopRequireDefault(require("@mui/icons-material/Public"));
 var _VpnLock = _interopRequireDefault(require("@mui/icons-material/VpnLock"));
 var _colors = require("@mui/material/colors");
 var _Archive = _interopRequireDefault(require("@mui/icons-material/Archive"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CardVisibility({
   t = text => text,
-  visibility = ""
+  visibility = "",
+  isCourseHidden = false
 }) {
   const isPublic = visibility === "public";
   let icon;
@@ -36,18 +38,18 @@ function CardVisibility({
     });
     color = "secondary";
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     sx: {
       position: "relative"
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
       color: color,
       icon: icon,
       label: t(visibility),
       sx: theme => ({
         position: "absolute",
-        bottom: "16px",
-        right: "16px",
+        bottom: "8px",
+        right: "8px",
         fontWeight: "bold",
         textTransform: "capitalize",
         pointerEvents: "none",
@@ -57,7 +59,26 @@ function CardVisibility({
           color: "white"
         })
       })
-    })
+    }), isCourseHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      color: "success",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {
+        fontSize: "small"
+      }),
+      label: t("hidden"),
+      sx: theme => ({
+        position: "absolute",
+        bottom: "8px",
+        right: "108px",
+        fontWeight: "bold",
+        textTransform: "capitalize",
+        pointerEvents: "none",
+        boxShadow: theme.shadows[1],
+        backgroundColor: theme.palette.mode === "light" ? _colors.blue[700] : _colors.blue[500],
+        ...(theme.palette.mode === "light" && {
+          color: "white"
+        })
+      })
+    })]
   });
 }
 CardVisibility.propTypes = {

package/dist/Cards/Course/Course.js

@@ -19,6 +19,8 @@ var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
 var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/OndemandVideo"));
 var _PictureAsPdf = _interopRequireDefault(require("@mui/icons-material/PictureAsPdf"));
 var _School = _interopRequireDefault(require("@mui/icons-material/School"));
+var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
 var _Members = _interopRequireDefault(require("../../Dialogs/Members"));
 var _CourseOutline = _interopRequireDefault(require("../../Dialogs/CourseOutline"));
 var _Members2 = _interopRequireDefault(require("../../Lists/Members"));
@@ -43,16 +45,18 @@ function OverflowMenu({
   handleClickOpenMembers,
   isCreator,
   isMember,
-  viewCourse,
   startCourse,
   leaveCourse,
   handleRemoveCourse,
+  handleHideCourse,
+  handleUnhideCourse,
   isAdmin,
   handleDuplicateCourse,
   course,
   classroomId,
   isClassroomArchived = false,
-  canDuplicateCourse
+  canDuplicateCourse,
+  hiddenCourses = []
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
     id: `card-menu-${courseId}`,
@@ -129,6 +133,24 @@ function OverflowMenu({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("remove_course")
       })]
+    }), handleHideCourse && !hiddenCourses.includes(courseId) && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: () => handleHideCourse(courseId),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("hide_course")
+      })]
+    }), handleUnhideCourse && hiddenCourses.includes(courseId) && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: () => handleUnhideCourse(courseId),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Visibility.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("show_course")
+      })]
     })]
   });
 }
@@ -199,6 +221,8 @@ function CourseCard({
   handleLeaveCourse,
   handleClickCourse,
   handleRemoveCourse,
+  handleHideCourse,
+  handleUnhideCourse,
   membersProps,
   selectable,
   selected,
@@ -218,13 +242,15 @@ function CourseCard({
   classroomId,
   cardTitleComponent = "h2",
   isClassroomArchived = false,
-  email
+  email,
+  hiddenCourses = []
 }) {
   const [placeholderRef, visible] = (0, _reactIntersectionObserver.useInView)({
     rootMargin: "320px",
     triggerOnce: true
   });
   const [isOutlineOpen, setIsOutlineOpen] = (0, _react.useState)(false);
+  const isCourseHidden = hiddenCourses.includes(course.courseId);
   const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
     const response = await getCourseSections(courseId, filters);
     return response;
@@ -346,7 +372,8 @@ function CourseCard({
           placeholderRef: placeholderRef
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardVisibility, {
           t: t,
-          visibility: visibility
+          visibility: visibility,
+          isCourseHidden: isCourseHidden
         })]
       }), userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         "aria-label": `${t("go_to")} ${createdByName || `${courseName} ${t("creator")}`} ${t("profile")}`,
@@ -535,10 +562,13 @@ function CourseCard({
       startCourse: startCourse,
       leaveCourse: leaveCourse,
       handleRemoveCourse: handleRemoveCourse,
+      handleHideCourse: handleHideCourse,
+      handleUnhideCourse: handleUnhideCourse,
       handleDuplicateCourse: handleDuplicateCourse,
       course: course,
       isClassroomArchived: isClassroomArchived,
-      canDuplicateCourse: canDuplicateCourse
+      canDuplicateCourse: canDuplicateCourse,
+      hiddenCourses: hiddenCourses
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Members.default, {
       getMemberDetails: getMemberDetails,
       t: t,