feat(Notes): Display in dialog instead of mat-drawer (#2254)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

Author: hirokiterashima

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-lg'
+    });
   }
 }

src/app/notebook/notebook-notes/notebook-notes.component.html

@@ -6,7 +6,7 @@
     @for (note of group.items; track note) {
       @if (note.serverDeleteTime == null) {
         <notebook-item
-          class="w-full sm:w-1/2"
+          class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
           [config]="config"
           [group]="group.name"
           [itemId]="note.localNotebookItemId"

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) {

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 {

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 {

src/assets/wise5/services/notebookService.ts

@@ -63,10 +63,6 @@ export class NotebookService {
   public publicNotebookItemsRetrieved$ = this.publicNotebookItemsRetrievedSource.asObservable();
   private showReportAnnotationsSource: Subject<void> = new Subject<void>();
   public showReportAnnotations$ = this.showReportAnnotationsSource.asObservable();
-  private notesVisibleSource: Subject<boolean> = new Subject<boolean>();
-  public notesVisible$ = this.notesVisibleSource.asObservable();
-  private insertModeSource: Subject<any> = new Subject<any>();
-  public insertMode$ = this.insertModeSource.asObservable();
   private reportFullScreenSource: Subject<boolean> = new Subject<boolean>();
   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 {

src/assets/wise5/vle/vle.component.html

@@ -3,12 +3,8 @@
 <link rel="stylesheet" [href]="projectStylePath | safeUrl" />
 @if (initialized) {
   <mat-drawer-container [hasBackdrop]="false">
-    <mat-drawer #drawer mode="over" position="end" (keydown.escape)="closeNotes()">
-      <notebook-notes [config]="notebookConfig" />
-    </mat-drawer>
     @if (chatbotEnabled) {
       <mat-drawer
-        #chatbotDrawer
         [mode]="mdScreen ? 'over' : 'side'"
         position="end"
         (keydown.escape)="chatbotVisible = false"

src/assets/wise5/vle/vle.component.ts

@@ -21,7 +21,6 @@ import { Node } from '../common/Node';
 import { NodeComponent } from './node/node.component';
 import { NodeNavigationComponent } from '../directives/node-navigation/node-navigation.component';
 import { NodeStatusService } from '../services/nodeStatusService';
-import { NotebookNotesComponent } from '../../../app/notebook/notebook-notes/notebook-notes.component';
 import { NotebookReportComponent } from '../../../app/notebook/notebook-report/notebook-report.component';
 import { NotebookService } from '../services/notebookService';
 import { NotificationService } from '../services/notificationService';
@@ -49,7 +48,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
     NavigationComponent,
     NodeComponent,
     NodeNavigationComponent,
-    NotebookNotesComponent,
     NotebookReportComponent,
     RunEndedAndLockedMessageComponent,
     SafeUrl,
@@ -67,11 +65,10 @@ export class VLEComponent implements AfterViewInit {
   protected chatbotVisible: boolean = false;
   protected currentNode: Node;
   @ViewChild('defaultVLETemplate') private defaultVLETemplate: TemplateRef<any>;
-  @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) => {

src/messages.xlf

@@ -7079,7 +7079,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Personal</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/notebook/notebook-notes/notebook-notes.component.ts</context>
-          <context context-type="linenumber">119</context>
+          <context context-type="linenumber">115</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4929778113156900100" datatype="html">
@@ -10666,7 +10666,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
-          <context context-type="linenumber">232</context>
+          <context context-type="linenumber">224</context>
         </context-group>
       </trans-unit>
       <trans-unit id="537022937435161177" datatype="html">
@@ -10681,7 +10681,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
-          <context context-type="linenumber">233</context>
+          <context context-type="linenumber">225</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3407061818321766940" datatype="html">