From 6535764bc1bcc9e8b9b42338fdb8d175157a051e Mon Sep 17 00:00:00 2001 From: Cilly Leang Date: Sun, 26 Apr 2026 23:39:12 +1000 Subject: [PATCH 1/3] feat(dashboard): create skeleton dashboard page --- .../f-cross-dashboard.component.html | 27 ++++++++++++ .../f-cross-dashboard.component.scss | 0 .../dashboard/f-cross-dashboard.component.ts | 41 +++++++++++++++++++ src/app/doubtfire-angular.module.ts | 2 + src/app/doubtfire.states.ts | 19 +++++++++ src/app/home/states/home/home.component.html | 2 +- 6 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/f-cross-dashboard.component.html create mode 100644 src/app/dashboard/f-cross-dashboard.component.scss create mode 100644 src/app/dashboard/f-cross-dashboard.component.ts diff --git a/src/app/dashboard/f-cross-dashboard.component.html b/src/app/dashboard/f-cross-dashboard.component.html new file mode 100644 index 0000000000..a71a34fcf0 --- /dev/null +++ b/src/app/dashboard/f-cross-dashboard.component.html @@ -0,0 +1,27 @@ +
+
+
+
+

{{ unit.code }}

+
+ + sort + filter_list_alt +
+ + +
+
+
+
+
+

yop

+
+
+
+
diff --git a/src/app/dashboard/f-cross-dashboard.component.scss b/src/app/dashboard/f-cross-dashboard.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/dashboard/f-cross-dashboard.component.ts b/src/app/dashboard/f-cross-dashboard.component.ts new file mode 100644 index 0000000000..2f1bfcdb6e --- /dev/null +++ b/src/app/dashboard/f-cross-dashboard.component.ts @@ -0,0 +1,41 @@ +import {Component, OnInit} from '@angular/core'; +import {Unit} from 'src/app/api/models/unit'; +import {GlobalStateService} from 'src/app/projects/states/index/global-state.service'; + +type IUnits = { + id: number; + code: string; + name: string; + // tasks: ITask[]; +}; + +@Component({ + selector: 'f-cross-dashboard', + templateUrl: './f-cross-dashboard.component.html', + styleUrls: ['./f-cross-dashboard.component.scss'], +}) +export class CrossDashboardComponent implements OnInit { + constructor(private globalStateService: GlobalStateService) {} + + units: IUnits[] = []; + + ngOnInit(): void { + this.globalStateService.onLoad(() => { + this.globalStateService.loadedUnits.values.subscribe((units) => { + this.units = this.mapUnits(units); + }); + }); + } + + mapUnit(unit: Unit): IUnits { + return { + id: unit.id, + code: unit.code, + name: unit.name, + }; + } + + mapUnits(units: readonly Unit[]) { + return units.map((unit) => this.mapUnit(unit)); + } +} diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index 879db426d0..aa6520bfbf 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/src/app/doubtfire-angular.module.ts @@ -324,6 +324,7 @@ import {TutorNotesModalComponent} from './common/modals/tutor-notes-modal/tutor- import {FeedbackAppealModalComponent} from './tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component'; import {ConfirmModerationModalComponent} from './units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component'; import {TaskClaimComponent} from './units/states/tasks/inbox/directives/task-claim/task-claim.component'; +import { CrossDashboardComponent } from './dashboard/f-cross-dashboard.component'; // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036 const MY_DATE_FORMAT = { @@ -394,6 +395,7 @@ const GANTT_CHART_CONFIG = { ProjectPlanComponent, SuccessCloseComponent, HomeComponent, + CrossDashboardComponent, CommentBubbleActionComponent, UnitTutorialsListComponent, UnitTutorialsManagerComponent, diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts index f1710f6b54..b1f88a4415 100644 --- a/src/app/doubtfire.states.ts +++ b/src/app/doubtfire.states.ts @@ -15,6 +15,7 @@ import {ProjectPlanComponent} from './projects/states/plan/project-plan.componen import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component'; import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component'; import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component'; +import { CrossDashboardComponent } from './dashboard/f-cross-dashboard.component'; /* * Use this file to store any states that are sourced by angular components. */ @@ -69,6 +70,23 @@ const HomeState: NgHybridStateDeclaration = { }, }; +/** + * Define the state for the cross-unit dashboard. + */ +const CrossDashboard: NgHybridStateDeclaration = { + name: 'crossdashboard', + url: '/dashboard', + views: { + main: { + component: CrossDashboardComponent, + }, + }, + data: { + pageTitle: 'Dashboard', + roleWhitelist: ['Student'], + }, +}; + // const unitParentState: NgHybridStateDeclaration = { // name: 'units', // url: '/units/:unit_id', @@ -581,6 +599,7 @@ export const doubtfireStates = [ institutionSettingsState, TeachingPeriodsState, HomeState, + CrossDashboard, WelcomeState, SignInState, EditProfileState, diff --git a/src/app/home/states/home/home.component.html b/src/app/home/states/home/home.component.html index a7e80c80ff..4b02d137f0 100644 --- a/src/app/home/states/home/home.component.html +++ b/src/app/home/states/home/home.component.html @@ -119,7 +119,7 @@

Enrolled units

- +
From ed2b4b889e651d9dda63cd0a99e97230d2286182 Mon Sep 17 00:00:00 2001 From: Cilly Leang Date: Tue, 5 May 2026 21:38:03 +1000 Subject: [PATCH 3/3] style: linting --- src/app/doubtfire-angular.module.ts | 2 +- src/app/doubtfire.states.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index aa6520bfbf..be5d7eeb31 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/src/app/doubtfire-angular.module.ts @@ -324,7 +324,7 @@ import {TutorNotesModalComponent} from './common/modals/tutor-notes-modal/tutor- import {FeedbackAppealModalComponent} from './tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component'; import {ConfirmModerationModalComponent} from './units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component'; import {TaskClaimComponent} from './units/states/tasks/inbox/directives/task-claim/task-claim.component'; -import { CrossDashboardComponent } from './dashboard/f-cross-dashboard.component'; +import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component'; // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036 const MY_DATE_FORMAT = { diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts index b1f88a4415..96a59c79c2 100644 --- a/src/app/doubtfire.states.ts +++ b/src/app/doubtfire.states.ts @@ -15,7 +15,7 @@ import {ProjectPlanComponent} from './projects/states/plan/project-plan.componen import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component'; import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component'; import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component'; -import { CrossDashboardComponent } from './dashboard/f-cross-dashboard.component'; +import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component'; /* * Use this file to store any states that are sourced by angular components. */