Expertiza_Wiki - User contributions [en]

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

2026-04-27T18:55:07Z

Cjbhatna:

File:View Submissions Student Access.png

2026-04-25T19:57:25Z

Cjbhatna:

File:View Submissions Student.png

2026-04-25T19:54:36Z

Cjbhatna:

File:View Submissions Admin.png

2026-04-25T19:52:04Z

Cjbhatna:

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

2026-04-25T19:51:10Z

Cjbhatna:

= 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:

* '''Front-end PR:''' [https://github.com/expertiza/reimplementation-front-end/pull/157 reimplementation-front-end #157]
* '''Back-end PR:''' [https://github.com/expertiza/reimplementation-back-end/pull/312 reimplementation-back-end #312]

== Back-End Changes ==

=== New API Endpoint: <code>GET /assignments/:id/view_submissions</code> ===

A new action, <code>view_submissions</code>, was added to <code>AssignmentsController</code>. 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 (<code>config/routes.rb</code>):'''

<syntaxhighlight lang="ruby">
get '/:id/view_submissions', action: :view_submissions
</syntaxhighlight>

'''Controller action (<code>app/controllers/assignments_controller.rb</code>):'''

The action performs the following steps:

# Finds the assignment by the provided <code>:id</code>. Returns a <code>404</code> error if not found.
# Iterates over all teams associated with the assignment.
# For each team, fetches member details (full name and email) via the <code>teams_users</code> association.
# Returns a structured JSON response containing the assignment ID, assignment name, and an array of submission objects. The <code>links</code> and <code>files</code> fields are currently returned as empty arrays; retrieval from the submission records table is handled by <code>submitted_content_controller</code>.

'''Response structure:'''

<syntaxhighlight lang="json">
{
"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": []
}
]
}
</syntaxhighlight>

=== Submitted Content Controller ===

The <code>submitted_content_controller</code> is responsible for 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.

Full integration of this controller with the front-end views is ongoing. The intended GET endpoint follows this structure:

<syntaxhighlight lang="ruby">
# 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
</syntaxhighlight>

== Front-End Changes ==

[[File:View Submissions Admin.png|right|thumb|600px|Example of admin view submissions page]]
[[File:View Submissions Student.png|right|thumb|600px|Example of student view submissions page]]
[[File:View Submissions Student Access.png|right|thumb|600px|Example of student view submissions page without access]]

=== Instructor/Admin View: <code>ViewSubmissions.tsx</code> ===

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

* Reads the assignment ID from the URL parameters via React Router.
* Fetches submission data from the back-end API endpoint (<code>GET /assignments/:id/view_submissions</code>).
* 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: <code>SubmittedContent.tsx</code> ===

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 <code>submitted_content_controller</code>.

=== Tests: <code>ViewSubmissions.test.tsx</code> ===

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

=== <code>.gitignore</code> Update ===

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

== Files Changed ==

{| class="wikitable"
! Repository !! File !! Change
|-
| Back-end || <code>config/routes.rb</code> || Added <code>view_submissions</code> route
|-
| Back-end || <code>app/controllers/assignments_controller.rb</code> || Added <code>view_submissions</code> action
|-
| Back-end || <code>app/controllers/submitted_content_controller.rb</code> || Added GET/POST/DELETE actions
|-
| Front-end || <code>src/pages/Assignments/ViewSubmissions.tsx</code> || New instructor/admin view component
|-
| Front-end || <code>src/pages/Assignments/ViewSubmissions.test.tsx</code> || New test file
|-
| Front-end || <code>.gitignore</code> || Added <code>/dist</code> to ignore list
|}

== Design Notes ==

* The <code>github</code> 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 intended to be retrieved via the <code>submitted_content_controller</code>. The current <code>view_submissions</code> endpoint in <code>assignments_controller</code> returns empty <code>links</code> and <code>files</code> arrays as scaffolding; full artifact retrieval is the next integration step.
* '''Two-view architecture:'''
** The '''instructor/admin view''' (<code>ViewSubmissions.tsx</code>) 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''' (<code>SubmittedContent.tsx</code>) 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 will ultimately fetch data from the <code>submitted_content_controller</code>, 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 <code>render json:</code> with appropriate HTTP status codes.

== Implementation Summary ==

{| class="wikitable"
! Problem !! Status !! Resolution
|-
| <code>assignments_controller</code> was being used to retrieve and display submission data, which should be handled by <code>submitted_content_controller</code>. || Resolved || Logic moved to <code>submitted_content_controller</code>
|-
| No instructor/admin UI existed for viewing all team submissions. || Resolved || <code>ViewSubmissions.tsx</code> implemented
|-
| No student-facing UI existed for submitting or viewing files/links. || In Progress || <code>SubmittedContent.tsx</code> planned for future iteration
|-
| Submitted files and links were not interactive (not clickable or downloadable). || Resolved || Files and links rendered as interactive elements
|-
| The <code>submitted_content_controller</code> GET endpoint did not return file/link data from the submission records table. || Resolved || Endpoint now queries <code>SubmissionRecord</code> by team and assignment
|}

== Test Plan ==

=== Instructor/Admin View Tests (<code>ViewSubmissions.test.tsx</code>) ===

{| class="wikitable"
! 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 (<code>SubmittedContent.test.tsx</code>) — Planned ===

{| class="wikitable"
! 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 (<code>submitted_content_controller_spec.rb</code>) — Planned ===

{| class="wikitable"
! 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 ==

* '''Front-End Pull Request:''' [https://github.com/expertiza/reimplementation-front-end/pull/157 Expertiza Front-End Pull Request #157]
* '''Back-End Pull Request:''' [https://github.com/expertiza/reimplementation-back-end/pull/312 Expertiza Back-End Pull Request #312]

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

2026-04-13T23:49:09Z

Cjbhatna:

= 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:

* '''Front-end PR:''' [https://github.com/expertiza/reimplementation-front-end/pull/157 reimplementation-front-end #157]
* '''Back-end PR:''' [https://github.com/expertiza/reimplementation-back-end/pull/312 reimplementation-back-end #312]

----

== Back-End Changes ==

=== New API Endpoint: <code>GET /assignments/:id/view_submissions</code> ===

A new action, <code>view_submissions</code>, was added to <code>AssignmentsController</code>. 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 (<code>config/routes.rb</code>):'''

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

'''Controller action (<code>app/controllers/assignments_controller.rb</code>):'''

The action performs the following steps:

# Finds the assignment by the provided <code>:id</code>. Returns a <code>404</code> error if not found.
# Iterates over all teams associated with the assignment.
# For each team, fetches member details (full name and email) via the <code>teams_users</code> association.
# Queries the '''submission records table''' to retrieve submitted files and links for each team.
# Returns a structured JSON response containing the assignment ID, assignment name, and an array of submission objects.

'''Response structure:'''

<syntaxhighlight lang="json">
{
"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"]
}
]
}
</syntaxhighlight>

=== Submitted Content Controller Updates ===

The <code>submitted_content_controller</code> will be updated to handle submission-related operations that were previously handled by the <code>assignments_controller</code>. 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 ==

[[File:View Submissions.png|right|thumb|600px|Example of view submissions page]]

=== Instructor/Admin View: <code>ViewSubmissions.tsx</code> ===

A React component at <code>src/pages/Assignments/ViewSubmissions.tsx</code>. 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: <code>SubmittedContent.tsx</code> ===

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 <code>submitted_content_controller</code>.

=== Tests: <code>ViewSubmissions.test.tsx</code> and <code>SubmittedContent.test.tsx</code> ===

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

=== <code>.gitignore</code> Update ===

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

----

== Files Changed ==

{| class="wikitable"
! Repository !! File !! Change
|-
| Back-end || <code>app/controllers/assignments_controller.rb</code> || Added <code>view_submissions</code> action (+32 lines)
|-
| Back-end || <code>app/controllers/submitted_content_controller.rb</code> || Updated with GET/POST/DELETE for submission records
|-
| Back-end || <code>config/routes.rb</code> || Registered new routes
|-
| Front-end || <code>src/pages/Assignments/ViewSubmissions.tsx</code> || Instructor/admin view component
|-
| Front-end || <code>src/pages/Assignments/SubmittedContent.tsx</code> || Student submission view component
|-
| Front-end || <code>src/pages/Assignments/__tests__/ViewSubmissions.test.tsx</code> || Instructor view tests
|-
| Front-end || <code>src/pages/Assignments/__tests__/SubmittedContent.test.tsx</code> || Student view tests
|-
| Front-end || <code>.gitignore</code> || Added <code>/dist</code>
|}

----

== Design Notes ==

* The <code>github</code> 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 <code>submitted_content_controller</code>.
* '''Two-view architecture:'''
** The '''instructor/admin view''' (<code>ViewSubmissions.tsx</code>) 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''' (<code>SubmittedContent.tsx</code>) 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 <code>submitted_content_controller</code>, 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 <code>render json:</code> with appropriate HTTP status codes.

----

== Final Project Overview ==

Building on the initial scaffolding, the final implementation will:

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

----

== Problem Statements ==

{| class="wikitable"
! Problem !! Design Goals
|-
| <code>assignments_controller</code> is currently used to get information and display the View Submissions page, but submission data should be handled by <code>submitted_content_controller</code>. || Migrate submission data fetching to <code>submitted_content_controller</code>, 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 (<code>SubmittedContent.tsx</code>) 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 <code>ViewSubmissions.tsx</code> 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 <code>submitted_content_controller</code> 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 ==

{| class="wikitable"
|-
! Problem
! Design Goals
|-
| rowspan="3" | '''<code>assignments_controller</code> is currently being used to get information and display view submissions page'''

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

| <code>submitted_content_controller</code> 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.

| <code>SubmittedContent.tsx</code> will be created with a file/link list at the top and an upload form (textbox + button) below. It will call <code>submitted_content_controller</code> 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.

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

<code>submitted_content_controller</code> will be updated with a new GET call similar to what already exists in <code>assignments_controller</code>:

{| class="wikitable"
|-
! Old Code
! New Code
|-
| valign="top" style="white-space: pre-wrap;" |
<syntaxhighlight lang="ruby">
# 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
</syntaxhighlight>
| valign="top" style="white-space: pre-wrap;" |
<syntaxhighlight lang="ruby">
# 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
</syntaxhighlight>
|}

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

----

== Test Plan ==

=== Instructor/Admin View Tests (<code>ViewSubmissions.test.tsx</code>) ===

{| class="wikitable"
! 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 (<code>SubmittedContent.test.tsx</code>) ===

{| class="wikitable"
! 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 (<code>submitted_content_controller_spec.rb</code>) ===

{| class="wikitable"
! 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:
[https://github.com/expertiza/reimplementation-front-end/pull/157 Expertiza Front-End Pull Request #157]

Back-End Pull Request:
[https://github.com/expertiza/reimplementation-back-end/pull/312 Expertiza Back-End Pull Request #312]

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

2026-04-12T16:05:07Z

Cjbhatna:

= 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:

* '''Front-end PR:''' [https://github.com/expertiza/reimplementation-front-end/pull/157 reimplementation-front-end #157]
* '''Back-end PR:''' [https://github.com/expertiza/reimplementation-back-end/pull/312 reimplementation-back-end #312]

----

== Back-End Changes ==

=== New API Endpoint: <code>GET /assignments/:id/view_submissions</code> ===

A new action, <code>view_submissions</code>, was added to <code>AssignmentsController</code>. 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 (<code>config/routes.rb</code>):'''

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

'''Controller action (<code>app/controllers/assignments_controller.rb</code>):'''

The action performs the following steps:

# Finds the assignment by the provided <code>:id</code>. Returns a <code>404</code> error if not found.
# Iterates over all teams associated with the assignment.
# For each team, fetches member details (full name and email) via the <code>teams_users</code> association.
# Returns a structured JSON response containing the assignment ID, assignment name, and an array of submission objects.

'''Response structure:'''

<syntaxhighlight lang="json">
{
"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": []
}
]
}
</syntaxhighlight>

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

----

== Front-End Changes ==

[[File:View Submissions.png|right|thumb|600px|Example of view submissions page]]

=== New Component: <code>ViewSubmissions.tsx</code> ===

A new React component was created at <code>src/pages/Assignments/ViewSubmissions.tsx</code>. This component:

* Reads the assignment ID from the URL parameters via React Router.
* Fetches submission data from the back-end API endpoint <code>GET /assignments/:id/view_submissions</code>.
* 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: <code>ViewSubmissions.test.tsx</code> ===

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

=== <code>.gitignore</code> Update ===

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

----

== Files Changed ==

{| class="wikitable"
! Repository !! File !! Change
|-
| Back-end || <code>app/controllers/assignments_controller.rb</code> || Added <code>view_submissions</code> action (+32 lines)
|-
| Back-end || <code>config/routes.rb</code> || Registered new GET route
|-
| Front-end || <code>src/pages/Assignments/ViewSubmissions.tsx</code> || New component
|-
| Front-end || <code>src/pages/Assignments/__tests__/ViewSubmissions.test.tsx</code> || New test file
|-
| Front-end || <code>.gitignore</code> || Added <code>/dist</code>
|}

----

== Design Notes ==

* The <code>github</code> field in the member object is currently returned as an empty string. This is a placeholder for a future integration with GitHub profile links.
* <code>links</code> and <code>files</code> 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 <code>render json:</code> 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 ==

{| class="wikitable"
|-
! Problem
! Design Goals
|-
| rowspan="2"| '''<code>assignments_controller</code> is currently being used to get information and display view submissions page'''

This should be running through <code>submitted_content_controller</code> 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

|}

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

{| class="wikitable"
|-
! Old Code
! New Code
|-
| valign="top" style="white-space: pre-wrap;" |
<syntaxhighlight lang="ruby">
# 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
</syntaxhighlight>
| valign="top" style="white-space: pre-wrap;" |
<syntaxhighlight lang="ruby">
TBD
</syntaxhighlight>
|}

== Test Plan ==

* Test files call from <code>submitted_content_controller</code> and are linked to be downloadable
* Test links call from <code>submitted_content_controller</code> and are linked

== Team ==


=== Mentor ===

* Ed Gehringer


=== Members ===

* Cameron Bhatnagar
* Reece McArthur



== Links ==

Front-End Pull Request:
[https://github.com/expertiza/reimplementation-front-end/pull/157 Expertiza Front-End Pull Request #157]

Back-End Pull Request:
[https://github.com/expertiza/reimplementation-back-end/pull/312 Expertiza Front-End Pull Request #312]

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

2026-04-12T15:55:13Z

Cjbhatna:

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

2026-04-12T15:35:41Z

Cjbhatna:

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

2026-04-03T20:13:47Z

Cjbhatna:

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

2026-04-03T20:12:26Z

Cjbhatna:

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

2026-04-03T20:12:09Z

Cjbhatna:

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

2026-04-03T20:11:54Z

Cjbhatna:

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

2026-04-03T20:11:35Z

Cjbhatna:

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

2026-04-03T20:11:05Z

Cjbhatna:

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

2026-04-03T20:10:49Z

Cjbhatna:

File:View Submissions.png

2026-04-03T20:09:40Z

Cjbhatna: Example of view submissions page

== Summary ==
Example of view submissions page

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

2026-04-03T20:09:07Z

Cjbhatna:

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

2026-04-03T20:06:28Z

Cjbhatna:

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

2026-04-03T20:04:21Z

Cjbhatna: Implement ViewSubmissions frontend

# 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:

- **Front-end PR:** [reimplementation-front-end #157](https://github.com/expertiza/reimplementation-front-end/pull/157)
- **Back-end PR:** [reimplementation-back-end #312](https://github.com/expertiza/reimplementation-back-end/pull/312)

---

## 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:**

```json
{
"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.

### Schema

A minor schema update (`db/schema.rb`) was included to reflect the current state of the database.

---

## Front-End Changes

### 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 |
| Back-end | `db/schema.rb` | Schema version update |
| 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.

CSC/ECE 517 Spring 2026

2026-04-03T19:59:43Z

Cjbhatna:

* [[CSC/ECE 517 Spring 2026 - E2600. Reimplement review_mapping_controller]]
* [[CSC/ECE 517 Spring 2026 - E2601. Reimplement student quizzes]]
* [[CSC/ECE 517 Spring 2026 - E2602. Reimplement student task view]]
* [[CSC/ECE 517 Spring 2026 - E2603. Implement ViewSubmissions frontend]]
* [[CSC/ECE 517 Spring 2026 - E2604. Finish Password Resets]]
* [[CSC/ECE 517 Spring 2026 - E2606. Finishing Import and Export helper module]]
* [[CSC/ECE 517 Spring 2026 - E2607. ResponseController Frontend]]
* [[CSC/ECE 517 Spring 2026 - E2610. Teams hierarchy testing]]