@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Assignments/AssignmentExerciseSelection/package.json

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

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -1,53 +0,0 @@
-import React from "react";
-import { Box } from "@mui/system";
-import AssignmentCourseSelection from "../AssignmentCourseSelection/AssignmentCourseSelection";
-import { jsx as _jsx } from "react/jsx-runtime";
-function AssignmentExerciseSelector({
-  t = text => text,
-  assignment,
-  handleStartExercise,
-  username,
-  getCourseSections,
-  getRoleplays,
-  getBots,
-  isCreator,
-  selectedExercises,
-  viewOnly,
-  useCase,
-  preferred_username,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  lastClickedExerciseId,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  isReadWriteModeStudent
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(AssignmentCourseSelection, {
-      t: t,
-      assignment: assignment,
-      handleStartExercise: handleStartExercise,
-      username: username,
-      courses: assignment.courses,
-      getCourseSections: getCourseSections,
-      getRoleplays: getRoleplays,
-      getBots: getBots,
-      isCreator: isCreator,
-      selectedExercises: selectedExercises,
-      viewOnly: viewOnly,
-      useCase: useCase,
-      preferred_username: preferred_username,
-      progressHelpers: progressHelpers,
-      completionHelpers: completionHelpers,
-      memberCourseCompletions: memberCourseCompletions,
-      lastClickedExerciseId: lastClickedExerciseId,
-      handleRemoveExercise: handleRemoveExercise,
-      isPreview: isPreview,
-      isChallengeModeStudent: isChallengeModeStudent,
-      isReadWriteModeStudent: isReadWriteModeStudent
-    })
-  });
-}
-export default AssignmentExerciseSelector;

package/dist/Assignments/AssignmentExerciseSelector/package.json

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

package/dist/Assignments/AssignmentPhraseListSelection/AssignmentPhraseListSelection.js

@@ -1,469 +0,0 @@
-import { useState, useEffect } from "react";
-import { Box, ListItemButton, Avatar, ListItemText, Typography, Checkbox, ListItemIcon, IconButton, Collapse, Tooltip, Badge } from "@mui/material";
-import { useNavigate, useParams } from "react-router";
-import { getCourseSectionTopicCompletions } from "@nualang/nualang-api-and-queries/APIs/Completions";
-import { getCourseSectionTopicProgress } from "@nualang/nualang-api-and-queries/APIs/Progress";
-import { progress as progressQuerys, completions as completionQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { makeStyles } from "tss-react/mui";
-import ClearIcon from "@mui/icons-material/Clear";
-import { Done, Timelapse } from "@mui/icons-material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import HearingIcon from "@mui/icons-material/Hearing";
-import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
-import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
-import ExtensionIcon from "@mui/icons-material/Extension";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  listItemSelected: {
-    boxShadow: `inset 4px 0px 0px ${theme.palette.primary.main}`
-  },
-  avatar: {
-    backgroundColor: theme.palette.primary.main,
-    display: "flex",
-    justifyContent: "space-between",
-    borderRadius: theme.spacing()
-  },
-  greenColor: {
-    color: theme.palette.success ? theme.palette.success.dark : ""
-  },
-  infoColor: {
-    color: theme.palette.info ? theme.palette.info.main : ""
-  },
-  margin: {
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  }
-}));
-function ProgressBadge({
-  classes,
-  completions,
-  t,
-  gameName
-}) {
-  let completionCounter = 0;
-  if (completions && completions.length > 0) {
-    for (let i = 0; i < completions.length; i++) {
-      if (completions[i].exercise === gameName) {
-        completionCounter += 1;
-      }
-    }
-  }
-  return completionCounter > 0 ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.greenColor} ${classes.margin}`,
-    badgeContent: completionCounter,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Done, {
-      titleAccess: completionCounter === 1 ? t("exercise_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }) : t("exercises_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }),
-      "aria-label": completionCounter === 1 ? t("exercise_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      }) : t("exercises_completed_icon", {
-        counter: `${completionCounter}`,
-        name: `${gameName}`
-      })
-    })
-  }) : null;
-}
-function InProgressBadge({
-  classes,
-  remainingQuestions,
-  totalPhrases,
-  t,
-  gameName
-}) {
-  const isInProgress = remainingQuestions !== null && remainingQuestions.length > 0 && remainingQuestions.length < totalPhrases;
-  return isInProgress ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.infoColor} ${classes.margin}`,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Timelapse, {
-      titleAccess: t("phrase_group_game_in_progress_icon", {
-        name: gameName
-      }),
-      "aria-label": t("phrase_group_game_in_progress_icon", {
-        name: gameName
-      })
-    })
-  }) : null;
-}
-function PhraseList({
-  t,
-  phraseList,
-  courseSectionTopicId,
-  assignment,
-  useCase,
-  selectedExercises,
-  handleSelectExercise = null,
-  handleRemoveExercise = null,
-  isPreview = false,
-  viewOnly = false,
-  isCreator,
-  progressHelpers,
-  completionHelpers,
-  username,
-  preferred_username
-}) {
-  const navigate = useNavigate();
-  const {
-    classes
-  } = useStyles();
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const [isSelected, setIsSelected] = useState(false);
-  const [isPhraseListOpen, setIsPhraseListOpen] = useState(false);
-  const [isSelectAllChecked, setIsSelectAllChecked] = useState(false);
-  const [indeterminate, setIndeterminate] = useState(false);
-  const activePhrases = phraseList?.phrases || [];
-  const hasDefinitions = phraseList?.phrases?.some(phrase => phrase.definitions && phrase.definitions.length > 0);
-  const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : ["", "", ""];
-  const togglePhraseList = () => {
-    setIsPhraseListOpen(prev => !prev);
-  };
-  const hidden = new Set(Object.entries(phraseList.hiddenPhraseGroupGames || {}).filter(([, value]) => value).map(([key]) => String(key).toLowerCase()));
-  const games = [{
-    name: "translation",
-    description: "translation_exercise_desc"
-  }, {
-    name: "listening",
-    description: "listening_exercise_desc"
-  }, {
-    name: "pronunciation",
-    description: "pronunciation_exercise_desc"
-  }, ...(hasDefinitions ? [{
-    name: "meaning",
-    description: "meaning_exercise_desc"
-  }] : [])].filter(game => !hidden.has(game.name));
-  const filteredGames = viewOnly ? games.filter(game => selectedExercises.some(exercise => exercise.name === game.name && exercise.courseSectionTopicId === courseSectionTopicId && exercise.phraseListId === phraseList.phraseListId)) : games;
-  useEffect(() => {
-    const count = selectedExercises?.filter(exercise => exercise.phraseListId === phraseList.phraseListId).length || 0;
-    setIsSelectAllChecked(count === games.length);
-    setIndeterminate(count > 0 && count < games.length);
-  }, [selectedExercises, phraseList.phraseListId]);
-  const handleSelectAll = () => {
-    if (isSelectAllChecked) {
-      const removeExercises = games.map(game => ({
-        name: game.name,
-        courseSectionTopicId,
-        phraseListId: phraseList.phraseListId
-      }));
-      handleSelectExercise(removeExercises);
-      setIsSelectAllChecked(false);
-      setIndeterminate(false);
-    } else {
-      let gamesToAdd = [];
-      games.forEach(game => {
-        if (!selectedExercises?.some(exercise => exercise.name === game.name && exercise.phraseListId === phraseList.phraseListId)) {
-          gamesToAdd = [...gamesToAdd, {
-            name: game.name,
-            courseSectionTopicId,
-            phraseListId: phraseList.phraseListId
-          }];
-        }
-      });
-      handleSelectExercise(gamesToAdd);
-      setIsSelectAllChecked(true);
-      setIndeterminate(false);
-    }
-  };
-  const addSearchParams = gameName => {
-    if (!classroomId || !courseId || !sectionId || !topicId || !phraseList?.phraseListId || !assignment?.assignmentId || !gameName) {
-      console.error("Missing required parameters for navigation");
-      return;
-    }
-    const lastClickedExercise = {
-      courseSectionTopicId: `${courseId}|${sectionId}|${topicId}|${assignment.assignmentId}|${phraseList.phraseListId}`
-    };
-    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/phrase-lists/${phraseList.phraseListId}?game=${gameName}&assignmentId=${assignment.assignmentId}`);
-  };
-  useEffect(() => {
-    // Check if this exercise is selected
-    const exerciseSelected = selectedExercises?.some(exercise => exercise.phraseListId === phraseList.phraseListId);
-    setIsSelected(exerciseSelected);
-  }, [selectedExercises, phraseList.phraseListId]);
-  const handleClick = () => {
-    setIsSelected(!isSelected);
-    const exercise = {
-      phraseListId: phraseList.phraseListId,
-      courseSectionTopicId
-    };
-    handleSelectExercise([exercise]);
-  };
-  const courseSectionTopicProgressQuery = progressQuerys.useTopicMemberProgress(async (courseId, sectionId, topicId, memberId, returnvalues) => {
-    const memberProgress = await getCourseSectionTopicProgress(courseId, sectionId, topicId, memberId, returnvalues);
-    return progressHelpers.formatProgress(memberProgress.Items);
-  }, {
-    courseId: courseId,
-    sectionId: sectionId,
-    topicId: topicId,
-    memberId: username,
-    returnvalues: null
-  }, {
-    enabled: !!courseId && !!sectionId && !!topicId && !!username && !!progressHelpers
-  });
-  const topicProgress = Array.isArray(courseSectionTopicProgressQuery.data) ? courseSectionTopicProgressQuery.data : [];
-  const courseSectionTopicCompletionsQuery = completionQuerys.useTopicMemberCompletions(async (courseId, sectionId, topicId, memberId, returnvalues) => {
-    const memberCompletions = await getCourseSectionTopicCompletions(courseId, sectionId, topicId, memberId, returnvalues);
-    return completionHelpers.formatCompletions(memberCompletions.Items, username, preferred_username);
-  }, {
-    courseId: courseId,
-    sectionId: sectionId,
-    topicId: topicId,
-    memberId: username,
-    returnvalues: null
-  }, {
-    enabled: !!username && !!courseId && !!sectionId && !!topicId && !!completionHelpers
-  });
-  const completions = Array.isArray(courseSectionTopicCompletionsQuery.data) ? courseSectionTopicCompletionsQuery.data : [];
-  const phraseListCompletions = completions.filter(c => c.phraseListId === phraseList.phraseListId || !c.phraseListId && phraseList.phraseListId?.startsWith('leg-'));
-  const getPhraseListGameProgress = exercise => {
-    const record = topicProgress.find(p => p.exercise === exercise && (p.phraseListId === phraseList.phraseListId || !p.phraseListId && phraseList.phraseListId?.startsWith('leg-')));
-    if (!record) return {
-      remainingQuestions: null,
-      existingAnswerAttempts: null,
-      exerciseStartTime: null
-    };
-    return {
-      remainingQuestions: record.remainingQuestions || null,
-      existingAnswerAttempts: record.answerAttempts || null,
-      exerciseStartTime: record.exerciseStartTime || null
-    };
-  };
-  const getTotalQuestions = gameName => {
-    if (gameName === "meaning") {
-      return activePhrases.filter(phrase => phrase.definitions?.length > 0).length;
-    }
-    return activePhrases.length;
-  };
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: togglePhraseList,
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexDirection: {
-            xs: "column",
-            sm: "row"
-          },
-          marginLeft: {
-            sm: "0px",
-            md: "60px"
-          }
-        },
-        children: [/*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            width: {
-              xs: "100%",
-              sm: "85%"
-            }
-          },
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            src: phraseList.picture,
-            sx: {
-              display: "flex",
-              width: 32,
-              height: 32
-            }
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            sx: {
-              marginLeft: 2
-            },
-            primary: /*#__PURE__*/_jsx(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1
-              },
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                children: phraseList.phraseListName
-              })
-            }),
-            secondary: phraseList.description
-          })]
-        }), /*#__PURE__*/_jsx(IconButton, {
-          sx: {
-            mr: useCase === "assignment-select" ? 2 : 0
-          },
-          children: isPhraseListOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
-          edge: "end",
-          "aria-label": "remove-phraseList",
-          onClick: e => {
-            e.stopPropagation();
-            const phraseListExercises = selectedExercises.filter(ex => ex.phraseListId === phraseList.phraseListId);
-            handleRemoveExercise(phraseListExercises);
-          },
-          children: /*#__PURE__*/_jsx(ClearIcon, {
-            fontSize: "small"
-          })
-        }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("select_all"),
-          placement: "top",
-          children: /*#__PURE__*/_jsx(Checkbox, {
-            checked: isSelectAllChecked,
-            indeterminate: indeterminate,
-            onChange: handleSelectAll,
-            onClick: event => {
-              event.stopPropagation();
-            },
-            sx: {
-              mr: 2
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Collapse, {
-        in: isPhraseListOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: filteredGames.map(game => /*#__PURE__*/_jsxs(ListItemButton, {
-          sx: {
-            marginLeft: {
-              sm: "0px",
-              md: "120px"
-            }
-          },
-          onClick: () => {
-            if (useCase === "assignment-start") {
-              addSearchParams(game.name);
-            } else if (handleSelectExercise && phraseList.phraseListId) {
-              handleSelectExercise([{
-                name: game.name,
-                courseSectionTopicId,
-                phraseListId: phraseList.phraseListId
-              }]);
-            }
-          },
-          children: [game.name.toLowerCase() === "translation" && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
-          }), game.name.toLowerCase() === "listening" && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(HearingIcon, {})
-          }), game.name.toLowerCase() === "pronunciation" && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
-          }), game.name.toLowerCase() === "meaning" && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ExtensionIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t(game.name),
-            secondary: t(game.description)
-          }), /*#__PURE__*/_jsxs(ListItemIcon, {
-            children: [useCase === "assignment-select" && /*#__PURE__*/_jsx(Checkbox, {
-              checked: selectedExercises?.some(exercise => exercise.name === game.name && exercise.courseSectionTopicId === courseSectionTopicId && exercise.phraseListId === phraseList.phraseListId) ?? false,
-              onChange: () => {
-                if (handleSelectExercise && phraseList.phraseListId) {
-                  handleSelectExercise([{
-                    name: game.name,
-                    courseSectionTopicId,
-                    phraseListId: phraseList.phraseListId
-                  }]);
-                }
-              },
-              onClick: e => e.stopPropagation()
-            }), useCase === "assignment-start" && !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(InProgressBadge, {
-                classes: classes,
-                remainingQuestions: getPhraseListGameProgress(game.name)?.remainingQuestions ?? null,
-                totalPhrases: getTotalQuestions(game.name),
-                t: t,
-                gameName: game.name
-              }), /*#__PURE__*/_jsx(ProgressBadge, {
-                classes: classes,
-                completions: phraseListCompletions,
-                t: t,
-                gameName: game.name
-              })]
-            }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
-              edge: "end",
-              "aria-label": "remove-exercise",
-              onClick: e => {
-                e.stopPropagation();
-                handleRemoveExercise({
-                  courseSectionTopicId,
-                  name: game.name,
-                  phraseListId: phraseList.phraseListId
-                });
-              },
-              children: /*#__PURE__*/_jsx(ClearIcon, {
-                fontSize: "small"
-              })
-            })]
-          })]
-        }, game.name))
-      })]
-    })
-  });
-}
-export default function AssignmentPhraseListSelection({
-  t,
-  phraseLists = [],
-  courseSectionTopicId,
-  assignment,
-  useCase,
-  selectedExercises,
-  handleSelectExercise,
-  handleRemoveExercise,
-  isPreview = false,
-  viewOnly = false,
-  progressHelpers,
-  completionHelpers,
-  username,
-  preferred_username,
-  isCreator
-}) {
-  const selectedPhraseListIds = new Set(selectedExercises?.map(exercise => exercise.phraseListId) || []);
-  const filteredPhraseLists = !viewOnly ? phraseLists : phraseLists.filter(phraseList => selectedPhraseListIds.has(phraseList.phraseListId));
-  const existingPhraseListIds = new Set(phraseLists.map(pl => pl.phraseListId));
-  const orphanedPhraseListIds = useCase === "assignment-view" || useCase === "assignment-start" ? [...new Set((selectedExercises || []).filter(e => e.phraseListId && e.courseSectionTopicId === courseSectionTopicId && !existingPhraseListIds.has(e.phraseListId)).map(e => e.phraseListId))] : [];
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [filteredPhraseLists.map((phraseList, index) => /*#__PURE__*/_jsx(PhraseList, {
-      t: t,
-      phraseList: phraseList,
-      courseSectionTopicId: courseSectionTopicId,
-      assignment: assignment,
-      useCase: useCase,
-      selectedExercises: selectedExercises,
-      handleSelectExercise: handleSelectExercise,
-      handleRemoveExercise: handleRemoveExercise,
-      isPreview: isPreview,
-      viewOnly: viewOnly,
-      progressHelpers: progressHelpers,
-      completionHelpers: completionHelpers,
-      username: username,
-      preferred_username: preferred_username,
-      isCreator: isCreator
-    }, index)), orphanedPhraseListIds.map(id => /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        pl: 2,
-        py: 1.5,
-        ml: {
-          xs: "16px",
-          sm: "72px",
-          md: "76px"
-        },
-        borderLeft: "3px solid",
-        borderColor: "warning.main"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: "text.secondary"
-        },
-        children: t("exercise_no_longer_available")
-      })
-    }, id))]
-  });
-}

package/dist/Assignments/AssignmentPhraseListSelection/package.json

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