Skip to content

Commit 2b0760a

Browse files
hirokiterashimahirokiterashima
authored
Merge pull request #2857 from WISE-Community/issue-2854-upgrade-open-response-authoring-to-angular
Upgrade OpenResponseAuthoring to Angular
2 parents 79c3802 + a9961b2 commit 2b0760a

37 files changed

Lines changed: 457 additions & 573 deletions

‎src/main/webapp/site/src/app/authoring-tool/edit-advanced-component/editAdvancedComponentAngularJSController.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,14 @@ export class EditAdvancedComponentAngularJSController {
128128
showSubmitButton: show
129129
});
130130
}
131+
132+
getConnectedComponentType(
133+
{nodeId, componentId}: { nodeId: string, componentId: string }) {
134+
const component = this.ProjectService.getComponentByNodeIdAndComponentId(nodeId, componentId);
135+
if (component != null) {
136+
return component.type;
137+
}
138+
return null;
139+
}
140+
131141
}

‎src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/ru
4141
import { NavItemProgressComponent } from './classroom-monitor/nav-item-progress/nav-item-progress.component';
4242
import { EditHTMLAdvancedComponent } from '../../../wise5/components/html/edit-html-advanced/edit-html-advanced.component';
4343
import { EditOutsideUrlAdvancedComponent } from '../../../wise5/components/outsideURL/edit-outside-url-advanced/edit-outside-url-advanced.component';
44+
import { OpenResponseAuthoring } from '../../../wise5/components/openResponse/open-response-authoring/open-response-authoring.component';
4445

4546
@NgModule({
4647
declarations: [
@@ -64,6 +65,7 @@ import { EditOutsideUrlAdvancedComponent } from '../../../wise5/components/outsi
6465
NavItemProgressComponent,
6566
NodeAdvancedGeneralAuthoringComponent,
6667
NodeAdvancedJsonAuthoringComponent,
68+
OpenResponseAuthoring,
6769
RubricAuthoringComponent,
6870
StatusIconComponent,
6971
StepInfoComponent,

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6123,6 +6123,27 @@
61236123
<context context-type="linenumber">2</context>
61246124
</context-group>
61256125
</trans-unit>
6126+
<trans-unit datatype="html" id="350e893dc35c1ca7a171e2944630e2c8f3f4785a">
6127+
<source>If you want to use rich visuals (images, videos, links, bullets, etc.) in your prompt, use an HTML component above this</source>
6128+
<context-group purpose="location">
6129+
<context context-type="sourcefile">../../wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html</context>
6130+
<context context-type="linenumber">7</context>
6131+
</context-group>
6132+
</trans-unit>
6133+
<trans-unit datatype="html" id="6bc7f2c14cb3141e690735b278591defe07c68fb">
6134+
<source>Prompt</source>
6135+
<context-group purpose="location">
6136+
<context context-type="sourcefile">../../wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html</context>
6137+
<context context-type="linenumber">11</context>
6138+
</context-group>
6139+
</trans-unit>
6140+
<trans-unit datatype="html" id="495b53dee6164e1c3ec7d95ee3527bb23b62a8c2">
6141+
<source>Enter Prompt Here</source>
6142+
<context-group purpose="location">
6143+
<context context-type="sourcefile">../../wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html</context>
6144+
<context context-type="linenumber">15</context>
6145+
</context-group>
6146+
</trans-unit>
61266147
<trans-unit datatype="html" id="92328333ea9c72926ca7c631e9e1c0f081cbf565">
61276148
<source>Edit Unit Rubric</source>
61286149
<context-group purpose="location">

‎src/main/webapp/wise5/authoringTool/components/component-authoring.component.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Directive, Input } from "@angular/core";
2+
import { Subject, Subscription } from "rxjs";
3+
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
4+
import { ConfigService } from "../../services/configService";
5+
import { NodeService } from "../../services/nodeService";
6+
import { TeacherProjectService } from "../../services/teacherProjectService";
7+
8+
@Directive()
9+
export abstract class ComponentAuthoring {
10+
@Input()
11+
nodeId: string;
12+
13+
@Input()
14+
componentId: string;
15+
16+
promptChange: Subject<string> = new Subject<string>();
17+
allowedConnectedComponentTypes: string[];
18+
authoringComponentContent: any;
19+
componentChangedSubscription: Subscription;
20+
componentContent: any;
21+
idToOrder: any;
22+
isDirty: boolean = false;
23+
isPromptVisible: boolean = true;
24+
isSaveButtonVisible: boolean;
25+
isSubmitButtonVisible: boolean;
26+
isSubmitDirty: boolean = false;
27+
showAdvancedAuthoring: boolean = false;
28+
submitCounter: number = 0;
29+
starterStateResponseSubscription: Subscription;
30+
31+
constructor(
32+
protected ConfigService: ConfigService,
33+
protected NodeService: NodeService,
34+
protected ProjectService: TeacherProjectService
35+
) {
36+
37+
this.promptChange
38+
.pipe(debounceTime(1000), distinctUntilChanged())
39+
.subscribe((prompt: string) => {
40+
this.authoringComponentContent.prompt = prompt;
41+
this.authoringViewComponentChanged();
42+
});
43+
}
44+
45+
ngOnInit() {
46+
this.authoringComponentContent = this.ProjectService.getComponentByNodeIdAndComponentId(this.nodeId, this.componentId);
47+
this.resetUI();
48+
this.idToOrder = this.ProjectService.idToOrder;
49+
this.componentChangedSubscription = this.ProjectService.componentChanged$.subscribe(() => {
50+
this.authoringViewComponentChanged();
51+
});
52+
this.starterStateResponseSubscription =
53+
this.NodeService.starterStateResponse$.subscribe((args: any) => {
54+
if (this.isForThisComponent(args)) {
55+
this.saveStarterState(args.starterState);
56+
}
57+
});
58+
}
59+
60+
promptChanged(prompt: string): void {
61+
this.promptChange.next(prompt);
62+
}
63+
64+
authoringViewComponentChanged(): void {
65+
this.resetUI();
66+
this.ProjectService.nodeChanged();
67+
}
68+
69+
resetUI(): void {
70+
this.componentContent = this.ConfigService.replaceStudentNames(
71+
this.ProjectService.injectAssetPaths(this.authoringComponentContent));
72+
this.isSaveButtonVisible = this.componentContent.showSaveButton;
73+
this.isSubmitButtonVisible = this.componentContent.showSubmitButton;
74+
this.isDirty = false;
75+
this.isSubmitDirty = false;
76+
this.submitCounter = 0;
77+
}
78+
79+
isForThisComponent(object: any): boolean {
80+
return object.nodeId == this.nodeId && object.componentId == this.componentId;
81+
}
82+
83+
saveStarterState(starterState: any): void {}
84+
}

‎src/main/webapp/wise5/authoringTool/components/editComponentController.ts‎

Lines changed: 0 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -96,84 +96,6 @@ export abstract class EditComponentController {
9696
});
9797
}
9898

99-
connectedComponentTypeChanged(connectedComponent) {
100-
this.authoringViewComponentChanged();
101-
}
102-
103-
connectedComponentNodeIdChanged(connectedComponent) {
104-
connectedComponent.componentId = null;
105-
connectedComponent.type = null;
106-
this.automaticallySetConnectedComponentComponentIdIfPossible(connectedComponent);
107-
this.authoringViewComponentChanged();
108-
}
109-
110-
connectedComponentComponentIdChanged(connectedComponent) {
111-
this.automaticallySetConnectedComponentTypeIfPossible(connectedComponent);
112-
this.authoringViewComponentChanged();
113-
}
114-
115-
isConnectedComponentTypeAllowed(componentType: string) {
116-
return this.allowedConnectedComponentTypes.includes(componentType);
117-
}
118-
119-
addConnectedComponent() {
120-
this.addConnectedComponentAndSetComponentIdIfPossible();
121-
this.authoringViewComponentChanged();
122-
}
123-
124-
addConnectedComponentAndSetComponentIdIfPossible() {
125-
const connectedComponent = this.createConnectedComponent();
126-
if (this.authoringComponentContent.connectedComponents == null) {
127-
this.authoringComponentContent.connectedComponents = [];
128-
}
129-
this.authoringComponentContent.connectedComponents.push(connectedComponent);
130-
this.automaticallySetConnectedComponentComponentIdIfPossible(connectedComponent);
131-
}
132-
133-
automaticallySetConnectedComponentComponentIdIfPossible(connectedComponent) {
134-
let numberOfAllowedComponents = 0;
135-
let allowedComponent = null;
136-
for (const component of this.ProjectService.getComponentsByNodeId(connectedComponent.nodeId)) {
137-
if (this.isConnectedComponentTypeAllowed(component.type) &&
138-
component.id != this.componentId) {
139-
numberOfAllowedComponents += 1;
140-
allowedComponent = component;
141-
}
142-
}
143-
if (numberOfAllowedComponents === 1) {
144-
connectedComponent.componentId = allowedComponent.id;
145-
connectedComponent.type = 'importWork';
146-
}
147-
this.automaticallySetConnectedComponentTypeIfPossible(connectedComponent);
148-
}
149-
150-
automaticallySetConnectedComponentTypeIfPossible(connectedComponent) {
151-
if (connectedComponent.componentId != null) {
152-
connectedComponent.type = 'importWork';
153-
}
154-
this.automaticallySetConnectedComponentFieldsIfPossible(connectedComponent);
155-
}
156-
157-
automaticallySetConnectedComponentFieldsIfPossible(connectedComponent) {
158-
}
159-
160-
createConnectedComponent() {
161-
return {
162-
nodeId: this.nodeId,
163-
componentId: null,
164-
type: null
165-
};
166-
}
167-
168-
deleteConnectedComponent(index) {
169-
if (confirm(this.$translate('areYouSureYouWantToDeleteThisConnectedComponent'))) {
170-
if (this.authoringComponentContent.connectedComponents != null) {
171-
this.authoringComponentContent.connectedComponents.splice(index, 1);
172-
}
173-
this.authoringViewComponentChanged();
174-
}
175-
}
176-
17799
getNodePositionAndTitleByNodeId(nodeId) {
178100
return this.ProjectService.getNodePositionAndTitleByNodeId(nodeId);
179101
}
@@ -186,15 +108,6 @@ export abstract class EditComponentController {
186108
return this.ProjectService.getComponentsByNodeId(nodeId);
187109
}
188110

189-
getConnectedComponentType(
190-
{nodeId, componentId}: { nodeId: string, componentId: string }) {
191-
const component = this.ProjectService.getComponentByNodeIdAndComponentId(nodeId, componentId);
192-
if (component != null) {
193-
return component.type;
194-
}
195-
return null;
196-
}
197-
198111
isForThisComponent(object) {
199112
return this.nodeId == object.nodeId && this.componentId == object.componentId;
200113
}

‎src/main/webapp/wise5/authoringTool/components/preview-component/previewComponent.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import { NodeService } from "../../../services/nodeService";
2+
import { ProjectService } from "../../../services/projectService";
23

34
class PreviewComponentController {
45

56
componentContent: any;
67
componentId: string;
78
nodeId: string;
89

9-
static $inject = ['$scope', '$compile', '$element', 'NodeService'];
10+
static $inject = ['$scope', '$compile', '$element', 'NodeService', 'ProjectService'];
1011

1112
constructor(private $scope: any, private $compile: any, private $element: any,
12-
private NodeService: NodeService) {
13+
private NodeService: NodeService, private ProjectService: ProjectService) {
1314
}
1415

1516
$onInit() {
1617
this.$scope.mode = 'authoringComponentPreview';
17-
this.$scope.componentContent = this.componentContent;
1818
this.$scope.componentTemplatePath =
1919
this.NodeService.getComponentTemplatePath(this.componentContent.type);
2020
this.$scope.nodeId = this.nodeId;
2121
this.$scope.type = this.componentContent.type;
2222
this.$scope.$watch(
23-
() => { return this.componentContent; },
2423
() => {
25-
this.$scope.componentContent = this.componentContent;
24+
return this.componentContent;
25+
},
26+
() => {
27+
this.$scope.componentContent =
28+
this.ProjectService.injectAssetPaths(this.componentContent);
2629
this.compileComponent();
27-
});
30+
},
31+
true);
2832
}
2933

3034
compileComponent() {

‎src/main/webapp/wise5/authoringTool/node/node.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,12 @@ <h6 ng-if="projectController.isGroupNode(nodeAuthoringController.node.id)">{{ ::
188188
<summary-authoring ng-switch-when="Summary" node-id='{{nodeAuthoringController.nodeId}}' component-id='{{component.id}}'></summary-authoring>
189189
<table-authoring ng-switch-when="Table" node-id='{{nodeAuthoringController.nodeId}}' component-id='{{component.id}}'></table-authoring>
190190
</ng-content>
191+
<div ng-style='{"border": "5px solid black"}'>
192+
<div ng-style='{"padding-top": "20px", "padding-left": "20px"}'>
193+
<h5>{{ ::'studentPreview' | translate }}</h5>
194+
</div>
195+
<preview-component node-id='{{nodeAuthoringController.nodeId}}' component-content='component'/>
196+
</div>
191197
<md-divider ng-if='!$last'></md-divider>
192198
</div>
193199
</div>

‎src/main/webapp/wise5/components/animation/authoring.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -509,10 +509,4 @@ <h6>{{ ::'animation.objects' | translate }}</h6>
509509
</div>
510510
</div>
511511
</div>
512-
<div ng-style='{"border": "5px solid black", "padding": "20px"}'>
513-
<div>
514-
<h5>{{ ::'studentPreview' | translate }}</h5>
515-
</div>
516-
<preview-component component-content='animationController.componentContent'/>
517-
</div>
518512
</div>

‎src/main/webapp/wise5/components/audioOscillator/authoring.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -190,10 +190,4 @@
190190
</md-input-container>
191191
</div>
192192
</div>
193-
<div ng-style='{"border": "5px solid black", "padding": "20px"}'>
194-
<div>
195-
<h5>{{ 'studentPreview' | translate }}</h5>
196-
</div>
197-
<preview-component component-content='audioOscillatorController.componentContent'/>
198-
</div>
199193
</div>

‎src/main/webapp/wise5/components/conceptMap/authoring.html‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -429,11 +429,4 @@ <h6>{{ ::'conceptMap.links' | translate }}</h6>
429429
</md-button>
430430
</div>
431431
</div>
432-
<div ng-style='{"border": "5px solid black"}'>
433-
<div ng-style='{"padding-top": "20px", "padding-left": "20px"}'>
434-
<h5>{{ ::'studentPreview' | translate }}</h5>
435-
</div>
436-
<preview-component component-content='conceptMapController.componentContent'
437-
node-id='{{conceptMapController.nodeId}}'/>
438-
</div>
439432
</div>

0 commit comments

Comments
 (0)