Skip to content

US5 Frontend: View Students Who Viewed Announcements#67

Merged
7 commits merged into
mainfrom
u5-frontend
Feb 27, 2026
Merged

US5 Frontend: View Students Who Viewed Announcements#67
7 commits merged into
mainfrom
u5-frontend

Conversation

@brendayyu
Copy link
Copy Markdown

@brendayyu brendayyu commented Feb 21, 2026

Overview

Implements the frontend functionality for admins/TAs to see which students have viewed their announcements.

Changes Made

Features Implemented

  • Viewers dropdown button: Eye icon with view count displayed on announcement posts
  • Admin/TA only visibility: Students cannot see the viewers list
  • Announcements category only: Feature limited to category ID 1
  • Main post only: Dropdown only appears on the announcement itself, not replies
  • Student list with avatars: Shows student display names, profile pictures, and view timestamps

Files Changed

  • node_modules/nodebb-theme-harmony/templates/partials/topic/post.tpl - Added viewers dropdown UI
  • public/src/client/topic/viewers.js - Created viewers tracking module
  • public/src/client/topic.js - Integrated viewers module
  • node_modules/nodebb-theme-harmony/theme.scss - Added dropdown styling

How to Test

Prerequisites

  • Log in as an admin or TA
  • Navigate to the Announcements category (category/1/announcements)

Test Steps

  1. Click on any announcement to view it
  2. Look for the eye icon (👁️) next to the reply button on the main post
  3. Click the eye icon to open the viewers dropdown
  4. Verify the dropdown shows a list of students with:
    • Profile pictures
    • Display names
    • View timestamps

Expected Behavior

  • Eye icon appears only on main announcement posts
  • Eye icon visible only to admins/TAs
  • Students cannot see the eye icon or viewers list
  • Feature only works in announcements category (cid=1)
  • Dropdown shows mock student data

As a Student

  • Log in as a regular student
  • View announcements
  • Verify you do not see the eye icon

Backend Integration Needed

  • Currently uses hardcoded mock students in generateMockViewers():
  1. POST /api/posts/:pid/view - Track when students view announcements
  2. GET /api/posts/:pid/viewers - Return list of students who viewed a post
  3. Database schema to store view tracking (pid, uid, timestamp)

To Pass Lint Test

  • added url to the OpenAPI schema: bashnano ./public/openapi/read/admin/extend/plugins.yaml
  • added url to the properties

- Add viewers button to post actions for admins/TAs only
- Display eye icon with view count next to reply button
- Only visible on main post (index 0) in announcements category
- Dropdown shows list of students who viewed the announcement
- Create viewers.js module to handle viewer dropdown
- Load and display student viewers when dropdown is opened
- Generate mock viewer data for testing (backend TBD)
- Track student views in console (frontend-only)
- Only admins/TAs can see viewers, students cannot
- Import and initialize viewers module in topic.js
- Enables viewers dropdown functionality on topic pages
- Style viewer list items with hover effects
- Add dropdown shadow for better visual hierarchy
Copy link
Copy Markdown

@bendnema bendnema left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This covers the requirements needed for US5 frontend. Make sure you apply the additional unit testing needed for the safety of the application

@PDFour4 PDFour4 closed this pull request by merging all changes into main in 20b5361 Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request good first issue Good for newcomers

Projects

None yet

3 participants