@nualang/nualang-ui-components 0.1.1362 → 0.1.1365

package/dist/Dialogs/CreatePhraseListFromSelectionDialog/CreatePhraseListFromSelectionDialog.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { TextField } from "@mui/material";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CreatePhraseListFromSelectionDialog({
+  open,
+  handleClose,
+  phraseIds = [],
+  handleCreatePhraseListFromSelection,
+  t = text => text
+}) {
+  const [phraseListName, setPhraseListName] = useState("");
+  const handleSubmit = async () => {
+    if (!phraseListName.trim()) return;
+    try {
+      await handleCreatePhraseListFromSelection(phraseIds, phraseListName.trim());
+      setPhraseListName("");
+      handleClose();
+    } catch (error) {
+      console.error("Failed to create phrase list:", error);
+    }
+  };
+  const handleCloseReset = () => {
+    setPhraseListName("");
+    handleClose();
+  };
+  return /*#__PURE__*/_jsx(ResponsiveDialog, {
+    open: open,
+    handleClose: handleCloseReset,
+    handleSubmit: handleSubmit,
+    dialogTitle: t("create_phrase_list_from_selection"),
+    submitText: t("create"),
+    isSubmitDisabled: !phraseListName.trim(),
+    t: t,
+    children: /*#__PURE__*/_jsx(TextField, {
+      autoFocus: true,
+      fullWidth: true,
+      label: t("phrase_list_name"),
+      value: phraseListName,
+      onChange: e => setPhraseListName(e.target.value),
+      onKeyDown: e => e.key === "Enter" && handleSubmit(),
+      variant: "outlined",
+      size: "small",
+      sx: {
+        mt: 1
+      }
+    })
+  });
+}

package/dist/Dialogs/TransferPhrase/TransferPhrase.js

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { Typography, Avatar, Checkbox, CircularProgress, List, ListItem, ListItemText, ListItemAvatar, ListItemButton, Box } from "@mui/material";
+import ImageSearchIcon from "@mui/icons-material/ImageSearch";
+import AddIcon from "@mui/icons-material/Add";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TransferPhraseDialog({
+  open,
+  handleClose,
+  phraseIds = [],
+  otherPhraseLists = [],
+  otherPhraseListsLoading = false,
+  handleTransferPhrase,
+  handleCreateNew,
+  t = text => text
+}) {
+  const [selectedIds, setSelectedIds] = useState([]);
+  const toggleId = id => setSelectedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
+  const handleSubmit = async () => {
+    if (selectedIds.length === 0) return;
+    await handleTransferPhrase(phraseIds, selectedIds);
+    setSelectedIds([]);
+    handleClose();
+  };
+  const handleCloseReset = () => {
+    setSelectedIds([]);
+    handleClose();
+  };
+  return /*#__PURE__*/_jsx(ResponsiveDialog, {
+    open: open,
+    handleClose: handleCloseReset,
+    handleSubmit: handleSubmit,
+    dialogTitle: t("transfer_phrases"),
+    submitText: t("transfer"),
+    isSubmitDisabled: selectedIds.length === 0,
+    t: t,
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        mt: 1
+      },
+      children: [otherPhraseListsLoading ? /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          py: 2
+        },
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          size: 24
+        })
+      }) : otherPhraseLists.length === 0 ? /*#__PURE__*/_jsx(Typography, {
+        color: "textSecondary",
+        sx: {
+          mb: 1
+        },
+        children: t("no_other_phrase_lists")
+      }) : /*#__PURE__*/_jsx(List, {
+        disablePadding: true,
+        children: otherPhraseLists.map(list => {
+          const checked = selectedIds.includes(list.phraseListId);
+          return /*#__PURE__*/_jsx(ListItem, {
+            disablePadding: true,
+            secondaryAction: /*#__PURE__*/_jsx(Checkbox, {
+              edge: "end",
+              checked: checked,
+              onChange: () => toggleId(list.phraseListId),
+              inputProps: {
+                "aria-label": list.phraseListName
+              }
+            }),
+            children: /*#__PURE__*/_jsxs(ListItemButton, {
+              onClick: () => toggleId(list.phraseListId),
+              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+                children: list.picture ? /*#__PURE__*/_jsx(Avatar, {
+                  src: list.picture,
+                  alt: list.phraseListName
+                }) : /*#__PURE__*/_jsx(Avatar, {
+                  children: /*#__PURE__*/_jsx(ImageSearchIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(ListItemText, {
+                primary: list.phraseListName
+              })]
+            })
+          }, list.phraseListId);
+        })
+      }), handleCreateNew && /*#__PURE__*/_jsx(List, {
+        disablePadding: true,
+        children: /*#__PURE__*/_jsx(ListItem, {
+          disablePadding: true,
+          children: /*#__PURE__*/_jsxs(ListItemButton, {
+            onClick: handleCreateNew,
+            children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+              children: /*#__PURE__*/_jsx(Avatar, {
+                sx: {
+                  backgroundColor: "transparent"
+                },
+                children: /*#__PURE__*/_jsx(AddIcon, {
+                  fontSize: "small",
+                  sx: {
+                    color: "secondary.main"
+                  }
+                })
+              })
+            }), /*#__PURE__*/_jsx(ListItemText, {
+              primary: t("create_phrase_list_from_selection")
+            })]
+          })
+        })
+      })]
+    })
+  });
+}

package/dist/Editors/PhraseList/PhraseList.js

@@ -1,15 +1,22 @@
-import { useState, useEffect } from "react";
+import { useState, useRef } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
-import { Slide, IconButton, Dialog, AppBar, Toolbar, Typography } from "@mui/material";
+import { Slide, IconButton, Dialog, AppBar, Toolbar, Typography, Button, Paper, ToggleButton, ToggleButtonGroup } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import PublishIcon from "@mui/icons-material/Publish";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import AddIcon from "@mui/icons-material/Add";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import ListIcon from "@mui/icons-material/List";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { Tabs, Tab, Box, Tooltip } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import Share from "@mui/icons-material/Share";
 import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
-import PhrasesEditor from "../Phrases/Phrases";
+import PhrasesEditor, { Modes } from "../Phrases/Phrases";
 import UpdatePhraseList from "../../Forms/UpdatePhraseList/UpdatePhraseList";
 import { randomId } from "../../utils/index";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -27,18 +34,6 @@ const useStyles = makeStyles()(theme => ({
   button: {
     margin: theme.spacing(1)
   },
-  pane: {
-    height: "calc(100vh - 104px)",
-    [theme.breakpoints.up("sm")]: {
-      height: "calc(100vh - 112px)"
-    }
-  },
-  paneFull: {
-    height: "calc(100%)",
-    [theme.breakpoints.up("sm")]: {
-      height: "calc(100vh - 48px)"
-    }
-  },
   settings: {
     backgroundColor: theme.palette.background.default,
     overflow: "scroll"
@@ -95,7 +90,11 @@ function PhraseList({
   onSubmit,
   handleChange,
   handleUpdatePhrases,
-  handlePlayPhraseList
+  handlePlayPhraseList,
+  otherPhraseLists,
+  otherPhraseListsLoading,
+  handleTransferPhrase,
+  handleCreatePhraseListFromSelection
 }) {
   const theme = useTheme();
   const {
@@ -105,9 +104,19 @@ function PhraseList({
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
   const tabVariant = isSmallScreen ? "fullWidth" : null;
   const [tabValue, setTabValue] = useState(0);
-  const handleChangeTab = (event, newValue) => {
+  const [isGeneratePhrasesDialogOpen, setIsGeneratePhrasesDialogOpen] = useState(false);
+  const [mode, setMode] = useState(Modes.NORMAL);
+  const handleCloseWithReset = () => {
+    setIsGeneratePhrasesDialogOpen(false);
+    handleClose();
+  };
+  const scriptDownloadRef = useRef(null);
+  const handleChangeTab = (_, newValue) => {
     setTabValue(newValue);
   };
+  const handleModeSelection = (_, newMode) => {
+    if (newMode) setMode(newMode);
+  };
   const updatePhrases = async phrases => {
     try {
       handleUpdatePhrases(courseId, sectionId, topicId, phrases);
@@ -124,12 +133,16 @@ function PhraseList({
     children: /*#__PURE__*/_jsxs(Dialog, {
       fullScreen: true,
       open: open,
-      onClose: handleClose,
-      TransitionComponent: Transition,
+      onClose: handleCloseWithReset,
+      slots: {
+        transition: Transition
+      },
       "data-cy": "bot-editor-dialog",
       sx: theme => ({
         "& .MuiDialog-paper": {
-          backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[200] : null
+          backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[200] : null,
+          display: "flex",
+          flexDirection: "column"
         }
       }),
       children: [/*#__PURE__*/_jsxs(AppBar, {
@@ -140,7 +153,7 @@ function PhraseList({
             "data-cy": "close-dialog",
             edge: "start",
             color: "inherit",
-            onClick: handleClose,
+            onClick: handleCloseWithReset,
             "aria-label": "Close",
             size: "large",
             children: /*#__PURE__*/_jsx(CloseIcon, {})
@@ -213,9 +226,91 @@ function PhraseList({
             })]
           })
         })]
+      }), isCreator && tabValue === 0 && /*#__PURE__*/_jsxs(Paper, {
+        elevation: 0,
+        sx: {
+          flexShrink: 0,
+          px: 2,
+          py: 1.5,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: 1,
+          borderRadius: 0,
+          borderBottom: 1,
+          borderColor: "divider"
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          sx: {
+            fontWeight: "bold"
+          },
+          children: t("phrases")
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            flexWrap: "wrap"
+          },
+          children: [subscription?.isPaidUser && /*#__PURE__*/_jsx(Button, {
+            color: "secondary",
+            variant: "contained",
+            size: "small",
+            startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+            onClick: () => setIsGeneratePhrasesDialogOpen(true),
+            children: t("generate_phrases")
+          }), /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            variant: "contained",
+            size: "small",
+            startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+            onClick: () => setIsCreatePhraseDialogOpen(true),
+            children: t("add_phrase")
+          }), /*#__PURE__*/_jsx(DefaultButton, {
+            variant: "contained",
+            size: "small",
+            onClick: () => setIsUploadPhrasesDialogOpen(true),
+            endIcon: /*#__PURE__*/_jsx(PublishIcon, {}),
+            children: t("upload")
+          }), /*#__PURE__*/_jsx(DefaultButton, {
+            variant: "contained",
+            size: "small",
+            onClick: () => scriptDownloadRef.current?.(),
+            endIcon: /*#__PURE__*/_jsx(GetAppIcon, {}),
+            children: t("download")
+          }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
+            size: "small",
+            value: mode,
+            exclusive: true,
+            onChange: handleModeSelection,
+            "aria-label": t("editor_mode"),
+            children: [/*#__PURE__*/_jsx(ToggleButton, {
+              value: Modes.NORMAL,
+              "aria-label": t("normal_mode"),
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                title: t("normal_mode"),
+                children: /*#__PURE__*/_jsx(ListIcon, {
+                  fontSize: "small"
+                })
+              })
+            }), /*#__PURE__*/_jsx(ToggleButton, {
+              value: Modes.SPREADSHEET,
+              "data-cy": "spreadsheet-toggle",
+              "aria-label": t("spreadsheet_mode"),
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                title: t("spreadsheet_mode"),
+                children: /*#__PURE__*/_jsx(TableChartIcon, {
+                  fontSize: "small"
+                })
+              })
+            })]
+          })]
+        })]
       }), tabValue === 0 ? /*#__PURE__*/_jsx(Box, {
-        className: hidden ? classes.paneFull : classes.pane,
         sx: {
+          flex: 1,
           overflowY: "auto"
         },
         children: /*#__PURE__*/_jsx(PhrasesEditor, {
@@ -250,13 +345,22 @@ function PhraseList({
           subscription: subscription,
           topicGoal: topicGoal,
           verificationStatus: verificationStatus,
-          phraseListName: initialValues.phraseListName
+          phraseListName: initialValues.phraseListName,
+          otherPhraseLists: otherPhraseLists,
+          otherPhraseListsLoading: otherPhraseListsLoading,
+          handleTransferPhrase: handleTransferPhrase,
+          handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection,
+          isGeneratePhrasesDialogOpen: isGeneratePhrasesDialogOpen,
+          setIsGeneratePhrasesDialogOpen: setIsGeneratePhrasesDialogOpen,
+          mode: mode,
+          scriptDownloadRef: scriptDownloadRef
         })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
-        className: hidden ? classes.paneFull : classes.pane,
         sx: {
+          flex: 1,
           overflowY: "auto"
         },
+        className: classes.settings,
         children: /*#__PURE__*/_jsx(UpdatePhraseList, {
           t: t,
           touched: touched,