refactor(ChooseCopyNodeLocationComponent): Convert to standalone (#1984)

WISE-Community · Nov 9, 2024 · 474ebf7 · 474ebf7
1 parent 935a20c
commit 474ebf7
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 47 deletions.
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
@@ -66,7 +66,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
   declarations: [
     AdvancedProjectAuthoringComponent,
     AuthoringToolComponent,
-    ChooseCopyNodeLocationComponent,
     ChooseImportStepComponent,
     ChooseImportUnitComponent,
     ChooseMoveNodeLocationComponent,
@@ -96,6 +95,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
     AuthoringToolBarComponent,
     ChooseAutomatedAssessmentComponent,
     ChooseComponentLocationComponent,
+    ChooseCopyNodeLocationComponent,
     ChooseNewNodeTemplateComponent,
     ChooseNewComponent,
     ChooseSimulationComponent,

diff --git a/...l/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.html b/...l/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.html
@@ -3,7 +3,7 @@ <h5 i18n>Choose a new location by clicking one of the buttons below</h5>
   <button mat-raised-button color="primary" routerLink=".." aria-label="Cancel" i18n>Cancel</button>
 </div>
 <div style="margin-top: 20px; margin-left: 20px">
-  <div *ngFor="let nodeId of nodeIds">
+  @for (nodeId of nodeIds; track nodeId) {
     <div
       id="{{ nodeId }}"
       [ngClass]="{
@@ -15,51 +15,56 @@ <h5 i18n>Choose a new location by clicking one of the buttons below</h5>
     >
       <div fxLayout="row" fxLayoutGap="8px">
         <node-icon-and-title [nodeId]="nodeId" [showPosition]="true" />
-        <insert-node-inside-button
-          *ngIf="isGroupNode(nodeId)"
-          (insertEvent)="insert(nodeId, false)"
-        />
-        <insert-node-after-button
-          *ngIf="!isGroupNode(nodeId)"
-          (insertEvent)="insert(nodeId, true)"
-        />
+        @if (isGroupNode(nodeId)) {
+          <insert-node-inside-button (insertEvent)="insert(nodeId, false)" />
+        } @else {
+          <insert-node-after-button (insertEvent)="insert(nodeId, true)" />
+        }
       </div>
     </div>
-  </div>
+  }
   <h6 class="unused-header" i18n>Unused Lessons</h6>
-  <div *ngIf="inactiveGroupNodes.length == 0" i18n>There are no Unused Lessons</div>
-  <ng-container *ngFor="let inactiveNode of inactiveGroupNodes">
-    <div fxLayout="row" fxLayoutAlign="start center" class="lesson-header" fxLayoutGap="10px">
-      <node-icon-and-title [nodeId]="inactiveNode.id" />
-      <insert-node-inside-button (insertEvent)="insert(inactiveNode.id, false)" />
-    </div>
-    <ng-container *ngFor="let inactiveChildId of inactiveNode.ids">
-      <div
-        fxLayout="row"
-        class="step-header"
-        [ngClass]="{
-          'branch-path-step-header': isNodeInAnyBranchPath(inactiveChildId)
-        }"
-        [ngStyle]="{ 'background-color': getBackgroundColor(inactiveChildId) }"
-      >
-        <node-with-move-after-button
-          (insertEvent)="insert(inactiveChildId, true)"
-          [nodeId]="inactiveChildId"
-        />
+  @if (inactiveGroupNodes.length == 0) {
+    <div i18n>There are no Unused Lessons</div>
+  } @else {
+    @for (inactiveNode of inactiveGroupNodes; track inactiveNode.id) {
+      <div fxLayout="row" fxLayoutAlign="start center" class="lesson-header" fxLayoutGap="10px">
+        <node-icon-and-title [nodeId]="inactiveNode.id" />
+        <insert-node-inside-button (insertEvent)="insert(inactiveNode.id, false)" />
       </div>
-    </ng-container>
-  </ng-container>
+      @for (inactiveChildId of inactiveNode.ids; track inactiveChildId) {
+        <div
+          fxLayout="row"
+          class="step-header"
+          [ngClass]="{
+            'branch-path-step-header': isNodeInAnyBranchPath(inactiveChildId)
+          }"
+          [ngStyle]="{ 'background-color': getBackgroundColor(inactiveChildId) }"
+        >
+          <node-with-move-after-button
+            (insertEvent)="insert(inactiveChildId, true)"
+            [nodeId]="inactiveChildId"
+          />
+        </div>
+      }
+    }
+  }
   <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
     <h6 class="unused-header" i18n>Unused Steps</h6>
     <insert-node-inside-button (insertEvent)="insert('inactiveNodes', false)" />
   </div>
-  <div *ngIf="inactiveStepNodes.length == 0" i18n>There are no Unused Steps</div>
-  <ng-container *ngFor="let inactiveNode of inactiveStepNodes">
-    <div *ngIf="getParentGroup(inactiveNode.id) == null" class="step-header">
-      <node-with-move-after-button
-        (insertEvent)="insert(inactiveNode.id, true)"
-        [nodeId]="inactiveNode.id"
-      />
-    </div>
-  </ng-container>
+  @if (inactiveStepNodes.length == 0) {
+    <div i18n>There are no Unused Steps</div>
+  } @else {
+    @for (inactiveNode of inactiveStepNodes; track inactiveNode.id) {
+      @if (getParentGroup(inactiveNode.id) == null) {
+        <div class="step-header">
+          <node-with-move-after-button
+            (insertEvent)="insert(inactiveNode.id, true)"
+            [nodeId]="inactiveNode.id"
+          />
+        </div>
+      }
+    }
+  }
 </div>
diff --git a/...ool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts b/...ool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts
@@ -1,13 +1,31 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { CopyNodesService } from '../../../services/copyNodesService';
 import { ChooseNodeLocationComponent } from '../choose-node-location.component';
 import { CopyTranslationsService } from '../../../services/copyTranslationsService';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { InsertNodeAfterButtonComponent } from '../insert-node-after-button/insert-node-after-button.component';
+import { InsertNodeInsideButtonComponent } from '../insert-node-inside-button/insert-node-inside-button.component';
+import { NodeIconAndTitleComponent } from '../node-icon-and-title/node-icon-and-title.component';
+import { NodeWithMoveAfterButtonComponent } from '../node-with-move-after-button/node-with-move-after-button.component';
 
 @Component({
-  templateUrl: 'choose-copy-node-location.component.html',
-  styleUrls: ['../choose-node-location.component.scss']
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    InsertNodeAfterButtonComponent,
+    InsertNodeInsideButtonComponent,
+    MatButtonModule,
+    NodeIconAndTitleComponent,
+    NodeWithMoveAfterButtonComponent,
+    RouterLink
+  ],
+  standalone: true,
+  styleUrl: '../choose-node-location.component.scss',
+  templateUrl: 'choose-copy-node-location.component.html'
 })
 export class ChooseCopyNodeLocationComponent extends ChooseNodeLocationComponent {
   constructor(

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -10101,7 +10101,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Unused Lessons</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.html</context>
-          <context context-type="linenumber">29</context>
+          <context context-type="linenumber">26</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.html</context>
@@ -10116,7 +10116,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>There are no Unused Lessons</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.html</context>
-          <context context-type="linenumber">30</context>
+          <context context-type="linenumber">28</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.html</context>
@@ -10142,7 +10142,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>There are no Unused Steps</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.html</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">57</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.html</context>