@nualang/nualang-ui-components 0.1.1397 → 0.1.1399

package/dist/Containers/App/App.js

@@ -28,6 +28,7 @@ import ArrowBack from "@mui/icons-material/ArrowBack";
 import Close from "@mui/icons-material/Close";
 import UpgradeSubscription from "../../Dialogs/UpgradeSubscription/UpgradeSubscription";
 import QuickCreateClassroomDialog from "../../Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog";
+import QuickCreateCourseDialog from "../../Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog";
 
 // nav config
 import navigationImport from "../../Navigation/_nav";
@@ -217,11 +218,13 @@ function App({
   setIsCollapsed,
   isUserInternal,
   handleQuickCreateClassroom,
+  handleQuickCreateCourse,
   learnLang,
   forLang,
   fileSizeLimit,
   languages,
-  forLanguages
+  forLanguages,
+  difficulties
 }) {
   const theme = useTheme();
   const isLgScreen = useMediaQuery(theme.breakpoints.up("md"));
@@ -230,6 +233,7 @@ function App({
   const [isAppContainerLoading, setIsAppContainerLoading] = useState(true);
   const [anchorEl, setAnchorEl] = useState(null);
   const [isCreateClassroomOpen, setIsCreateClassroomOpen] = useState(false);
+  const [isCreateCourseOpen, setIsCreateCourseOpen] = useState(false);
   const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = useState(false);
   const [isMobileSearchExpanded, setIsMobileSearchExpanded] = useState(false);
   const handleOpenUpgradeSubscriptionModal = () => {
@@ -277,8 +281,7 @@ function App({
     handleCloseCreate();
   };
   const handleCreateCourse = () => {
-    navigate("/courses/create");
-    handleCloseCreate();
+    setIsCreateCourseOpen(true);
   };
   const handleCreateAssignment = () => {
     navigate("/assignments/create");
@@ -440,6 +443,21 @@ function App({
           languages: languages,
           forLanguages: forLanguages,
           userImage: user ? user.picture : null
+        }), /*#__PURE__*/_jsx(QuickCreateCourseDialog, {
+          open: isCreateCourseOpen,
+          handleClose: () => setIsCreateCourseOpen(false),
+          handleCreate: async values => {
+            await handleQuickCreateCourse(values);
+          },
+          t: t,
+          learnLang: learnLang,
+          forLang: forLang,
+          languages: languages,
+          forLanguages: forLanguages,
+          difficulties: difficulties,
+          fileSizeLimit: fileSizeLimit,
+          verificationStatus: verificationStatus,
+          userImage: user ? user.picture : null
         }), /*#__PURE__*/_jsx(LanguageSelector, {
           t: t,
           currentLanguage: currentLanguage,

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -114,7 +114,7 @@ export default function QuickCreateClassroomDialog({
       children: /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         flexDirection: "column",
-        gap: 2,
+        gap: 1,
         pt: 1,
         children: [/*#__PURE__*/_jsx(TextField, {
           label: t("classroom_name") || "Classroom Name",
@@ -127,7 +127,8 @@ export default function QuickCreateClassroomDialog({
           inputProps: {
             maxLength: 100
           },
-          onKeyDown: e => e.key === "Enter" && handleSubmit()
+          onKeyDown: e => e.key === "Enter" && handleSubmit(),
+          margin: "normal"
         }), /*#__PURE__*/_jsx(Grid, {
           size: 12,
           children: /*#__PURE__*/_jsx(LanguageSelector, {

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -0,0 +1,215 @@
+import { useState, useEffect } from "react";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Grid from "@mui/material/Grid";
+import LanguageSelector from "../../Forms/LanguageSelector/LanguageSelector";
+import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
+import PlaceholderImages from "../../utils/placeholder-images/index";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function QuickCreateCourseDialog({
+  open,
+  handleClose,
+  handleCreate,
+  onCreated,
+  t = text => text,
+  learnLang,
+  forLang,
+  languages,
+  forLanguages,
+  difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
+  fileSizeLimit,
+  verificationStatus,
+  userImage
+}) {
+  const defaultSelectedImage = {
+    image: PlaceholderImages.course,
+    imageSelectionMethod: "default_image"
+  };
+  const [courseName, setCourseName] = useState("");
+  const [difficulty, setDifficulty] = useState("");
+  const [courseLearnLang, setCourseLearnLang] = useState("");
+  const [courseForLang, setCourseForLang] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(defaultSelectedImage);
+  const [picture, setPicture] = useState("");
+  useEffect(() => {
+    if (learnLang && courseLearnLang === "") {
+      setCourseLearnLang(learnLang);
+    }
+  }, [learnLang]);
+  useEffect(() => {
+    if (forLang && courseForLang === "") {
+      setCourseForLang(forLang);
+    }
+  }, [forLang]);
+  const handleImageSelection = event => {
+    const {
+      name,
+      value
+    } = event.target;
+    setSelectedImage(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    setPicture(value);
+  };
+  const removeImage = () => {
+    setSelectedImage(defaultSelectedImage);
+    setPicture("");
+  };
+  const generateRandomEnrolmentKey = () => {
+    return String(Math.floor(Math.random() * 90000) + 10000);
+  };
+  const handleSubmit = async () => {
+    if (!courseName.trim() || !difficulty) return;
+    setIsLoading(true);
+    try {
+      const createdCourse = await handleCreate({
+        courseName: courseName.trim(),
+        description: `${t("course_description_default", {
+          learnLang: t(courseLearnLang)
+        })}`,
+        difficulty,
+        learnLang: courseLearnLang,
+        forLang: courseForLang,
+        picture: picture || PlaceholderImages.course,
+        visibility: "private",
+        enrolmentKey: generateRandomEnrolmentKey(),
+        allowedDomains: [],
+        tags: [],
+        collaborators: [],
+        userImage: userImage,
+        isShareable: "collaborators",
+        duplicated: false
+      });
+      resetAndClose();
+      if (onCreated && createdCourse) {
+        onCreated(createdCourse, selectedImage.image || null);
+      }
+    } catch (error) {
+      console.error("Failed to create course:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const resetAndClose = () => {
+    setCourseName("");
+    setDifficulty("");
+    setCourseLearnLang(learnLang || "");
+    setCourseForLang(forLang || "");
+    setSelectedImage(defaultSelectedImage);
+    setPicture("");
+    handleClose();
+  };
+  const isSubmitDisabled = !courseName.trim() || !difficulty || isLoading;
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: isLoading ? undefined : resetAndClose,
+    maxWidth: "sm",
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: t("create_course") || "Create Course"
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        pt: 1,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          label: t("course_name") || "Course Name",
+          value: courseName,
+          onChange: e => setCourseName(e.target.value),
+          fullWidth: true,
+          autoFocus: true,
+          required: true,
+          disabled: isLoading,
+          inputProps: {
+            maxLength: 200
+          },
+          onKeyDown: e => e.key === "Enter" && handleSubmit(),
+          margin: "normal"
+        }), /*#__PURE__*/_jsx(TextField, {
+          select: true,
+          label: t("difficulty") || "Difficulty",
+          value: difficulty,
+          onChange: e => setDifficulty(e.target.value),
+          fullWidth: true,
+          required: true,
+          disabled: isLoading,
+          margin: "normal",
+          children: difficulties.map(d => /*#__PURE__*/_jsx(MenuItem, {
+            value: d,
+            children: t(d)
+          }, d))
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(LanguageSelector, {
+            id: "learnLang",
+            name: "learnLang",
+            "data-cy": "learnLang",
+            label: t("the_language_course_teach"),
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            required: true,
+            t: t,
+            languages: languages,
+            value: courseLearnLang,
+            disabled: isLoading,
+            onChange: e => setCourseLearnLang(e.target.value)
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(LanguageSelector, {
+            id: "forLang",
+            name: "forLang",
+            "data-cy": "forLang",
+            label: t("the_language_students_course_speak"),
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            required: true,
+            t: t,
+            languages: forLanguages,
+            value: courseForLang,
+            disabled: isLoading,
+            onChange: e => setCourseForLang(e.target.value)
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(ImageSelector, {
+            t: t,
+            name: "image",
+            value: selectedImage.image,
+            handleChange: handleImageSelection,
+            fileSizeLimit: fileSizeLimit,
+            removeImage: removeImage,
+            autoCrop: true,
+            autoSuggest: false,
+            selectedImage: selectedImage,
+            verificationStatus: verificationStatus
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: resetAndClose,
+        color: "primary",
+        disabled: isLoading,
+        children: t("cancel") || "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSubmit,
+        color: "primary",
+        variant: "contained",
+        disabled: isSubmitDisabled,
+        children: t("create") || "Create"
+      })]
+    })]
+  });
+}

package/dist/Misc/NotFound/ClassCourses.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
@@ -8,6 +9,7 @@ import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 import Box from "@mui/material/Box";
 import CreateIcon from "@mui/icons-material/Create";
+import QuickCreateCourseDialog from "../../Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   placeholder: {
@@ -38,12 +40,21 @@ const useStyles = makeStyles()(theme => ({
 }));
 export default function ClassCoursesNotFound({
   t = text => text,
-  handleCreateCourse,
-  handleOpenCoursesModal
+  handleOpenCoursesModal,
+  handleQuickCreateCourse,
+  learnLang,
+  forLang,
+  languages,
+  forLanguages,
+  difficulties,
+  fileSizeLimit,
+  verificationStatus,
+  userImage
 }) {
   const {
     classes
   } = useStyles();
+  const [isCreateCourseOpen, setIsCreateCourseOpen] = useState(false);
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
@@ -148,11 +159,9 @@ export default function ClassCoursesNotFound({
                 gutterBottom: true,
                 children: t("create_your_own_description")
               }), /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  mb: 1.5
-                },
-                children: handleCreateCourse && /*#__PURE__*/_jsx(Button, {
-                  onClick: handleCreateCourse,
+                mb: 1.5,
+                children: handleQuickCreateCourse && /*#__PURE__*/_jsx(Button, {
+                  onClick: () => setIsCreateCourseOpen(true),
                   className: classes.button,
                   variant: "contained",
                   color: "primary",
@@ -169,6 +178,21 @@ export default function ClassCoursesNotFound({
           })
         })
       })
+    }), /*#__PURE__*/_jsx(QuickCreateCourseDialog, {
+      open: isCreateCourseOpen,
+      handleClose: () => setIsCreateCourseOpen(false),
+      handleCreate: async values => {
+        await handleQuickCreateCourse(values);
+      },
+      t: t,
+      learnLang: learnLang,
+      forLang: forLang,
+      languages: languages,
+      forLanguages: forLanguages,
+      difficulties: difficulties,
+      fileSizeLimit: fileSizeLimit,
+      verificationStatus: verificationStatus,
+      userImage: userImage
     })]
   });
 }

package/dist/Misc/NotFound/Courses.js

@@ -1,9 +1,11 @@
+import { useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
 import CourseImage from "../../img/structuring.svg";
+import QuickCreateCourseDialog from "../../Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   placeholder: {
@@ -30,15 +32,24 @@ export default function CoursesNotFound({
   title = "No Courses Found",
   description = "Join or create your first course today",
   handleSearch,
-  handleCreateCourse,
-  handleOpenCoursesModal
+  handleOpenCoursesModal,
+  handleQuickCreateCourse,
+  learnLang,
+  forLang,
+  languages,
+  forLanguages,
+  difficulties,
+  fileSizeLimit,
+  verificationStatus,
+  userImage
 }) {
   const {
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
+  const [isCreateCourseOpen, setIsCreateCourseOpen] = useState(false);
+  return /*#__PURE__*/_jsxs("div", {
     className: classes.placeholder,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: classes.placeholderContent,
       children: [/*#__PURE__*/_jsx("img", {
         src: placeholderImageUrl,
@@ -63,8 +74,8 @@ export default function CoursesNotFound({
         endIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
         role: "link",
         children: t("find_course")
-      }), handleCreateCourse && /*#__PURE__*/_jsx(Button, {
-        onClick: handleCreateCourse,
+      }), handleQuickCreateCourse && /*#__PURE__*/_jsx(Button, {
+        onClick: () => setIsCreateCourseOpen(true),
         className: classes.button,
         variant: "contained",
         color: "primary",
@@ -80,6 +91,21 @@ export default function CoursesNotFound({
         id: "add-courses-fab",
         children: t("add_courses")
       })]
-    })
+    }), /*#__PURE__*/_jsx(QuickCreateCourseDialog, {
+      open: isCreateCourseOpen,
+      handleClose: () => setIsCreateCourseOpen(false),
+      handleCreate: async values => {
+        await handleQuickCreateCourse(values);
+      },
+      t: t,
+      learnLang: learnLang,
+      forLang: forLang,
+      languages: languages,
+      forLanguages: forLanguages,
+      difficulties: difficulties,
+      fileSizeLimit: fileSizeLimit,
+      verificationStatus: verificationStatus,
+      userImage: userImage
+    })]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1397",
+  "version": "0.1.1399",
   "type": "module",
   "main": "dist/index.js",
   "files": [