From 51d7601ab596b0a34293f5ff36b2fd8470b48344 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 16 Jan 2026 08:46:30 -0800 Subject: [PATCH 1/2] feat(Notes): Display in dialog instead of mat-drawer. Clean up code- use dialog.open directly instead of using observables to control opening behavior --- .../notebook-launcher.component.ts | 9 +++-- .../notebook-notes.component.ts | 24 ++++++-------- .../notebook-report.component.ts | 9 +++-- .../components/component-student.component.ts | 33 +++++++++++-------- src/assets/wise5/services/notebookService.ts | 15 +-------- src/assets/wise5/vle/vle.component.html | 4 --- src/assets/wise5/vle/vle.component.ts | 23 +------------ src/messages.xlf | 6 ++-- 8 files changed, 47 insertions(+), 76 deletions(-) diff --git a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts index 8bea999e762..2f2c2bf45a9 100644 --- a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts +++ b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts @@ -1,10 +1,11 @@ import { Component, Input } from '@angular/core'; -import { NotebookService } from '../../../assets/wise5/services/notebookService'; import { ProjectService } from '../../../assets/wise5/services/projectService'; import { Subscription } from 'rxjs'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatDialog } from '@angular/material/dialog'; +import { NotebookNotesComponent } from '../notebook-notes/notebook-notes.component'; @Component({ imports: [MatButtonModule, MatIconModule, MatTooltipModule], @@ -17,7 +18,7 @@ export class NotebookLauncherComponent { private subscription: Subscription = new Subscription(); constructor( - private notebookService: NotebookService, + private dialog: MatDialog, private projectService: ProjectService ) {} @@ -35,6 +36,8 @@ export class NotebookLauncherComponent { } protected showNotes(): void { - this.notebookService.setNotesVisible(true); + this.dialog.open(NotebookNotesComponent, { + panelClass: 'dialog-md' + }); } } diff --git a/src/app/notebook/notebook-notes/notebook-notes.component.ts b/src/app/notebook/notebook-notes/notebook-notes.component.ts index ef964c2d18b..af89fa67771 100644 --- a/src/app/notebook/notebook-notes/notebook-notes.component.ts +++ b/src/app/notebook/notebook-notes/notebook-notes.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, Input, Optional, ViewEncapsulation } from '@angular/core'; import { Subscription } from 'rxjs'; import { ConfigService } from '../../../assets/wise5/services/configService'; import { NotebookService } from '../../../assets/wise5/services/notebookService'; @@ -13,6 +13,7 @@ import { MatDividerModule } from '@angular/material/divider'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ imports: [ @@ -34,9 +35,6 @@ export class NotebookNotesComponent extends NotebookParentComponent { protected groups = []; private groupNameToGroup = {}; protected hasPrivateNotes: boolean = false; - protected insertArgs: any = { - insertMode: false - }; protected label: any; protected selectedTabIndex = 0; private subscriptions: Subscription = new Subscription(); @@ -46,9 +44,16 @@ export class NotebookNotesComponent extends NotebookParentComponent { configService: ConfigService, private dataService: StudentDataService, NotebookService: NotebookService, - private projectService: ProjectService + private projectService: ProjectService, + @Optional() @Inject(MAT_DIALOG_DATA) public insertArgs: any ) { super(configService, NotebookService); + this.insertArgs = this.insertArgs ?? { + insertMode: false + }; + if (this.insertArgs.visibleSpace) { + this.selectedTabIndex = this.insertArgs.visibleSpace === 'public' ? 1 : 0; + } } ngOnInit(): void { @@ -73,15 +78,6 @@ export class NotebookNotesComponent extends NotebookParentComponent { }) ); - this.subscriptions.add( - this.NotebookService.insertMode$.subscribe((args) => { - this.insertArgs = args; - if (args.visibleSpace) { - this.selectedTabIndex = args.visibleSpace === 'public' ? 1 : 0; - } - }) - ); - this.subscriptions.add( this.NotebookService.publicNotebookItemsRetrieved$.subscribe(() => { for (const group of this.groups) { diff --git a/src/app/notebook/notebook-report/notebook-report.component.ts b/src/app/notebook/notebook-report/notebook-report.component.ts index 25d67d2c76f..267df8fd46b 100644 --- a/src/app/notebook/notebook-report/notebook-report.component.ts +++ b/src/app/notebook/notebook-report/notebook-report.component.ts @@ -16,6 +16,8 @@ import { NotebookService } from '../../../assets/wise5/services/notebookService' import { ProjectService } from '../../../assets/wise5/services/projectService'; import { NotebookParentComponent } from '../notebook-parent/notebook-parent.component'; import { BreakpointObserver } from '@angular/cdk/layout'; +import { NotebookNotesComponent } from '../notebook-notes/notebook-notes.component'; +import { MatDialog } from '@angular/material/dialog'; @Component({ imports: [ @@ -48,6 +50,7 @@ export class NotebookReportComponent extends NotebookParentComponent { constructor( private breakpointObserver: BreakpointObserver, configService: ConfigService, + private dialog: MatDialog, notebookService: NotebookService, private projectService: ProjectService ) { @@ -148,8 +151,10 @@ export class NotebookReportComponent extends NotebookParentComponent { } protected addNotebookItemContent($event: any): void { - this.NotebookService.setInsertMode({ insertMode: true, requester: 'report' }); - this.NotebookService.setNotesVisible(true); + this.dialog.open(NotebookNotesComponent, { + data: { insertMode: true, requester: 'report' }, + panelClass: 'dialog-md' + }); } protected changed(value: string): void { diff --git a/src/assets/wise5/components/component-student.component.ts b/src/assets/wise5/components/component-student.component.ts index f7a70c741d2..5f0642c2efc 100644 --- a/src/assets/wise5/components/component-student.component.ts +++ b/src/assets/wise5/components/component-student.component.ts @@ -18,6 +18,7 @@ import { ComponentStateRequest } from './ComponentStateRequest'; import { ComponentStateWrapper } from './ComponentStateWrapper'; import { Annotation } from '../common/Annotation'; import $ from 'jquery'; +import { NotebookNotesComponent } from '../../../app/notebook/notebook-notes/notebook-notes.component'; @Directive() export abstract class ComponentStudent { @@ -630,14 +631,16 @@ export abstract class ComponentStudent { } copyPublicNotebookItem() { - this.notebookService.setInsertMode({ - nodeId: this.nodeId, - componentId: this.componentId, - insertMode: true, - requester: this.nodeId + '-' + this.componentId, - visibleSpace: 'public' + this.dialog.open(NotebookNotesComponent, { + data: { + nodeId: this.nodeId, + componentId: this.componentId, + insertMode: true, + requester: this.nodeId + '-' + this.componentId, + visibleSpace: 'public' + }, + panelClass: 'dialog-md' }); - this.notebookService.setNotesVisible(true); } isNotebookEnabled() { @@ -745,14 +748,16 @@ export abstract class ComponentStudent { } copyPublicNotebookItemButtonClicked(): void { - this.notebookService.setInsertMode({ - nodeId: this.nodeId, - componentId: this.componentId, - insertMode: true, - requester: this.nodeId + '-' + this.componentId, - visibleSpace: 'public' + this.dialog.open(NotebookNotesComponent, { + data: { + nodeId: this.nodeId, + componentId: this.componentId, + insertMode: true, + requester: this.nodeId + '-' + this.componentId, + visibleSpace: 'public' + }, + panelClass: 'dialog-md' }); - this.notebookService.setNotesVisible(true); } getElementById(id: string, getFirstResult: boolean = false): any { diff --git a/src/assets/wise5/services/notebookService.ts b/src/assets/wise5/services/notebookService.ts index 512720727b4..75c804cc763 100644 --- a/src/assets/wise5/services/notebookService.ts +++ b/src/assets/wise5/services/notebookService.ts @@ -63,10 +63,6 @@ export class NotebookService { public publicNotebookItemsRetrieved$ = this.publicNotebookItemsRetrievedSource.asObservable(); private showReportAnnotationsSource: Subject = new Subject(); public showReportAnnotations$ = this.showReportAnnotationsSource.asObservable(); - private notesVisibleSource: Subject = new Subject(); - public notesVisible$ = this.notesVisibleSource.asObservable(); - private insertModeSource: Subject = new Subject(); - public insertMode$ = this.insertModeSource.asObservable(); private reportFullScreenSource: Subject = new Subject(); public reportFullScreen$ = this.reportFullScreenSource.asObservable(); @@ -641,16 +637,7 @@ export class NotebookService { } closeNotes(): void { - this.setNotesVisible(false); - this.setInsertMode({ insertMode: false }); - } - - setNotesVisible(value: boolean): void { - this.notesVisibleSource.next(value); - } - - setInsertMode(args: any): void { - this.insertModeSource.next(args); + this.dialog.closeAll(); } setReportFullScreen(value: boolean): void { diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html index fa8c935ddd1..6fb892d29fc 100644 --- a/src/assets/wise5/vle/vle.component.html +++ b/src/assets/wise5/vle/vle.component.html @@ -3,12 +3,8 @@ @if (initialized) { - - - @if (chatbotEnabled) { ; - @ViewChild('drawer') public drawer: any; protected initialized: boolean; private isSurvey: boolean; protected layoutState: string; - private mdScreen: boolean; + protected mdScreen: boolean; protected notebookConfig: any; protected notesEnabled: boolean = false; protected notesVisible: boolean = false; @@ -205,14 +202,9 @@ export class VLEComponent implements AfterViewInit { return convertToPNGFile(canvas); } - closeNotes(): void { - this.notebookService.closeNotes(); - } - private initializeSubscriptions(): void { this.subscribeToShowSessionWarning(); this.subscribeToCurrentNodeChanged(); - this.subscribeToNotesVisible(); this.subscribeToReportFullScreen(); this.subscribeToViewCurrentAmbientNotification(); this.subscriptions.add(this.projectService.projectParsed$.subscribe(() => this.setProject())); @@ -269,19 +261,6 @@ export class VLEComponent implements AfterViewInit { ); } - private subscribeToNotesVisible(): void { - this.subscriptions.add( - this.notebookService.notesVisible$.subscribe((notesVisible: boolean) => { - this.notesVisible = notesVisible; - if (this.notesVisible) { - this.drawer.open(); - } else { - this.drawer.close(); - } - }) - ); - } - private subscribeToReportFullScreen(): void { this.subscriptions.add( this.notebookService.reportFullScreen$.subscribe((full: boolean) => { diff --git a/src/messages.xlf b/src/messages.xlf index ce29952b2a7..345a421decc 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -7079,7 +7079,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Personal src/app/notebook/notebook-notes/notebook-notes.component.ts - 119 + 115 @@ -10666,7 +10666,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/vle/vle.component.ts - 232 + 224 @@ -10681,7 +10681,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/vle/vle.component.ts - 233 + 225 From bf4b7880a3129a8e340cfcbed44840f7bd8f941f Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Fri, 16 Jan 2026 09:22:08 -0800 Subject: [PATCH 2/2] Make notes dialog larger, show more notes per row on wider screens --- .../notebook/notebook-launcher/notebook-launcher.component.ts | 2 +- src/app/notebook/notebook-notes/notebook-notes.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts index 2f2c2bf45a9..c4c3beb3f53 100644 --- a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts +++ b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts @@ -37,7 +37,7 @@ export class NotebookLauncherComponent { protected showNotes(): void { this.dialog.open(NotebookNotesComponent, { - panelClass: 'dialog-md' + panelClass: 'dialog-lg' }); } } diff --git a/src/app/notebook/notebook-notes/notebook-notes.component.html b/src/app/notebook/notebook-notes/notebook-notes.component.html index d71d5567451..7e9701fbf94 100644 --- a/src/app/notebook/notebook-notes/notebook-notes.component.html +++ b/src/app/notebook/notebook-notes/notebook-notes.component.html @@ -6,7 +6,7 @@ @for (note of group.items; track note) { @if (note.serverDeleteTime == null) {