Skip to content

Library Viewing Modals + Context Menu #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Library Viewing Modals + Context Menu #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
26ea6ff
first commit
mxc-maggiechen Mar 13, 2025
4f8fb60
first commit2
mxc-maggiechen Mar 13, 2025
04375bf
finished!
mxc-maggiechen Mar 18, 2025
f8fc4b7
clean up
mxc-maggiechen Mar 18, 2025
aa200b5
add back private route
mxc-maggiechen Mar 18, 2025
801f542
remove console logs since it messes up builds
mxc-maggiechen Mar 24, 2025
5c97766
removed paper mui, we dont need it i hope
harishan-r Mar 27, 2025
9be453b
fix
mxc-maggiechen Mar 28, 2025
27d145f
fix merge conflict
mxc-maggiechen Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions backend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
72 changes: 71 additions & 1 deletion frontend/src/components/course_viewing/CourseViewingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,60 @@ import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import UnitSidebar from "./UnitSidebar";
import { CourseUnit } from "../../types/CourseTypes";
import CourseAPIClient from "../../APIClients/CourseAPIClient";
import CreateUnitModal from "./modals/CreateUnitModal";
import DeleteUnitModal from "./modals/DeleteUnitModal";
import EditUnitModal from "./modals/EditUnitModals";

export default function CourseUnitsPage() {
const theme = useTheme();
const [courseUnits, setCourseUnits] = useState<CourseUnit[]>([]);

const [createUnitName, setCreateUnitName] = useState("");
const [editUnitName, setEditUnitName] = useState("");
const [openCreateUnitModal, setOpenCreateUnitModal] = useState(false);
const [openDeleteUnitModal, setOpenDeleteUnitModal] = useState(false);
const [openEditUnitModal, setOpenEditUnitModal] = useState(false);
const [selectedCourseId, setSelectedCourseId] = useState("");
const [open, setOpen] = useState(true);

const handleOpenCreateUnitModal = () => {
setOpenCreateUnitModal(true);
};

const handleCloseCreateUnitModal = () => {
setOpenCreateUnitModal(false);
};

const handleCloseDeleteUnitModal = () => {
setOpenDeleteUnitModal(false);
};

const handleCloseEditUnitModal = () => {
setOpenEditUnitModal(false);
};

const handleOpenDeleteUnitModal = () => {
setOpenDeleteUnitModal(true);
};

const handleOpenEditUnitModal = () => {
setOpenEditUnitModal(true);
};

const createUnit = () => {
// dummy function
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const unitName = createUnitName;
};
const deleteUnit = () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const courseId = selectedCourseId;
};

const editUnit = () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const courseId = editUnitName;
};

const handleDrawerOpen = () => {
setOpen(true);
};
Expand All @@ -29,9 +76,32 @@ export default function CourseUnitsPage() {

return (
<Box display="flex" width="100%" height="100%">
<CreateUnitModal
openCreateUnitModal={openCreateUnitModal}
handleCloseCreateUnitModal={handleCloseCreateUnitModal}
setCreateUnitName={setCreateUnitName}
createUnit={createUnit}
/>
<DeleteUnitModal
openDeleteUnitModal={openDeleteUnitModal}
handleCloseDeleteUnitModal={handleCloseDeleteUnitModal}
deleteUnit={deleteUnit}
/>

<EditUnitModal
openEditUnitModal={openEditUnitModal}
handleCloseEditUnitModal={handleCloseEditUnitModal}
setEditUnitName={setEditUnitName}
editUnit={editUnit}
/>

<UnitSidebar
courseUnits={courseUnits}
handleClose={handleDrawerClose}
handleOpenCreateUnitModal={handleOpenCreateUnitModal}
handleOpenDeleteUnitModal={handleOpenDeleteUnitModal}
handleOpenEditUnitModal={handleOpenEditUnitModal}
setSelectedCourseId={setSelectedCourseId}
open={open}
/>
{!open && (
Expand Down
173 changes: 171 additions & 2 deletions frontend/src/components/course_viewing/UnitSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,157 @@ import React, { useState } from "react";
import {
Box,
Button,
Divider,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Typography,
useTheme,
} from "@mui/material";
import MoreVertIcon from "@mui/icons-material/MoreVert";
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 AddIcon from "@mui/icons-material/Add";
import { CourseUnit } from "../../types/CourseTypes";
import { useUser } from "../../hooks/useUser";
import { isAdministrator } from "../../types/UserTypes";

enum ModalType {
Create = "Create",
Delete = "Delete",
Edit = "Edit",
}
interface UnitSideBarProps {
courseUnits: CourseUnit[];
handleClose: () => void;
handleOpenCreateUnitModal: () => void;
handleOpenDeleteUnitModal: () => void;
handleOpenEditUnitModal: () => void;
setSelectedCourseId: (value: React.SetStateAction<string>) => void;
open: boolean;
}

export default function UnitSidebar(props: UnitSideBarProps) {
const theme = useTheme();
const user = useUser();
const { courseUnits, handleClose, open } = props;
const {
courseUnits,
handleClose,
open,
handleOpenCreateUnitModal,
handleOpenDeleteUnitModal,
handleOpenEditUnitModal,
setSelectedCourseId,
} = props;

const [selectedIndex, setSelectedIndex] = useState(0);
const [anchorEl, setAnchorEl] = React.useState(null);

const openContextMenu = Boolean(anchorEl);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleContextMenuOpen = (event: any, courseId: string) => {
setAnchorEl(event.currentTarget);
setSelectedCourseId(courseId);
};
const handleContextMenuClose = () => {
setAnchorEl(null);
};

const handleOpenModal = (action: string) => {
handleContextMenuClose();
switch (action) {
case ModalType.Create:
handleOpenCreateUnitModal();
break;
case ModalType.Delete:
handleOpenDeleteUnitModal();
break;
case ModalType.Edit:
handleOpenEditUnitModal();
break;
default:
}
};

const ContextMenu = () => {
return (
<Menu
anchorEl={anchorEl}
open={openContextMenu}
onClose={handleContextMenuClose}
MenuListProps={{
sx: {
py: 0,
backgroundColor: theme.palette.Neutral[200],
paddingTop: "8px",
paddingBottom: "8px",
margin: "0px",
width: "250px",
borderRadius: "4px",
},
}}
>
<MenuItem
sx={{
height: "48px",
}}
onClick={() => handleOpenModal(ModalType.Edit)}
>
<ListItemIcon>
<EditOutlinedIcon
fontSize="small"
htmlColor={theme.palette.Neutral[700]}
/>
</ListItemIcon>
<Typography variant="bodyMedium">Edit unit title</Typography>
</MenuItem>
<Divider component="li" />
<MenuItem
sx={{
height: "48px",
}}
>
<ListItemIcon>
<MoveDownIcon
fontSize="small"
htmlColor={theme.palette.Neutral[700]}
/>
</ListItemIcon>
<Typography variant="bodyMedium">Move</Typography>
</MenuItem>
<Divider component="li" />
<MenuItem
onClick={() => handleOpenModal(ModalType.Delete)}
sx={{
height: "48px",
}}
>
<ListItemIcon>
<DeleteOutlineIcon
fontSize="small"
htmlColor={theme.palette.Error.Default}
/>
</ListItemIcon>
<Typography
variant="bodyMedium"
noWrap
color={theme.palette.Error.Default}
>
Delete
</Typography>
</MenuItem>
</Menu>
);
};
const handleListItemClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
index: number,
Expand All @@ -36,7 +163,8 @@ export default function UnitSidebar(props: UnitSideBarProps) {
return (
<Drawer
sx={{
width: "20%",
maxWidth: "301px",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set it as 301px because 300px causes a weird horizontal scrollbar situation

width: "100%",
height: "100%",
flexShrink: 0,
"& .MuiDrawer-paper": {
Expand Down Expand Up @@ -78,6 +206,7 @@ export default function UnitSidebar(props: UnitSideBarProps) {
Close
</Button>
</Box>
<ContextMenu />
<List sx={{ width: "100%" }}>
{courseUnits.map((course, index) => {
return (
Expand Down Expand Up @@ -116,11 +245,51 @@ export default function UnitSidebar(props: UnitSideBarProps) {
: theme.typography.bodyLarge
}
/>
{isAdministrator(user) && (
<IconButton
edge="end"
onClick={(event) => {
event.stopPropagation(); // Prevent triggering the list item click
handleContextMenuOpen(event, course.id); // Custom function to handle button click
}}
sx={{ marginLeft: "16px" }}
>
<MoreVertIcon />
</IconButton>
)}
</ListItemButton>
</ListItem>
);
})}
</List>
{isAdministrator(user) && (
<Button
variant="contained"
onClick={handleOpenCreateUnitModal}
disableElevation
startIcon={<AddIcon />}
sx={{
width: "100%",
height: "40px",
maxWidth: "236px",
backgroundColor: theme.palette[user.role].Default,
alignItems: "center",
marginTop: "24px",
marginBottom: "24px",
marginLeft: "32px",
marginRight: "32px",
}}
>
<Typography
variant="labelLarge"
style={{
color: theme.palette.Neutral[100],
}}
>
Create Unit
</Typography>
</Button>
)}
</Box>
</Drawer>
);
Expand Down
Loading