refactor(ChooseImportStepComponent): Convert to standalone component …

…and update template syntax (#1987)
WISE-Community · Nov 13, 2024 · 5e74e65 · 5e74e65
1 parent 19ea561
commit 5e74e65
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 62 deletions.
diff --git a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
@@ -12,37 +12,40 @@ <h5 i18n>Choose the step(s) that you want to import, then select Next.</h5>
     <mat-icon>preview</mat-icon>
   </button>
 </p>
-<div
-  *ngFor="let item of projectIdToOrder"
-  [ngClass]="{
-    groupHeader: item.node.type == 'group',
-    stepHeader: item.node.type != 'group'
-  }"
->
-  <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
-    {{ item.stepNumber }}: {{ item.node.title }}
-  </h6>
-  <div fxLayout="row wrap" fxLayoutGap="8px" *ngIf="item.order != 0 && item.node.type != 'group'">
-    <mat-checkbox name="item" ngDefaultControl [(ngModel)]="item.checked">
-      <span class="step-title">{{ item.stepNumber }}: {{ item.node.title }}</span>
-    </mat-checkbox>
-    <button
-      mat-raised-button
-      color="primary"
-      class="mat-raised-button mat-primary"
-      style="margin-top: -5"
-      (click)="previewNode(item.node)"
-      aria-label="Preview Step"
-      matTooltip="Preview Step"
-      i18n-matTooltip
-      matTooltipPosition="above"
-    >
-      <mat-icon>preview</mat-icon>
-    </button>
+@for (item of projectIdToOrder; track item.order) {
+  <div
+    [ngClass]="{
+      groupHeader: item.node.type == 'group',
+      stepHeader: item.node.type != 'group'
+    }"
+  >
+    @if (item.order != 0 && item.node.type == 'group') {
+      <h6>{{ item.stepNumber }}: {{ item.node.title }}</h6>
+    }
+    @if (item.order != 0 && item.node.type != 'group') {
+      <div fxLayout="row wrap" fxLayoutGap="8px">
+        <mat-checkbox name="item" ngDefaultControl [(ngModel)]="item.checked">
+          <span class="step-title">{{ item.stepNumber }}: {{ item.node.title }}</span>
+        </mat-checkbox>
+        <button
+          mat-raised-button
+          color="primary"
+          class="mat-raised-button mat-primary"
+          style="margin-top: -5"
+          (click)="previewNode(item.node)"
+          aria-label="Preview Step"
+          matTooltip="Preview Step"
+          i18n-matTooltip
+          matTooltipPosition="above"
+        >
+          <mat-icon>preview</mat-icon>
+        </button>
+      </div>
+    }
   </div>
-</div>
+}
 <div class="nav-controls">
-  <mat-divider></mat-divider>
+  <mat-divider />
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
     <button
       mat-button
@@ -64,7 +67,9 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       [disabled]="getSelectedNodesToImport().length == 0 || submitting"
       class="button--progress"
     >
-      <mat-progress-bar *ngIf="submitting" mode="indeterminate"/>
+      @if (submitting) {
+        <mat-progress-bar mode="indeterminate" />
+      }
       <ng-container i18n>Submit</ng-container>
     </button>
   </div>

diff --git a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.ts b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.ts
@@ -1,14 +1,31 @@
 import { Component } from '@angular/core';
-import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ConfigService } from '../../../../assets/wise5/services/configService';
-import { CopyNodesService } from '../../../../assets/wise5/services/copyNodesService';
-import { InsertNodesService } from '../../../../assets/wise5/services/insertNodesService';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
 import { AbstractImportStepComponent } from '../../../../assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component';
-import { InsertFirstNodeInBranchPathService } from '../../../../assets/wise5/services/insertFirstNodeInBranchPathService';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  imports: [
+    CommonModule,
+    FormsModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    RouterModule
+  ],
   selector: 'choose-import-step',
+  standalone: true,
   styleUrls: ['choose-import-step.component.scss', '../../add-content.scss'],
   templateUrl: 'choose-import-step.component.html'
 })
@@ -17,26 +34,6 @@ export class ChooseImportStepComponent extends AbstractImportStepComponent {
   protected projectIdToOrder: any;
   private projectItems: any[] = [];
 
-  constructor(
-    protected configService: ConfigService,
-    protected copyNodesService: CopyNodesService,
-    protected insertFirstNodeInBranchPathService: InsertFirstNodeInBranchPathService,
-    protected insertNodesService: InsertNodesService,
-    protected projectService: TeacherProjectService,
-    protected route: ActivatedRoute,
-    protected router: Router
-  ) {
-    super(
-      configService,
-      copyNodesService,
-      insertFirstNodeInBranchPathService,
-      insertNodesService,
-      projectService,
-      route,
-      router
-    );
-  }
-
   ngOnInit() {
     super.ngOnInit();
     this.projectService.retrieveProjectById(this.importProjectId).then((projectJSON) => {

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,
-    ChooseImportStepComponent,
     ChooseMoveNodeLocationComponent,
     ConcurrentAuthorsMessageComponent,
     ConfigureAutomatedAssessmentComponent,
@@ -95,6 +94,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
     ChooseAutomatedAssessmentComponent,
     ChooseComponentLocationComponent,
     ChooseCopyNodeLocationComponent,
+    ChooseImportStepComponent,
     ChooseImportUnitComponent,
     ChooseNewNodeTemplateComponent,
     ChooseNewComponent,

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -401,7 +401,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">62</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
@@ -1431,7 +1431,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Preview Step</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">37</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
@@ -1442,7 +1442,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Back</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
-          <context context-type="linenumber">52</context>
+          <context context-type="linenumber">55</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
@@ -1485,7 +1485,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> Back </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
-          <context context-type="linenumber">55,57</context>
+          <context context-type="linenumber">58,60</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
@@ -1524,7 +1524,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Submit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
-          <context context-type="linenumber">68</context>
+          <context context-type="linenumber">73</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/contact/contact-form/contact-form.component.html</context>