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

From Expertiza_Wiki
Revision as of 20:04, 3 April 2026 by Cjbhatna (talk | contribs) (Implement ViewSubmissions frontend)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
  1. View Submissions Page – E2603
    1. 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)

---

    1. Back-End Changes
      1. 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.

      1. Schema

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

---

    1. Front-End Changes
      1. 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.

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

      1. `.gitignore` Update

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

---

    1. 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` |

---

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