refactor(NodeIconChooserDialogComponent): Convert to standalone (#1966)

WISE-Community · Oct 23, 2024 · 646840f · 646840f
1 parent 4acdf67
commit 646840f
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 114 deletions.
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
@@ -5,7 +5,6 @@ import { AddYourOwnNodeComponent } from '../../assets/wise5/authoringTool/addNod
 import { ChooseNewNodeTemplateComponent } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
 import { AdvancedProjectAuthoringComponent } from '../../assets/wise5/authoringTool/advanced/advanced-project-authoring.component';
 import { RubricAuthoringComponent } from '../../assets/wise5/authoringTool/rubric/rubric-authoring.component';
-import { NodeIconChooserDialog } from '../../assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component';
 import { ChooseNewComponent } from '../authoring-tool/add-component/choose-new-component/choose-new-component.component';
 import { ChooseImportStepComponent } from '../authoring-tool/import-step/choose-import-step/choose-import-step.component';
 import { ComponentAuthoringModule } from './component-authoring.module';
@@ -88,7 +87,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
     MilestonesAuthoringComponent,
     NodeAuthoringComponent,
     NodeAuthoringParentComponent,
-    NodeIconChooserDialog,
     NodeWithMoveAfterButtonComponent,
     NotebookAuthoringComponent,
     ProjectInfoAuthoringComponent,

diff --git a/src/assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component.ts b/src/assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component.ts
@@ -1,7 +1,7 @@
 import { MatDialog } from '@angular/material/dialog';
 import { ProjectService } from '../../services/projectService';
 import { NodeIconComponent } from '../../vle/node-icon/node-icon.component';
-import { NodeIconChooserDialog } from '../../common/node-icon-chooser-dialog/node-icon-chooser-dialog.component';
+import { NodeIconChooserDialogComponent } from '../../common/node-icon-chooser-dialog/node-icon-chooser-dialog.component';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -17,7 +17,8 @@ import { MatBadgeModule } from '@angular/material/badge';
     MatBadgeModule,
     MatButtonModule,
     MatIconModule,
-    MatTooltipModule
+    MatTooltipModule,
+    NodeIconChooserDialogComponent
   ],
   selector: 'teacher-node-icon',
   standalone: true,
@@ -33,7 +34,7 @@ export class TeacherNodeIconComponent extends NodeIconComponent {
   }
 
   protected openNodeIconChooserDialog(): void {
-    this.dialog.open(NodeIconChooserDialog, {
+    this.dialog.open(NodeIconChooserDialogComponent, {
       data: { node: this.node },
       panelClass: 'dialog-md'
     });

diff --git a/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html b/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html
@@ -5,25 +5,26 @@
   fxLayoutAlign="start center"
   fxLayoutGap="8px"
 >
-  <div
-    *ngIf="newNodeIcon.type === 'font'"
-    style="background-color: {{ newNodeIcon.color }}"
-    class="avatar preview-icon"
-    aria-label="Selected icon"
-    i18n-aria-label
-    [ngClass]="{ 'avatar--square': node.isGroup() }"
-  >
-    <mat-icon class="mat-24 material-icons">{{ newNodeIcon.fontName }}</mat-icon>
-  </div>
-  <img
-    *ngIf="newNodeIcon.type === 'img'"
-    class="mat-24 avatar"
-    [ngClass]="{ 'avatar--square': node.isGroup() }"
-    [src]="newNodeIcon.imgSrc"
-    alt="newNodeIcon.imgAlt"
-    aria-label="Selected icon"
-    i18n-aria-label
-  />
+  @if (newNodeIcon.type === 'font') {
+    <div
+      style="background-color: {{ newNodeIcon.color }}"
+      class="avatar preview-icon"
+      aria-label="Selected icon"
+      i18n-aria-label
+      [ngClass]="{ 'avatar--square': node.isGroup() }"
+    >
+      <mat-icon class="mat-24 material-icons">{{ newNodeIcon.fontName }}</mat-icon>
+    </div>
+  } @else if (newNodeIcon.type === 'img') {
+    <img
+      class="mat-24 avatar"
+      [ngClass]="{ 'avatar--square': node.isGroup() }"
+      [src]="newNodeIcon.imgSrc"
+      alt="newNodeIcon.imgAlt"
+      aria-label="Selected icon"
+      i18n-aria-label
+    />
+  }
   <span i18n>Choose an Icon</span>
 </h2>
 <mat-dialog-content class="dialog-content-scroll">
@@ -42,52 +43,55 @@ <h3 fxLayout="row" fxLayoutAlign="start center">
     </a>
   </h3>
   <mat-chip-listbox aria-label="Select a KI icon" i18n-aria-label>
-    <mat-chip-option
-      *ngFor="let kiIcon of kiIcons"
-      class="ki-choice"
-      color="null"
-      [value]="kiIcon"
-      [selected]="newNodeIcon.type === 'img' && kiIcon.imgSrc === newNodeIcon.imgSrc"
-      (selectionChange)="chooseKIIcon($event)"
-      (click)="chip.select()"
-      style="background-color: {{ color }}"
-    >
-      <mat-chip-avatar>
-        <img class="ki-icon" [src]="kiIcon.imgSrc" [alt]="kiIcon.imgAlt" />
-      </mat-chip-avatar>
-      {{ kiIcon.imgLabel }}
-    </mat-chip-option>
+    @for (kiIcon of kiIcons; track kiIcon.imgSrc) {
+      <mat-chip-option
+        class="ki-choice"
+        color="null"
+        [value]="kiIcon"
+        [selected]="newNodeIcon.type === 'img' && kiIcon.imgSrc === newNodeIcon.imgSrc"
+        (selectionChange)="chooseKIIcon($event)"
+        (click)="chip.select()"
+        style="background-color: {{ color }}"
+      >
+        <mat-chip-avatar>
+          <img class="ki-icon" [src]="kiIcon.imgSrc" [alt]="kiIcon.imgAlt" />
+        </mat-chip-avatar>
+        {{ kiIcon.imgLabel }}
+      </mat-chip-option>
+    }
   </mat-chip-listbox>
   <mat-divider></mat-divider>
   <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
     <div>
       <h3 i18n>Or choose your own icon:</h3>
       <mat-chip-listbox aria-label="Select an icon" i18n-aria-label>
-        <mat-chip-option
-          *ngFor="let fontName of fontNames"
-          class="icon-choice"
-          color="null"
-          [value]="fontName"
-          [ariaLabel]="fontName"
-          [selected]="newNodeIcon.type === 'font' && fontName === newNodeIcon.fontName"
-          (selectionChange)="chooseFontName($event)"
-        >
-          <mat-icon>{{ fontName }}</mat-icon>
-        </mat-chip-option>
+        @for (fontName of fontNames; track fontName) {
+          <mat-chip-option
+            class="icon-choice"
+            color="null"
+            [value]="fontName"
+            [ariaLabel]="fontName"
+            [selected]="newNodeIcon.type === 'font' && fontName === newNodeIcon.fontName"
+            (selectionChange)="chooseFontName($event)"
+          >
+            <mat-icon>{{ fontName }}</mat-icon>
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
     <div fxFlex.gt-sm="18">
       <h3 i18n>Color:</h3>
       <mat-chip-listbox aria-label="Select a color" i18n-aria-label>
-        <mat-chip-option
-          *ngFor="let color of colors"
-          class="color-choice icon-choice"
-          [value]="color"
-          [ariaLabel]="color"
-          [selected]="newNodeIcon.type === 'font' && color === newNodeIcon.color"
-          (selectionChange)="chooseFontColor($event)"
-          style="background-color: {{ color }}"
-        ></mat-chip-option>
+        @for (color of colors; track color) {
+          <mat-chip-option
+            class="color-choice icon-choice"
+            [value]="color"
+            [ariaLabel]="color"
+            [selected]="newNodeIcon.type === 'font' && color === newNodeIcon.color"
+            (selectionChange)="chooseFontColor($event)"
+            style="background-color: {{ color }}"
+          ></mat-chip-option>
+        }
       </mat-chip-listbox>
     </div>
   </div>

diff --git a/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.spec.ts b/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.spec.ts
@@ -1,9 +1,9 @@
-import { NodeIconChooserDialog } from './node-icon-chooser-dialog.component';
+import { NodeIconChooserDialogComponent } from './node-icon-chooser-dialog.component';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { Node } from '../Node';
+import { provideRouter } from '@angular/router';
 
 const node1 = {
   id: 'node1',
@@ -40,18 +40,18 @@ class MockProjectService {
 
 let fixture;
 let component;
-describe('NodeIconChooserDialog', () => {
+fdescribe('NodeIconChooserDialog', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [NodeIconChooserDialog],
+      imports: [NodeIconChooserDialogComponent],
       providers: [
         { provide: MatDialogRef, useValue: { close: () => {} } },
         { provide: MAT_DIALOG_DATA, useValue: [] },
-        { provide: TeacherProjectService, useClass: MockProjectService }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
+        { provide: TeacherProjectService, useClass: MockProjectService },
+        provideRouter([])
+      ]
     });
-    fixture = TestBed.createComponent(NodeIconChooserDialog);
+    fixture = TestBed.createComponent(NodeIconChooserDialogComponent);
     component = fixture.componentInstance;
     component.node = Object.assign(new Node(), node1);
     component.newNodeIcon = node1.icon;

diff --git a/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts b/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts
@@ -1,7 +1,15 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { Node } from '../Node';
+import { CommonModule } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
 
 interface KIIcon {
   imgAlt: string;
@@ -10,12 +18,24 @@ interface KIIcon {
 }
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatChipsModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatIconModule,
+    MatTooltipModule,
+    RouterModule
+  ],
   selector: 'node-icon-chooser-dialog',
-  styleUrls: ['node-icon-chooser-dialog.component.scss'],
+  standalone: true,
+  styleUrl: 'node-icon-chooser-dialog.component.scss',
   templateUrl: 'node-icon-chooser-dialog.component.html'
 })
-export class NodeIconChooserDialog {
-  colors = [
+export class NodeIconChooserDialogComponent {
+  protected colors = [
     '#66BB6A',
     '#009688',
     '#00B0FF',
@@ -30,7 +50,7 @@ export class NodeIconChooserDialog {
     '#757575'
   ];
 
-  fontNames = [
+  protected fontNames = [
     'access_time',
     'alarm',
     'announcement',
@@ -78,7 +98,7 @@ export class NodeIconChooserDialog {
     'verified_user',
     'view_list'
   ];
-  kiIcons: KIIcon[] = [
+  protected kiIcons: KIIcon[] = [
     {
       imgAlt: $localize`Knowledge Integration elicit ideas`,
       imgLabel: $localize`Elicit Ideas`,
@@ -105,53 +125,45 @@ export class NodeIconChooserDialog {
       imgSrc: 'assets/img/icons/ki-color-cycle.svg'
     }
   ];
-  newNodeIcon: any;
-  node: Node;
+  protected newNodeIcon: any;
+  protected node: Node;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) protected data: any,
-    public dialogRef: MatDialogRef<NodeIconChooserDialog>,
-    private ProjectService: TeacherProjectService
+    public dialogRef: MatDialogRef<NodeIconChooserDialogComponent>,
+    private projectService: TeacherProjectService
   ) {}
 
   ngOnInit() {
     this.node = this.data.node;
     this.newNodeIcon = Object.assign({}, this.node.getIcon());
   }
 
-  chooseFontColor(event: any) {
+  chooseFontColor(event: any): void {
     if (event.selected) {
-      this.setFontType();
+      this.newNodeIcon.type = 'font';
       this.newNodeIcon.color = event.source.value;
     }
   }
 
-  chooseFontName(event: any) {
+  chooseFontName(event: any): void {
     if (event.selected) {
-      this.setFontType();
+      this.newNodeIcon.type = 'font';
       this.newNodeIcon.fontName = event.source.value;
     }
   }
 
-  chooseKIIcon(event: any) {
+  chooseKIIcon(event: any): void {
     if (event.selected) {
-      this.setImgType();
+      this.newNodeIcon.type = 'img';
       Object.assign(this.newNodeIcon, event.source.value);
     }
   }
 
-  setImgType() {
-    this.newNodeIcon.type = 'img';
-  }
-
-  setFontType() {
-    this.newNodeIcon.type = 'font';
-  }
-
-  save() {
-    const nodeContent = this.ProjectService.getNodeById(this.node.id);
+  save(): void {
+    const nodeContent = this.projectService.getNodeById(this.node.id);
     nodeContent.icon = Object.assign(this.node.getIcon(), this.newNodeIcon);
-    this.ProjectService.saveProject();
+    this.projectService.saveProject();
     this.dialogRef.close();
   }
 }