@nualang/nualang-ui-components 0.1.1219 → 0.1.1221

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _material = require("@mui/material");
+var _PlayCircleOutline = _interopRequireDefault(require("@mui/icons-material/PlayCircleOutline"));
+var _Message = _interopRequireDefault(require("@mui/icons-material/Message"));
+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 _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 [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;
+    setIsSelectAllChecked(count === games.length);
+  }, [selectedExercises, roleplay.roleplayId, games.length]);
+  const handleSelectAll = () => {
+    if (isSelectAllChecked) {
+      const removeExercises = games.map(game => ({
+        roleplayId: roleplay.roleplayId,
+        game
+      }));
+      handleSelectExercise(removeExercises);
+    } else {
+      let gamesToAdd = [];
+      games.forEach(game => {
+        if (!selectedExercises.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
+          gamesToAdd = [...gamesToAdd, {
+            roleplayId: roleplay.roleplayId,
+            game
+          }];
+        }
+      });
+      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;
+  const roleplayHasInteractions = numberOfRoleplayInteractions > 0;
+  const roleplayHasQuestions = numberOfRoleplayQuestions > 0;
+  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") : "",
+      placement: "left",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+          onClick: () => setOpen(!open),
+          disabled: isRoleplaySelected || isRoleplayEmpty || isExerciseSelected || !isRoleplayValid,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexDirection: {
+              xs: "column",
+              sm: "row"
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            width: {
+              xs: "100%",
+              sm: "85%"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+              src: roleplay.picture
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+              primary: roleplay.roleplayName,
+              secondary: roleplay.description,
+              sx: {
+                marginLeft: 2
+              }
+            })]
+          }), roleplayHasInteractions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+              secondary: numberOfRoleplayInteractions,
+              sx: {
+                marginRight: 0.5
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+              sx: {
+                marginRight: {
+                  xs: 0,
+                  sm: -3
+                }
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("number_of_interactions"),
+                placement: "top",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
+                  sx: {
+                    width: 18
+                  }
+                })
+              })
+            })]
+          }), roleplayHasQuestions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+              secondary: numberOfRoleplayQuestions,
+              sx: {
+                marginRight: 0.5
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("number_of_questions"),
+                placement: "top",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RateReview.default, {
+                  sx: {
+                    width: 18
+                  }
+                })
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            onClick: () => setOpen(!open),
+            children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
+              sx: {
+                color: "#757575"
+              }
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+              sx: {
+                color: "#757575"
+              }
+            })
+          }), useCase === "assignment" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("select_all"),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+                checked: isSelectAllChecked,
+                onChange: handleSelectAll,
+                onClick: event => {
+                  event.stopPropagation();
+                }
+              })
+            })
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+      in: open,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: 3.5,
+        children: useCase === "assignment" ? games.map(game => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+          onClick: isRoleplayValid ? () => handleSelectExercise([{
+            roleplayId: roleplay.roleplayId,
+            game
+          }]) : null,
+          disabled: !isRoleplayValid,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexDirection: {
+              xs: "column",
+              sm: "row"
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: t(game),
+            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)
+            })
+          })]
+        })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+          onClick: handleRoleplaySelected("roleplay-story"),
+          disabled: isRoleplaySelected || isExerciseSelected || !isRoleplayValid,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexDirection: {
+              xs: "column",
+              sm: "row"
+            }
+          },
+          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, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
+              color: "primary"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+function AssignmentRoleplaySelection({
+  roleplays = [],
+  handleCreateGame,
+  courseSectionTopicId,
+  t,
+  isExerciseSelected,
+  handleSelectExercise,
+  selectedExercises,
+  useCase
+}) {
+  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,
+    t: t,
+    isExerciseSelected: isExerciseSelected,
+    handleSelectExercise: handleSelectExercise,
+    selectedExercises: selectedExercises,
+    useCase: useCase
+  }, index));
+}
+var _default = exports.default = AssignmentRoleplaySelection;

package/dist/Assignments/AssignmentRoleplaySelection/package.json

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

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -0,0 +1,418 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CreateAssignmentDialog;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _DatePicker = require("@mui/x-date-pickers/DatePicker");
+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 _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 _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; }
+const useStyles = (0, _mui.makeStyles)()(theme => ({
+  appBar: {
+    position: "relative"
+  },
+  dialogContent: {
+    display: "flex",
+    gap: theme.spacing(2),
+    padding: theme.spacing(3)
+  }
+}));
+function Transition(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
+    direction: "up",
+    ...props
+  });
+}
+function CreateAssignmentDialog({
+  t,
+  classrooms = [],
+  classroom,
+  getClassroomMembers,
+  open,
+  handleClose,
+  getCourseSections,
+  getRoleplays,
+  createAssignment,
+  username,
+  getMemberDetails,
+  getClassroom,
+  getCourses
+}) {
+  const {
+    classes
+  } = useStyles();
+  const [selectedExercises, setSelectedExercises] = (0, _react.useState)([]);
+  const [members, setMembers] = (0, _react.useState)([]);
+  const [assignment, setAssignment] = (0, _react.useState)({
+    classroomId: "",
+    assignedStudents: members?.map(member => member.memberId),
+    title: "",
+    instructions: "",
+    type: "assignment",
+    scheduleDate: (0, _dayjs.default)(),
+    dueDate: (0, _dayjs.default)().add(1, "day"),
+    exercises: selectedExercises
+  });
+  const classroomQuery = _Queries.classrooms.useClassroom(async classroomId => {
+    const response = await getClassroom(classroomId);
+    return response;
+  }, {
+    classroomId: assignment.classroomId
+  }, {
+    enabled: !!assignment.classroomId
+  });
+  const selectedClassroom = (0, _react.useMemo)(() => classroomQuery.isSuccess && classroomQuery.data.Item ? classroomQuery.data.Item : {}, [classroomQuery.data, classroomQuery.isSuccess]);
+  const coursesQuery = _Queries.courses.useCourses(async filters => {
+    const response = await getCourses(filters);
+    return response;
+  }, {
+    filters: {
+      courseIds: selectedClassroom?.courses?.toString()
+    }
+  }, {
+    enabled: !!assignment.classroomId
+  });
+  const membersQuery = _Queries.classrooms.useClassroomMembers(async (classroomId, username) => {
+    const response = await getClassroomMembers(classroomId, username);
+    return response;
+  }, {
+    classroomId: assignment.classroomId,
+    username: username
+  }, {
+    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]);
+  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);
+    setMembers(formattedMembers);
+  };
+  (0, _react.useEffect)(() => {
+    classroomMembers(selectedMembers);
+  }, [selectedMembers]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      exercises: selectedExercises
+    }));
+  }, [selectedExercises]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      assignedStudents: members?.map(member => member.memberId)
+    }));
+  }, [members]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      classroomId: classroom
+    }));
+  }, [classroom]);
+  const [isSelectExerciseOpen, setIsSelectExerciseOpen] = (0, _react.useState)(false);
+  const handleCloseSelectExercise = () => {
+    setIsSelectExerciseOpen(false);
+  };
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  const handleChange = field => event => {
+    let value = event?.target?.value ?? event;
+    setAssignment(prev => {
+      if (field === "assignedStudents") {
+        return {
+          ...prev,
+          assignedStudents: typeof value === "string" ? value.split(",") : value
+        };
+      }
+      if (field === "classroom") {
+        return {
+          ...prev,
+          classroomId: value,
+          assignedStudents: []
+        };
+      }
+      return {
+        ...prev,
+        [field]: value
+      };
+    });
+  };
+  const handleCreateAssignment = () => {
+    createAssignment(assignment);
+    handleClose();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+    fullScreen: true,
+    open: open,
+    onClose: handleClose,
+    TransitionComponent: Transition,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AppBar, {
+      className: classes.appBar,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "start",
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "Close",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h5",
+          fontWeight: "bold",
+          textAlign: "center",
+          children: t("create_assignment")
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      component: "main",
+      className: classes.dialogContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          padding: 1,
+          boxShadow: 3,
+          width: "50%"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardContent, {
+          sx: {
+            flexGrow: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
+            variant: "outlined",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+              id: "classroom-label",
+              required: true,
+              children: t("select_classroom")
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+              labelId: "classroom-label",
+              id: "classroom",
+              value: assignment.classroomId,
+              label: t("select_classroom"),
+              onChange: handleChange("classroomId"),
+              required: true,
+              disabled: classroom,
+              children: classrooms.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: classroom.classroomId,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: classroom.picture
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                    primary: classroom.classroomName
+                  })]
+                })
+              }, classroom.classroomId))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+            label: t("assignment_title"),
+            fullWidth: true,
+            value: assignment.title,
+            onChange: handleChange("title"),
+            required: true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+            label: t("assignment_description"),
+            fullWidth: true,
+            multiline: true,
+            rows: 3,
+            value: assignment.instructions,
+            onChange: handleChange("instructions")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            sx: {
+              width: "fit-content"
+            },
+            startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {}),
+            onClick: () => setIsSelectExerciseOpen(true),
+            children: t("add_exercise")
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          padding: 1,
+          boxShadow: 3,
+          width: "50%"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardContent, {
+          sx: {
+            flexGrow: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
+            disabled: !assignment.classroomId,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+              id: "members-label",
+              required: true,
+              children: t("select_members")
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+              labelId: "members-label",
+              id: "assignedStudents",
+              label: t("select_members"),
+              multiple: true,
+              required: true,
+              value: assignment.assignedStudents,
+              onChange: handleChange("assignedStudents"),
+              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, {
+                  src: member.userImage,
+                  sx: {
+                    mr: 2
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                  primary: member.username
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+                  checked: assignment.assignedStudents?.includes(member.memberId)
+                })]
+              }, member.memberId))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+            dateAdapter: _AdapterDayjs.AdapterDayjs,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
+              label: t("due_date"),
+              value: assignment.dueDate,
+              onChange: date => setAssignment(prev => ({
+                ...prev,
+                dueDate: date
+              }))
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        position: "fixed",
+        bottom: 0,
+        width: "100%",
+        backgroundColor: "white",
+        boxShadow: "0 -2px 5px rgba(0,0,0,0.1)",
+        p: 2,
+        textAlign: "center",
+        display: "flex",
+        justifyContent: "flex-end"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        color: "primary",
+        sx: {
+          marginRight: 2
+        },
+        onClick: handleClose,
+        children: t("cancel")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonGroup, {
+        variant: "contained",
+        color: "primary",
+        sx: {
+          borderRadius: 10
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          disabled: !assignment.assignedStudents?.length || !assignment.scheduleDate || !assignment.dueDate || !assignment.title || !assignment.classroomId || !assignment.exercises?.length,
+          onClick: handleCreateAssignment,
+          children: t("assign")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          color: "primary",
+          onClick: handleMenuOpen,
+          sx: {
+            minWidth: "40px",
+            padding: "6px"
+          },
+          disabled: !assignment.assignedStudents?.length || !assignment.scheduleDate || !assignment.dueDate || !assignment.title || !assignment.classroomId || !assignment.exercises?.length,
+          children: anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropUp.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+        anchorEl: anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleMenuClose,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          gap: 1,
+          padding: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+            dateAdapter: _AdapterDayjs.AdapterDayjs,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
+              label: t("assign_date"),
+              value: assignment.scheduleDate,
+              onChange: date => setAssignment(prev => ({
+                ...prev,
+                scheduleDate: date
+              }))
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            fullWidth: true,
+            onClick: () => {
+              handleCreateAssignment;
+              handleMenuClose();
+            },
+            children: t("schedule_assignment")
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectExercise.default, {
+      t: t,
+      open: isSelectExerciseOpen,
+      handleClose: handleCloseSelectExercise,
+      courses: selectedCourses,
+      getCourseSections: getCourseSections,
+      getRoleplays: getRoleplays,
+      username: username,
+      useCase: "assignment",
+      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]
+    }))]
+  });
+}
+CreateAssignmentDialog.propTypes = {
+  t: _propTypes.default.func.isRequired,
+  classrooms: _propTypes.default.array.isRequired,
+  open: _propTypes.default.bool.isRequired,
+  handleClose: _propTypes.default.func.isRequired
+};

package/dist/Assignments/CreateAssignmentDialog/package.json

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