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

From Expertiza_Wiki
Revision as of 23:49, 13 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 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.
  • 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 /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. Queries the submission records table to retrieve submitted files and links for each team.
  5. 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": ["https://github.com/example/repo"],
      "files": ["submission.pdf"]
    }
  ]
}

Submitted Content Controller Updates

The submitted_content_controller will be updated to handle submission-related operations that were previously handled by the assignments_controller. This controller is responsible for:

  • 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.

Front-End Changes

Example of view submissions page

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.
  • 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

A React component for the student-facing submission page. This component:

  • Displays a list of previously submitted files and links at the top of the page.
  • Renders each file as a downloadable link and each hyperlink as a clickable URL.
  • Provides a textbox and submit button below the file list for uploading new files or links.
  • Supports deleting previously submitted files or links.
  • Fetches and submits data through the submitted_content_controller.

Tests: ViewSubmissions.test.tsx and SubmittedContent.test.tsx

Test files covering both component behaviors, including rendering with mocked API responses, user interactions, and error handling.

.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 app/controllers/submitted_content_controller.rb Updated with GET/POST/DELETE for submission records
Back-end config/routes.rb Registered new routes
Front-end src/pages/Assignments/ViewSubmissions.tsx Instructor/admin view component
Front-end src/pages/Assignments/SubmittedContent.tsx Student submission view component
Front-end src/pages/Assignments/__tests__/ViewSubmissions.test.tsx Instructor view tests
Front-end src/pages/Assignments/__tests__/SubmittedContent.test.tsx Student view tests
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.
  • Submission artifacts (files and links) are stored in the submission records table and 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) displays the student's own submitted files/links and provides an interface to upload new submissions. The file list appears above the submission form.
    • Both views fetch data from the submitted_content_controller, but the instructor view retrieves all teams' submissions while the student view is scoped to the logged-in student's team.
  • The back-end follows existing Expertiza controller conventions, using render json: with appropriate HTTP status codes.

Final Project Overview

Building on the initial scaffolding, the final implementation will:

  1. Migrate data fetching to submitted_content_controller — Move submission-related logic out of assignments_controller and into submitted_content_controller, querying the submission records table for files and links.
  2. Build the student submission page — Create the SubmittedContent.tsx component where students can view their existing submissions (listed above) and upload new files/links (form below).
  3. Build the instructor/admin View Submissions page — Update ViewSubmissions.tsx to display all submitters with their associated files and hyperlinks, accessible via the View Submissions icon on each assignment.
  4. Make files downloadable and links clickable — Render all submitted files as downloadable links and all submitted hyperlinks as clickable URLs in both views.
  5. Support file/link deletion — Allow students to remove their own previously submitted files or links from the student view.

Problem Statements

Problem Design Goals
assignments_controller is currently used to get information and display the View Submissions page, but submission data should be handled by submitted_content_controller. Migrate submission data fetching to submitted_content_controller, querying the submission records table for files and links.
No student-facing UI exists for submitting or viewing files/links. Build a student submission page (SubmittedContent.tsx) that lists existing submissions above a textbox and button for uploading new ones. Support file upload, link submission, and deletion.
The instructor/admin View Submissions page does not yet display submitted files or links. Update ViewSubmissions.tsx to show all submitters with their files (downloadable) and hyperlinks (clickable). The admin view is identical to the instructor view.
Submitted files and links are not interactive (not clickable or downloadable). Render all files as downloadable links and all hyperlinks as clickable URLs in both student and instructor views.
The submitted_content_controller GET endpoint does not yet return file/link data from the submission records table. Update the controller with a GET endpoint that retrieves submission artifacts from the submission records table and returns them in a structured JSON response.

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.

submitted_content_controller will be updated with a new GET call that queries the submission records table. The response will include files and links for each team.
Test that submitted content controller pulls files properly through a GET api call.
Connecting Submitted Content Controller with current front-end TypeScript.
No student submission UI exists.

Students need a page to upload files/links and view their existing submissions.

SubmittedContent.tsx will be created with a file/link list at the top and an upload form (textbox + button) below. It will call submitted_content_controller POST for uploads and DELETE for removals.
Instructor view does not show submission artifacts.

The View Submissions page needs to display files and links for each submitter.

ViewSubmissions.tsx will be updated to display files as downloadable links and hyperlinks as clickable URLs for each submitter, using data from submitted_content_controller GET.

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

  # 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

      # Fetch files and links from submission records table
      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

  # POST /submitted_content/:assignment_id/submit
  def create
    # Handles file upload and link submission
    # for the student's team
  end

  # DELETE /submitted_content/:id
  def destroy
    # Handles deletion of a submitted file or link
  end

Note: The new code above is a draft and will be refined as we explore the existing submitted_content_controller structure and the submission records table schema.

Test Plan

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

Test Description
Renders assignment name Verify the assignment name displays as a page header.
Renders submitter list Verify all teams and their members are displayed in the table.
Displays submitted files Verify that files returned from the API appear as downloadable links for each team.
Displays submitted links Verify that hyperlinks returned from the API appear as clickable URLs for each team.
File download works Verify clicking a file link initiates a download.
Link click opens URL Verify clicking a hyperlink opens the URL in a new tab.
Empty submissions Verify appropriate messaging when a team has no submitted files or links.
Loading state Verify a loading indicator is displayed while data is being fetched.
Error state Verify an error message is displayed if the API call fails.
No teams Verify appropriate messaging when an assignment has no teams.

Student View Tests (SubmittedContent.test.tsx)

Test Description
Renders existing submissions Verify previously submitted files and links are displayed above the upload form.
File list above form Verify the file/link list renders above the textbox and submit button.
Upload a file Verify a student can upload a file and it appears in the list.
Submit a link Verify a student can submit a hyperlink and it appears in the list.
Delete a file Verify a student can delete a previously submitted file.
Delete a link Verify a student can delete a previously submitted link.
Files are downloadable Verify submitted files render as downloadable links in the student view.
Links are clickable Verify submitted hyperlinks render as clickable URLs in the student view.
Empty state Verify appropriate messaging when no files or links have been submitted yet.
Upload error handling Verify an error message is displayed if a file upload fails.

Back-End Tests (submitted_content_controller_spec.rb)

Test Description
GET returns submissions Verify the GET endpoint returns files and links from the submission records table.
GET filters by assignment Verify submissions are scoped to the correct assignment.
GET returns 404 Verify a 404 is returned when the assignment does not exist.
POST creates submission Verify a new file or link record is created in the submission records table.
DELETE removes submission Verify a submission record is removed from the submission records table.

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 Back-End Pull Request #312

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