@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -1,654 +0,0 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-import { Card, CardContent, TextField, FormControl, InputLabel, MenuItem, Select, Button, Dialog, Box, AppBar, Toolbar, IconButton, Typography, Slide, Checkbox, ListItemText, ButtonGroup, Avatar, Tooltip } from "@mui/material";
-import PropTypes from "prop-types";
-import AddIcon from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import { makeStyles } from "tss-react/mui";
-import dayjs from "dayjs";
-import AssignmentSelectExercise from "../AssignmentSelectExercise/AssignmentSelectExercise";
-import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { classrooms as classroomQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import AssignmentExerciseSelector from "../AssignmentExerciseSelector/AssignmentExerciseSelector";
-import { config } from "../../config";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  appBar: {
-    position: "relative"
-  },
-  dialogContent: {
-    display: "flex",
-    gap: theme.spacing(2),
-    padding: theme.spacing(3),
-    marginBottom: theme.spacing(7)
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-export default function CreateAssignmentDialog({
-  t,
-  classrooms = [],
-  classroom,
-  getClassroomMembers,
-  open,
-  handleClose,
-  getCourseSections,
-  getRoleplays,
-  getBots,
-  createAssignment,
-  username,
-  getMemberDetails,
-  getCourses,
-  initialData = {},
-  dialogTitle,
-  userEmail = "",
-  assignedStudents
-}) {
-  const {
-    classes
-  } = useStyles();
-  const {
-    useQueries
-  } = ReactQuery;
-  const [selectedExercises, setSelectedExercises] = useState(initialData.exercises ? initialData.exercises : []);
-  const [submittedExercises, setSubmittedExercises] = useState(initialData.exercises ? initialData.exercises : []);
-  const [members, setMembers] = useState([]);
-  const [assignment, setAssignment] = useState({
-    ...initialData,
-    classroomId: classroom && classroom.length > 0 ? [classroom] : [],
-    assignedStudents,
-    title: initialData.title ? initialData.title : undefined,
-    instructions: initialData.instructions ? initialData.instructions : t("default_assignment_instructions"),
-    type: "assignment",
-    scheduleDate: initialData.scheduleDate ? initialData.scheduleDate : dayjs().add(1, "minute"),
-    dueDate: initialData.dueDate ? initialData.dueDate : dayjs().add(1, "day").endOf("day"),
-    exercises: submittedExercises
-  });
-  const [isTitleEdited, setIsTitleEdited] = useState(Boolean(initialData.title));
-  const [isCreating, setIsCreating] = useState(false);
-  const selectedClassroomCourses = useMemo(() => {
-    const selectedIds = Array.isArray(assignment.classroomId) ? assignment.classroomId : [assignment.classroomId];
-    const allCourses = (classrooms || []).filter(c => selectedIds.includes(c.classroomId)).flatMap(c => c.courses || []);
-    return [...new Set(allCourses)];
-  }, [classrooms, assignment.classroomId]);
-  const coursesQuery = courseQuerys.useCourses(async filters => {
-    const response = await getCourses(filters);
-    return response;
-  }, {
-    filters: {
-      courseIds: selectedClassroomCourses?.toString()
-    }
-  }, {
-    enabled: !!assignment.classroomId
-  });
-  let filters = {
-    limit: config.limits.classroomMembers
-  };
-  const classroomMembersQueries = useQueries({
-    queries: (Array.isArray(assignment.classroomId) ? assignment.classroomId : [assignment.classroomId]).map(cId => ({
-      queryKey: classroomQuerys.classroomKeys.itemMembers(cId, username),
-      queryFn: () => getClassroomMembers(cId, filters),
-      queryOptions: {
-        enabled: !!(Array.isArray(assignment.classroomId) ? assignment.classroomId.length > 0 : assignment.classroomId)
-      }
-    })),
-    combine: results => {
-      const allMembers = results.flatMap(result => {
-        if (Array.isArray(result?.data?.Items)) {
-          return result.data.Items;
-        }
-        return [];
-      });
-      return {
-        data: allMembers,
-        pending: results.some(result => result.isPending)
-      };
-    }
-  });
-  const uniqueClassroomMembers = useMemo(() => {
-    if (!classroomMembersQueries.pending && classroomMembersQueries.data.length > 0) {
-      const seen = new Set();
-      const uniqueMembers = classroomMembersQueries.data.filter(member => {
-        if (seen.has(member.memberId)) return false;
-        seen.add(member.memberId);
-        return true;
-      });
-      return uniqueMembers;
-    } else {
-      return [];
-    }
-  }, [classroomMembersQueries.data, classroomMembersQueries.pending]);
-  const selectedCourses = useMemo(() => {
-    if (!coursesQuery.isSuccess || !Array.isArray(coursesQuery.data.Items)) {
-      return [];
-    }
-    const rawCourses = coursesQuery.data.Items;
-    const allowedCourses = (classrooms || []).filter(c => assignment.classroomId.includes(c.classroomId)).map(c => c.courses || []).filter(arr => Array.isArray(arr)); // Ensure valid arrays
-
-    const commonCourses = allowedCourses.length === 0 ? [] : allowedCourses.reduce((acc, arr) => acc.filter(str => arr.includes(str)));
-    const filtered = rawCourses.filter(course => (commonCourses || []).includes(course?.courseId));
-    return filtered;
-  }, [coursesQuery.data, coursesQuery.isSuccess, classrooms, assignment.classroomId]);
-  useEffect(() => {
-    let filteredCourses = selectedCourses.filter(course => submittedExercises.some(exercise => exercise.courseSectionTopicId?.split("|")[0] === course.courseId));
-    setAssignment(prev => ({
-      ...prev,
-      courses: filteredCourses.map(course => ({
-        courseId: course.courseId,
-        courseName: course.courseName,
-        description: course.description,
-        picture: course.picture
-      }))
-    }));
-    const selectedTopicIds = new Set(submittedExercises.map(ex => ex.courseSectionTopicId));
-    const topicNames = Array.from(new Set(filteredCourses.flatMap(course => course.sections?.flatMap(section => section.topics?.flatMap(topic => {
-      const topicKey = `${course.courseId}|${section.sectionId}|${topic.topicId}`;
-      return selectedTopicIds.has(topicKey) ? topic.topicName : [];
-    }))).filter(Boolean)));
-    setAssignment(prev => {
-      const newTitle = topicNames.length ? topicNames.join(", ") : undefined;
-      if (isTitleEdited && prev.title) {
-        return prev;
-      }
-      return {
-        ...prev,
-        title: newTitle
-      };
-    });
-  }, [selectedCourses, submittedExercises, isTitleEdited]);
-  const classroomMembers = async uniqueClassroomMembers => {
-    const formattedMembers = await getMemberDetails(uniqueClassroomMembers);
-    setMembers(formattedMembers);
-  };
-  useEffect(() => {
-    classroomMembers(uniqueClassroomMembers);
-  }, [uniqueClassroomMembers]);
-  useEffect(() => {
-    setAssignment(prev => ({
-      ...prev,
-      exercises: submittedExercises
-    }));
-  }, [submittedExercises]);
-  useEffect(() => {
-    setAssignment(prev => ({
-      ...prev,
-      assignedStudents: initialData.assignedStudents?.length ? initialData.assignedStudents : members?.map(member => member.memberId)
-    }));
-  }, [members]);
-  useEffect(() => {
-    if (classroom && classroom.length > 0 && !assignment.classroomId?.includes(classroom)) {
-      setAssignment(prev => ({
-        ...prev,
-        classroomId: [classroom]
-      }));
-    }
-  }, [classroom]);
-  const [isSelectExerciseOpen, setIsSelectExerciseOpen] = useState(false);
-  const handleCloseSelectExercise = () => {
-    setIsSelectExerciseOpen(false);
-  };
-  const handleChange = field => event => {
-    let value = event?.target?.value ?? event;
-    if (field === "title") {
-      setIsTitleEdited(true);
-    }
-    if (field === "assignedStudents") {
-      if (value.includes("select-all")) {
-        const allSelected = assignment.assignedStudents.length === members.length;
-        value = allSelected ? [] : members.map(m => m.memberId);
-      }
-      return setAssignment(prev => ({
-        ...prev,
-        assignedStudents: typeof value === "string" ? value.split(",") : value
-      }));
-    }
-    if (field === "classroomId") {
-      return setAssignment(prev => ({
-        ...prev,
-        classroomId: typeof value === "string" ? value.split(",") : value
-      }));
-    }
-    if (field === "classroom") {
-      return setAssignment(prev => ({
-        ...prev,
-        classroomId: value,
-        assignedStudents: []
-      }));
-    }
-    return setAssignment(prev => ({
-      ...prev,
-      [field]: value
-    }));
-  };
-  const handleCreateAssignment = async () => {
-    setIsCreating(true);
-    try {
-      await Promise.all(assignment.classroomId.map(async cId => {
-        const selectedClassroomMembers = uniqueClassroomMembers.filter(member => member.classroomId === cId).map(student => student.memberId).filter(studentId => assignment?.assignedStudents.includes(studentId));
-        const formattedAssignment = {
-          ...assignment,
-          classroomId: cId,
-          assignedStudents: selectedClassroomMembers
-        };
-        return createAssignment(formattedAssignment);
-      }));
-      handleClose();
-    } catch (error) {
-      console.error("Error creating assignments:", error);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-  const matchesExercise = (a, b) => a.courseSectionTopicId === b.courseSectionTopicId && a.name === b.name && a.roleplayId === b.roleplayId && a.botId === b.botId && a.phraseListId === b.phraseListId;
-  const handleRemoveExercise = toRemove => {
-    setSubmittedExercises(exs => exs.filter(e => !(Array.isArray(toRemove) ? toRemove.some(tr => matchesExercise(tr, e)) : matchesExercise(toRemove, e))));
-    setSelectedExercises(exs => exs.filter(e => !(Array.isArray(toRemove) ? toRemove.some(tr => matchesExercise(tr, e)) : matchesExercise(toRemove, e))));
-  };
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    slots: {
-      transition: Transition
-    },
-    children: [/*#__PURE__*/_jsx(AppBar, {
-      className: classes.appBar,
-      children: /*#__PURE__*/_jsxs(Toolbar, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          edge: "start",
-          color: "inherit",
-          onClick: handleClose,
-          "aria-label": "Close",
-          children: /*#__PURE__*/_jsx(Close, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h5",
-          sx: {
-            fontWeight: "bold",
-            textAlign: "center"
-          },
-          children: t(dialogTitle)
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(Box, {
-      component: "main",
-      className: classes.dialogContent,
-      sx: {
-        display: "flex",
-        flexDirection: {
-          xs: "column",
-          md: "row"
-        },
-        gap: 2,
-        width: "100%",
-        boxSizing: "border-box"
-      },
-      children: [/*#__PURE__*/_jsx(Card, {
-        sx: {
-          flex: "unset",
-          minWidth: 0,
-          padding: 1,
-          boxShadow: 3,
-          width: {
-            xs: "100%",
-            md: "50%"
-          },
-          boxSizing: "border-box"
-        },
-        children: /*#__PURE__*/_jsxs(CardContent, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 2
-          },
-          children: [/*#__PURE__*/_jsxs(FormControl, {
-            fullWidth: true,
-            variant: "outlined",
-            children: [/*#__PURE__*/_jsx(InputLabel, {
-              id: "classroom-label",
-              required: true,
-              children: t("select_classroom")
-            }), /*#__PURE__*/_jsx(Select, {
-              labelId: "classroom-label",
-              id: "classroom",
-              multiple: true,
-              "data-cy": "select-classroom-dropdown",
-              value: assignment.classroomId,
-              label: t("select_classroom"),
-              onChange: handleChange("classroomId"),
-              required: true,
-              renderValue: selected => /*#__PURE__*/_jsx(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__*/_jsx(MenuItem, {
-                value: c.classroomId,
-                disabled: c.classroomId === classroom,
-                children: /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    width: "100%"
-                  },
-                  children: [/*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      flex: 1,
-                      minWidth: 0,
-                      gap: 1
-                    },
-                    children: [/*#__PURE__*/_jsx(Avatar, {
-                      src: c.picture,
-                      sx: {
-                        width: 32,
-                        height: 32
-                      }
-                    }), /*#__PURE__*/_jsx(ListItemText, {
-                      primary: c.classroomName,
-                      sx: {
-                        minWidth: 0,
-                        flex: 1
-                      },
-                      slotProps: {
-                        primary: {
-                          noWrap: true,
-                          sx: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis"
-                          }
-                        }
-                      }
-                    })]
-                  }), /*#__PURE__*/_jsx(Checkbox, {
-                    disabled: c.classroomId === classroom,
-                    checked: assignment.classroomId?.includes(c.classroomId) || c.classroomId === classroom
-                  })]
-                })
-              }, c.classroomId))
-            })]
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            disableHoverListener: selectedCourses?.length > 0,
-            disableFocusListener: selectedCourses?.length > 0,
-            disableTouchListener: selectedCourses?.length > 0,
-            title: t("no_shared_courses"),
-            children: /*#__PURE__*/_jsx("span", {
-              style: {
-                display: "inline-block"
-              },
-              children: /*#__PURE__*/_jsx(Button, {
-                "data-cy": "assignment-exercise-selector-button",
-                variant: "outlined",
-                color: "primary",
-                disabled: selectedCourses?.length === 0,
-                sx: {
-                  width: "fit-content"
-                },
-                startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
-                onClick: () => setIsSelectExerciseOpen(true),
-                children: t("add_exercise")
-              })
-            })
-          }), /*#__PURE__*/_jsx(AssignmentExerciseSelector, {
-            selectedExercises: submittedExercises,
-            t: t,
-            assignment: assignment,
-            getCourseSections: getCourseSections,
-            getRoleplays: getRoleplays,
-            getBots: getBots,
-            viewOnly: true,
-            useCase: "assignment-view",
-            handleRemoveExercise: handleRemoveExercise,
-            isPreview: true
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Card, {
-        sx: {
-          flex: "unset",
-          minWidth: 0,
-          padding: 1,
-          boxShadow: 3,
-          width: {
-            xs: "100%",
-            md: "50%"
-          },
-          boxSizing: "border-box"
-        },
-        children: /*#__PURE__*/_jsxs(CardContent, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 2
-          },
-          children: [/*#__PURE__*/_jsx(TextField, {
-            "data-cy": "assignment-title-input",
-            label: t("assignment_title"),
-            fullWidth: true,
-            value: assignment.title,
-            onChange: handleChange("title"),
-            required: true,
-            slotProps: {
-              inputLabel: {
-                shrink: true
-              }
-            }
-          }), /*#__PURE__*/_jsx(TextField, {
-            "data-cy": "assignment-description-input",
-            label: t("assignment_description"),
-            fullWidth: true,
-            multiline: true,
-            rows: 3,
-            value: assignment.instructions,
-            onChange: handleChange("instructions")
-          }), /*#__PURE__*/_jsxs(FormControl, {
-            fullWidth: true,
-            disabled: !assignment.classroomId,
-            children: [/*#__PURE__*/_jsx(InputLabel, {
-              id: "members-label",
-              required: true,
-              children: t("assign_to")
-            }), /*#__PURE__*/_jsxs(Select, {
-              labelId: "members-label",
-              id: "assignedStudents",
-              "data-cy": "assignment-members-selector",
-              label: t("assign_to"),
-              multiple: true,
-              required: true,
-              value: assignment.assignedStudents,
-              onChange: handleChange("assignedStudents"),
-              renderValue: selected => assignment.assignedStudents.length === members.length ? t("all_students") : selected?.map(memberId => members?.find(member => member.memberId === memberId))?.map(member => member?.username).join(", "),
-              MenuProps: {
-                PaperProps: {
-                  sx: {
-                    maxHeight: 300
-                  }
-                },
-                MenuListProps: {
-                  disablePadding: true
-                },
-                autoFocus: false,
-                disableAutoFocusItem: true
-              },
-              children: [members.length > 0 && /*#__PURE__*/_jsx(MenuItem, {
-                value: "select-all",
-                children: /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    width: "100%"
-                  },
-                  children: [/*#__PURE__*/_jsx(ListItemText, {
-                    primary: t("all_students")
-                  }), /*#__PURE__*/_jsx(Checkbox, {
-                    checked: assignment.assignedStudents.length === members.length,
-                    indeterminate: assignment.assignedStudents.length > 0 && assignment.assignedStudents.length < members.length
-                  })]
-                })
-              }), members.map(member => /*#__PURE__*/_jsxs(MenuItem, {
-                value: member.memberId,
-                children: [/*#__PURE__*/_jsx(Avatar, {
-                  src: member.userImage,
-                  sx: {
-                    mr: 2
-                  }
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: member.username
-                }), /*#__PURE__*/_jsx(Checkbox, {
-                  checked: assignment.assignedStudents?.includes(member.memberId)
-                })]
-              }, member.memberId))]
-            })]
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              width: "100%",
-              alignItems: "center",
-              justifyContent: "space-between"
-            },
-            children: [/*#__PURE__*/_jsx(LocalizationProvider, {
-              dateAdapter: AdapterDayjs,
-              children: /*#__PURE__*/_jsx(DateTimePicker, {
-                label: t("assign_date"),
-                value: assignment.scheduleDate,
-                onChange: date => setAssignment(prev => ({
-                  ...prev,
-                  scheduleDate: date
-                })),
-                disablePast: true,
-                maxDateTime: assignment.dueDate,
-                sx: {
-                  width: "45%"
-                },
-                format: "DD MMM YYYY HH:mm",
-                slotProps: {
-                  popper: {
-                    placement: "left-start",
-                    modifiers: [{
-                      name: "preventOverflow",
-                      options: {
-                        boundary: "viewport"
-                      }
-                    }]
-                  }
-                }
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "h4",
-              children: "-"
-            }), /*#__PURE__*/_jsx(LocalizationProvider, {
-              dateAdapter: AdapterDayjs,
-              children: /*#__PURE__*/_jsx(DateTimePicker, {
-                "data-cy": "assignment-date-picker",
-                label: t("due"),
-                value: assignment.dueDate,
-                disablePast: true,
-                onChange: date => setAssignment(prev => ({
-                  ...prev,
-                  dueDate: date
-                })),
-                minDateTime: assignment.scheduleDate,
-                sx: {
-                  width: "45%"
-                },
-                format: "DD MMM YYYY HH:mm",
-                slotProps: {
-                  popper: {
-                    placement: "left-start",
-                    modifiers: [{
-                      name: "preventOverflow",
-                      options: {
-                        boundary: "viewport"
-                      }
-                    }]
-                  }
-                }
-              })
-            })]
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: theme => ({
-        position: "fixed",
-        bottom: 0,
-        width: "100%",
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: theme.shadows[4],
-        p: 2,
-        textAlign: "center",
-        display: "flex",
-        justifyContent: "flex-end"
-      }),
-      children: [/*#__PURE__*/_jsx(Button, {
-        color: "primary",
-        sx: {
-          marginRight: 2
-        },
-        onClick: handleClose,
-        children: t("cancel")
-      }), /*#__PURE__*/_jsx(ButtonGroup, {
-        variant: "contained",
-        color: "primary",
-        sx: {
-          borderRadius: 10
-        },
-        children: /*#__PURE__*/_jsx(Button, {
-          "data-cy": "assignment-assign-button",
-          disabled: isCreating || !assignment.assignedStudents?.length || !assignment.scheduleDate || !assignment.dueDate || !assignment.title || !assignment.classroomId || !assignment.exercises?.length,
-          onClick: async () => await handleCreateAssignment(),
-          children: t("assign")
-        })
-      })]
-    }), /*#__PURE__*/_jsx(AssignmentSelectExercise, {
-      t: t,
-      open: isSelectExerciseOpen,
-      handleClose: handleCloseSelectExercise,
-      courses: selectedCourses,
-      getCourseSections: getCourseSections,
-      getRoleplays: getRoleplays,
-      getBots: getBots,
-      username: username,
-      useCase: "assignment-select",
-      selectedExercises: selectedExercises,
-      setSelectedExercises: setSelectedExercises,
-      setSubmittedExercises: setSubmittedExercises
-    })]
-  });
-}
-CreateAssignmentDialog.propTypes = {
-  t: PropTypes.func.isRequired,
-  classrooms: PropTypes.array.isRequired,
-  open: PropTypes.bool.isRequired,
-  handleClose: PropTypes.func.isRequired
-};

package/dist/Assignments/CreateAssignmentDialog/package.json

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