+ setModalShow({ ...modalShow, edit: false })}
+ onSave={handleSave}
+ />
+ )}
+ setModalShow({ ...modalShow, remove: false })}
+ onConfirm={handleRemove}
+ />
+
+ {/* Toast Notification */}
+ {toast && (
+ setToast(null)}
+ />
+ )}
+
+ );
+}
+
+export function permissionIcon(permission: IsEnabled) {
+ return permission === IsEnabled.Yes ? : ;
+}
+
+export default AssignmentParticipants;
diff --git a/src/pages/AssignmentParticipants/AssignmentParticipantsTypes.ts b/src/pages/AssignmentParticipants/AssignmentParticipantsTypes.ts
new file mode 100644
index 00000000..ebf7c112
--- /dev/null
+++ b/src/pages/AssignmentParticipants/AssignmentParticipantsTypes.ts
@@ -0,0 +1,40 @@
+export enum IsEnabled {
+ Yes = 'yes',
+ No = 'no',
+}
+
+export enum Role {
+ Student = "Student",
+ Instructor = "Instructor",
+ Admin = "Admin",
+}
+
+export enum ParticipantRole {
+ Participant = "participant",
+ Reader = "reader",
+ Reviewer = "reviewer",
+ Submitter = "submitter",
+ Mentor = "mentor",
+}
+
+export interface ParticipantPermissions {
+ review: IsEnabled;
+ submit: IsEnabled;
+ takeQuiz: IsEnabled;
+ mentor: IsEnabled;
+}
+
+export interface Participant {
+ id: number;
+ name: string;
+ email: string;
+ role: Role;
+ parent: string;
+ permissions: ParticipantPermissions;
+ participantRole: ParticipantRole;
+}
+
+export interface AssignmentProperties {
+ hasQuiz: boolean;
+ hasMentor: boolean;
+}
diff --git a/src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx b/src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx
new file mode 100644
index 00000000..2f5c059f
--- /dev/null
+++ b/src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx
@@ -0,0 +1,57 @@
+import { AssignmentProperties, IsEnabled, ParticipantRole, Role } from "./AssignmentParticipantsTypes";
+import { FaUserGraduate, FaChalkboardTeacher, FaUserShield } from 'react-icons/fa';
+
+export function assignmentColSpan(assignmentProps: AssignmentProperties): number {
+ return assignmentProps.hasQuiz && assignmentProps.hasMentor ? 12 : assignmentProps.hasQuiz || assignmentProps.hasMentor ? 11 : 10;
+}
+
+export function classForRole(role: Role): string {
+ switch (role) {
+ case Role.Student:
+ return "role-student";
+ case Role.Instructor:
+ return "role-instructor";
+ case Role.Admin:
+ return "role-admin";
+ default:
+ return "";
+ }
+}
+
+export function iconForRole(role: Role): JSX.Element {
+ switch (role) {
+ case Role.Student:
+ return Assignment Participants: Program 1
+ + {/* Add User Section */} + + {error &&{error}
}
+
+
+
+ {/* Participant Table */}
+
+ setNewUserName(e.target.value)}
+ />
+
+
+
+ {/* Radio Group for Role Selection */}
+
+ {Object.values(ParticipantRole).map((role) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+export default ParticipantTable;
diff --git a/src/pages/AssignmentParticipants/ToastNotification.css b/src/pages/AssignmentParticipants/ToastNotification.css
new file mode 100644
index 00000000..1d1c2790
--- /dev/null
+++ b/src/pages/AssignmentParticipants/ToastNotification.css
@@ -0,0 +1,52 @@
+.toast-notification {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background-color: #333;
+ color: #fff;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ z-index: 1000;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.toast-notification.slide-out {
+ transform: translateX(100%);
+ opacity: 0;
+}
+
+.toast-notification .undo-button,
+.toast-notification .close-button {
+ background: none;
+ border: none;
+ color: #4a90e2;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.toast-notification .close-button {
+ font-size: 1.2rem;
+ margin-left: auto;
+}
+
+.toast-notification .undo-button:hover,
+.toast-notification .close-button:hover {
+ color: #2563eb;
+}
+
+/* Progress bar styling */
+.progress-bar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 5px;
+ background-color: #4a90e2;
+ transition: width 0.05s linear;
+ /* Smooth shrinking effect */
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+}
diff --git a/src/pages/AssignmentParticipants/ToastNotification.tsx b/src/pages/AssignmentParticipants/ToastNotification.tsx
new file mode 100644
index 00000000..484778b1
--- /dev/null
+++ b/src/pages/AssignmentParticipants/ToastNotification.tsx
@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './ToastNotification.css';
+
+interface ToastNotificationProps {
+ message: string;
+ onUndo: () => void;
+ onClose: () => void;
+}
+
+function ToastNotification({ message, onUndo, onClose }: ToastNotificationProps) {
+ const [visible, setVisible] = useState(true);
+ const [isSlidingOut, setIsSlidingOut] = useState(false);
+ const [progress, setProgress] = useState(100); // 100% progress initially
+ const duration = 5000; // Duration in milliseconds
+
+ const handleSlideOut = useCallback(() => {
+ setIsSlidingOut(true);
+ setTimeout(() => {
+ setVisible(false);
+ onClose();
+ }, 300); // Wait for slide-out animation to complete
+ }, [onClose]);
+
+ const handleUndo = useCallback(() => {
+ setIsSlidingOut(true);
+ setTimeout(() => {
+ onUndo(); // Execute undo action
+ onClose(); // Close toast after undo
+ }, 300); // Delay to allow the slide-out animation
+ }, [onUndo, onClose]);
+
+ useEffect(() => {
+ const interval = 50; // Update progress every 50ms
+ const decrement = 100 / (duration / interval); // Calculate decrement step
+
+ const timer = setInterval(() => {
+ setProgress((prev) => Math.max(0, prev - decrement));
+ }, interval);
+
+ // Auto-dismiss the toast after the specified duration
+ const timeout = setTimeout(() => {
+ handleSlideOut();
+ }, duration);
+
+ return () => {
+ clearInterval(timer);
+ clearTimeout(timeout);
+ };
+ }, [handleSlideOut]);
+
+ if (!visible) return null;
+
+ return (
+ | onSort('id')} + className={sortConfig?.key === 'id' ? 'sorted' : ''} + > + ID {sortIcon('id')} + | +onSort('name')} + className={sortConfig?.key === 'name' ? 'sorted' : ''} + > + Name {sortIcon('name')} + | +onSort('email')} + className={sortConfig?.key === 'email' ? 'sorted' : ''} + > + Email Address {sortIcon('email')} + | +onSort('role')} + className={sortConfig?.key === 'role' ? 'sorted' : ''} + > + Role {sortIcon('role')} + | +onSort('parent')} + className={sortConfig?.key === 'parent' ? 'sorted' : ''} + > + Parent {sortIcon('parent')} + | +onSort('permissions.review')} + > + Review {sortIcon('permissions.review')} + | +onSort('permissions.submit')} + className={sortConfig?.key === 'permissions.submit' ? 'sorted' : ''} + > + Submit {sortIcon('permissions.submit')} + | + {assignmentProps.hasQuiz && ( +onSort('permissions.takeQuiz')} + className={sortConfig?.key === 'permissions.takeQuiz' ? 'sorted' : ''} + > + Take Quiz {sortIcon('permissions.takeQuiz')} + | + )} + {assignmentProps.hasMentor && ( +onSort('permissions.mentor')} + className={sortConfig?.key === 'permissions.mentor' ? 'sorted' : ''} + > + Mentor {sortIcon('permissions.mentor')} + | + )} +Actions | +
|---|---|---|---|---|---|---|---|---|---|
| {participant.id} | +{participant.name} | +{participant.email} | ++ {iconForRole(participant.role)} + + {participant.role} + + | +{participant.parent} | ++ {permissionIcon(participant.permissions.review)} + | ++ {permissionIcon(participant.permissions.submit)} + | + {assignmentProps.hasQuiz && ( ++ {permissionIcon(participant.permissions.takeQuiz)} + | + )} + {assignmentProps.hasMentor && ( ++ {permissionIcon(participant.permissions.mentor)} + | + )} ++ + + | +
| + No participants found matching the current search criteria. + | +
+ {message}
+
+
+
+
+ );
+}
+
+export default ToastNotification;
diff --git a/src/pages/AssignmentParticipants/participants.json b/src/pages/AssignmentParticipants/participants.json
new file mode 100644
index 00000000..5940b088
--- /dev/null
+++ b/src/pages/AssignmentParticipants/participants.json
@@ -0,0 +1,408 @@
+[
+ {
+ "id": 10555,
+ "name": "Alexis Harper",
+ "email": "Alexis_Harper@mailinator.com",
+ "role": "Instructor",
+ "parent": "Instructor 1",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10556,
+ "name": "Jordan Miles",
+ "email": "Jordan_Miles@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 2",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reviewer"
+ },
+ {
+ "id": 10557,
+ "name": "Casey Woods",
+ "email": "Casey_Woods@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 3",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10558,
+ "name": "Taylor Cruz",
+ "email": "Taylor_Cruz@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 4",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10559,
+ "name": "Drew Morgan",
+ "email": "Drew_Morgan@mailinator.com",
+ "role": "Admin",
+ "parent": "Instructor 5",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10560,
+ "name": "Morgan Lee",
+ "email": "Morgan_Lee@mailinator.com",
+ "role": "Instructor",
+ "parent": "Instructor 6",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "reviewer"
+ },
+ {
+ "id": 10561,
+ "name": "Avery Taylor",
+ "email": "Avery_Taylor@mailinator.com",
+ "role": "Admin",
+ "parent": "Instructor 7",
+ "permissions": {
+ "review": "no",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10562,
+ "name": "Parker Gray",
+ "email": "Parker_Gray@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 1",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10563,
+ "name": "Jamie Adams",
+ "email": "Jamie_Adams@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 2",
+ "permissions": {
+ "review": "no",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reader"
+ },
+ {
+ "id": 10564,
+ "name": "Reese Bennett",
+ "email": "Reese_Bennett@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 3",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10565,
+ "name": "Riley Evans",
+ "email": "Riley_Evans@mailinator.com",
+ "role": "Instructor",
+ "parent": "Instructor 4",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10566,
+ "name": "River Brooks",
+ "email": "River_Brooks@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 5",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10567,
+ "name": "Harper Reed",
+ "email": "Harper_Reed@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 6",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10568,
+ "name": "Sage Thompson",
+ "email": "Sage_Thompson@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 7",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10569,
+ "name": "Taylor James",
+ "email": "Taylor_James@mailinator.com",
+ "role": "Instructor",
+ "parent": "Instructor 1",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reader"
+ },
+ {
+ "id": 10570,
+ "name": "Logan Walker",
+ "email": "Logan_Walker@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 2",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10571,
+ "name": "Skyler Bell",
+ "email": "Skyler_Bell@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 3",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "no",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10572,
+ "name": "Reagan Young",
+ "email": "Reagan_Young@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 4",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10573,
+ "name": "Sawyer Morgan",
+ "email": "Sawyer_Morgan@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 5",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reviewer"
+ },
+ {
+ "id": 10574,
+ "name": "Blake Hayes",
+ "email": "Blake_Hayes@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 6",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "reader"
+ },
+ {
+ "id": 10575,
+ "name": "Sydney Green",
+ "email": "Sydney_Green@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 7",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10576,
+ "name": "Peyton Bailey",
+ "email": "Peyton_Bailey@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 1",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10577,
+ "name": "Hayden Foster",
+ "email": "Hayden_Foster@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 2",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10578,
+ "name": "Rory Murphy",
+ "email": "Rory_Murphy@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 3",
+ "permissions": {
+ "review": "no",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reviewer"
+ },
+ {
+ "id": 10579,
+ "name": "Tatum Sanders",
+ "email": "Tatum_Sanders@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 4",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reviewer"
+ },
+ {
+ "id": 10580,
+ "name": "Elliott Jenkins",
+ "email": "Elliott_Jenkins@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 5",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "yes"
+ },
+ "participantRole": "mentor"
+ },
+ {
+ "id": 10581,
+ "name": "Dakota Wells",
+ "email": "Dakota_Wells@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 6",
+ "permissions": {
+ "review": "no",
+ "submit": "yes",
+ "takeQuiz": "no",
+ "mentor": "no"
+ },
+ "participantRole": "submitter"
+ },
+ {
+ "id": 10582,
+ "name": "Emerson White",
+ "email": "Emerson_White@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 7",
+ "permissions": {
+ "review": "yes",
+ "submit": "yes",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "participant"
+ },
+ {
+ "id": 10583,
+ "name": "Kennedy Blake",
+ "email": "Kennedy_Blake@mailinator.com",
+ "role": "Student",
+ "parent": "Instructor 1",
+ "permissions": {
+ "review": "yes",
+ "submit": "no",
+ "takeQuiz": "yes",
+ "mentor": "no"
+ },
+ "participantRole": "reader"
+ }
+]