refactor(StatusIconComponent): Convert to standalone (#1828)

WISE-Community · Jun 21, 2024 · c7a408a · c7a408a
1 parent 273bb3b
commit c7a408a
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 52 deletions.
diff --git a/src/app/classroom-monitor/status-icon/status-icon.component.html b/src/app/classroom-monitor/status-icon/status-icon.component.html
@@ -1,9 +1,3 @@
-<mat-icon
-  class="{{ iconClass }}"
-  tabindex="0"
-  [attr.aria-label]="iconLabel"
-  matTooltip="{{ iconTooltip }}"
-  matTooltipPosition="above"
->
-  {{ iconName }}
+<mat-icon class="{{ class }}" tabindex="0" matTooltip="{{ tooltip }}" matTooltipPosition="above">
+  {{ name }}
 </mat-icon>
diff --git a/src/app/classroom-monitor/status-icon/status-icon.component.ts b/src/app/classroom-monitor/status-icon/status-icon.component.ts
@@ -1,21 +1,15 @@
 import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
+  imports: [MatIconModule, MatTooltipModule],
   selector: 'status-icon',
+  standalone: true,
   templateUrl: 'status-icon.component.html'
 })
 export class StatusIconComponent {
-  @Input()
-  iconClass: string;
-
-  @Input()
-  iconLabel: string;
-
-  @Input()
-  iconName: string;
-
-  @Input()
-  iconTooltip: string;
-
-  constructor() {}
+  @Input() class: string;
+  @Input() name: string;
+  @Input() tooltip: string;
 }
diff --git a/src/app/classroom-monitor/step-info/step-info.component.html b/src/app/classroom-monitor/step-info/step-info.component.html
@@ -1,20 +1,18 @@
 <div fxLayout="row" fxLayoutAlign="start center">
-  <node-icon [nodeId]="nodeId" size="18" fxHide.xs></node-icon>
+  <node-icon [nodeId]="nodeId" size="18" fxHide.xs />
   <span fxHide.xs>&nbsp;&nbsp;</span>
   <span>{{ stepTitle }}</span>
   <status-icon
     *ngIf="hasAlert"
-    [iconClass]="alertIconClass"
-    [iconName]="alertIconName"
-    [iconLabel]="alertIconLabel"
-    [iconTooltip]="alertIconLabel"
-  ></status-icon>
+    [class]="alertIconClass"
+    [name]="alertIconName"
+    [tooltip]="alertIconLabel"
+  />
   <status-icon
     *ngIf="hasRubrics"
-    iconClass="info"
-    iconName="info"
-    [iconLabel]="rubricIconLabel"
-    [iconTooltip]="rubricIconLabel"
-  ></status-icon>
+    class="info"
+    name="info"
+    [tooltip]="rubricIconLabel"
+  />
   <span *ngIf="hasNewWork" class="badge badge--info animate-fade" i18n>New</span>
 </div>
diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts
@@ -14,17 +14,20 @@ import { StudentTeacherCommonModule } from '../student-teacher-common.module';
 import { ComponentGradingModule } from './component-grading.module';
 import { StatusIconComponent } from '../classroom-monitor/status-icon/status-icon.component';
 import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress/nav-item-progress.component';
-import { SaveIndicatorComponent } from '../../assets/wise5/common/save-indicator/save-indicator.component';
 
 @NgModule({
-  imports: [ComponentGradingModule, IntersectionObserverModule, StudentTeacherCommonModule],
+  imports: [
+    ComponentGradingModule,
+    IntersectionObserverModule,
+    StatusIconComponent,
+    StudentTeacherCommonModule
+  ],
   declarations: [
     EditComponentAnnotationsComponent,
     EditComponentCommentComponent,
     EditComponentScoreComponent,
     GradingEditComponentMaxScoreComponent,
     NavItemProgressComponent,
-    StatusIconComponent,
     WorkgroupComponentGradingComponent,
     WorkgroupInfoComponent,
     WorkgroupItemComponent,

diff --git a/...onitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component.html b/...onitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component.html
@@ -6,10 +6,9 @@
   </div>
   <status-icon
     *ngIf="hasAlert"
-    [iconLabel]="alertLabel"
-    [iconTooltip]="alertLabel"
-    [iconName]="alertIconName"
-    [iconClass]="alertIconClass"
-  ></status-icon>
+    [tooltip]="alertLabel"
+    [name]="alertIconName"
+    [class]="alertIconClass"
+  />
   <span *ngIf="hasNewWork" class="badge badge--info animate-fade" i18n>New</span>
 </div>
diff --git a/...classroomMonitor/classroomMonitorComponents/nodeProgress/nav-item/nav-item.component.html b/...classroomMonitor/classroomMonitorComponents/nodeProgress/nav-item/nav-item.component.html
@@ -84,18 +84,16 @@
       <span fxFlex fxHide.gt-xs></span>
       <status-icon
         *ngIf="newAlert"
-        [iconClass]="alertIconClass"
-        [iconName]="alertIconName"
-        [iconLabel]="alertIconLabel"
-        [iconTooltip]="alertIconLabel"
-      ></status-icon>
+        [class]="alertIconClass"
+        [name]="alertIconName"
+        [tooltip]="alertIconLabel"
+      />
       <status-icon
         *ngIf="hasRubrics"
-        [iconClass]="rubricIconClass"
-        [iconName]="rubricIconName"
-        [iconLabel]="rubricIconLabel"
-        [iconTooltip]="rubricIconLabel"
-      ></status-icon>
+        [class]="rubricIconClass"
+        [name]="rubricIconName"
+        [tooltip]="rubricIconLabel"
+      />
       <span fxFlex hide-xs></span>
       <nav-item-score
         class="nav-item--list__info-item"

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -1712,11 +1712,11 @@ 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/app/classroom-monitor/step-info/step-info.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">17</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component.html</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">13</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/componentAnnotations/component-annotations.component.html</context>