CSC/ECE 517 Fall 2025 - E2555. Front end for Participants Page

From Expertiza_Wiki
Jump to navigation Jump to search

Introduction

Background

The Participants page displays a list of users associated with an assignment, including students and their roles.

Motivation

  • Modernize the interface: Simplify the Participants table by reducing unnecessary columns and improving readability.
  • Improve role and permission management: Ensure table columns reflect real participant actions and roles.
  • Enhance maintainability: Refactor the front-end with clean code principles using TypeScript.

Tasks Identified

Simplify the Participants table

  • Global Search Filter - Search by Participant Name
  • Column header "Email Address" → "Email"
  • Column header "Name" → "Username"
  • Column header "Full Name" → "Name"
  • Consolidate actions: Replace Review, Submission, Metareview, Submit, Take Quiz with Submit, Review, Take Quiz (only shown when the assignment includes quizzes)
  • Remove the Metareview column.
  • Add a delete icon in each row to allow removing a participant - Use the standard icon from the standard icon library:[1].

Remove Submit button for role changes and implement auto-saving

  • Provide a dropdown menu for selecting a participant’s role (e.g., Participant, Mentor, Reader, Reviewer, Submitter).
  • Auto-save behavior: When the dropdown value changes, the update is saved automatically—no separate "Submit" button needed.

Add action links (copy/import/export participants)

  • Copy participants from course: Import existing course participants into the assignment.
  • Copy participants to course: Push assignment participants back to the course.
  • Import assignment participants: Upload participants in bulk from a file.
  • Export assignment participants: Download the participant list as CSV/Excel.
  • Back: Return to the assignment overview page.

Demo

Demo Video

Click to watch on YouTube

Demo Link

https://frontend-production-e7dc.up.railway.app/participants

  • login with admin password123
  • than go to /participant page

ParticipantsAPI Component

Overview

The ParticipantsAPI component is the main container for managing assignment participants. It provides an integrated UI for viewing, editing, importing, exporting, and removing participants. It separates data handling (`useParticipants`) from presentation (`ParticipantTable`, `Toolbar`), following a modular and maintainable React + TypeScript architecture.

Core Responsibilities

  • Display and manage the Participants table
  • Handle user interactions such as role updates and deletions
  • Integrate with the custom hook `useParticipants`
  • Connect import/export functionalities with CSV helpers
  • Provide feedback via alerts and modals

Main Hooks and States

  • useParticipants({ assignmentId: 1 }): Fetches participant data and provides CRUD utilities.
  • useState

alert: Stores temporary UI feedback (success/info/error). deleteModal: Manages the confirmation modal for participant deletion. requireQuiz: Indicates whether quiz-related actions should be shown.

Alert System

  • showInfo(message), showSuccess(message), showError(message) : Display contextual alerts with color-coded feedback. Alerts are auto-dismissed after 5 seconds.
  • closeAlert() : manually dismisses the alert.

Role Management

  • onRoleChange(id, newRoleId) : Updates a participant’s role using updateRole from useParticipants. The update is automatically saved and confirmed with a success message.

Participant Removal

  • onRemoveClick(participant) : Opens a confirmation modal before deletion.
  • onConfirmDelete() : Executes deletion and displays a success message.
  • onCancelDelete() : Closes the modal without changes.

Import/Export and Navigation

  • onImportFileChange(e) : Imports participants from CSV and shows the number imported.
  • onExport() : Exports participant data as a CSV file.
  • onCopyFromCourse() / onCopyToCourse() : Placeholder actions for syncing data.
  • onBack() : Navigates back to the previous page.

UI Components

  • ParticipantToolbar: Handles search and file import/export.
  • ParticipantTable: Displays participant data and role dropdowns.
  • DeleteConfirmationModal: Confirms participant removal.

Error Handling

  • Automatically triggers showError() for fetchError or deleteError.
  • try...catch blocks in import logic handle parsing failures gracefully.

Styling

  • Uses React-Bootstrap for layout (Container, Row, Col, Alert).
  • Inline styles control layout, typography, and spacing.
  • Includes a scoped <style> block for alert close button behavior.


Future Work

  • Backend API integration:: The backend endpoints (`GET /participants/student_tasks/:id`, `PATCH /participants/:id`) are not yet implemented and must be connected in a future phase.
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2025_-_E2555._Front_end_for_Participants_Page&oldid=166895"