Skip to content

Tutor times frontend Dashboard for tutors and Visualisation Using Ngx Graphs #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
EkamBhullar wants to merge 17 commits into
base: 9.x
Choose a base branch
from
Open

Tutor times frontend Dashboard for tutors and Visualisation Using Ngx Graphs #402

EkamBhullar wants to merge 17 commits into from

Conversation

@EkamBhullar
Copy link

@EkamBhullar EkamBhullar commented Aug 30, 2025 •
edited
Loading

Description

Tutor Times Feature Implementation

Overview

This PR implements the Tutor Times component for tracking and analyzing tutor assessment activities.
image

Features

  • Assessment Summary: Overview of sessions, time spent, and tasks assessed
  • Task Analytics: Time spent per task with visual charts
  • Session Monitoring: Real-time tracking of active marking sessions
  • Activity Timeline: Detailed session activities and assessments

UI/UX

  • Material UI components for consistency
  • Tailwind CSS for responsive design
  • Clean, modern interface optimized for tutors

Technical Details

  • Angular component with TypeScript interfaces
  • Performance optimizations with trackBy functions
  • Memory leak prevention with OnDestroy
  • Dummy data for development and testing

Future Integration

  • Ready for backend API integration when available
  • Interface definitions prepared for backend schema
  • Easy switch from dummy to real data

Type of change

  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

  • Login as a Tutor
  • Choose Tutor Times from the dropdown
  • You can view the dashboard and test if it renders properly,
  • View Details of each sessions

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

@EkamBhullar EkamBhullar changed the title Tutor times frontend Dashboard for tutors and Visualisation Tutor times frontend Dashboard for tutors and Visualisation Using Ngx Graphs Aug 30, 2025
Pasindufdo98
Pasindufdo98 reviewed Sep 7, 2025
View reviewed changes
Copy link

@Pasindufdo98 Pasindufdo98 left a comment

Choose a reason for hiding this comment

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

Hi @EkamBhullar ,
I tested your new frontend feature locally and UI looks clean and the core flows behave as expected. Nice work on the layout and consistency with the existing pattern library.

I did hit one console error:

NG0303: Can't bind to 'matRowDefTrackBy' since it isn't a known property of 'tr'

Happy to take another look once this is fixed.

Screenshot (1864) Screenshot (1866)

@chelaz1234
Copy link

chelaz1234 commented Sep 8, 2025

Hi @EkamBhullar,
Nice addition! The Tutor Times dashboard slots neatly into the header menu, and the UI copy reads clearly. Using ngx-charts is a good fit for quick visual summaries. However, I’m also seeing the same console error that Pasindu mentioned. Could you please fix it and let me know?
image

@EkamBhullar
Copy link
Author

EkamBhullar commented Sep 8, 2025

Hey @Pasindufdo98 and @chelaz1234 . Thanks For the review! I have updated the code accordingly. Thanks

returnMarcco and others added 6 commits September 10, 2025 12:01
@returnMarcco
Migrate/group set selector (doubtfire-lms#981)
2a67173 
* chore: migrate group-set-selector (WIP)

- define and declare new component files

- import new component into app

- downgrade component

* chore: migrate group-set-selector

- convert AngularJS template syntax to Angular syntax
- finish implementing `group-set-selector.component.ts`
- remove redundant Coffeescript file

* chore: migrate group-set-selector

- finish defining Typescript logic
- update parent component to use Angular syntax for child component declaration

* chore: cleanup and documentation

- remove redundant Coffeescript file
- adjust frontend migration todo list

* chore: remove redundant file

- remove redundant Coffeescript file

* fix: attribute and event binding

- fix attribute and event binding syntax
- remove redundant template file

* refactor: two-way binding

- remove redundant directive attributes

- rename EventEmitter var name in child component

* Update README.md

* Update README.md

* refactor: replace Bootstrap components with Angular Material

- replace Bootstrap components with Angular Material components & directives

- refactor to use modern Angular structural directives
@returnMarcco @b0ink
refactor: migrate/date service (doubtfire-lms#931)
4311f38 
* chore: date-service.coffee to TS

- add `date.service.ts` file
- add `date.service.spec.ts` unit test
- downgrade TS module such that it works within AngularJS

* chore: unlink date-service.coffee

- complete unlinking process of  `date-service.coffee` after migrating to Typescript
- manual linting/comment formatting

* chore: delete redundant coffeescript file

- delete `date-service.coffee` file after migration

* chore:  formatting

- format code with prettier
@lachlan-robinson @b0ink
refactor: migrate progress dashboard (doubtfire-lms#927)
7f8ee94 
* chore: 9.x windows

* chore: create new component files

* chore: unlink old component + link new component

* chore: migrate functionality + update to tailwindcss and material UI

* chore: remove old component files

* chore: responsive columns for visualisations

* Update package-lock.json

* Update package.json

* Update package.json

* Update package-lock.json

* chore: update styling to better match original

* chore: add custom breakpoint for responsive change

* chore: tweak breakpoint for better visualisation visibility

* chore: update tutor view functionality + tweak event emitter name

---------

Co-authored-by: Boink <40929320+b0ink@users.noreply.github.com>
@lachlan-robinson
fix: burndown chart visualisation (doubtfire-lms#942)
8487b8d 
* fix: update burndown data to render series of different lengths

* chore: cleanup imports

* chore: remove leftover testing comment from previous contributor
@b0ink
Merge pull request doubtfire-lms#929 from zara1504/remove/media-service
81e17f4 
Remove Media Service
@lachlan-robinson @b0ink
refactor: migrate task status pie chart (doubtfire-lms#928)
d010c4e 
* chore: migrate pie chart to ngxchart

* chore: remove testing console log

* chore: restore package and lock to 9.x

* chore: remove testing comments

* chore: resolve merge conflicts

* chore: remove testing console log

* chore: resolve futher conflicts

* chore: exlude packge-lock

* chore: exclude package

* chore: delete migrated progress dashboard html

---------

Co-authored-by: Boink <40929320+b0ink@users.noreply.github.com>
@BrianDangDev
Copy link

BrianDangDev commented Sep 17, 2025

Hey @EkamBhullar , need 2 approvals before I can approve it

Pasindufdo98
Pasindufdo98 approved these changes Sep 17, 2025
View reviewed changes
Copy link

@Pasindufdo98 Pasindufdo98 left a comment

Choose a reason for hiding this comment

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

image Good work @EkamBhullar . No more browser console errors.

chelaz1234
chelaz1234 approved these changes Sep 17, 2025
View reviewed changes
Copy link

@chelaz1234 chelaz1234 left a comment

Choose a reason for hiding this comment

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

Hi @EkamBhullar,

Good work overall! Every function works as expected, and no errors are coming up in the console either.

@EkamBhullar
Copy link
Author

EkamBhullar commented Sep 20, 2025

Hey @BrianDangDev , I have got 2 approvals. Thanks

BrianDangDev
BrianDangDev approved these changes Sep 21, 2025
View reviewed changes
Copy link

@BrianDangDev BrianDangDev left a comment

Choose a reason for hiding this comment

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

Good work, please remember to include details about the dummy data in the documentation, so others are aware this feature currently uses mock data and will need backend integration before production.

ibi420
ibi420 suggested changes Sep 21, 2025
View reviewed changes
Copy link

@ibi420 ibi420 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Hey @EkamBhullar , I can confirm this feature works as expected. You committed both the package-lock.json and package.json files only the package.json needs to be committed. Also, I noticed you’re trying to merge into development; could you switch that to 9.x instead? Aside from these small changes, everything looks good. Nice work on this.

@EkamBhullar EkamBhullar changed the base branch from development to 9.x September 22, 2025 08:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@BrianDangDev BrianDangDev BrianDangDev approved these changes

+3 more reviewers

@ibi420 ibi420 ibi420 approved these changes

@chelaz1234 chelaz1234 chelaz1234 approved these changes

@Pasindufdo98 Pasindufdo98 Pasindufdo98 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@EkamBhullar @chelaz1234 @BrianDangDev @ibi420 @Pasindufdo98 @zara1504 @returnMarcco @lachlan-robinson @b0ink