From c7946663029a9cf68e6a2d790d44e43af33e32e4 Mon Sep 17 00:00:00 2001 From: Geoffrey Kwan Date: Sun, 28 Apr 2024 14:39:57 -0400 Subject: [PATCH] Revert "refactor(Authoring): Create select component component" This reverts commit 1b9b54b2c4f307d5713f0d843c1e2c5b6bbdcf09. --- .../select-component.component.html | 13 ---- .../select-component.component.spec.ts | 29 -------- .../select-component.component.ts | 66 ----------------- .../select-component.harness.ts | 7 -- .../select-step-and-component.component.html | 20 ++++-- ...elect-step-and-component.component.spec.ts | 70 +++++++++---------- .../select-step-and-component.component.ts | 61 +++++++++++++--- .../select-step-and-component.harness.ts | 2 - src/messages.xlf | 8 +-- 9 files changed, 103 insertions(+), 173 deletions(-) delete mode 100644 src/app/authoring-tool/select-component/select-component.component.html delete mode 100644 src/app/authoring-tool/select-component/select-component.component.spec.ts delete mode 100644 src/app/authoring-tool/select-component/select-component.component.ts delete mode 100644 src/app/authoring-tool/select-component/select-component.harness.ts diff --git a/src/app/authoring-tool/select-component/select-component.component.html b/src/app/authoring-tool/select-component/select-component.component.html deleted file mode 100644 index 669893d39b8..00000000000 --- a/src/app/authoring-tool/select-component/select-component.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - Component - - - {{ componentIndex + 1 }}. {{ component.type }} - (This Component) - - - diff --git a/src/app/authoring-tool/select-component/select-component.component.spec.ts b/src/app/authoring-tool/select-component/select-component.component.spec.ts deleted file mode 100644 index e15d4b867cb..00000000000 --- a/src/app/authoring-tool/select-component/select-component.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SelectComponentComponent } from './select-component.component'; -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module'; -import { SelectStepComponent } from '../select-step/select-step.component'; - -describe('SelectComponentComponent', () => { - let component: SelectComponentComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ - BrowserAnimationsModule, - HttpClientTestingModule, - SelectStepComponent, - StudentTeacherCommonServicesModule - ] - }); - fixture = TestBed.createComponent(SelectComponentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/authoring-tool/select-component/select-component.component.ts b/src/app/authoring-tool/select-component/select-component.component.ts deleted file mode 100644 index 04c632c8595..00000000000 --- a/src/app/authoring-tool/select-component/select-component.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatSelectModule } from '@angular/material/select'; -import { ProjectService } from '../../../assets/wise5/services/projectService'; -import { ComponentContent } from '../../../assets/wise5/common/ComponentContent'; - -@Component({ - selector: 'select-component', - templateUrl: './select-component.component.html', - standalone: true, - imports: [CommonModule, FormsModule, MatFormFieldModule, MatSelectModule] -}) -export class SelectComponentComponent { - @Input() allowedComponentTypes: string[] = []; - @Output() componentChangedEvent: EventEmitter = new EventEmitter(); - @Input() componentId: string; - protected components: ComponentContent[] = []; - protected componentToIsAllowed: Map = new Map(); - @Input() nodeId: string; - @Input() thisComponentId: string; - - constructor(private projectService: ProjectService) {} - - ngOnChanges(changes: SimpleChanges): void { - if (changes.nodeId) { - this.nodeId = changes.nodeId.currentValue; - this.componentId = null; - this.calculateComponents(this.nodeId); - this.automaticallySetComponentIfPossible(this.nodeId); - } - } - - private calculateComponents(nodeId: string): void { - this.components = this.projectService.getComponents(nodeId); - for (const component of this.components) { - this.componentToIsAllowed.set( - component.id, - this.allowedComponentTypes.includes(component.type) - ); - } - } - - private automaticallySetComponentIfPossible(nodeId: string): void { - let numAllowedComponents = 0; - let allowedComponent = null; - for (const component of this.projectService.getComponents(nodeId)) { - if ( - this.allowedComponentTypes.includes(component.type) && - component.id !== this.thisComponentId - ) { - numAllowedComponents += 1; - allowedComponent = component; - } - } - if (numAllowedComponents === 1) { - this.componentId = allowedComponent.id; - this.componentChanged(); - } - } - - protected componentChanged(): void { - this.componentChangedEvent.emit(this.componentId); - } -} diff --git a/src/app/authoring-tool/select-component/select-component.harness.ts b/src/app/authoring-tool/select-component/select-component.harness.ts deleted file mode 100644 index 2589c85632c..00000000000 --- a/src/app/authoring-tool/select-component/select-component.harness.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ComponentHarness } from '@angular/cdk/testing'; -import { MatSelectHarness } from '@angular/material/select/testing'; - -export class SelectComponentHarness extends ComponentHarness { - static hostSelector = 'select-component'; - getSelect = this.locatorFor(MatSelectHarness); -} diff --git a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html index 21749632598..57ad6c2a0dc 100644 --- a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html +++ b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html @@ -3,10 +3,16 @@ [nodeId]="referenceComponent.nodeId" (stepChangedEvent)="stepChanged($event)" > - + + Component + + + {{ componentIndex + 1 }}. {{ component.type }} + (This Component) + + + diff --git a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.spec.ts b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.spec.ts index 9138a92bf0b..30630d85a0f 100644 --- a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.spec.ts +++ b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.spec.ts @@ -7,7 +7,9 @@ import { StudentTeacherCommonServicesModule } from '../../student-teacher-common import { SelectStepAndComponentComponent } from './select-step-and-component.component'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatSelectHarness } from '@angular/material/select/testing'; import { SelectStepAndComponentHarness } from './select-step-and-component.harness'; +import { SelectStepComponent } from '../select-step/select-step.component'; let component: SelectStepAndComponentComponent; const componentId1 = 'component1'; @@ -31,14 +33,14 @@ describe('SelectStepAndComponentComponent', () => { HttpClientTestingModule, SelectStepAndComponentComponent, StudentTeacherCommonServicesModule - ] + ], + providers: [ProjectService] }).compileComponents(); fixture = TestBed.createComponent(SelectStepAndComponentComponent); loader = TestbedHarnessEnvironment.loader(fixture); component = fixture.componentInstance; component.referenceComponent = new ReferenceComponent(null, null); component.allowedComponentTypes = ['OpenResponse']; - component.thisComponentId = componentId1; projectService = TestBed.inject(ProjectService); spyOn(projectService, 'getStepNodeIds').and.returnValue(nodeIds); spyOn(projectService, 'getFlattenedProjectAsNodeIds').and.returnValue(nodeIds); @@ -56,45 +58,41 @@ describe('SelectStepAndComponentComponent', () => { SelectStepAndComponentHarness ); }); - selectStep(); + selectComponent(); + stepChanged(); }); -function selectStep() { - describe('selecting a step', () => { - describe('when the step has compnents that can and cannot be selected', () => { - it('disables certain options in the select component', async () => { - setUpThreeComponentsSpy('OpenResponse', 'Graph', 'OpenResponse'); - const selectStepHarness = await harness.getSelectStep(); - const selectStep = await selectStepHarness.getSelect(); - await selectStep.open(); - await selectStep.clickOptions({ text: nodeTitle1 }); - const selectComponentHarness = await harness.getSelectComponent(); - const selectComponent = await selectComponentHarness.getSelect(); - await selectComponent.open(); - const options = await selectComponent.getOptions(); - expect(await options[0].isDisabled()).toBeTrue(); - expect(await options[1].isDisabled()).toBeTrue(); - expect(await options[2].isDisabled()).toBeFalse(); - }); - }); - describe('when the step has no components that can be selected', () => { - it('does not automatically select a component', async () => { - await setComponentsAndCallStepChanged('Draw', 'Graph', 'Table'); - expectReferenceComponentValues(nodeId1, null); - }); +function selectComponent() { + it('should disable certain options in the select component', async () => { + setUpThreeComponentsSpy('OpenResponse', 'Graph', 'OpenResponse'); + component.referenceComponent.nodeId = nodeId1; + component.thisComponentId = componentId1; + component.ngOnInit(); + const selects = await loader.getAllHarnesses(MatSelectHarness); + const selectComponent = selects[1]; + await selectComponent.open(); + const options = await selectComponent.getOptions(); + expect(await options[0].isDisabled()).toBeTrue(); + expect(await options[1].isDisabled()).toBeTrue(); + expect(await options[2].isDisabled()).toBeFalse(); + }); +} + +function stepChanged() { + describe('stepChanged()', () => { + it('should handle step changed when there are no allowed components', async () => { + await setComponentsAndCallStepChanged('Draw', 'Graph', 'Table'); + expectReferenceComponentValues(nodeId1, null); }); - describe('when the step has one component that can be selected', () => { - it('automatically selects the one allowed component', async () => { - await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'Table'); - expectReferenceComponentValues(nodeId1, componentId2); - }); + it('should handle step changed when there is one allowed component', async () => { + await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'Table'); + expectReferenceComponentValues(nodeId1, componentId2); }); - describe('when the step has many components that can be selected', () => { - it('doesn not automatically select a component', async () => { - await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'OpenResponse'); - expectReferenceComponentValues(nodeId1, null); - }); + + it('should handle step changed when there are multiple allowed components', async () => { + await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'OpenResponse'); + expectReferenceComponentValues(nodeId1, null); }); }); } diff --git a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts index 5c20b27f0ce..d1c117f7646 100644 --- a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts +++ b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts @@ -1,33 +1,76 @@ -import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ProjectService } from '../../../assets/wise5/services/projectService'; import { ReferenceComponent } from '../../domain/referenceComponent'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; import { SelectStepComponent } from '../select-step/select-step.component'; -import { SelectComponentComponent } from '../select-component/select-component.component'; @Component({ selector: 'select-step-and-component', templateUrl: './select-step-and-component.component.html', styleUrls: ['./select-step-and-component.component.scss'], standalone: true, - imports: [SelectComponentComponent, SelectStepComponent] + imports: [CommonModule, FormsModule, MatFormFieldModule, MatSelectModule, SelectStepComponent] }) -export class SelectStepAndComponentComponent { +export class SelectStepAndComponentComponent implements OnInit { @Input() allowedComponentTypes: string[] = []; @Output() componentChange: EventEmitter = new EventEmitter(); + protected components: any[] = []; + protected componentToIsAllowed: Map = new Map(); @Input() referenceComponent: ReferenceComponent; @Output() stepChange: EventEmitter = new EventEmitter(); @Input() thisComponentId: string; - constructor(private changeDetector: ChangeDetectorRef) {} + constructor(private projectService: ProjectService) {} + + ngOnInit(): void { + if (this.referenceComponent.nodeId != null) { + this.calculateComponents(this.referenceComponent.nodeId); + if (this.referenceComponent.componentId == null) { + this.automaticallySetComponentIfPossible(this.referenceComponent.nodeId); + } + } + } + + private calculateComponents(nodeId: string): void { + this.components = this.projectService.getComponents(nodeId); + for (const component of this.components) { + this.componentToIsAllowed.set( + component.id, + this.allowedComponentTypes.includes(component.type) + ); + } + } protected stepChanged(nodeId: string): void { this.referenceComponent.nodeId = nodeId; - this.changeDetector.detectChanges(); + this.referenceComponent.componentId = null; + this.automaticallySetComponentIfPossible(nodeId); + this.calculateComponents(nodeId); this.stepChange.emit(this.referenceComponent); } - protected componentChanged(componentId: string): void { - this.referenceComponent.componentId = componentId; - this.changeDetector.detectChanges(); + protected componentChanged(): void { this.componentChange.emit(this.referenceComponent); } + + private automaticallySetComponentIfPossible(nodeId: string): void { + let numAllowedComponents = 0; + let allowedComponent = null; + for (const component of this.projectService.getComponents(nodeId)) { + if ( + this.allowedComponentTypes.includes(component.type) && + component.id !== this.thisComponentId + ) { + numAllowedComponents += 1; + allowedComponent = component; + } + } + if (numAllowedComponents === 1) { + this.referenceComponent.componentId = allowedComponent.id; + this.componentChanged(); + } + } } diff --git a/src/app/authoring-tool/select-step-and-component/select-step-and-component.harness.ts b/src/app/authoring-tool/select-step-and-component/select-step-and-component.harness.ts index 18ccd5a845d..e38ddaf87c8 100644 --- a/src/app/authoring-tool/select-step-and-component/select-step-and-component.harness.ts +++ b/src/app/authoring-tool/select-step-and-component/select-step-and-component.harness.ts @@ -1,9 +1,7 @@ import { ComponentHarness } from '@angular/cdk/testing'; import { SelectStepHarness } from '../select-step/select-step.harness'; -import { SelectComponentHarness } from '../select-component/select-component.harness'; export class SelectStepAndComponentHarness extends ComponentHarness { static hostSelector = 'select-step-and-component'; - getSelectComponent = this.locatorFor(SelectComponentHarness); getSelectStep = this.locatorFor(SelectStepHarness); } diff --git a/src/messages.xlf b/src/messages.xlf index 13be9c72eba..aed0c63c174 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1641,8 +1641,8 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. Component - src/app/authoring-tool/select-component/select-component.component.html - 2 + src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html + 7 src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html @@ -1660,8 +1660,8 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. (This Component) - src/app/authoring-tool/select-component/select-component.component.html - 10 + src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html + 15 src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.html