diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts index b2a89cad1ef..548257a6193 100644 --- a/src/app/teacher/classroom-monitor.module.ts +++ b/src/app/teacher/classroom-monitor.module.ts @@ -45,7 +45,6 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi NodeProgressViewComponent, NotebookGradingComponent, NotebookWorkgroupGradingComponent, - NotificationsMenuComponent, StepItemComponent, StudentGradingComponent, StudentGradingToolsComponent, @@ -64,6 +63,7 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi ManageStudentsModule, MilestoneModule, NavItemScoreComponent, + NotificationsMenuComponent, PauseScreensMenuComponent, PeerGroupGradingModule, PreviewComponentComponent, diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.html index ead1bfcc1f2..a870f7264cb 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.html @@ -9,53 +9,57 @@   Alerts - + @if (newNotifications.length > 0) { + + }
-

You have no new alerts at this time.

- - - -
-
-
- {{ notification.message }} + @if (newNotifications.length === 0) { +

You have no new alerts at this time.

+ } @else { + + @for (notification of newNotifications; track notification.id) { + +
+
+ +
+ {{ getNodePositionAndTitle(notification.nodeId) }} +
-
{{ getNodePositionAndTitle(notification.nodeId) }}
+ +
- - -
- - - - + + + } + + }
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.spec.ts index be3cd16d185..2c3c6a7f4e0 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.spec.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.spec.ts @@ -1,36 +1,32 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MatDialog, MatDialogModule } from '@angular/material/dialog'; -import { MatIconModule } from '@angular/material/icon'; -import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatDialog } from '@angular/material/dialog'; import { of } from 'rxjs'; import { Notification } from '../../../../../../app/domain/notification'; import { DialogWithConfirmComponent } from '../../../../directives/dialog-with-confirm/dialog-with-confirm.component'; import { NotificationService } from '../../../../services/notificationService'; import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module'; import { NotificationsMenuComponent } from './notifications-menu.component'; -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { provideRouter } from '@angular/router'; let component: NotificationsMenuComponent; let dismissNotificationSpy: jasmine.Spy; let fixture: ComponentFixture; const NODE_ID_1: string = 'node1'; const NODE_ID_2: string = 'node1'; -const NODE_ROUTE = 'root.cm.unit.node'; const notification1 = new Notification({ nodeId: NODE_ID_1 }); const notification2 = new Notification({ nodeId: NODE_ID_2 }); -let stateGoSpy: jasmine.Spy; - describe('NotificationsMenuComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DialogWithConfirmComponent, NotificationsMenuComponent], - imports: [ClassroomMonitorTestingModule, - MatDialogModule, - MatIconModule, - MatToolbarModule], - providers: [{ provide: MatDialog, useValue: { open: () => { } } }, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()] -}).compileComponents(); + declarations: [DialogWithConfirmComponent], + imports: [ClassroomMonitorTestingModule, NotificationsMenuComponent], + providers: [ + { provide: MatDialog, useValue: { open: () => {} } }, + provideHttpClientTesting(), + provideRouter([]) + ] + }).compileComponents(); }); beforeEach(() => { @@ -38,7 +34,6 @@ describe('NotificationsMenuComponent', () => { component = fixture.componentInstance; component.state = { go: () => {} }; dismissNotificationSpy = spyOn(TestBed.inject(NotificationService), 'dismissNotification'); - stateGoSpy = spyOn(component.state, 'go'); fixture.detectChanges(); }); @@ -57,7 +52,7 @@ function confirmDismissAllNotifications() { } } as any); component.newNotifications = [notification1, notification2]; - component.confirmDismissAllNotifications(); + component['confirmDismissAllNotifications'](); expect(dialogOpenSpy).toHaveBeenCalled(); expect(dismissNotificationSpy).toHaveBeenCalledTimes(2); }); @@ -67,7 +62,7 @@ function confirmDismissAllNotifications() { function dismissNotification() { describe('dismissNotification', () => { it('should dismiss notification', () => { - component.dismissNotification(notification1); + component['dismissNotification'](notification1); expect(dismissNotificationSpy).toHaveBeenCalledWith(notification1); }); }); @@ -76,8 +71,9 @@ function dismissNotification() { function visitNode() { describe('visitNode', () => { it('should visit node', () => { - component.visitNode(notification1); - expect(stateGoSpy).toHaveBeenCalledWith(NODE_ROUTE, { nodeId: NODE_ID_1 }); + const routerSpy = spyOn(component['router'], 'navigate'); + component['visitNode'](notification1); + expect(routerSpy).toHaveBeenCalled(); }); }); } diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.ts index e4525081276..7666418c4dc 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.ts @@ -1,34 +1,53 @@ -import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { NotificationService } from '../../../../services/notificationService'; import { TeacherProjectService } from '../../../../services/teacherProjectService'; import { DialogWithConfirmComponent } from '../../../../../../assets/wise5/directives/dialog-with-confirm/dialog-with-confirm.component'; import { Notification } from '../../../../../../app/domain/notification'; +import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatListModule } from '@angular/material/list'; +import { MatDividerModule } from '@angular/material/divider'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ + encapsulation: ViewEncapsulation.None, + imports: [ + CommonModule, + FlexLayoutModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatListModule, + MatToolbarModule, + MatTooltipModule + ], selector: 'notifications-menu', - templateUrl: './notifications-menu.component.html', - styleUrls: ['./notifications-menu.component.scss'], - encapsulation: ViewEncapsulation.None + standalone: true, + styleUrl: './notifications-menu.component.scss', + templateUrl: './notifications-menu.component.html' }) -export class NotificationsMenuComponent implements OnInit { +export class NotificationsMenuComponent { @Input() newNotifications: Notification[] = []; @Input() state: any; - @Input() withPause: boolean; constructor( private dialog: MatDialog, private notificationService: NotificationService, - private projectService: TeacherProjectService + private projectService: TeacherProjectService, + private route: ActivatedRoute, + private router: Router ) {} - ngOnInit(): void {} - - getNodePositionAndTitle(nodeId: string): string { + protected getNodePositionAndTitle(nodeId: string): string { return this.projectService.getNodePositionAndTitle(nodeId); } - confirmDismissAllNotifications(): void { + protected confirmDismissAllNotifications(): void { this.dialog .open(DialogWithConfirmComponent, { data: { @@ -50,11 +69,13 @@ export class NotificationsMenuComponent implements OnInit { }); } - dismissNotification(notification: Notification): void { + protected dismissNotification(notification: Notification): void { this.notificationService.dismissNotification(notification); } - visitNode(notification: Notification): void { - this.state.go('root.cm.unit.node', { nodeId: notification.nodeId }); + protected visitNode(notification: Notification): void { + this.router.navigate(['node', notification.nodeId], { + relativeTo: this.route + }); } } diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html index e5bc3e2dbcd..a089d36f399 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html @@ -53,12 +53,7 @@

notifications