refactor(TeacherNodeIcon): Convert to standalone (#1849)

WISE-Community · Jun 26, 2024 · cec07ca · cec07ca
1 parent 4669d23
commit cec07ca
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 18 deletions.
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
@@ -96,7 +96,6 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     ProjectAuthoringStepComponent,
     RecoveryAuthoringComponent,
     RubricAuthoringComponent,
-    TeacherNodeIconComponent,
     TopBarComponent,
     ProjectListComponent
   ],
@@ -119,6 +118,7 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     SaveIndicatorComponent,
     StepToolsComponent,
     StructureAuthoringModule,
+    TeacherNodeIconComponent,
     WiseTinymceEditorModule
   ]
 })

diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -1,6 +1,6 @@
 <div class="top-button-bar">
   <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
-    <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
+    <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18" />
     <edit-node-title [node]="node"></edit-node-title>
     <div class="node-buttons" fxLayoutGap="16px">
       <button

diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts
@@ -41,12 +41,7 @@ let teacherProjectService: TeacherProjectService;
 describe('NodeAuthoringComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        CopyComponentButtonComponent,
-        EditNodeTitleComponent,
-        NodeAuthoringComponent,
-        TeacherNodeIconComponent
-      ],
+      declarations: [CopyComponentButtonComponent, EditNodeTitleComponent, NodeAuthoringComponent],
       imports: [
         AddComponentButtonComponent,
         BrowserAnimationsModule,
@@ -60,7 +55,8 @@ describe('NodeAuthoringComponent', () => {
         MatInputModule,
         PreviewComponentButtonComponent,
         RouterTestingModule,
-        StudentTeacherCommonServicesModule
+        StudentTeacherCommonServicesModule,
+        TeacherNodeIconComponent
       ],
       providers: [
         ClassroomStatusService,

diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.spec.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.spec.ts
@@ -55,8 +55,7 @@ describe('ProjectAuthoringComponent', () => {
         NodeAuthoringComponent,
         ProjectAuthoringComponent,
         ProjectAuthoringLessonComponent,
-        ProjectAuthoringStepComponent,
-        TeacherNodeIconComponent
+        ProjectAuthoringStepComponent
       ],
       imports: [
         AddLessonButtonComponent,

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
@@ -3,18 +3,36 @@ 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 { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { CommonModule } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule
+  ],
   selector: 'teacher-node-icon',
-  templateUrl: '../../vle/node-icon/node-icon.component.html',
-  styleUrls: ['../../vle/node-icon/node-icon.component.scss']
+  standalone: true,
+  styleUrl: '../../vle/node-icon/node-icon.component.scss',
+  templateUrl: '../../vle/node-icon/node-icon.component.html'
 })
 export class TeacherNodeIconComponent extends NodeIconComponent {
-  constructor(protected dialog: MatDialog, protected projectService: ProjectService) {
+  constructor(
+    protected dialog: MatDialog,
+    protected projectService: ProjectService
+  ) {
     super(dialog, projectService);
   }
 
-  openNodeIconChooserDialog() {
+  protected openNodeIconChooserDialog(): void {
     this.dialog.open(NodeIconChooserDialog, {
       data: { node: this.node },
       panelClass: 'dialog-md'

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.html b/src/assets/wise5/vle/node-icon/node-icon.component.html
@@ -17,16 +17,17 @@
 <button
   *ngIf="canEdit"
   mat-button
-  matTooltip="Choose an Icon"
+  matTooltip="Choose an icon"
   matTooltipPosition="above"
+  i18n-matTooltip
   matBadge="edit"
   class="mdc-text-field--filled has-icon-badge"
   (click)="openNodeIconChooserDialog()"
 >
   <div class="mat-form-field-flex" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="4px">
-    <ng-container *ngTemplateOutlet="iconContent"></ng-container>
+    <ng-container *ngTemplateOutlet="iconContent" />
   </div>
 </button>
 <ng-container *ngIf="!canEdit">
-  <ng-container *ngTemplateOutlet="iconContent"></ng-container>
+  <ng-container *ngTemplateOutlet="iconContent" />
 </ng-container>
diff --git a/src/messages.xlf b/src/messages.xlf
@@ -22084,6 +22084,17 @@ If this problem continues, let your teacher know and move on to the next activit
           <context context-type="linenumber">88</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="d4dcc586339ab168041be68bea2c0f182a08dc41" datatype="html">
+        <source>Choose an icon</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/vle/node-icon/node-icon.component.html</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/vle/node-icon/node-icon.component.html</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="b570c9b6f5d96fb6f6969cb9397019829c34e82c" datatype="html">
         <source> Submit </source>
         <context-group purpose="location">