From 26ea6ff70404c7737e8a5c1a37b009b95c845779 Mon Sep 17 00:00:00 2001 From: mxc-maggiechen Date: Wed, 12 Mar 2025 20:47:38 -0400 Subject: [PATCH 1/8] first commit --- backend/yarn.lock | 5 - frontend/src/App.tsx | 3 +- .../course_viewing/CourseViewingPage.tsx | 77 ++++++++- .../components/course_viewing/UnitSidebar.tsx | 147 +++++++++++++++++- frontend/src/theme/theme.ts | 7 +- frontend/src/theme/themeAugmentation.d.ts | 8 +- 6 files changed, 235 insertions(+), 12 deletions(-) diff --git a/backend/yarn.lock b/backend/yarn.lock index 06554171..c05c655b 100644 --- a/backend/yarn.lock +++ b/backend/yarn.lock @@ -1264,11 +1264,6 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@panva/asn1.js@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6" - integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw== - "@pdf-lib/standard-fonts@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz#8ba691c4421f71662ed07c9a0294b44528af2d7f" diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fe6e0b6a..5a6de473 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -137,11 +137,10 @@ const App = (): React.ReactElement => { component={HelpRequestPage} allowedRoles={["Facilitator"]} /> - ([]); - + const [editUnitName, setEditUnitName] = useState(""); + const [createUnitName, setCreateUnitName] = useState(""); + const [deleteUnitId, setDeleteUnitId] = useState(""); + const [openCreateUnitModal, setOpenCreateUnitModal] = useState(false); + const [openEditUnitModal, setOpenEditUnitModal] = useState(true); + const [openDeleteUnitModal, setOpenDeleteUnitModal] = useState(false); + const [openUnpublishUnitModal, setOpenUnpublishUnitModal] = useState(false); const [open, setOpen] = useState(true); + const handleOpenCreateUnitModal = () => { + setOpenCreateUnitModal(true); + }; + + const handleCloseCreateUnitModal = () => { + setOpenCreateUnitModal(false); + }; + + const handleCloseEditUnitModal = () => { + setOpenEditUnitModal(false); + }; + + const handleOpenEditUnitModal = () => { + setOpenEditUnitModal(true); + }; + + const handleCloseDeleteUnitModal = () => { + setOpenDeleteUnitModal(false); + }; + + const handleOpenDeleteUnitModal = () => { + setOpenDeleteUnitModal(true); + }; + + const handleCloseUnpublishUnitModal = () => { + setOpenUnpublishUnitModal(false); + }; + + const handleOpenUnpublishUnitModal = () => { + setOpenUnpublishUnitModal(true); + }; + + const createUnit = () => {}; + const editUnit = () => {}; + const deleteUnit = () => {}; + const unpublishUnit = () => {}; + const handleDrawerOpen = () => { setOpen(true); }; @@ -29,11 +76,39 @@ export default function CourseUnitsPage() { return ( + + + + + + + {courseUnits.map((course, index) => { return ( @@ -116,11 +228,42 @@ export default function UnitSidebar(props: UnitSideBarProps) { : theme.typography.bodyLarge } /> + { + event.stopPropagation(); // Prevent triggering the list item click + handleContextMenuOpen(event); // Custom function to handle button click + }} + sx={{ marginLeft: "16px" }} + > + + ); })} + ); diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts index f5748acd..b073714a 100644 --- a/frontend/src/theme/theme.ts +++ b/frontend/src/theme/theme.ts @@ -51,6 +51,11 @@ const palette: PaletteOptions = { 600: "#404B4D", 700: "#111111", }, + OnBackground: "#171D1E", + Light: { + OnSurfaceVariant: "#3F484B", + Outline: "#6F797B", + }, }; const typography: TypographyOptions = { @@ -192,4 +197,4 @@ const getTheme = () => { return theme; }; -export default getTheme; +export default getTheme; \ No newline at end of file diff --git a/frontend/src/theme/themeAugmentation.d.ts b/frontend/src/theme/themeAugmentation.d.ts index 764774ee..5b246c10 100644 --- a/frontend/src/theme/themeAugmentation.d.ts +++ b/frontend/src/theme/themeAugmentation.d.ts @@ -28,6 +28,12 @@ declare module "@mui/material/styles" { 600: string; 700: string; }; + + OnBackground: string; + Light:{ + Outline: string; + OnSurfaceVariant: string; + } } interface TypographyOptions { @@ -88,4 +94,4 @@ declare module "@mui/material/Typography" { bodyMedium: true; bodySmall: true; } -} +} \ No newline at end of file From 4f8fb6090b32952b8b0c7c579c8ee3f9f391c57d Mon Sep 17 00:00:00 2001 From: mxc-maggiechen Date: Wed, 12 Mar 2025 20:47:53 -0400 Subject: [PATCH 2/8] first commit2 --- .../course_viewing/modals/CreateUnitModal.tsx | 172 ++++++++++++++++++ .../course_viewing/modals/DeleteUnitModal.tsx | 141 ++++++++++++++ .../course_viewing/modals/EditUnitModal.tsx | 171 +++++++++++++++++ .../modals/UnpublishUnitModal.tsx | 145 +++++++++++++++ 4 files changed, 629 insertions(+) create mode 100644 frontend/src/components/course_viewing/modals/CreateUnitModal.tsx create mode 100644 frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx create mode 100644 frontend/src/components/course_viewing/modals/EditUnitModal.tsx create mode 100644 frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx diff --git a/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx b/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx new file mode 100644 index 00000000..f760583f --- /dev/null +++ b/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx @@ -0,0 +1,172 @@ +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import { PersonOutlineOutlined } from "@mui/icons-material"; +import { + Box, + Button, + Dialog, + DialogContent, + DialogTitle, + IconButton, + InputAdornment, + TextField, + Typography, + useTheme, +} from "@mui/material"; + +interface CreateUnitModalProps { + openCreateUnitModal: boolean + handleCloseCreateUnitModal: () => void; + setCreateUnitName: (value: React.SetStateAction) => void; + createUnit: () => void; +} + +export default function CreateUnitModal(props: CreateUnitModalProps) { + const { + openCreateUnitModal, + handleCloseCreateUnitModal, + setCreateUnitName, + createUnit, + } = props; + + const theme = useTheme(); + + return ( + + + + + + + + + + + Create a new unit + + + + + + + setCreateUnitName(event.target.value)} + variant="outlined" + sx={{ + display: "flex", + flexDirection: "column", + alignSelf: "stretch", + height: "56px", + width: "100%", + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + + + + + + + + ); +} diff --git a/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx new file mode 100644 index 00000000..c3ee7e00 --- /dev/null +++ b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx @@ -0,0 +1,141 @@ +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import { + Box, + Button, + Dialog, + DialogContent, + DialogContentText, + DialogTitle, + IconButton, + Typography, + useTheme, +} from "@mui/material"; + +interface DeleteUnitModalProps { + openDeleteUnitModal: boolean; + handleCloseDeleteUnitModal: () => void; + deleteUnit: () => void; +} + +export default function CreateUnitModal(props: DeleteUnitModalProps) { + const { openDeleteUnitModal, handleCloseDeleteUnitModal, deleteUnit } = props; + + const theme = useTheme(); + + return ( + + + + + + + + + + + Delete Unit? + + + + + + This action can't be undone. A deleted user cannot be + recovered. + + + + + + + + + + + ); +} diff --git a/frontend/src/components/course_viewing/modals/EditUnitModal.tsx b/frontend/src/components/course_viewing/modals/EditUnitModal.tsx new file mode 100644 index 00000000..16040b7a --- /dev/null +++ b/frontend/src/components/course_viewing/modals/EditUnitModal.tsx @@ -0,0 +1,171 @@ +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import { + Box, + Button, + Dialog, + DialogContent, + DialogTitle, + IconButton, + InputAdornment, + TextField, + Typography, + useTheme, +} from "@mui/material"; +import { PersonOutlineOutlined } from "@mui/icons-material"; + +interface CreateUnitModalProps { + openEditUnitModal: boolean; + setEditUnitName: (value: React.SetStateAction) => void; + handleCloseEditUnitModal: () => void; + editUnit: () => void; +} + +export default function CreateUnitModal(props: CreateUnitModalProps) { + const { + openEditUnitModal, + setEditUnitName, + handleCloseEditUnitModal, + editUnit, + } = props; + + const theme = useTheme(); + + return ( + + + + + + + + + + + Create a new unit + + + + + + + setEditUnitName(event.target.value)} + variant="outlined" + sx={{ + display: "flex", + flexDirection: "column", + alignSelf: "stretch", + height: "56px", + width: "100%", + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + + + + + + + + ); +} diff --git a/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx b/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx new file mode 100644 index 00000000..60975039 --- /dev/null +++ b/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx @@ -0,0 +1,145 @@ +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import { + Box, + Button, + Dialog, + DialogContent, + DialogContentText, + DialogTitle, + IconButton, + Typography, + useTheme, +} from "@mui/material"; + +interface CreateUnitModalProps { + openUnpublishUnitModal: boolean; + handleCloseUnpublishUnitModal: () => void; + unpublishUnit: () => void; +} + +export default function CreateUnitModal(props: CreateUnitModalProps) { + const { + openUnpublishUnitModal, + handleCloseUnpublishUnitModal, + unpublishUnit, + } = props; + + const theme = useTheme(); + + return ( + + + + + + + + + + + Unpublish Unit? + + + + + + Learners will not be able see the unit until you choose to + publish it again. This action can be redone. + + + + + + + + + + + ); +} From 04375bf31ac10d6907970d1acefecea0615719af Mon Sep 17 00:00:00 2001 From: mxc-maggiechen Date: Mon, 17 Mar 2025 20:59:41 -0400 Subject: [PATCH 3/8] finished! --- .../course_viewing/CourseViewingPage.tsx | 1 - .../components/course_viewing/UnitSidebar.tsx | 164 +++++++++++++----- .../course_viewing/modals/CreateUnitModal.tsx | 1 + .../course_viewing/modals/DeleteUnitModal.tsx | 1 + .../course_viewing/modals/EditUnitModal.tsx | 2 + 5 files changed, 120 insertions(+), 49 deletions(-) diff --git a/frontend/src/components/course_viewing/CourseViewingPage.tsx b/frontend/src/components/course_viewing/CourseViewingPage.tsx index e97598cc..c016f694 100644 --- a/frontend/src/components/course_viewing/CourseViewingPage.tsx +++ b/frontend/src/components/course_viewing/CourseViewingPage.tsx @@ -108,7 +108,6 @@ export default function CourseUnitsPage() { handleOpenUnpublishUnitModal={handleOpenUnpublishUnitModal} open={open} /> - + + Create Unit + + + )} ); diff --git a/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx b/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx index 0593eea4..5950a7e2 100644 --- a/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx +++ b/frontend/src/components/course_viewing/modals/CreateUnitModal.tsx @@ -13,9 +13,10 @@ import { Typography, useTheme, } from "@mui/material"; +import { useUser } from "../../../hooks/useUser"; interface CreateUnitModalProps { - openCreateUnitModal: boolean + openCreateUnitModal: boolean; handleCloseCreateUnitModal: () => void; setCreateUnitName: (value: React.SetStateAction) => void; createUnit: () => void; @@ -30,6 +31,7 @@ export default function CreateUnitModal(props: CreateUnitModalProps) { } = props; const theme = useTheme(); + const user = useUser(); return ( CANCEL @@ -156,9 +157,9 @@ export default function CreateUnitModal(props: CreateUnitModalProps) { display: "flex", height: "40px", gap: "8px", - backgroundColor: theme.palette.Administrator.Default, + backgroundColor: theme.palette[user.role].Default, "&:hover": { - bgcolor: theme.palette.Administrator.Default, + bgcolor: theme.palette[user.role].Default, }, }} onClick={createUnit} diff --git a/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx index 94109024..def4927b 100644 --- a/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx +++ b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx @@ -11,6 +11,7 @@ import { Typography, useTheme, } from "@mui/material"; +import { useUser } from "../../../hooks/useUser"; interface DeleteUnitModalProps { openDeleteUnitModal: boolean; @@ -22,6 +23,7 @@ export default function CreateUnitModal(props: DeleteUnitModalProps) { const { openDeleteUnitModal, handleCloseDeleteUnitModal, deleteUnit } = props; const theme = useTheme(); + const user = useUser(); return ( GO BACK diff --git a/frontend/src/components/course_viewing/modals/EditUnitModal.tsx b/frontend/src/components/course_viewing/modals/EditUnitModal.tsx deleted file mode 100644 index 18dc617b..00000000 --- a/frontend/src/components/course_viewing/modals/EditUnitModal.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React from "react"; -import CloseIcon from "@mui/icons-material/Close"; -import { - Box, - Button, - Dialog, - DialogContent, - DialogTitle, - IconButton, - InputAdornment, - TextField, - Typography, - useTheme, -} from "@mui/material"; -import { PersonOutlineOutlined } from "@mui/icons-material"; - -interface CreateUnitModalProps { - openEditUnitModal: boolean; - setEditUnitName: (value: React.SetStateAction) => void; - handleCloseEditUnitModal: () => void; - editUnit: () => void; -} - -export default function CreateUnitModal(props: CreateUnitModalProps) { - const { - openEditUnitModal, - setEditUnitName, - handleCloseEditUnitModal, - editUnit, - } = props; - - const theme = useTheme(); - - return ( - - - - - - - - - - - Create a new unit - - - - - - - setEditUnitName(event.target.value)} - variant="outlined" - sx={{ - display: "flex", - flexDirection: "column", - alignSelf: "stretch", - height: "56px", - width: "100%", - }} - InputProps={{ - startAdornment: ( - - - - ), - }} - /> - - - - - - - - - - ); -} diff --git a/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx b/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx index 60975039..d2dd5cbb 100644 --- a/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx +++ b/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx @@ -11,6 +11,7 @@ import { Typography, useTheme, } from "@mui/material"; +import { useUser } from "../../../hooks/useUser"; interface CreateUnitModalProps { openUnpublishUnitModal: boolean; @@ -26,6 +27,7 @@ export default function CreateUnitModal(props: CreateUnitModalProps) { } = props; const theme = useTheme(); + const user = useUser(); return ( GO BACK @@ -128,9 +129,9 @@ export default function CreateUnitModal(props: CreateUnitModalProps) { display: "flex", height: "40px", gap: "8px", - backgroundColor: theme.palette.Administrator.Default, + backgroundColor: theme.palette[user.role].Default, "&:hover": { - bgcolor: theme.palette.Administrator.Default, + bgcolor: theme.palette[user.role].Default, }, }} onClick={() => unpublishUnit()} diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts index b073714a..f5748acd 100644 --- a/frontend/src/theme/theme.ts +++ b/frontend/src/theme/theme.ts @@ -51,11 +51,6 @@ const palette: PaletteOptions = { 600: "#404B4D", 700: "#111111", }, - OnBackground: "#171D1E", - Light: { - OnSurfaceVariant: "#3F484B", - Outline: "#6F797B", - }, }; const typography: TypographyOptions = { @@ -197,4 +192,4 @@ const getTheme = () => { return theme; }; -export default getTheme; \ No newline at end of file +export default getTheme; diff --git a/frontend/src/theme/themeAugmentation.d.ts b/frontend/src/theme/themeAugmentation.d.ts index 5b246c10..764774ee 100644 --- a/frontend/src/theme/themeAugmentation.d.ts +++ b/frontend/src/theme/themeAugmentation.d.ts @@ -28,12 +28,6 @@ declare module "@mui/material/styles" { 600: string; 700: string; }; - - OnBackground: string; - Light:{ - Outline: string; - OnSurfaceVariant: string; - } } interface TypographyOptions { @@ -94,4 +88,4 @@ declare module "@mui/material/Typography" { bodyMedium: true; bodySmall: true; } -} \ No newline at end of file +} From aa200b51d13b2e120d52badb26a3db6657fcac76 Mon Sep 17 00:00:00 2001 From: mxc-maggiechen Date: Tue, 18 Mar 2025 01:43:23 -0400 Subject: [PATCH 5/8] add back private route --- frontend/src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5a6de473..fe6e0b6a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -137,10 +137,11 @@ const App = (): React.ReactElement => { component={HelpRequestPage} allowedRoles={["Facilitator"]} /> - Date: Mon, 24 Mar 2025 14:43:15 -0400 Subject: [PATCH 6/8] remove console logs since it messes up builds --- .../src/components/course_viewing/CourseViewingPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/course_viewing/CourseViewingPage.tsx b/frontend/src/components/course_viewing/CourseViewingPage.tsx index 3e8ea9eb..16c88618 100644 --- a/frontend/src/components/course_viewing/CourseViewingPage.tsx +++ b/frontend/src/components/course_viewing/CourseViewingPage.tsx @@ -44,16 +44,16 @@ export default function CourseUnitsPage() { const createUnit = () => { // dummy function + // eslint-disable-next-line @typescript-eslint/no-unused-vars const unitName = createUnitName; - console.log("Unit name", unitName); }; const deleteUnit = () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const courseId = selectedCourseId; - console.log("Delete course id:", courseId); }; const unpublishUnit = () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const courseId = selectedCourseId; - console.log("Unpublish course id:", courseId); }; const handleDrawerOpen = () => { From 5c977668cad041292b220cfbbdc9ce835075e4ca Mon Sep 17 00:00:00 2001 From: harishan-r Date: Wed, 26 Mar 2025 20:12:37 -0400 Subject: [PATCH 7/8] removed paper mui, we dont need it i hope --- .../components/course_viewing/UnitSidebar.tsx | 188 +++++++++--------- 1 file changed, 89 insertions(+), 99 deletions(-) diff --git a/frontend/src/components/course_viewing/UnitSidebar.tsx b/frontend/src/components/course_viewing/UnitSidebar.tsx index 16ef3566..f3152cf3 100644 --- a/frontend/src/components/course_viewing/UnitSidebar.tsx +++ b/frontend/src/components/course_viewing/UnitSidebar.tsx @@ -12,7 +12,6 @@ import { ListItemText, Menu, MenuItem, - Paper, Typography, useTheme, } from "@mui/material"; @@ -89,112 +88,103 @@ export default function UnitSidebar(props: UnitSideBarProps) { const ContextMenu = () => { return ( - - + + + + View Feedback + + + - - - - - View Feedback - - - - - - - Upload Thumbnail - - - - - - - Move - - - handleOpenModal(ModalType.Unpublish)} - > - - - - - Unpublish - - - - handleOpenModal(ModalType.Delete)} - sx={{ - height: "48px", - }} + + + + Upload Thumbnail + + + + + + + Move + + + handleOpenModal(ModalType.Unpublish)} + > + + + + + Unpublish + + + + handleOpenModal(ModalType.Delete)} + sx={{ + height: "48px", + }} + > + + + + - - - - - Delete - - - - + Delete + + + ); }; const handleListItemClick = ( From 9be453b3a718742666c317222a220dbfa7fc2e9f Mon Sep 17 00:00:00 2001 From: mxc-maggiechen Date: Thu, 27 Mar 2025 21:10:14 -0400 Subject: [PATCH 8/8] fix --- .../course_viewing/CourseViewingPage.tsx | 34 ++-- .../components/course_viewing/UnitSidebar.tsx | 172 +++++++----------- .../course_viewing/modals/DeleteUnitModal.tsx | 2 +- ...ublishUnitModal.tsx => EditUnitModals.tsx} | 80 +++++--- 4 files changed, 138 insertions(+), 150 deletions(-) rename frontend/src/components/course_viewing/modals/{UnpublishUnitModal.tsx => EditUnitModals.tsx} (60%) diff --git a/frontend/src/components/course_viewing/CourseViewingPage.tsx b/frontend/src/components/course_viewing/CourseViewingPage.tsx index 16c88618..30b53ab7 100644 --- a/frontend/src/components/course_viewing/CourseViewingPage.tsx +++ b/frontend/src/components/course_viewing/CourseViewingPage.tsx @@ -6,15 +6,16 @@ import { CourseUnit } from "../../types/CourseTypes"; import CourseAPIClient from "../../APIClients/CourseAPIClient"; import CreateUnitModal from "./modals/CreateUnitModal"; import DeleteUnitModal from "./modals/DeleteUnitModal"; -import UnpublishUnitModal from "./modals/UnpublishUnitModal"; +import EditUnitModal from "./modals/EditUnitModals"; export default function CourseUnitsPage() { const theme = useTheme(); const [courseUnits, setCourseUnits] = useState([]); const [createUnitName, setCreateUnitName] = useState(""); + const [editUnitName, setEditUnitName] = useState(""); const [openCreateUnitModal, setOpenCreateUnitModal] = useState(false); const [openDeleteUnitModal, setOpenDeleteUnitModal] = useState(false); - const [openUnpublishUnitModal, setOpenUnpublishUnitModal] = useState(false); + const [openEditUnitModal, setOpenEditUnitModal] = useState(false); const [selectedCourseId, setSelectedCourseId] = useState(""); const [open, setOpen] = useState(true); @@ -30,16 +31,16 @@ export default function CourseUnitsPage() { setOpenDeleteUnitModal(false); }; - const handleOpenDeleteUnitModal = () => { - setOpenDeleteUnitModal(true); + const handleCloseEditUnitModal = () => { + setOpenEditUnitModal(false); }; - const handleCloseUnpublishUnitModal = () => { - setOpenUnpublishUnitModal(false); + const handleOpenDeleteUnitModal = () => { + setOpenDeleteUnitModal(true); }; - const handleOpenUnpublishUnitModal = () => { - setOpenUnpublishUnitModal(true); + const handleOpenEditUnitModal = () => { + setOpenEditUnitModal(true); }; const createUnit = () => { @@ -51,9 +52,10 @@ export default function CourseUnitsPage() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const courseId = selectedCourseId; }; - const unpublishUnit = () => { + + const editUnit = () => { // eslint-disable-next-line @typescript-eslint/no-unused-vars - const courseId = selectedCourseId; + const courseId = editUnitName; }; const handleDrawerOpen = () => { @@ -85,10 +87,12 @@ export default function CourseUnitsPage() { handleCloseDeleteUnitModal={handleCloseDeleteUnitModal} deleteUnit={deleteUnit} /> - diff --git a/frontend/src/components/course_viewing/UnitSidebar.tsx b/frontend/src/components/course_viewing/UnitSidebar.tsx index 16ef3566..181bae65 100644 --- a/frontend/src/components/course_viewing/UnitSidebar.tsx +++ b/frontend/src/components/course_viewing/UnitSidebar.tsx @@ -12,17 +12,14 @@ import { ListItemText, Menu, MenuItem, - Paper, Typography, useTheme, } from "@mui/material"; import MoreVertIcon from "@mui/icons-material/MoreVert"; -import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; +import EditOutlinedIcon from "@mui/icons-material/EditOutlined"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; import MoveDownIcon from "@mui/icons-material/MoveDown"; import MenuOpenIcon from "@mui/icons-material/MenuOpen"; -import OpenInNewIcon from "@mui/icons-material/OpenInNew"; -import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined"; import AddIcon from "@mui/icons-material/Add"; import { CourseUnit } from "../../types/CourseTypes"; import { useUser } from "../../hooks/useUser"; @@ -31,7 +28,6 @@ import { isAdministrator } from "../../types/UserTypes"; enum ModalType { Create = "Create", Delete = "Delete", - Unpublish = "Unpublish", Edit = "Edit", } interface UnitSideBarProps { @@ -39,7 +35,7 @@ interface UnitSideBarProps { handleClose: () => void; handleOpenCreateUnitModal: () => void; handleOpenDeleteUnitModal: () => void; - handleOpenUnpublishUnitModal: () => void; + handleOpenEditUnitModal: () => void; setSelectedCourseId: (value: React.SetStateAction) => void; open: boolean; } @@ -53,7 +49,7 @@ export default function UnitSidebar(props: UnitSideBarProps) { open, handleOpenCreateUnitModal, handleOpenDeleteUnitModal, - handleOpenUnpublishUnitModal, + handleOpenEditUnitModal, setSelectedCourseId, } = props; @@ -80,8 +76,8 @@ export default function UnitSidebar(props: UnitSideBarProps) { case ModalType.Delete: handleOpenDeleteUnitModal(); break; - case ModalType.Unpublish: - handleOpenUnpublishUnitModal(); + case ModalType.Edit: + handleOpenEditUnitModal(); break; default: } @@ -89,112 +85,72 @@ export default function UnitSidebar(props: UnitSideBarProps) { const ContextMenu = () => { return ( - - handleOpenModal(ModalType.Edit)} + > + + + + Edit unit title + + + - - - - - View Feedback - - - - - - - Upload Thumbnail - - - - - - - Move - - - handleOpenModal(ModalType.Unpublish)} - > - - - - - Unpublish - - - - handleOpenModal(ModalType.Delete)} - sx={{ - height: "48px", - }} + + + + Move + + + handleOpenModal(ModalType.Delete)} + sx={{ + height: "48px", + }} + > + + + + - - - - - Delete - - - - + Delete + + + ); }; const handleListItemClick = ( diff --git a/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx index def4927b..95bd13fe 100644 --- a/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx +++ b/frontend/src/components/course_viewing/modals/DeleteUnitModal.tsx @@ -85,7 +85,7 @@ export default function CreateUnitModal(props: DeleteUnitModalProps) { variant="bodyMedium" color={theme.palette.Neutral[700]} > - This action can't be undone. A deleted user cannot be + This action can't be undone. A deleted unit cannot be recovered. diff --git a/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx b/frontend/src/components/course_viewing/modals/EditUnitModals.tsx similarity index 60% rename from frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx rename to frontend/src/components/course_viewing/modals/EditUnitModals.tsx index d2dd5cbb..a0947233 100644 --- a/frontend/src/components/course_viewing/modals/UnpublishUnitModal.tsx +++ b/frontend/src/components/course_viewing/modals/EditUnitModals.tsx @@ -1,29 +1,33 @@ import React from "react"; import CloseIcon from "@mui/icons-material/Close"; +import { PersonOutlineOutlined } from "@mui/icons-material"; import { Box, Button, Dialog, DialogContent, - DialogContentText, DialogTitle, IconButton, + InputAdornment, + TextField, Typography, useTheme, } from "@mui/material"; import { useUser } from "../../../hooks/useUser"; -interface CreateUnitModalProps { - openUnpublishUnitModal: boolean; - handleCloseUnpublishUnitModal: () => void; - unpublishUnit: () => void; +interface EditUnitModalProps { + openEditUnitModal: boolean; + handleCloseEditUnitModal: () => void; + setEditUnitName: (value: React.SetStateAction) => void; + editUnit: () => void; } -export default function CreateUnitModal(props: CreateUnitModalProps) { +export default function EditUnitModal(props: EditUnitModalProps) { const { - openUnpublishUnitModal, - handleCloseUnpublishUnitModal, - unpublishUnit, + openEditUnitModal, + handleCloseEditUnitModal, + setEditUnitName, + editUnit, } = props; const theme = useTheme(); @@ -37,8 +41,8 @@ export default function CreateUnitModal(props: CreateUnitModalProps) { }} > - Unpublish Unit? + Edit unit + + - - - Learners will not be able see the unit until you choose to - publish it again. This action can be redone. - - + + setEditUnitName(event.target.value)} + variant="outlined" + sx={{ + display: "flex", + flexDirection: "column", + alignSelf: "stretch", + height: "56px", + width: "100%", + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> +