@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -1,1056 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { ListSubheader, List, ListItemIcon, ListItemText, ListItemAvatar, Collapse, Typography, Box, Avatar, Tooltip, ListItemButton, Checkbox, Chip, IconButton } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import ClearIcon from "@mui/icons-material/Clear";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ForumIcon from "@mui/icons-material/Forum";
-import FaceIcon from "@mui/icons-material/Face";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
-import AssignmentRoleplaySelection from "../AssignmentRoleplaySelection/AssignmentRoleplaySelection";
-import { CardInfoSectionItem } from "../../Cards/CardElements";
-import { getCourseSectionTopicProgress } from "@nualang/nualang-api-and-queries/APIs/Progress";
-import { progress as progressQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { useNavigate, useParams } from "react-router";
-import { ProgressBadge, InProgressBadge } from "../../Lists/Exercises/Exercises";
-import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
-import { calcCompletions } from "../../utils";
-import AssignmentBotSelection from "../AssignmentBotSelection/AssignmentBotSelection";
-import AssignmentPhraseListSelection from "../AssignmentPhraseListSelection/AssignmentPhraseListSelection";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Exercise({
-  name,
-  description,
-  courseSectionTopicId,
-  section,
-  t,
-  isExerciseSelected,
-  roleplays,
-  bots,
-  phrases,
-  handleSelectExercise = null,
-  selectedExercises,
-  useCase,
-  assignment,
-  viewOnly,
-  progressHelpers,
-  username,
-  preferred_username,
-  isCreator,
-  memberCourseCompletions,
-  completion,
-  lastClickedExerciseId,
-  isPreview,
-  handleRemoveExercise = null,
-  isChallengeModeStudent,
-  phraseLists = [],
-  completionHelpers
-}) {
-  //progress
-  const [pronunciationProgress, setPronunciationProgress] = useState(null);
-  const [translationProgress, setTranslationProgress] = useState(null);
-  const [listeningProgress, setListeningProgress] = useState(null);
-  const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
-  const {
-    translation,
-    listening,
-    pronunciation
-  } = completion ?? {};
-  const courseSectionTopicProgressQuery = progressQuerys.useTopicMemberProgress(async (courseId, sectionId, topicId, memberId, returnvalues) => {
-    const memberProgress = await getCourseSectionTopicProgress(courseId, sectionId, topicId, memberId, returnvalues);
-    const formattedProgress = await progressHelpers.formatProgress(memberProgress.Items, username, preferred_username);
-    return formattedProgress;
-  }, {
-    courseId: courseId,
-    sectionId: sectionId,
-    topicId: topicId,
-    memberId: username,
-    returnvalues: null
-  }, {
-    enabled: !!username
-  });
-  const topicProgress = courseSectionTopicProgressQuery.isSuccess && Array.isArray(courseSectionTopicProgressQuery.data) && courseSectionTopicProgressQuery.data.length ? courseSectionTopicProgressQuery.data : [];
-  const getExerciseProgress = async exercise => {
-    const exerciseIndex = topicProgress.findIndex(p => p.exercise === exercise);
-    if (exerciseIndex > -1) {
-      return {
-        remainingQuestions: topicProgress[exerciseIndex].remainingQuestions,
-        existingAnswerAttempts: topicProgress[exerciseIndex].answerAttempts,
-        exerciseStartTime: topicProgress[exerciseIndex].exerciseStartTime
-      };
-    }
-    return {
-      remainingQuestions: null,
-      existingAnswerAttempts: null,
-      exerciseStartTime: null
-    };
-  };
-  useEffect(() => {
-    if (!topicProgress || topicProgress.length === 0 || isCreator) return;
-    const fetchProgress = async () => {
-      const pronuncialtionResult = await getExerciseProgress("pronunciation");
-      setPronunciationProgress(pronuncialtionResult);
-      const translationResult = await getExerciseProgress("translation");
-      setTranslationProgress(translationResult);
-      const listeningProgress = await getExerciseProgress("listening");
-      setListeningProgress(listeningProgress);
-    };
-    fetchProgress();
-  }, [topicProgress, isCreator]);
-  const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
-  const [roleplaysOpen, setRoleplaysOpen] = useState(noRoleplays ? false : true);
-  const noBots = name.toLowerCase() === "bots" && bots?.length === 0;
-  const [botsOpen, setBotsOpen] = useState(noBots ? false : true);
-  // Phrase lists aren't currently available to check during the first render so using the phrases instead
-  const noPhrases = name.toLowerCase() === "phrases" && phrases?.length === 0;
-  const [phraseListsOpen, setPhraseListsOpen] = useState(noPhrases ? false : true);
-  const navigate = useNavigate();
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const addSearchParams = () => {
-    const lastClickedExercise = {
-      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}`
-    };
-    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}?exercise=${name}&assignmentId=${assignment.assignmentId}`);
-  };
-  const handleToggleRoleplays = () => {
-    setRoleplaysOpen(!roleplaysOpen);
-  };
-  const handleToggleBots = () => {
-    setBotsOpen(!botsOpen);
-  };
-  const handleTogglePhraseLists = () => {
-    setPhraseListsOpen(!phraseListsOpen);
-  };
-  const isValidExercise = phrases.length >= 2 || name.toLowerCase() === "roleplays" || name.toLowerCase() === "bots" || name.toLowerCase() === "phrases";
-  return /*#__PURE__*/_jsxs(Tooltip, {
-    title: isCreator ? name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : !isValidExercise ? t("minimum_two_phrases") : "" : null,
-    children: [/*#__PURE__*/_jsxs(ListItemButton, {
-      onClick: () => {
-        if (name.toLowerCase() === "roleplays") {
-          handleToggleRoleplays();
-        } else if (name.toLowerCase() === "bots") {
-          handleToggleBots();
-        } else if (name.toLowerCase() === "phrases") {
-          handleTogglePhraseLists();
-        } else if (useCase === "assignment-select") {
-          handleSelectExercise([{
-            name,
-            courseSectionTopicId
-          }]);
-        } else if (useCase === "assignment-start") {
-          addSearchParams();
-        }
-      },
-      disabled: isExerciseSelected || !isValidExercise || noRoleplays || noBots,
-      sx: theme => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        [theme.breakpoints.up("md")]: {
-          ml: "60px"
-        }
-      }),
-      children: [/*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: {
-            xs: "none",
-            sm: "flex"
-          }
-        },
-        children: [name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(ForumIcon, {})
-        }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(FaceIcon, {})
-        }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(MenuBookIcon, {})
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          width: "100%"
-        },
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(name),
-          secondary: t(description)
-        })
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          mr: useCase === "assignment-select" ? 2 : 0
-        },
-        children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          mr: useCase === "assignment-select" ? 2 : 0
-        },
-        children: botsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          mr: useCase === "assignment-select" ? 2 : 0
-        },
-        children: phraseListsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      })]
-    }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(Collapse, {
-      in: phraseListsOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: {
-            sm: 0,
-            md: 7
-          }
-        },
-        children: /*#__PURE__*/_jsx(AssignmentPhraseListSelection, {
-          t: t,
-          phraseLists: phraseLists,
-          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
-        })
-      })
-    }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
-      in: roleplaysOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: {
-            sm: 0,
-            md: 7
-          }
-        },
-        children: /*#__PURE__*/_jsx(AssignmentRoleplaySelection, {
-          roleplays: roleplays,
-          viewOnly: viewOnly,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          memberCourseCompletions: memberCourseCompletions,
-          topicProgress: topicProgress,
-          isCreator: isCreator,
-          lastClickedExerciseId: lastClickedExerciseId,
-          handleRemoveExercise: handleRemoveExercise,
-          isPreview: isPreview
-        })
-      })
-    }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(Collapse, {
-      in: botsOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: {
-            sm: 0,
-            md: 7
-          }
-        },
-        children: /*#__PURE__*/_jsx(AssignmentBotSelection, {
-          bots: bots,
-          viewOnly: viewOnly,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          memberCourseCompletions: memberCourseCompletions,
-          topicProgress: topicProgress,
-          isCreator: isCreator,
-          lastClickedExerciseId: lastClickedExerciseId,
-          handleRemoveExercise: handleRemoveExercise,
-          isPreview: isPreview,
-          isChallengeModeStudent: isChallengeModeStudent
-        })
-      })
-    })]
-  });
-}
-function ExerciseList({
-  t,
-  exercises = [],
-  isMember,
-  courseId,
-  sectionId,
-  topicId,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  roleplays,
-  bots,
-  phrases,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  viewOnly,
-  assignment,
-  handleStartExercise,
-  isCreator,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  username,
-  preferred_username,
-  lastClickedExerciseId,
-  completion,
-  handleRemoveExercise,
-  isPreview,
-  phraseLists,
-  ...otherProps
-}) {
-  const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
-  return /*#__PURE__*/_jsx(List, {
-    component: "div",
-    disablePadding: true,
-    children: exercises.map((exercise, i) => {
-      const keyId = `exerc_${courseSectionTopicId}_${exercise}_${i}`;
-      return /*#__PURE__*/_jsx(Exercise, {
-        t: t,
-        viewOnly: viewOnly,
-        ...exercise,
-        isMember: isMember,
-        courseSectionTopicId: courseSectionTopicId,
-        section: section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        roleplays: roleplays,
-        bots: bots,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        phrases: phrases,
-        handleSelectExercise: handleSelectExercise,
-        selectedExercises: selectedExercises,
-        useCase: useCase,
-        assignment: assignment,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        username: username,
-        preferred_username: preferred_username,
-        progressHelpers: progressHelpers,
-        completionHelpers: completionHelpers,
-        memberCourseCompletions: memberCourseCompletions,
-        lastClickedExerciseId: lastClickedExerciseId,
-        completion: completion,
-        handleRemoveExercise: handleRemoveExercise,
-        isPreview: isPreview,
-        phraseLists: phraseLists,
-        ...otherProps
-      }, keyId);
-    })
-  });
-}
-function Topic({
-  t,
-  courseId,
-  sectionId,
-  topicId,
-  topicName,
-  videoUrl,
-  description,
-  picture,
-  roleplays = [],
-  bots = [],
-  isMember,
-  isTopicHidden,
-  phrases,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isCreator,
-  username,
-  preferred_username,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  lastClickedExerciseId,
-  completion,
-  viewOnly,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  phraseLists: rawPhraseLists = [],
-  ...otherProps
-}) {
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const topicRef = useRef(null);
-  const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
-  const phraseLists = rawPhraseLists.filter(pl => pl.phrases && pl.phrases.length > 0);
-  const matchesLastClickedExercise = lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) && numOfIds[2] === topicId || numOfIds.length === 5 && numOfIds[3] === assignment.assignmentId && numOfIds[2] === topicId);
-  const [isExerciseListOpen, setExerciseListOpen] = useState(false);
-  useEffect(() => {
-    if (matchesLastClickedExercise) {
-      setExerciseListOpen(true);
-    }
-  }, [matchesLastClickedExercise]);
-  const [isWholeTopicSelected, setIsWholeTopicSelected] = useState(false);
-  useEffect(() => {
-    if (matchesLastClickedExercise && topicRef.current) {
-      topicRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "start"
-      });
-    }
-  }, [matchesLastClickedExercise, topicRef]);
-  let exercises;
-  switch (useCase) {
-    case "assignment-select":
-      exercises = [{
-        name: "phrases",
-        description: "phrases_exercise_desc"
-      }, {
-        name: "roleplays",
-        description: "roleplay_exercise_desc"
-      }, {
-        name: "bots",
-        description: "chatbot_exercise_desc"
-      }];
-      break;
-    case "assignment-view":
-      exercises = [{
-        name: "phrases",
-        description: "phrases_exercise_desc"
-      }, {
-        name: "roleplays",
-        description: "roleplay_exercise_desc"
-      }, {
-        name: "bots",
-        description: "chatbot_exercise_desc"
-      }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId || exercise.name === "bots" && e.botId || exercise.name === "phrases" && e.phraseListId));
-      break;
-    case "assignment-start":
-      exercises = [{
-        name: "phrases",
-        description: "phrases_exercise_desc"
-      }, {
-        name: "roleplays",
-        description: "roleplay_exercise_desc"
-      }, {
-        name: "bots",
-        description: "chatbot_exercise_desc"
-      }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId || exercise.name === "bots" && e.botId || exercise.name === "phrases" && e.phraseListId));
-      break;
-    default:
-      exercises = [];
-  }
-  let games;
-  switch (useCase) {
-    case "assignment-view":
-      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"].filter(name => selectedExercises.some(e => e.name === name));
-      break;
-    case "assignment-start":
-      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"].filter(name => selectedExercises.some(e => e.name === name));
-      break;
-    default:
-      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"];
-  }
-  useEffect(() => {
-    const expectedRoleplayCount = roleplays?.length * games?.length || 0;
-    const expectedBotCount = bots?.length || 0;
-    const expectedPhraseListCount = phraseLists?.reduce((total, pl) => {
-      const hasDefinitions = pl.phrases?.some(p => p.definitions?.length > 0);
-      const hidden = new Set(Object.entries(pl.hiddenPhraseGroupGames || {}).filter(([, v]) => v).map(([k]) => String(k).toLowerCase()));
-      const plGames = ["translation", "listening", "pronunciation", ...(hasDefinitions ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])].filter(g => !hidden.has(g));
-      return total + plGames.length;
-    }, 0) || 0;
-    const totalExpected = expectedRoleplayCount + expectedBotCount + expectedPhraseListCount;
-    const selectedRoleplays = selectedExercises?.filter(exercise => exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId)).length || 0;
-    const selectedBots = selectedExercises?.filter(exercise => exercise.botId && bots?.some(bot => bot.botId === exercise.botId)).length || 0;
-    const selectedPhraseLists = selectedExercises?.filter(exercise => exercise.phraseListId && phraseLists?.some(pl => pl.phraseListId === exercise.phraseListId)).length || 0;
-    const totalSelected = selectedRoleplays + selectedBots + selectedPhraseLists;
-    setIsWholeTopicSelected(totalSelected === totalExpected);
-  }, [selectedExercises, exercises, roleplays, bots, phraseLists, courseId, sectionId, topicId, games]);
-  const handleSelectAll = () => {
-    const isAllSelected = selectedCount === totalCount;
-    if (isAllSelected) {
-      const removeExercises = selectedExercises?.filter(exercise => exercise.courseSectionTopicId === courseSectionTopicId || exercise.roleplayId && roleplays?.some(r => r.roleplayId === exercise.roleplayId) || exercise.botId && bots?.some(b => b.botId === exercise.botId));
-      handleSelectExercise(removeExercises);
-    } else {
-      let exercisesToAdd = [];
-      roleplays.forEach(roleplay => {
-        games.forEach(name => {
-          if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.name === name)) {
-            exercisesToAdd.push({
-              roleplayId: roleplay.roleplayId,
-              name,
-              courseSectionTopicId: courseSectionTopicId,
-              roleplayName: roleplay.roleplayName
-            });
-          }
-        });
-      });
-      bots?.forEach(bot => {
-        if (!selectedExercises?.some(e => e.botId === bot.botId)) {
-          exercisesToAdd.push({
-            botId: bot.botId,
-            courseSectionTopicId: courseSectionTopicId
-          });
-        }
-      });
-      phraseLists?.forEach(pl => {
-        const hasDefinitions = pl.phrases?.some(p => p.definitions?.length > 0);
-        const hidden = new Set(Object.entries(pl.hiddenPhraseGroupGames || {}).filter(([, v]) => v).map(([k]) => String(k).toLowerCase()));
-        const plGames = ["translation", "listening", "pronunciation", ...(hasDefinitions ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])].filter(g => !hidden.has(g));
-        plGames.forEach(gameName => {
-          if (!selectedExercises?.some(e => e.phraseListId === pl.phraseListId && e.name === gameName)) {
-            exercisesToAdd.push({
-              phraseListId: pl.phraseListId,
-              name: gameName,
-              courseSectionTopicId: courseSectionTopicId
-            });
-          }
-        });
-      });
-      handleSelectExercise(exercisesToAdd);
-    }
-  };
-  const toggleExerciseList = () => {
-    setExerciseListOpen(!isExerciseListOpen);
-  };
-  const hasNonEmptyRoleplay = roleplays?.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
-  const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
-  const selectedRoleplays = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.roleplayId).length || 0;
-  const selectedBots = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.botId).length || 0;
-  const selectedPhraseLists = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.phraseListId).length || 0;
-  const selectedCount = selectedRoleplays + selectedBots + selectedPhraseLists;
-  const totalRoleplays = (roleplays?.length || 0) * (games?.length || 0);
-  const totalBots = bots?.length || 0;
-  const totalPhraseLists = phraseLists?.reduce((total, pl) => {
-    const hasDefinitions = pl.phrases?.some(p => p.definitions?.length > 0);
-    const hidden = new Set(Object.entries(pl.hiddenPhraseGroupGames || {}).filter(([, v]) => v).map(([k]) => String(k).toLowerCase()));
-    const plGames = ["translation", "listening", "pronunciation", ...(hasDefinitions ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])].filter(g => !hidden.has(g));
-    return total + plGames.length;
-  }, 0) || 0;
-  const totalCount = totalRoleplays + totalBots + totalPhraseLists;
-  const isTopicDisabled = phrases.length === 0 && !hasNonEmptyRoleplay || isExerciseSelected;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(Tooltip, {
-      title: phrases.length === 0 ? t("topic_no_phrases") : "",
-      placement: "top",
-      children: [!isTopicHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        onClick: toggleExerciseList,
-        "data-cy": "topic-list-item",
-        ref: topicRef,
-        disabled: phrases.length === 0 && !hasNonEmptyRoleplay || isExerciseSelected,
-        children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
-          children: picture ? /*#__PURE__*/_jsx(Avatar, {
-            src: picture,
-            alt: topicName
-          }) : /*#__PURE__*/_jsx(Avatar, {
-            alt: topicName,
-            children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-          })
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            fontWeight: "fontWeightBold",
-            width: "100%"
-          },
-          children: [/*#__PURE__*/_jsx(ListItemText, {
-            primary: isLargeScreen ? topicName || "" : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  mb: 1
-                },
-                children: picture ? /*#__PURE__*/_jsx(Avatar, {
-                  src: picture,
-                  alt: topicName
-                }) : /*#__PURE__*/_jsx(Avatar, {
-                  alt: topicName,
-                  children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                children: topicName || ""
-              })]
-            }),
-            secondary: /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                component: "p",
-                color: "textSecondary",
-                children: description
-              })
-            })
-          }), !isCreator && completion && completion !== null && /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              mt: 1,
-              mb: 1
-            },
-            children: /*#__PURE__*/_jsx(Box, {
-              sx: {
-                display: "inline",
-                flexGrow: 1
-              },
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: `Completed ${completion.completed} / ${completion.total} exercises`,
-                children: /*#__PURE__*/_jsx(ColorLinearProgress, {
-                  variant: "determinate",
-                  value: completion.percentage
-                })
-              })
-            })
-          }), isMember && !isCreator && /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              mt: 1,
-              width: isLargeScreen ? "40%" : "100%"
-            },
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                ml: 1,
-                fontSize: 14,
-                minWidth: 35
-              },
-              children: [completion && completion.percentage ? completion.percentage.toFixed(0) : 0, "%"]
-            })
-          }), videoUrl && /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-              component: "span",
-              color: "textSecondary",
-              children: [/*#__PURE__*/_jsx(OndemandVideoIcon, {}), /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                color: "textSecondary",
-                sx: {
-                  ml: 0.5
-                },
-                children: t("video_included")
-              })]
-            })
-          })]
-        }), !isTopicDisabled && useCase === "assignment-select" && /*#__PURE__*/_jsx(Chip, {
-          label: `${selectedCount} / ${totalCount}`,
-          size: "medium",
-          disabled: selectedCount === 0,
-          color: selectedCount === totalCount ? "primary" : "default",
-          sx: {
-            fontWeight: "bold",
-            marginRight: 3
-          }
-        }), /*#__PURE__*/_jsx(IconButton, {
-          children: isExerciseListOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-        }), useCase === "assignment-select" && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Checkbox, {
-            checked: !isTopicDisabled && selectedCount === totalCount,
-            indeterminate: selectedCount > 0 && selectedCount < totalCount,
-            onClick: event => {
-              event.stopPropagation();
-            },
-            onChange: handleSelectAll
-          })
-        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
-          edge: "end",
-          "aria-label": "remove-topic",
-          onClick: e => {
-            e.stopPropagation();
-            const topicExercises = selectedExercises.filter(ex => ex.courseSectionTopicId?.split("|")[2] === topicId);
-            handleRemoveExercise(topicExercises);
-          },
-          children: /*#__PURE__*/_jsx(ClearIcon, {
-            fontSize: "small"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Collapse, {
-        in: isExerciseListOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsx(ExerciseList, {
-          t: t,
-          viewOnly: viewOnly,
-          topicInfo: {
-            topicName,
-            description
-          },
-          exercises: exercises,
-          isMember: isMember,
-          courseId: courseId,
-          sectionId: sectionId,
-          topicId: topicId,
-          section: section,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          roleplays: roleplays,
-          phrases: phrases,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          handleStartExercise: handleStartExercise,
-          isCreator: isCreator,
-          username: username,
-          preferred_username: preferred_username,
-          progressHelpers: progressHelpers,
-          completionHelpers: completionHelpers,
-          memberCourseCompletions: memberCourseCompletions,
-          lastClickedExerciseId: lastClickedExerciseId,
-          bots: bots,
-          ...otherProps,
-          completion: completion,
-          handleRemoveExercise: handleRemoveExercise,
-          isPreview: isPreview,
-          isChallengeModeStudent: isChallengeModeStudent,
-          phraseLists: phraseLists
-        })
-      })]
-    })
-  });
-}
-function Section({
-  t,
-  courseId,
-  sectionId,
-  sectionName,
-  isHidden,
-  topics = [],
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  getBots,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isCreator,
-  viewOnly,
-  username,
-  preferred_username,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  lastClickedExerciseId,
-  completion,
-  course,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  ...otherProps
-}) {
-  const root = {
-    width: "100%"
-  };
-  const [selectedTopicIds, setSelectedTopicIds] = useState([]);
-  const [filteredTopics, setFilteredTopics] = useState([]);
-  useEffect(() => {
-    assignment?.exercises?.forEach(exercise => {
-      if (exercise.courseSectionTopicId) {
-        const topicId = exercise.courseSectionTopicId.split("|")[2];
-        setSelectedTopicIds(prev => [...prev, topicId]);
-      }
-    });
-  }, [selectedExercises]);
-  useEffect(() => {
-    selectedExercises?.forEach(exercise => {
-      if (exercise.courseSectionTopicId) {
-        const topicId = exercise.courseSectionTopicId.split("|")[2];
-        setSelectedTopicIds(prev => [...prev, topicId]);
-      }
-    });
-  }, [selectedExercises]);
-  useEffect(() => {
-    if (viewOnly) {
-      setFilteredTopics(topics.filter(topic => {
-        const topicId = topic.topicId;
-        const hasExercises = assignment?.exercises?.some(e => e.courseSectionTopicId?.split("|")[2] === topicId);
-        return selectedTopicIds.includes(topicId) && hasExercises;
-      }));
-    }
-  }, [topics, selectedTopicIds, viewOnly, assignment?.exercises]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: !isHidden && (viewOnly ? filteredTopics.length > 0 : topics.length > 0) && /*#__PURE__*/_jsx(List, {
-      subheader: /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsx(ListSubheader, {
-          disableGutters: true,
-          disableSticky: true,
-          component: "div",
-          id: `${sectionName}-section-list-subheader`,
-          sx: {
-            fontWeight: !isExerciseSelected ? "bold" : "normal"
-          },
-          children: useCase === "assignment-select" ? sectionName : `${course.courseName} - ${sectionName}`
-        })
-      }),
-      sx: root,
-      children: viewOnly ? filteredTopics.map((topic, i) => /*#__PURE__*/_jsx(Topic, {
-        index: i,
-        viewOnly: viewOnly,
-        topics: topics,
-        topicLength: topics.length,
-        sectionId: sectionId,
-        courseId: courseId,
-        phrases: topic.phrases,
-        section: section,
-        t: t,
-        ...topic,
-        ...otherProps,
-        completion: topic.completion,
-        picture: topic.picture,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        getBots: getBots,
-        handleSelectExercise: handleSelectExercise,
-        selectedExercises: assignment ? assignment.exercises?.filter(exercise => exercise.roleplayId || exercise.courseSectionTopicId.split("|")[2] === topic.topicId) : selectedExercises?.filter(exercise => exercise.roleplayId || exercise.courseSectionTopicId.split("|")[2] === topic.topicId),
-        useCase: useCase,
-        assignment: assignment,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        lastClickedExerciseId: lastClickedExerciseId,
-        username: username,
-        preferred_username: preferred_username,
-        progressHelpers: progressHelpers,
-        completionHelpers: completionHelpers,
-        handleRemoveExercise: handleRemoveExercise,
-        isPreview: isPreview,
-        memberCourseCompletions: memberCourseCompletions,
-        isChallengeModeStudent: isChallengeModeStudent
-      }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/_jsx(Topic, {
-        viewOnly: viewOnly,
-        index: i,
-        topics: topics,
-        topicLength: topics.length,
-        sectionId: sectionId,
-        courseId: courseId,
-        phrases: topic.phrases,
-        section: section,
-        t: t,
-        ...topic,
-        ...otherProps,
-        completion: topic.completion,
-        picture: topic.picture,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        handleSelectExercise: handleSelectExercise,
-        selectedExercises: selectedExercises,
-        useCase: useCase,
-        assignment: assignment,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        lastClickedExerciseId: lastClickedExerciseId,
-        username: username,
-        preferred_username: preferred_username,
-        progressHelpers: progressHelpers,
-        completionHelpers: completionHelpers,
-        memberCourseCompletions: memberCourseCompletions,
-        isChallengeModeStudent: isChallengeModeStudent
-      }, `${sectionId}-${topic.topicId}`))
-    })
-  });
-}
-function SectionList({
-  sections = [],
-  handleFetchTopic,
-  teachClassrooms,
-  courseId,
-  t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  getBots,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isCreator,
-  viewOnly,
-  username,
-  preferred_username,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  lastClickedExerciseId,
-  course,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  isReadWriteModeStudent,
-  ...otherProps
-}) {
-  const [courseSectionWithProgress, setCourseSectionWithProgress] = useState([]);
-  useEffect(() => {
-    if (sections && memberCourseCompletions && selectedExercises) {
-      const sectionsWithProgress = calcCompletions(sections, memberCourseCompletions, selectedExercises, isChallengeModeStudent, isReadWriteModeStudent);
-      setCourseSectionWithProgress(sectionsWithProgress);
-    }
-  }, [sections, memberCourseCompletions, selectedExercises, isChallengeModeStudent, isReadWriteModeStudent]);
-  const courseSections = courseSectionWithProgress && courseSectionWithProgress.length ? courseSectionWithProgress : sections;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: courseSections.length > 0 ? courseSections.map((section, index) => {
-      return /*#__PURE__*/_jsx(Section, {
-        index: index,
-        handleFetchTopic: handleFetchTopic,
-        teachClassrooms: teachClassrooms,
-        courseId: courseId,
-        t: t,
-        ...section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        section: section,
-        getRoleplays: getRoleplays,
-        getBots: getBots,
-        handleSelectExercise: handleSelectExercise,
-        selectedExercises: selectedExercises?.filter(exercise => exercise?.roleplayId || exercise?.courseSectionTopicId?.split("|")[1] === section.sectionId),
-        useCase: useCase,
-        assignment: assignment,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        viewOnly: viewOnly,
-        username: username,
-        preferred_username: preferred_username,
-        progressHelpers: progressHelpers,
-        completionHelpers: completionHelpers,
-        memberCourseCompletions: memberCourseCompletions,
-        lastClickedExerciseId: lastClickedExerciseId,
-        course: course,
-        handleRemoveExercise: handleRemoveExercise,
-        isPreview: isPreview,
-        isChallengeModeStudent: isChallengeModeStudent,
-        ...otherProps
-      }, section.sectionId);
-    }) : /*#__PURE__*/_jsx(Typography, {
-      children: t("sections_not_found")
-    })
-  });
-}
-function AssignmentExerciseSelection({
-  t = text => text,
-  sections = [],
-  isMember,
-  handleSelectExercise = () => {},
-  isCreator,
-  courseId,
-  handleFetchTopic,
-  isPublic,
-  handleSwitchChange,
-  isLoading,
-  teachClassrooms,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  getBots,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  viewOnly,
-  username,
-  preferred_username,
-  progressHelpers,
-  completionHelpers,
-  memberCourseCompletions,
-  lastClickedExerciseId,
-  course,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  isReadWriteModeStudent,
-  ...otherProps
-}) {
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(SectionList, {
-        t: t,
-        sections: sections,
-        isMember: isMember,
-        courseId: courseId,
-        handleFetchTopic: handleFetchTopic,
-        isCreator: isCreator,
-        isPublic: isPublic,
-        handleSwitchChange: handleSwitchChange,
-        teachClassrooms: teachClassrooms,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        getBots: getBots,
-        assignment: assignment,
-        handleStartExercise: handleStartExercise,
-        viewOnly: viewOnly,
-        username: username,
-        preferred_username: preferred_username,
-        progressHelpers: progressHelpers,
-        completionHelpers: completionHelpers,
-        memberCourseCompletions: memberCourseCompletions,
-        lastClickedExerciseId: lastClickedExerciseId,
-        course: course,
-        handleRemoveExercise: handleRemoveExercise,
-        isPreview: isPreview,
-        isChallengeModeStudent: isChallengeModeStudent,
-        isReadWriteModeStudent: isReadWriteModeStudent,
-        ...otherProps
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(SectionList, {
-      t: t,
-      sections: sections,
-      isMember: isMember,
-      courseId: courseId,
-      handleFetchTopic: handleFetchTopic,
-      isCreator: isCreator,
-      isPublic: isPublic,
-      handleSwitchChange: handleSwitchChange,
-      teachClassrooms: teachClassrooms,
-      isExerciseSelected: isExerciseSelected,
-      setIsExerciseSelected: setIsExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      selectedExercises: selectedExercises,
-      useCase: useCase,
-      assignment: assignment,
-      viewOnly: viewOnly,
-      username: username,
-      preferred_username: preferred_username,
-      progressHelpers: progressHelpers,
-      completionHelpers: completionHelpers,
-      memberCourseCompletions: memberCourseCompletions,
-      lastClickedExerciseId: lastClickedExerciseId,
-      course: course,
-      handleRemoveExercise: handleRemoveExercise,
-      isPreview: isPreview,
-      isChallengeModeStudent: isChallengeModeStudent,
-      isReadWriteModeStudent: isReadWriteModeStudent,
-      ...otherProps
-    })
-  });
-}
-export default AssignmentExerciseSelection;