@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -1,523 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { ListSubheader, List, ListItemIcon, ListItemText, ListItemAvatar, Collapse, Typography, Box, Avatar, Tooltip, ListItemButton } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ForumIcon from "@mui/icons-material/Forum";
-import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
-import RoleplaySelection from "../RoleplaySelection/RoleplaySelection";
-import PhraseListSelection from "../PhraseListSelection/PhraseListSelection";
-import MenuBookIcon from '@mui/icons-material/MenuBook';
-import { CardInfoSectionItem } from "../../Cards/CardElements";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Exercise({
-  name,
-  description,
-  courseSectionTopicId,
-  handleCreateGame,
-  t,
-  isExerciseSelected,
-  roleplays,
-  handleSelectExercise = null,
-  useCase,
-  getPhraseLists,
-  courseId,
-  sectionId,
-  topicId,
-  setIsExerciseSelected,
-  phrases
-}) {
-  const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
-  const noPhrases = name.toLowerCase() === "phrases" && !phrases?.length && !getPhraseLists;
-  const [roleplaysOpen, setRoleplaysOpen] = useState(noRoleplays ? false : true);
-  const [phraseListsOpen, setPhraseListsOpen] = useState(noPhrases ? false : true);
-  const [hasPhraseListsAvailable, setHasPhraseListsAvailable] = useState(true);
-  const handlePhraseListsLoaded = count => {
-    if (count === 0) {
-      setHasPhraseListsAvailable(false);
-      setPhraseListsOpen(false);
-    }
-  };
-  const noPhraseListsAvailable = name.toLowerCase() === "phrases" && !hasPhraseListsAvailable;
-  return /*#__PURE__*/_jsxs(Tooltip, {
-    title: (name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : "") || (name === "phrases" && noPhrases ? t("topic_no_phrases") : "") || (noPhraseListsAvailable ? t("no_phrase_lists") : ""),
-    children: [/*#__PURE__*/_jsxs(ListItemButton, {
-      onClick: () => {
-        if (name.toLowerCase() === "roleplays") {
-          setRoleplaysOpen(!roleplaysOpen);
-        } else if (name.toLowerCase() === "phrases") {
-          setPhraseListsOpen(!phraseListsOpen);
-        }
-      },
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      disabled: isExerciseSelected || noRoleplays || noPhrases || noPhraseListsAvailable,
-      sx: theme => ({
-        [theme.breakpoints.up("sm")]: {
-          ml: 3.5
-        }
-      }),
-      children: [name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(MenuBookIcon, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(ForumIcon, {})
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          width: "100%"
-        },
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(name),
-          secondary: t(description)
-        })
-      }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: phraseListsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      })]
-    }), name.toLowerCase() === "phrases" && getPhraseLists && /*#__PURE__*/_jsx(Collapse, {
-      in: phraseListsOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: 7
-        },
-        children: /*#__PURE__*/_jsx(PhraseListSelection, {
-          getPhraseLists: getPhraseLists,
-          courseId: courseId,
-          sectionId: sectionId,
-          topicId: topicId,
-          handleCreateGame: handleCreateGame,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          isExpanded: phraseListsOpen,
-          onPhraseListsLoaded: handlePhraseListsLoaded
-        })
-      })
-    }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
-      in: roleplaysOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: 7
-        },
-        children: /*#__PURE__*/_jsx(RoleplaySelection, {
-          roleplays: roleplays,
-          handleCreateGame: handleCreateGame,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          handleSelectExercise: handleSelectExercise,
-          useCase: useCase
-        })
-      })
-    })]
-  });
-}
-function ExerciseList({
-  t,
-  exercises = [],
-  isMember,
-  courseId,
-  sectionId,
-  topicId,
-  handleCreateGame,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  roleplays,
-  phrases,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  getPhraseLists,
-  ...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,
-        ...exercise,
-        isMember: isMember,
-        courseSectionTopicId: courseSectionTopicId,
-        handleCreateGame: handleCreateGame,
-        section: section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        roleplays: roleplays,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        phrases: phrases,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        getPhraseLists: getPhraseLists,
-        ...otherProps
-      }, keyId);
-    })
-  });
-}
-function Topic({
-  t,
-  courseId,
-  sectionId,
-  topicId,
-  topicName,
-  videoUrl,
-  description,
-  picture,
-  roleplays = [],
-  bots = [],
-  completions = [],
-  isMember,
-  nextTopic,
-  prevTopic,
-  handleViewCourseTopic,
-  isTopicHidden,
-  completion = {},
-  sectionIndex,
-  index,
-  moveTopic,
-  onDropSection,
-  handleCreateGame,
-  phrases,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
-  getPhraseLists,
-  ...otherProps
-}) {
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const topicRef = useRef(null);
-  const [isExerciseListOpen, setExerciseListOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  useEffect(() => {
-    if (courseSectionTopicId.split("|")[0] === courseId && courseSectionTopicId.split("|")[1] === sectionId && courseSectionTopicId.split("|")[2] === topicId) {
-      setIsFocused(true);
-      setExerciseListOpen(true);
-      const element = topicRef.current;
-      if (element) {
-        const dialogContent = document.querySelector(".MuiDialogContent-root");
-        if (dialogContent) {
-          const elementRect = element.getBoundingClientRect();
-          const dialogRect = dialogContent.getBoundingClientRect();
-          const offset = elementRect.top - dialogRect.top;
-          dialogContent.scrollTo({
-            top: dialogContent.scrollTop + offset,
-            behavior: "smooth"
-          });
-        }
-      }
-    }
-  }, [courseSectionTopicId, courseId, sectionId, topicId]);
-  const exercises = [{
-    name: "phrases",
-    description: `phrases_exercise_desc`
-  }, {
-    name: "roleplays",
-    description: `roleplay_exercise_desc`
-  }];
-  const toggleExerciseList = () => {
-    setExerciseListOpen(!isExerciseListOpen);
-  };
-  const hasNonEmptyRoleplay = roleplays.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(Tooltip, {
-      title: !phrases?.length && !getPhraseLists ? t("topic_no_phrases") : "",
-      placement: "top",
-      children: [!isTopicHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-        ref: topicRef,
-        selected: isFocused,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        onClick: toggleExerciseList,
-        "data-cy": "topic-list-item",
-        disabled: !phrases?.length && !getPhraseLists && !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
-              })
-            })
-          }), 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")
-              })]
-            })
-          })]
-        }), /*#__PURE__*/_jsx(ListItemIcon, {
-          children: isExerciseListOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-        })]
-      }), /*#__PURE__*/_jsx(Collapse, {
-        in: isExerciseListOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsx(ExerciseList, {
-          t: t,
-          topicInfo: {
-            topicName,
-            description
-          },
-          exercises: exercises,
-          isMember: isMember,
-          courseId: courseId,
-          sectionId: sectionId,
-          topicId: topicId,
-          handleCreateGame: handleCreateGame,
-          section: section,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          roleplays: roleplays,
-          phrases: phrases,
-          handleSelectExercise: handleSelectExercise,
-          useCase: useCase,
-          handleStartExercise: handleStartExercise,
-          isCreator: isCreator,
-          getPhraseLists: getPhraseLists,
-          ...otherProps
-        })
-      })]
-    })
-  });
-}
-function Section({
-  t,
-  courseId,
-  sectionId,
-  sectionName,
-  isHidden,
-  topics = [],
-  handleCreateGame,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
-  getPhraseLists,
-  ...otherProps
-}) {
-  const root = {
-    width: "100%"
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: !isHidden && /*#__PURE__*/_jsx(List, {
-      subheader: /*#__PURE__*/_jsx(ListSubheader, {
-        disableGutters: true,
-        disableSticky: true,
-        component: "div",
-        id: `${sectionName}-section-list-subheader`,
-        sx: {
-          fontWeight: !isExerciseSelected ? "bold" : "normal"
-        },
-        children: sectionName
-      }),
-      sx: root,
-      children: topics.map((topic, i) => /*#__PURE__*/_jsx(Topic, {
-        index: i,
-        topics: topics,
-        topicLength: topics.length,
-        sectionId: sectionId,
-        handleCreateGame: handleCreateGame,
-        courseId: courseId,
-        phrases: topic.phrases,
-        section: section,
-        t: t,
-        ...topic,
-        ...otherProps,
-        picture: topic.picture,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists
-      }, `${sectionId}-${topic.topicId}`))
-    })
-  });
-}
-function SectionList({
-  sections = [],
-  handleFetchTopic,
-  teachClassrooms,
-  handleCreateGame,
-  courseId,
-  t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
-  getPhraseLists,
-  ...otherProps
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: sections.length > 0 ? sections.map((section, index) => {
-      return /*#__PURE__*/_jsx(Section, {
-        index: index,
-        handleFetchTopic: handleFetchTopic,
-        teachClassrooms: teachClassrooms,
-        handleCreateGame: handleCreateGame,
-        courseId: courseId,
-        t: t,
-        ...section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        section: section,
-        getRoleplays: getRoleplays,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists,
-        ...otherProps
-      }, section.sectionId);
-    }) : /*#__PURE__*/_jsx(Typography, {
-      children: t("sections_not_found")
-    })
-  });
-}
-function ExerciseSelection({
-  t = text => text,
-  sections = [],
-  isMember,
-  isCreator,
-  courseId,
-  handleFetchTopic,
-  isPublic,
-  handleSwitchChange,
-  isLoading,
-  teachClassrooms,
-  handleCreateGame,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  courseSectionTopicId,
-  getPhraseLists,
-  ...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,
-        handleCreateGame: handleCreateGame,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        handleStartExercise: handleStartExercise,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists,
-        ...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,
-      handleCreateGame: handleCreateGame,
-      isExerciseSelected: isExerciseSelected,
-      setIsExerciseSelected: setIsExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      useCase: useCase,
-      courseSectionTopicId: courseSectionTopicId,
-      getPhraseLists: getPhraseLists,
-      ...otherProps
-    })
-  });
-}
-export default ExerciseSelection;