chore(Authoring): Convert structure controllers to Angular (#1331)

src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.html

@@ -0,0 +1,34 @@
+<h5 i18n>Choose the location for your new lesson:</h5>
+<ng-container *ngFor="let group of groupNodes">
+  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px" [ngSwitch]="group.order">
+    <ng-container *ngSwitchCase="0">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="insertAsFirstActivity()"
+        matTooltip="Insert As First Lesson"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>call_received</mat-icon>
+      </button>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+      <h6>{{ getNodePositionById(group.id) }}: {{ getNodeTitle(group.id) }}</h6>
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="insertAfterGroup(group.id)"
+        matTooltip="Insert After"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>subdirectory_arrow_left</mat-icon>
+      </button>
+    </ng-container>
+  </div>
+</ng-container>
+<hr />
+<button mat-button color="primary" (click)="cancel()" aria-label="Cancel" i18n-aria-label i18n>
+  Cancel
+</button>

src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.scss

@@ -0,0 +1,3 @@
+.mat-icon {
+  margin: 0px;
+}

src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChooseStructureLocationComponent } from './choose-structure-location.component';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { MatIconModule } from '@angular/material/icon';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('ChooseStructureLocationComponent', () => {
+  let component: ChooseStructureLocationComponent;
+  let fixture: ComponentFixture<ChooseStructureLocationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChooseStructureLocationComponent],
+      imports: [
+        HttpClientTestingModule,
+        MatIconModule,
+        StudentTeacherCommonServicesModule,
+        UpgradeModule
+      ],
+      providers: [TeacherProjectService]
+    }).compileComponents();
+
+    TestBed.inject(UpgradeModule).$injector = {
+      get: (param: string) => {
+        if (param === '$state') {
+          return { go: (route: string, params: any) => {} };
+        } else if (param === '$stateParams') {
+          return {
+            projectId: 1,
+            structure: {
+              nodes: [],
+              group: {
+                id: 'group2'
+              }
+            }
+          };
+        }
+      }
+    };
+    spyOn(TestBed.inject(TeacherProjectService), 'getGroupNodesIdToOrder').and.returnValue({
+      group0: { order: 0 },
+      group1: { order: 1 }
+    });
+    fixture = TestBed.createComponent(ChooseStructureLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.ts

@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@Component({
+  selector: 'choose-structure-location',
+  templateUrl: './choose-structure-location.component.html',
+  styleUrls: ['./choose-structure-location.component.scss']
+})
+export class ChooseStructureLocationComponent {
+  groupNodes: any;
+  projectId: number;
+  $state: any;
+  structure: any;
+
+  constructor(private projectService: TeacherProjectService, private upgrade: UpgradeModule) {}
+
+  ngOnInit(): void {
+    this.$state = this.upgrade.$injector.get('$state');
+    const stateParams = this.upgrade.$injector.get('$stateParams');
+    this.projectId = stateParams.projectId;
+    this.structure = this.injectUniqueIds(stateParams.structure);
+    const groupNodesIdToOrder = this.projectService.getGroupNodesIdToOrder();
+    this.groupNodes = Object.entries(groupNodesIdToOrder).map((entry: any) => {
+      return { id: entry[0], order: entry[1].order };
+    });
+    this.groupNodes.sort((a: any, b: any) => {
+      return a.order - b.order;
+    });
+  }
+
+  protected insertAsFirstActivity(): void {
+    this.addNodesToProject(this.structure.nodes);
+    this.projectService.createNodeInside(
+      this.structure.group,
+      this.projectService.getStartGroupId()
+    );
+    this.saveAndGoBackToProjectHome();
+  }
+
+  protected insertAfterGroup(groupId: string): void {
+    this.addNodesToProject(this.structure.nodes);
+    this.projectService.createNodeAfter(this.structure.group, groupId);
+    this.saveAndGoBackToProjectHome();
+  }
+
+  private addNodesToProject(nodes: any[]): void {
+    for (const node of nodes) {
+      this.projectService.setIdToNode(node.id, node);
+      this.projectService.addNode(node);
+      this.projectService.applicationNodes.push(node);
+    }
+  }
+
+  private saveAndGoBackToProjectHome(): void {
+    this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
+      this.projectService.refreshProject();
+      this.$state.go('root.at.project');
+    });
+  }
+
+  private injectUniqueIds(structure: any): void {
+    structure.group.id = this.projectService.getNextAvailableGroupId();
+    const oldToNewIds = this.projectService.getOldToNewIds(structure.nodes);
+    return this.projectService.replaceOldIds(structure, oldToNewIds);
+  }
+
+  protected getNodeTitle(nodeId: string): string {
+    return this.projectService.getNodeTitle(nodeId);
+  }
+
+  protected getNodePositionById(nodeId: string): string {
+    return this.projectService.getNodePositionById(nodeId);
+  }
+
+  protected cancel(): void {
+    this.$state.go('root.at.project');
+  }
+}

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.html

@@ -0,0 +1,37 @@
+<h5 i18n>Choose a Lesson Structure</h5>
+<p i18n>
+  Based on our work with classroom teachers, we have developed several lesson structures that follow
+  the
+  <a href="https://wise.berkeley.edu/about#ki" target="_blank">Knowledge Integration</a> framework
+  and help teachers productively integrate open educational resources (OERs) into their curricula.
+  These structures have also proven useful for developing students' capacity for self-directed
+  learning. We have made the structures very general, so that teachers can customize and incorporate
+  them into any WISE unit to strengthen support for knowledge integration and self-directed
+  learning.
+</p>
+<div fxLayout="row wrap" fxLayoutAlign="start stretch">
+  <mat-card *ngFor="let structure of structures" class="structure-card">
+    <mat-card-title>
+      <h6 class="center">{{ structure.label }}</h6>
+    </mat-card-title>
+    <mat-card-content fxLayoutAlign="center center">
+      <mat-icon>{{ structure.icon }}</mat-icon>
+    </mat-card-content>
+    <mat-card-actions fxLayout="column" fxLayoutAlign="start">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="chooseStructure(structure.route)"
+        aria-label="Choose Structure"
+        i18n-aria-label
+        i18n
+      >
+        Select
+      </button>
+    </mat-card-actions>
+  </mat-card>
+</div>
+<hr />
+<button mat-button color="primary" (click)="cancel()" aria-label="Cancel" i18n-aria-label i18n>
+  Cancel
+</button>

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.scss

@@ -0,0 +1,4 @@
+.structure-card {
+  width: 280px;
+  margin: 8px;
+}

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChooseStructureComponent } from './choose-structure.component';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+describe('ChooseStructureComponent', () => {
+  let component: ChooseStructureComponent;
+  let fixture: ComponentFixture<ChooseStructureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChooseStructureComponent],
+      imports: [MatCardModule, MatIconModule, UpgradeModule]
+    }).compileComponents();
+
+    TestBed.inject(UpgradeModule).$injector = {
+      get: () => {
+        return {
+          go: (route: string, params: any) => {}
+        };
+      }
+    };
+    fixture = TestBed.createComponent(ChooseStructureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@Component({
+  selector: 'choose-structure',
+  templateUrl: './choose-structure.component.html',
+  styleUrls: ['./choose-structure.component.scss']
+})
+export class ChooseStructureComponent {
+  private $state: any;
+  protected structures = [
+    {
+      label: $localize`Jigsaw`,
+      description: $localize`The Jigsaw KI lesson structure guides students through learning about specific aspects of a science topic of their choice and engages them in collaboration to learn more. Students share their own ideas and reflect on what they learned from their classmates.`,
+      icon: 'extension',
+      route: 'root.at.project.structure.jigsaw'
+    },
+    {
+      label: $localize`Self-Directed Investigation`,
+      description: $localize`The Self-Directed Investigation KI lesson structure helps students ask research questions about a science topic, guides them through refining their initial questions to researchable questions, and supports them in finding and evaluating evidence using online resources of their choice. Students synthesize their findings into a product of your choice.`,
+      icon: 'contact_support',
+      route: 'root.at.project.structure.self-directed-investigation'
+    },
+    {
+      label: $localize`Peer Review & Revision`,
+      description: $localize`The Peer Review & Revision KI lesson structure guides students through writing their own explanation, critiquing explanations of peer learners, and ultimately revising their own initial explanation.`,
+      icon: 'question_answer',
+      route: 'root.at.project.structure.peer-review-and-revision'
+    },
+    {
+      label: $localize`KI Lesson with OER`,
+      description: $localize`The KI Lesson with OER guides you to embed an open educational resource (OER) of your choice in a lesson structure that promotes knowledge integration (KI). The structure suggests different step types that engage students in eliciting their ideas, discovering new ideas through use of the OER, distinguishing among their initial and new ideas, and making connections to form integrated understanding.`,
+      icon: 'autorenew',
+      route: 'root.at.project.structure.ki-cycle-using-oer'
+    }
+  ];
+
+  constructor(private upgrade: UpgradeModule) {}
+
+  ngOnInit(): void {
+    this.$state = this.upgrade.$injector.get('$state');
+  }
+
+  protected chooseStructure(route: string): void {
+    this.$state.go(route);
+  }
+
+  protected cancel(): void {
+    this.$state.go('root.at.project');
+  }
+}