@nualang/nualang-ui-components 0.1.1220 → 0.1.1222

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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,
+  assignment,
+  handleStartExercise,
+  username,
+  getCourseSections,
+  getRoleplays,
+  isCreator
+}) {
+  t = text => text;
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const calculateDaysUntilDue = dueDate => {
+    const now = new Date();
+    const due = new Date(dueDate);
+    const diffTime = due - now;
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    if (diffDays < 0) {
+      return t("overdue");
+    } else if (diffDays === 0) {
+      return t("due_today");
+    } else if (diffDays === 1) {
+      return t("due_tomorrow");
+    } else {
+      return `${t("due_in")} ${diffDays} ${t("days")}`;
+    }
+  };
+  const handleIconClick = event => {
+    event.stopPropagation();
+    setExpanded(prev => !prev);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
+    sx: {
+      display: "flex",
+      marginBottom: 2,
+      boxShadow: 3
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardContent, {
+      sx: {
+        flexGrow: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        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, {
+          item: true,
+          xs: true,
+          flexDirection: "column",
+          display: "flex",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body1",
+            component: "div",
+            children: assignment.title
+          }), !isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+              variant: "determinate",
+              value: assignment.completed / assignment.assigned * 100 //change this to the actual value of student completed
+              ,
+              sx: {
+                height: 10,
+                borderRadius: 5,
+                width: "25%"
+              },
+              color: "success"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                marginLeft: 1
+              },
+              children: `${Math.round(assignment.completed / assignment.assigned * 100)}%`
+            })]
+          })]
+        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          item: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            color: "primary",
+            children: t("edit")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            color: "primary",
+            children: t("delete")
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "button",
+            color: "text.secondary",
+            children: calculateDaysUntilDue(assignment.dueDate)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClick: handleIconClick,
+            children: expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
+          })
+        })]
+      }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        mt: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+          sx: {
+            marginBottom: 1.5
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            item: true,
+            xs: 12,
+            md: 9.5,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body2",
+              children: assignment.description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              mt: 2,
+              width: "80%",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelector.default, {
+                t: t,
+                assignment: assignment,
+                handleStartExercise: handleStartExercise,
+                username: username,
+                getCourseSections: getCourseSections,
+                getRoleplays: getRoleplays,
+                isAssignment: true,
+                isCreator: isCreator
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            item: true,
+            xs: 3,
+            md: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              sx: {
+                textAlign: "center"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "h4",
+                  children: assignment.completed
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "body2",
+                  color: "text.secondary",
+                  children: t("Completed")
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+                orientation: "vertical",
+                flexItem: true,
+                sx: {
+                  width: "2px",
+                  marginX: 2,
+                  backgroundColor: "darkgray"
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "h4",
+                  children: assignment.assigned
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "body2",
+                  color: "text.secondary",
+                  children: t("assigned")
+                })]
+              })]
+            }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              sx: {
+                marginTop: 2,
+                marginLeft: "15px"
+              },
+              children: t("view_progress")
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+AssignmentCard.propTypes = {
+  assignment: _propTypes.default.shape({
+    image: _propTypes.default.string,
+    title: _propTypes.default.string,
+    description: _propTypes.default.string,
+    dueDate: _propTypes.default.string.isRequired,
+    completed: _propTypes.default.number,
+    assigned: _propTypes.default.number,
+    t: _propTypes.default.func
+  }).isRequired
+};

package/dist/Assignments/AssignmentCard/package.json

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

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _AssignmentCard = _interopRequireDefault(require("../AssignmentCard/AssignmentCard"));
+var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+var _teacherCreate = _interopRequireDefault(require("../../img/teacher-create-2.svg"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AssignmentCardsList = ({
+  t = text => text,
+  assignments = [],
+  isCreator,
+  onRefresh,
+  handleCreateAssignment
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    mt: 3,
+    mb: 1,
+    children: assignments.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        alignItems: "center",
+        sx: {
+          mb: 1
+        },
+        display: "flex",
+        flexDirection: "column",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h5",
+          fontWeight: "bold",
+          sx: {
+            textAlign: "center",
+            flexGrow: 1
+          },
+          children: t("no_assignments")
+        }), !isCreator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            textAlign: "center",
+            mt: 2,
+            width: '70%'
+          },
+          children: t("no_assignments_description")
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            textAlign: "center",
+            mt: 2,
+            width: '70%'
+          },
+          children: t("assignments_description")
+        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          color: "primary",
+          sx: {
+            mt: 2,
+            textAlign: "center"
+          },
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {}),
+          onClick: handleCreateAssignment,
+          children: t("create_assignment")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            height: "100%",
+            display: "flex",
+            flexGrow: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            maxWidth: "400px",
+            marginRight: "40px",
+            paddingTop: "20px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _teacherCreate.default,
+            alt: "teacher-create"
+          })
+        })]
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: {
+          mb: 2
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h5",
+          children: t("assignments")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          placement: "left",
+          title: t("refresh_assignments"),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClick: onRefresh,
+            "aria-label": "refresh",
+            size: "large",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Refresh.default, {})
+          })
+        })]
+      }), assignments.map(assignment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
+        assignment: assignment,
+        t: t,
+        isCreator: isCreator
+      }, assignment.id))]
+    })
+  });
+};
+AssignmentCardsList.propTypes = {
+  t: _propTypes.default.func,
+  assignments: _propTypes.default.array,
+  isCreator: _propTypes.default.bool,
+  onRefresh: _propTypes.default.func
+};
+var _default = exports.default = AssignmentCardsList;

package/dist/Assignments/AssignmentCardsList/package.json

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

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _material = require("@mui/material");
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
+var _AssignmentExerciseSelection = _interopRequireDefault(require("../AssignmentExerciseSelection/AssignmentExerciseSelection"));
+var _Queries = require("@nualang/nualang-api-and-queries/Queries");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Course({
+  course,
+  index,
+  getCourseSections,
+  getRoleplays,
+  username,
+  handleCreateGame,
+  t,
+  isExerciseSelected,
+  setIsExerciseSelected,
+  isDialogOpen,
+  handleSelectExercise,
+  selectedExercises,
+  useCase,
+  assignment,
+  handleStartExercise,
+  isAssignment,
+  isCreator
+}) {
+  const [open, setOpen] = (0, _react.useState)(false);
+  const sectionsQuery = _Queries.courses.useCourseSections(async (courseId, filters) => {
+    const response = await getCourseSections(courseId, filters);
+    return response;
+  }, {
+    courseId: course.courseId,
+    username: username,
+    filters: {
+      limit: 1000
+    }
+  }, {
+    enabled: !!course.courseId && isDialogOpen
+  });
+  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;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
+    disablePadding: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: isCourseEmpty ? t("course_no_sections") : "",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+        disablePadding: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemButton, {
+          onClick: () => setOpen(!open),
+          disabled: isCourseEmpty || isExerciseSelected,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: course.picture,
+                alt: ""
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                primary: course.courseName,
+                secondary: course.description,
+                sx: {
+                  marginLeft: 2
+                }
+              })]
+            }), open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
+              sx: {
+                color: "#757575"
+              }
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+              sx: {
+                color: "#757575"
+              }
+            })]
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+      in: open,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: 3.5,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelection.default, {
+          t: t,
+          sections: courseSections,
+          isLoading: sectionsQuery.isLoading,
+          handleCreateGame: handleCreateGame,
+          courseId: course.courseId,
+          isExerciseSelected: isExerciseSelected,
+          setIsExerciseSelected: setIsExerciseSelected,
+          getRoleplays: getRoleplays,
+          handleSelectExercise: handleSelectExercise,
+          selectedExercises: selectedExercises,
+          useCase: useCase,
+          assignment: assignment,
+          handleStartExercise: handleStartExercise,
+          isAssignment: isAssignment,
+          isCreator: isCreator
+        })
+      })
+    })]
+  }, index);
+}
+function AssignmentCourseSelection({
+  courses,
+  getCourseSections,
+  getRoleplays,
+  username,
+  handleCreateGame,
+  t,
+  isExerciseSelected,
+  setIsExerciseSelected,
+  handleSelectExercise,
+  selectedExercises,
+  useCase,
+  assignment,
+  handleStartExercise,
+  isAssignment,
+  isCreator,
+  ...otherProps
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: courses.map((course, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Course, {
+      course: course,
+      index: index,
+      getCourseSections: getCourseSections,
+      getRoleplays: getRoleplays,
+      username: username,
+      handleCreateGame: handleCreateGame,
+      t: t,
+      isExerciseSelected: isExerciseSelected,
+      setIsExerciseSelected: setIsExerciseSelected,
+      handleSelectExercise: handleSelectExercise,
+      selectedExercises: selectedExercises,
+      useCase: useCase,
+      assignment: assignment,
+      handleStartExercise: handleStartExercise,
+      isAssignment: isAssignment,
+      isCreator: isCreator
+    }))
+  });
+}
+var _default = exports.default = AssignmentCourseSelection;

package/dist/Assignments/AssignmentCourseSelection/package.json

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