-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Authoring): Convert choose simulation to Angular
- Loading branch information
1 parent
e784b2a
commit 078518f
Showing
11 changed files
with
362 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <h5 i18n>Interactive Simulation</h5> | ||
| <p i18n> | ||
| Select from a curated library of interactive simulations addressing various science topics. | ||
| </p> | ||
| <div fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="10px"> | ||
| <mat-form-field> | ||
| <mat-label i18n>Filter by Topic</mat-label> | ||
| <mat-select [(ngModel)]="selectedSubjects" (ngModelChange)="filter()" multiple> | ||
| <mat-option [value]="subject" *ngFor="let subject of subjects">{{ subject }}</mat-option> | ||
| </mat-select> | ||
| </mat-form-field> | ||
| <mat-form-field> | ||
| <mat-label i18n>Search</mat-label> | ||
| <input matInput [(ngModel)]="searchText" (ngModelChange)="filter()" /> | ||
| </mat-form-field> | ||
| <button | ||
| mat-icon-button | ||
| (click)="clearFilters()" | ||
| *ngIf="searchText || selectedSubjects.length" | ||
| aria-label="Clear All" | ||
| i18n-aria-label | ||
| matTooltip="Clear All" | ||
| matTooltipPosition="above" | ||
| i18n-matTooltip | ||
| > | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| <span class="num-items-found-message" i18n> {{ getNumItemsFound() }} Item(s) Found </span> | ||
| </div> | ||
| <card-selector | ||
| *ngIf="project != null" | ||
| [items]="filteredNodes" | ||
| [previewProjectUrl]="project.previewProjectURL" | ||
| (itemSelected)="itemSelected($event)" | ||
| > | ||
| </card-selector> | ||
| <hr /> | ||
| <div fxLayout="row" fxLayoutGap="20px"> | ||
| <button mat-raised-button color="primary" (click)="back()" aria-label="Back" i18n-aria-label i18n> | ||
| Back | ||
| </button> | ||
| <span fxFlex></span> | ||
| <button | ||
| mat-raised-button | ||
| color="primary" | ||
| (click)="cancel()" | ||
| aria-label="Cancel" | ||
| i18n-arial-label | ||
| i18n | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button | ||
| mat-raised-button | ||
| color="primary" | ||
| [disabled]="selectedNode == null" | ||
| (click)="next()" | ||
| aria-label="Next" | ||
| i18n-aria-label | ||
| i18n | ||
| > | ||
| Next | ||
| </button> | ||
| </div> |
3 changes: 3 additions & 0 deletions
3
src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .num-items-found-message { | ||
| margin-top: 14px; | ||
| } |
49 changes: 49 additions & 0 deletions
49
src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { ChooseSimulationComponent } from './choose-simulation.component'; | ||
| import { HttpClientTestingModule } from '@angular/common/http/testing'; | ||
| import { UpgradeModule } from '@angular/upgrade/static'; | ||
| import { TeacherProjectService } from '../../../services/teacherProjectService'; | ||
| import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module'; | ||
| import { MatFormFieldModule } from '@angular/material/form-field'; | ||
| import { MatSelectModule } from '@angular/material/select'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { MatInputModule } from '@angular/material/input'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
|
|
||
| describe('ChooseSimulationComponent', () => { | ||
| let component: ChooseSimulationComponent; | ||
| let fixture: ComponentFixture<ChooseSimulationComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ChooseSimulationComponent], | ||
| imports: [ | ||
| BrowserAnimationsModule, | ||
| FormsModule, | ||
| HttpClientTestingModule, | ||
| MatFormFieldModule, | ||
| MatInputModule, | ||
| MatSelectModule, | ||
| StudentTeacherCommonServicesModule, | ||
| UpgradeModule | ||
| ], | ||
| providers: [TeacherProjectService] | ||
| }).compileComponents(); | ||
|
|
||
| TestBed.inject(UpgradeModule).$injector = { | ||
| get: () => { | ||
| return { | ||
| go: (route: string, params: any) => {} | ||
| }; | ||
| } | ||
| }; | ||
| TestBed.inject(TeacherProjectService); | ||
| fixture = TestBed.createComponent(ChooseSimulationComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
122 changes: 122 additions & 0 deletions
122
src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { ConfigureStructureComponent } from '../../structure/configure-structure.component'; | ||
| import { TeacherProjectService } from '../../../services/teacherProjectService'; | ||
| import { HttpClient } from '@angular/common/http'; | ||
| import { UpgradeModule } from '@angular/upgrade/static'; | ||
|
|
||
| class SimulationNode { | ||
| metadata = { | ||
| subjects: [] | ||
| }; | ||
| type: string; | ||
| constructor(node: any) { | ||
| Object.assign(this, node); | ||
| } | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'choose-simulation', | ||
| templateUrl: './choose-simulation.component.html', | ||
| styleUrls: ['./choose-simulation.component.scss'] | ||
| }) | ||
| export class ChooseSimulationComponent extends ConfigureStructureComponent { | ||
| allNodes: SimulationNode[] = []; | ||
| filteredNodes: SimulationNode[] = []; | ||
| project: any; | ||
| projectItems: any; | ||
| searchText: string = ''; | ||
| selectedNode: string; | ||
| selectedSubjects: string[] = []; | ||
| simulationProjectId: number; | ||
| subjects: string[] = []; | ||
|
|
||
| constructor( | ||
| http: HttpClient, | ||
| private projectService: TeacherProjectService, | ||
| protected upgrade: UpgradeModule | ||
| ) { | ||
| super(http, upgrade); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.$state = this.upgrade.$injector.get('$state'); | ||
| this.simulationProjectId = this.projectService.getSimulationProjectId(); | ||
| this.showSimulationProject(); | ||
| } | ||
|
|
||
| private showSimulationProject(): void { | ||
| this.projectService.retrieveProjectById(this.simulationProjectId).then((projectJSON) => { | ||
| this.project = projectJSON; | ||
| const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.project); | ||
| this.projectItems = nodeOrderOfProject.nodes.slice(1); // remove root node from consideration | ||
| const allSubjects: string[] = []; | ||
| this.projectItems.forEach((item) => { | ||
| if (item.node.type !== 'group') { | ||
| const simulationNode = new SimulationNode(item.node); | ||
| this.allNodes.push(simulationNode); | ||
| allSubjects.push(...simulationNode.metadata.subjects); | ||
| } | ||
| }); | ||
| this.filteredNodes = this.allNodes; | ||
| this.subjects = Array.from(new Set(allSubjects)).sort(); | ||
| }); | ||
| } | ||
|
|
||
| protected filter(): void { | ||
| this.filteredNodes = this.allNodes.filter((node: SimulationNode) => { | ||
| const isSearchTextFound = this.isSearchTextFound(this.searchText, JSON.stringify(node)); | ||
| if (this.isAnySubjectChosen()) { | ||
| return isSearchTextFound && this.isSubjectFound(this.selectedSubjects, node); | ||
| } | ||
| return isSearchTextFound; | ||
| }); | ||
| } | ||
|
|
||
| private isSearchTextFound(searchText: string, testText: string): boolean { | ||
| return testText.toLowerCase().includes(searchText.toLowerCase()); | ||
| } | ||
|
|
||
| private isAnySubjectChosen(): boolean { | ||
| return this.selectedSubjects.length > 0; | ||
| } | ||
|
|
||
| private isSubjectFound(selectedSubjects: any[], resource: any): boolean { | ||
| for (const subject of selectedSubjects) { | ||
| if (resource.metadata.subjects.includes(subject)) { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| protected clearFilters(): void { | ||
| this.searchText = ''; | ||
| this.selectedSubjects = []; | ||
| this.filter(); | ||
| } | ||
|
|
||
| protected getNumItemsFound(): number { | ||
| return this.filteredNodes.filter((node: SimulationNode) => { | ||
| return node.type != 'group'; | ||
| }).length; | ||
| } | ||
|
|
||
| protected previewNode(node: any): void { | ||
| window.open(`${this.project.previewProjectURL}/${node.id}`); | ||
| } | ||
|
|
||
| protected back(): void { | ||
| this.$state.go('root.at.project.add-node.choose-template'); | ||
| } | ||
|
|
||
| protected next(): void { | ||
| this.$state.go('root.at.project.import-step.choose-location', { | ||
| importFromProjectId: this.simulationProjectId, | ||
| selectedNodes: [this.selectedNode] | ||
| }); | ||
| } | ||
|
|
||
| protected itemSelected(item: any): void { | ||
| this.selectedNode = item; | ||
| } | ||
| } |
13 changes: 11 additions & 2 deletions
13
src/assets/wise5/authoringTool/components/card-selector/card-selector.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/assets/wise5/authoringTool/components/card-selector/card-selector.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.