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

From Expertiza_Wiki
Revision as of 16:05, 12 April 2026 by Cjbhatna (talk | contribs)
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 to view all team submissions for a given assignment, displaying each team's name, member information, and (in future iterations) submitted links and files.

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

Back-End Changes

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

A new action, view_submissions, was added to AssignmentsController. 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/assignments_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.

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": []
    }
  ]
}

Note: links and files are included as empty arrays in this initial implementation, laying the groundwork for future submission artifact support.

Front-End Changes

Example of view submissions page

New Component: ViewSubmissions.tsx

A new React component was created 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 /assignments/: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.
  • Handles loading and error states gracefully.

Tests: ViewSubmissions.test.tsx

A test file was created at src/pages/Assignments/__tests__/ViewSubmissions.test.tsx to cover the component's behavior, including rendering with mocked API responses.

.gitignore Update

A minor addition was made to .gitignore to exclude the /dist build output directory.

Files Changed

Repository File Change
Back-end app/controllers/assignments_controller.rb Added view_submissions action (+32 lines)
Back-end config/routes.rb Registered new GET route
Front-end src/pages/Assignments/ViewSubmissions.tsx New component
Front-end src/pages/Assignments/__tests__/ViewSubmissions.test.tsx New test file
Front-end .gitignore Added /dist

Design Notes

  • The github field in the member object is currently returned as an empty string. This is a placeholder for a future integration with GitHub profile links.
  • links and files arrays are scaffolded but not yet populated; these represent submission artifacts to be implemented in a subsequent iteration.
  • The back-end follows existing Expertiza controller conventions, using render json: with appropriate HTTP status codes.

Final Project Overview

To further iterate on the OSS project, we will:

  • Update implementation to utilize the Submitted Content Controller
  • Ensure proper handling of file/ link uploads
  • Update submissions page to display all files/ links uploaded
  • Make uploaded files/ links clickable/ downloadable

Problem Statements

  • Connecting Submitted Content Controller with current front-end TypeScript
  • Allow student to upload, delete, and view submitted files through submitted content controller
  • Allow admin to view submitted files
  • Test that submitted content controller pulls files properly through a GET api call

Implementation

Problem Design Goals
assignments_controller is currently being used to get information and display view submissions page

This should be running through submitted_content_controller as it is meant to handle all submitted content being displayed.

Connecting Submitted Content Controller with current front-end TypeScript
Test that submitted content controller pulls files properly through a GET api call

submitted_content_controller will be updated with a new GET call similar to what already exists in assignments_controller

Old Code New Code 
  # GET /assignments/:id/view_submissions
  def view_submissions
    assignment = Assignment.find_by(id: params[: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

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

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

TBD

Test Plan

  • Test files call from submitted_content_controller and are linked to be downloadable
  • Test links call from submitted_content_controller and are linked

Team

Mentor

  • Ed Gehringer

Members

  • Cameron Bhatnagar
  • Reece McArthur

Links

Front-End Pull Request: Expertiza Front-End Pull Request #157

Back-End Pull Request: Expertiza Front-End Pull Request #312

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