@nualang/nualang-ui-components 0.1.1242 → 0.1.1244

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/AssignmentBotSelection.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InProgressBadge = InProgressBadge;
+exports.ProgressBadge = ProgressBadge;
+exports.default = void 0;
+var _react = require("react");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _reactRouterDom = require("react-router-dom");
+var _jsxRuntime = require("react/jsx-runtime");
+const sxGreenColor = theme => ({
+  color: theme.palette.success ? theme.palette.success.dark : ""
+});
+const sxInfoColor = theme => ({
+  color: theme.palette.info ? theme.palette.info.main : ""
+});
+function ProgressBadge({
+  completions
+}) {
+  return completions > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxGreenColor,
+    badgeContent: completions,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Done, {})
+  }) : null;
+}
+function InProgressBadge({
+  progressCount
+}) {
+  return progressCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxInfoColor,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Timelapse, {})
+  }) : null;
+}
+function Bot({
+  bot,
+  courseSectionTopicId,
+  isBotSelected,
+  t,
+  isExerciseSelected,
+  handleSelectExercise = null,
+  selectedExercises,
+  useCase,
+  assignment,
+  lastClickedExerciseId,
+  memberCourseCompletions,
+  topicProgress,
+  isCreator
+}) {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const params = (0, _reactRouterDom.useParams)();
+  const {
+    classroomId
+  } = params;
+  const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
+  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|") || [];
+  const addSearchParams = () => {
+    if (!classroomId || !courseId || !sectionId || !topicId || !bot?.botId) {
+      console.error("Missing required parameters for navigation");
+      return;
+    }
+    const lastClickedExercise = {
+      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${bot.botId}`
+    };
+    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
+    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}`);
+  };
+  const [open, setOpen] = (0, _react.useState)(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
+  const [isSelected, setIsSelected] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Check if this exercise is selected
+    const exerciseSelected = selectedExercises?.some(exercise => exercise.botId === bot.botId);
+    setIsSelected(exerciseSelected);
+  }, [selectedExercises, bot.botId]);
+  const handleClick = () => {
+    setIsSelected(!isSelected);
+    const exercise = {
+      botId: bot.botId,
+      courseSectionTopicId
+    };
+    handleSelectExercise([exercise]);
+  };
+  const getBotCompletion = () => {
+    if (!Array.isArray(memberCourseCompletions) || memberCourseCompletions.length === 0) {
+      return 0;
+    }
+    const botCompletion = memberCourseCompletions.filter(completion => completion.botId === bot.botId);
+    return botCompletion.length;
+  };
+  const getBotProgress = () => {
+    const progress = topicProgress?.filter(progress => progress.botId === bot.botId && progress.existingMessages && progress.existingMessages !== null);
+    return progress?.length || 0;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+        onClick: () => {
+          if (useCase === "assignment-start") {
+            addSearchParams();
+          } else if (handleSelectExercise) {
+            handleClick();
+          }
+        },
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexDirection: {
+            xs: "column",
+            sm: "row"
+          },
+          marginLeft: "60px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          width: {
+            xs: "100%",
+            sm: "85%"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: bot.picture
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: bot.botName,
+            secondary: bot.description,
+            sx: {
+              marginLeft: 2
+            }
+          })]
+        }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+          checked: isSelected,
+          onClick: e => {
+            e.stopPropagation();
+            handleClick();
+          }
+        }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
+            progressCount: getBotProgress()
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBadge, {
+            completions: getBotCompletion()
+          })]
+        })]
+      })
+    })
+  });
+}
+function AssignmentBotSelection({
+  bots = [],
+  courseSectionTopicId,
+  t,
+  isExerciseSelected,
+  handleSelectExercise,
+  selectedExercises,
+  useCase,
+  assignment,
+  lastClickedExerciseId,
+  memberCourseCompletions,
+  topicProgress
+}) {
+  return bots.map((bot, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Bot, {
+    bot: bot,
+    courseSectionTopicId: courseSectionTopicId,
+    t: t,
+    isExerciseSelected: isExerciseSelected,
+    handleSelectExercise: handleSelectExercise,
+    selectedExercises: selectedExercises,
+    useCase: useCase,
+    assignment: assignment,
+    lastClickedExerciseId: lastClickedExerciseId,
+    memberCourseCompletions: memberCourseCompletions,
+    topicProgress: topicProgress
+  }, index));
+}
+var _default = exports.default = AssignmentBotSelection;

package/dist/Assignments/AssignmentBotSelection/package.json

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

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AssignmentCard;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -14,8 +14,6 @@ var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
 var _iconsMaterial = require("@mui/icons-material");
 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 = text => text,
   index = 0,
@@ -33,8 +31,10 @@ function AssignmentCard({
   memberId,
   fetchMemberCourseCompletions,
   lastClickedExerciseId,
-  handleViewProgress
+  handleViewProgress,
+  lastAssignmentFetch
 }) {
+  console.log(assignment);
   const [confirm] = (0, _useConfirm.default)(t);
   const {
     useQuery
@@ -45,7 +45,7 @@ function AssignmentCard({
       await deleteAssignment(classroomId, assignmentId);
     }
   };
-  const calculateDaysUntilDue = (dueDate, scheduledDate) => {
+  const calculateDaysUntilDue = (dueDate, scheduledDate, t) => {
     const now = new Date();
     const due = new Date(dueDate);
     const scheduled = new Date(scheduledDate);
@@ -112,6 +112,8 @@ function AssignmentCard({
     staleTime: 500000
   });
   const memberCourseCompletions = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
+  const lastFetch = lastAssignmentFetch?.current[assignment?.classroomId] || 0;
+  const isNew = assignment?.updatedAt > lastFetch && !isCreator;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
     sx: {
       display: "flex",
@@ -124,25 +126,36 @@ function AssignmentCard({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
-        sx: {
-          width: '100%'
-        },
         spacing: 2,
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           size: "grow",
           flexDirection: "column",
           display: "flex",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            variant: "body1",
-            component: "div",
-            children: assignment.title
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body1",
+              component: "div",
+              children: assignment.title
+            }), isNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              ml: 2,
+              px: 1,
+              py: 0.25,
+              bgcolor: "#8300A1",
+              color: "white",
+              fontSize: "0.75rem",
+              borderRadius: 1,
+              fontWeight: "bold",
+              children: t('NEW')
+            })]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             variant: "button",
             color: "text.secondary",
-            children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate)
+            children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate, t)
           })
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -174,7 +187,7 @@ function AssignmentCard({
           spacing: 2,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
             size: {
-              md: 6,
+              md: 10,
               xs: 12
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {

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/AssignmentCardsList.js

@@ -13,8 +13,7 @@ var _teacherCreate = _interopRequireDefault(require("../../img/teacher-create-2.
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
@@ -31,7 +30,8 @@ const AssignmentCardsList = ({
   progressHelpers,
   fetchMemberCourseCompletions,
   memberId,
-  handleViewProgress
+  handleViewProgress,
+  lastAssignmentFetch
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
@@ -133,6 +133,7 @@ const AssignmentCardsList = ({
         return new Date(assignment.scheduleDate) <= new Date();
       }).map((assignment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
         index: index,
+        lastAssignmentFetch: lastAssignmentFetch,
         assignment: assignment,
         t: t,
         isCreator: isCreator,

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"
+  }