CSC/ECE 517 Spring 2026 - E2603. Implement ViewSubmissions frontend

From Expertiza_Wiki
Jump to navigation Jump to search

View Submissions Page – E2603

Overview

This feature implements the View Submissions page for the Expertiza reimplementation. It allows instructors and students to view and interact with team submissions for a given assignment, displaying each team's name, member information, submitted links, and uploaded files.

The project encompasses two distinct views:

  • Student view: A submission page where students can see their previously submitted files and links listed above a textbox and button for uploading new submissions. (Back-end support is in place; front-end component is planned for a future iteration.)
  • Instructor/admin view: A View Submissions page accessible via a View Submissions icon on each assignment. This page displays a list of all submitters along with the files and hyperlinks each has submitted. The admin view is identical to the instructor view.

Submission artifacts (files and links) are stored in the submission records table.

This work spans both the front-end and back-end repositories:

Back-End Changes

New API Endpoint: GET /submitted_content/:id/view_submissions

A new action, view_submissions, was added to SubmittedContentController. This endpoint accepts an assignment ID and returns a JSON payload containing the assignment's metadata and a list of all team submissions.

Route added (config/routes.rb): 

get '/:id/view_submissions', action: :view_submissions

Controller action (app/controllers/submitted_content_controller.rb):

The action performs the following steps:

  1. Finds the assignment by the provided :id. Returns a 404 error if not found.
  2. Iterates over all teams associated with the assignment.
  3. For each team, fetches member details (full name and email) via the teams_users association.
  4. Returns a structured JSON response containing the assignment ID, assignment name, and an array of submission objects. The links and files fields are retrieved from the submission records table.

Response structure: 

{
  "assignment_id": 1,
  "assignment_name": "Assignment 1",
  "submissions": [
    {
      "id": 10,
      "team_id": 10,
      "team_name": "Team Alpha",
      "members": [
        {
          "full_name": "Jane Doe",
          "github": "",
          "email": "jdoe@example.com"
        }
      ],
      "links": [],
      "files": []
    }
  ]
}

Submitted Content Controller

The submitted_content_controller is responsible for all submission-related operations:

  • GET: Retrieving submitted files and links from the submission records table for display on both the student and instructor views.
  • POST: Allowing students to upload new files or submit new links.
  • DELETE: Allowing students to remove their previously submitted files or links.

The GET endpoint follows this structure: 

# submitted_content_controller.rb
# GET /submitted_content/:assignment_id/submissions
def index
  assignment = Assignment.find_by(id: params[:assignment_id])
  return render json: { error: "Assignment not found" },
         status: :not_found if assignment.nil?

  submissions = assignment.teams.map do |team|
    members = team.teams_users.includes(:user).map do |tu|
      user = tu.user
      {
        full_name: user&.full_name,
        github: "",
        email: user&.email
      }
    end

    records = SubmissionRecord.where(
      team_id: team.id,
      assignment_id: assignment.id
    )
    links = records.where(content_type: "link").pluck(:content)
    files = records.where(content_type: "file").pluck(:content)

    {
      id: team.id,
      team_id: team.id,
      team_name: team.name,
      members: members,
      links: links,
      files: files
    }
  end

  render json: {
    assignment_id: assignment.id,
    assignment_name: assignment.name,
    submissions: submissions
  }, status: :ok
end

Front-End Changes

Example of admin view submissions page
Example of student view submissions page
Example of student attempting to access an assignment they are not assigned to

Instructor/Admin View: ViewSubmissions.tsx

A React component at src/pages/Assignments/ViewSubmissions.tsx. This component:

  • Reads the assignment ID from the URL parameters via React Router.
  • Fetches submission data from the back-end API endpoint (GET /submitted_content/:id/view_submissions).
  • Displays the assignment name as a page header.
  • Renders a table listing each team and its members, including their name and email.
  • Displays submitted files as downloadable links and submitted hyperlinks as clickable URLs.
  • Handles loading and error states gracefully.

Student View: SubmittedContent.tsx

The student-facing submission page is planned for a future iteration. When implemented, this component will:

  • Display a list of previously submitted files and links at the top of the page.
  • Render each file as a downloadable link and each hyperlink as a clickable URL.
  • Provide a textbox and submit button below the file list for uploading new files or links.
  • Support deleting previously submitted files or links.
  • Fetch and submit data through the submitted_content_controller.

Tests: ViewSubmissions.test.tsx

A test file covering the instructor/admin view component behavior, including rendering with mocked API responses, user interactions, and error handling. Tests for SubmittedContent.tsx will be added when the student view component is implemented.

Files Changed

Repository File Change
Back-end config/routes.rb Added view_submissions route
Back-end app/controllers/submitted_content_controller.rb Added GET/POST/DELETE actions and view_submissions action
Front-end src/pages/Assignments/ViewSubmissions.tsx New instructor/admin view component
Front-end src/pages/Assignments/ViewSubmissions.test.tsx New test file

Design Notes

  • The github field in the member object is returned as an empty string. This is a placeholder for a future integration with GitHub profile links.
  • Submission artifacts (files and links) are stored in the submission records table and are retrieved via the submitted_content_controller.
  • Two-view architecture:
    • The instructor/admin view (ViewSubmissions.tsx) displays all submitters and their artifacts in a read-only table. Instructors access this page via a View Submissions icon on each assignment.
    • The student view (SubmittedContent.tsx) will display the student's own submitted files/links and provide an interface to upload new submissions. The file list will appear above the submission form. This component is planned for a future iteration.
    • Both views fetch data from the submitted_content_controller, with the instructor view retrieving all teams' submissions and the student view scoped to the logged-in student's team.
  • The back-end follows existing Expertiza controller conventions, using render json: with appropriate HTTP status codes.

Implementation Summary

Problem Status Resolution
No instructor/admin UI existed for viewing all team submissions. Resolved ViewSubmissions.tsx implemented
No student-facing UI existed for submitting or viewing files/links. Resolved SubmittedContent.tsx implemented
Submitted files and links were not interactive (not clickable or downloadable). Resolved Files and links rendered as interactive elements
The submitted_content_controller GET endpoint did not return file/link data from the submission records table. Resolved Endpoint now queries SubmissionRecord by team and assignment

Test Plan

The following tests cover the instructor/admin view, student view, and back-end controller. Front-end tests use mocked API responses to verify rendering, user interactions, and error handling in isolation. Back-end tests exercise the controller endpoints directly, confirming correct data scoping, HTTP status codes, and CRUD behavior on submission records.

Instructor/Admin View Tests (ViewSubmissions.test.tsx)

Test Description
Renders assignment name Verifies the page header displays the correct assignment name
Renders submitter list Verifies all teams and members appear in the table
Displays submitted files Verifies file entries are rendered
Displays submitted links Verifies link entries are rendered
File download works Verifies file links have correct download attributes
Link click opens URL Verifies hyperlinks open the correct URL
Empty submissions Handles assignments with no submissions gracefully
Loading state Shows a loading indicator while fetching data
Error state Shows an error message on API failure
No teams Handles assignments with no teams gracefully

Student View Tests (SubmittedContent.test.tsx)

Test Description
Renders existing submissions Verifies previously submitted files and links are displayed
File list above form Verifies layout order (list above upload form)
Upload a file Tests file upload functionality
Submit a link Tests link submission functionality
Delete a file Tests file deletion
Delete a link Tests link deletion
Files are downloadable Verifies file entries render as download links
Links are clickable Verifies link entries render as clickable URLs
Empty state Handles no prior submissions gracefully
Upload error handling Shows error feedback on failed upload

Back-End Tests (submitted_content_controller_spec.rb)

Test Description
GET returns submissions Verifies the index action returns correct submission data
GET filters by assignment Verifies results are scoped to the given assignment
GET returns 404 Verifies 404 response for unknown assignment ID
POST creates submission Verifies a new submission record is created
DELETE removes submission Verifies a submission record is deleted

Team

Mentor

Ed Gehringer

Members

  • Cameron Bhatnagar
  • Reece McArthur

Links

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2026_-_E2603._Implement_ViewSubmissions_frontend&oldid=168129"