refactor(NotebookNotesComponent): Convert to standalone

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

@@ -1,21 +1,22 @@
 <ng-template #notebookItems let-group="group">
   <div class="notes" fxLayout="row wrap">
-    <p *ngIf="!hasPrivateNotes" class="empty" i18n>
-      You haven't created any {{ label.plural }} yet.
-    </p>
-    <ng-container *ngFor="let note of group.items">
-      <notebook-item
-        *ngIf="note.serverDeleteTime == null"
-        [config]="config"
-        [group]="group.name"
-        [itemId]="note.localNotebookItemId"
-        [isChooseMode]="insertArgs.insertMode"
-        [note]="note"
-        (onSelect)="select($event)"
-        fxFlex="100"
-        fxFlex.gt-xs="50"
-      />
-    </ng-container>
+    @if (!hasPrivateNotes) {
+      <p class="empty" i18n>You haven't created any {{ label.plural }} yet.</p>
+    }
+    @for (note of group.items; track note) {
+      @if (note.serverDeleteTime == null) {
+        <notebook-item
+          [config]="config"
+          [group]="group.name"
+          [itemId]="note.localNotebookItemId"
+          [isChooseMode]="insertArgs.insertMode"
+          [note]="note"
+          (onSelect)="select($event)"
+          fxFlex="100"
+          fxFlex.gt-xs="50"
+        />
+      }
+    }
   </div>
 </ng-template>
 
@@ -31,19 +32,24 @@
     (selectedIndexChange)="selectedTabIndex = $event"
     animationDuration="0ms"
   >
-    <mat-tab *ngFor="let group of groups" [disabled]="group.disabled" [label]="group.title">
-      <div class="center">
-        <ng-container *ngTemplateOutlet="notebookItems; context: { group: group }"></ng-container>
-      </div>
-    </mat-tab>
+    @for (group of groups; track group) {
+      <mat-tab [disabled]="group.disabled" [label]="group.title">
+        <div class="center">
+          <ng-container *ngTemplateOutlet="notebookItems; context: { group: group }"></ng-container>
+        </div>
+      </mat-tab>
+    }
   </mat-tab-group>
 </ng-template>
 
 <div class="notebook-notes" [class.insert-mode]="insertArgs.insertMode">
-  <ng-container *ngIf="mode !== 'classroomMonitor'">
+  @if (mode !== 'classroomMonitor') {
     <mat-toolbar role="heading">
-      <h4 *ngIf="insertArgs.insertMode" class="info" i18n>Select item to insert</h4>
-      <h4 *ngIf="!insertArgs.insertMode">{{ label.link }}</h4>
+      @if (insertArgs.insertMode) {
+        <h4 class="info" i18n>Select item to insert</h4>
+      } @else {
+        <h4>{{ label.link }}</h4>
+      }
       <span fxFlex></span>
       <button
         (click)="close()"
@@ -59,46 +65,54 @@ <h4 *ngIf="!insertArgs.insertMode">{{ label.link }}</h4>
       <ng-container [ngTemplateOutlet]="groups.length > 1 ? multipleGroups : oneGroup">
       </ng-container>
     </div>
-    <button
-      *ngIf="config.itemTypes.note.enableAddNote"
-      class="new-note"
-      mat-fab
-      color="accent"
-      i18n-aria-label
-      attr.aria-label="Add {{ label.singular }}"
-      i18n-matTooltip
-      matTooltip="Add {{ label.singular }}"
-      matTooltipPosition="above"
-      (click)="addNote()"
-    >
-      <mat-icon>add</mat-icon>
-    </button>
-  </ng-container>
-  <div class="notes notes-grading" *ngIf="mode === 'classroomMonitor'">
-    <div *ngFor="let group of groups">
-      <h4 *ngIf="groups.length > 1" class="group-header mat-subtitle-2 secondary-text">
-        {{ group.title }}
-      </h4>
-      <p *ngIf="group.name === 'private' && !hasPrivateNotes" class="empty" i18n>
-        Team hasn't created any {{ label.plural }} yet.
-      </p>
-      <div fxLayout="row wrap" fxLayoutAlign="start center">
-        <ng-container *ngFor="let note of group.items">
-          <notebook-item
-            *ngIf="note.serverDeleteTime == null && this.workgroupId === note.workgroupId"
-            [config]="config"
-            [group]="group.name"
-            [itemId]="note.localNotebookItemId"
-            [isChooseMode]="insertArgs.insertMode"
-            [note]="note"
-            (onSelect)="select($event)"
-            fxFlex="100"
-            fxFlex.gt-xs="50"
-            fxFlex.gt-sm="33"
-            fxFlex.gt-md="25"
-          />
-        </ng-container>
-      </div>
+    @if (config.itemTypes.note.enableAddNote) {
+      <button
+        class="new-note"
+        mat-fab
+        color="accent"
+        i18n-aria-label
+        attr.aria-label="Add {{ label.singular }}"
+        i18n-matTooltip
+        matTooltip="Add {{ label.singular }}"
+        matTooltipPosition="above"
+        (click)="addNote()"
+      >
+        <mat-icon>add</mat-icon>
+      </button>
+    }
+  }
+  @if (mode === 'classroomMonitor') {
+    <div class="notes notes-grading">
+      @for (group of groups; track group) {
+        <div>
+          @if (groups.length > 1) {
+            <h4 class="group-header mat-subtitle-2 secondary-text">
+              {{ group.title }}
+            </h4>
+          }
+          @if (group.name === 'private' && !hasPrivateNotes) {
+            <p class="empty" i18n>Team hasn't created any {{ label.plural }} yet.</p>
+          }
+          <div fxLayout="row wrap" fxLayoutAlign="start center">
+            @for (note of group.items; track note) {
+              @if (note.serverDeleteTime == null && this.workgroupId === note.workgroupId) {
+                <notebook-item
+                  [config]="config"
+                  [group]="group.name"
+                  [itemId]="note.localNotebookItemId"
+                  [isChooseMode]="insertArgs.insertMode"
+                  [note]="note"
+                  (onSelect)="select($event)"
+                  fxFlex="100"
+                  fxFlex.gt-xs="50"
+                  fxFlex.gt-sm="33"
+                  fxFlex.gt-md="25"
+                />
+              }
+            }
+          </div>
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>

src/app/notebook/notebook-notes/notebook-notes.component.spec.ts

@@ -1,19 +1,15 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module';
 import { NotebookNotesComponent } from './notebook-notes.component';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 let component: NotebookNotesComponent;
-
 describe('NotebookNotesComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [NotebookNotesComponent],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [NotebookNotesComponent, StudentTeacherCommonServicesModule],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
+    });
     const fixture = TestBed.createComponent(NotebookNotesComponent);
     component = fixture.componentInstance;
   });

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

@@ -5,34 +5,53 @@ import { NotebookService } from '../../../assets/wise5/services/notebookService'
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { StudentDataService } from '../../../assets/wise5/services/studentDataService';
 import { NotebookParentComponent } from '../notebook-parent/notebook-parent.component';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NotebookItemComponent } from '../notebook-item/notebook-item.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    NotebookItemComponent
+  ],
   selector: 'notebook-notes',
-  styleUrls: ['notebook-notes.component.scss'],
+  standalone: true,
+  styleUrl: 'notebook-notes.component.scss',
   templateUrl: 'notebook-notes.component.html',
   encapsulation: ViewEncapsulation.None
 })
 export class NotebookNotesComponent extends NotebookParentComponent {
-  @Input() viewOnly: boolean;
-
-  groups = [];
-  groupNameToGroup = {};
-  hasPrivateNotes: boolean = false;
-  insertArgs: any = {
+  protected groups = [];
+  private groupNameToGroup = {};
+  protected hasPrivateNotes: boolean = false;
+  protected insertArgs: any = {
     insertMode: false
   };
-  label: any;
-  selectedTabIndex = 0;
-  title: string;
-  subscriptions: Subscription = new Subscription();
+  protected label: any;
+  protected selectedTabIndex = 0;
+  private subscriptions: Subscription = new Subscription();
+  @Input() viewOnly: boolean;
 
   constructor(
-    ConfigService: ConfigService,
+    configService: ConfigService,
+    private dataService: StudentDataService,
     NotebookService: NotebookService,
-    private ProjectService: ProjectService,
-    private studentDataService: StudentDataService
+    private projectService: ProjectService
   ) {
-    super(ConfigService, NotebookService);
+    super(configService, NotebookService);
   }
 
   ngOnInit(): void {
@@ -77,7 +96,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     );
 
     this.subscriptions.add(
-      this.ProjectService.projectParsed$.subscribe(() => {
+      this.projectService.projectParsed$.subscribe(() => {
         this.setConfig();
         this.setLabel();
       })
@@ -116,8 +135,8 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     this.groups.push(personalGroup);
   }
 
-  addSpacesToGroups(): void {
-    for (const space of this.ProjectService.getSpaces()) {
+  private addSpacesToGroups(): void {
+    for (const space of this.projectService.getSpaces()) {
       if (space.isShowInNotebook) {
         const spaceGroup = {
           title: space.name,
@@ -131,7 +150,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     }
   }
 
-  updatePrivateNotebookNote(notebookItem: any): void {
+  private updatePrivateNotebookNote(notebookItem: any): void {
     this.updateNotebookNote(
       this.groupNameToGroup['private'],
       notebookItem.localNotebookItemId,
@@ -147,7 +166,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     }
   }
 
-  updatePublicNotebookNote(notebookItem: any): void {
+  private updatePublicNotebookNote(notebookItem: any): void {
     this.updateNotebookNote(
       this.groupNameToGroup['public'],
       notebookItem.localNotebookItemId,
@@ -161,7 +180,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     );
   }
 
-  updateNotebookNote(
+  private updateNotebookNote(
     group: any,
     localNotebookItemId: string,
     workgroupId: number,
@@ -181,7 +200,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     }
   }
 
-  removeNotebookNote(group: any, localNotebookItemId: string, workgroupId: number): void {
+  private removeNotebookNote(group: any, localNotebookItemId: string, workgroupId: number): void {
     let items = group.items;
     for (let i = 0; i < items.length; i++) {
       let item = items[i];
@@ -192,25 +211,21 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     }
   }
 
-  addNote() {
-    this.NotebookService.addNote(this.studentDataService.getCurrentNodeId());
+  protected addNote(): void {
+    this.NotebookService.addNote(this.dataService.getCurrentNodeId());
   }
 
-  select({ event, note }: any): void {
+  protected select({ event, note }: any): void {
     if (this.insertArgs.insertMode) {
       this.insertArgs.notebookItem = note;
       this.NotebookService.broadcastNotebookItemChosen(this.insertArgs);
     } else {
       const isEditMode = !this.viewOnly;
-      this.NotebookService.editNote(this.studentDataService.getCurrentNodeId(), note, isEditMode);
+      this.NotebookService.editNote(this.dataService.getCurrentNodeId(), note, isEditMode);
     }
   }
 
-  close(): void {
+  protected close(): void {
     this.NotebookService.closeNotes();
   }
-
-  filterDeleted(item: any): boolean {
-    return item.serverDeleteTime == null;
-  }
 }

src/app/notebook/notebook.module.ts

@@ -25,7 +25,6 @@ import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-t
 @NgModule({
   declarations: [
     NotebookParentComponent,
-    NotebookNotesComponent,
     NotebookReportComponent,
     NotebookReportAnnotationsComponent
   ],
@@ -47,6 +46,7 @@ import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-t
     MatTooltipModule,
     NotebookItemComponent,
     NotebookLauncherComponent,
+    NotebookNotesComponent,
     WiseTinymceEditorComponent
   ],
   exports: [

src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html

@@ -27,7 +27,7 @@
         </div>
         <div *ngIf="reportEnabled" fxLayout="row" fxLayoutAlign="center center" fxFlex="25">
           <span *ngIf="reportHasWork" class="success center" i18n>
-            Latest Work: {{ workgroup.report.serverSaveTime | date : 'mediumDate' }}
+            Latest Work: {{ workgroup.report.serverSaveTime | date: 'mediumDate' }}
           </span>
           <span *ngIf="!reportHasWork" class="text-secondary" i18n> No Work </span>
         </div>
@@ -42,8 +42,7 @@
           [config]="notebookConfig"
           [viewOnly]="true"
           [workgroupId]="workgroup.workgroupId"
-        >
-        </notebook-notes>
+        />
       </mat-tab>
       <mat-tab *ngIf="reportEnabled" label="{{ reportTitle }}">
         <notebook-report

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

@@ -3,7 +3,7 @@
 <link rel="stylesheet" [href]="projectStylePath | safeUrl" />
 <mat-drawer-container [hasBackdrop]="false" *ngIf="initialized">
   <mat-drawer #drawer mode="over" position="end" (keydown.escape)="closeNotes()">
-    <notebook-notes [config]="notebookConfig"></notebook-notes>
+    <notebook-notes [config]="notebookConfig" />
   </mat-drawer>
   <mat-drawer-content>
     <top-bar [projectName]="project.metadata.title"></top-bar>