Skip to content

Commit 4c048c2

Browse files
hirokiterashimahirokiterashima
committed
Extract component json authoring to new Angular component. #2824 
1 parent 1c9164a commit 4c048c2

22 files changed

Lines changed: 162 additions & 383 deletions

File tree

‎src/main/webapp/site/src/app/authoring-tool/edit-component-json/edit-component-json.component.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div>
2+
<label class='node__label--vertical-alignment' i18n>JSON</label>
3+
<button mat-button class='topButton mat-raised-button mat-primary'
4+
(click)="toggleJSONView()"
5+
matTooltip="Show JSON" i18n-matTooltip matTooltipPosition="above">
6+
<mat-icon>code</mat-icon>
7+
</button>
8+
</div>
9+
<div *ngIf="showJSONAuthoring" fxLayout="column" fxLayoutGap="8px">
10+
<span i18n>Close the JSON view to save the changes</span>
11+
<mat-form-field fxFlex appearance="outline">
12+
<mat-label i18n>Edit Component JSON</mat-label>
13+
<textarea class="mat-body-1" matInput cdkTextareaAutosize [(ngModel)]="componentContentJSONString"
14+
(ngModelChange)='jsonChanged.next($event)'></textarea>
15+
</mat-form-field>
16+
</div>

‎src/main/webapp/site/src/app/authoring-tool/edit-component-json/edit-component-json.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
div {
2+
margin-bottom: 10px;
3+
}

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import * as angular from 'angular';
2+
import { Component, Input } from "@angular/core";
3+
import { UpgradeModule } from "@angular/upgrade/static";
4+
import { NotificationService } from "../../../../../wise5/services/notificationService";
5+
import { TeacherProjectService } from '../../../../../wise5/services/teacherProjectService';
6+
import { Subject, Subscription } from 'rxjs';
7+
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
8+
9+
@Component({
10+
selector: 'edit-component-json',
11+
templateUrl: 'edit-component-json.component.html',
12+
styleUrls: ['edit-component-json.component.scss']
13+
})
14+
export class EditComponentJsonComponent {
15+
16+
validComponentContentJSONString: string;
17+
componentContentJSONString: string;
18+
@Input()
19+
componentId: string;
20+
@Input()
21+
nodeId: string;
22+
showJSONAuthoring: boolean = false;
23+
jsonChanged: Subject<string> = new Subject<string>();
24+
jsonChangedSubscription: Subscription;
25+
26+
constructor(private upgrade: UpgradeModule, private NotificationService: NotificationService,
27+
private ProjectService: TeacherProjectService) {
28+
}
29+
30+
ngOnInit() {
31+
const authoringComponentContent = this.ProjectService.getComponentByNodeIdAndComponentId(
32+
this.nodeId, this.componentId);
33+
this.componentContentJSONString = angular.toJson(authoringComponentContent, 4);
34+
this.jsonChangedSubscription = this.jsonChanged
35+
.pipe(
36+
debounceTime(1000),
37+
distinctUntilChanged()
38+
)
39+
.subscribe(() => {
40+
if (this.isJSONValid()) {
41+
this.rememberRecentValidJSON();
42+
this.NotificationService.showJSONValidMessage();
43+
} else {
44+
this.NotificationService.showJSONInvalidMessage();
45+
}
46+
});
47+
}
48+
49+
ngOnDestory() {
50+
this.jsonChangedSubscription.unsubscribe();
51+
}
52+
53+
toggleJSONView(): void {
54+
if (this.showJSONAuthoring) {
55+
if (this.isJSONValid()) {
56+
this.saveChanges();
57+
this.showJSONAuthoring = false;
58+
} else {
59+
const doRollback =
60+
confirm(this.upgrade.$injector.get('$filter')('translate')('jsonInvalidErrorMessage'));
61+
if (doRollback) {
62+
this.rollbackToRecentValidJSON();
63+
this.saveChanges();
64+
}
65+
}
66+
} else {
67+
this.showJSONAuthoring = true;
68+
this.rememberRecentValidJSON();
69+
}
70+
}
71+
72+
isJSONValid(): boolean {
73+
try {
74+
angular.fromJson(this.componentContentJSONString);
75+
return true;
76+
} catch (e) {
77+
return false;
78+
}
79+
}
80+
81+
saveChanges(): void {
82+
try {
83+
const editedComponentContent = angular.fromJson(this.componentContentJSONString);
84+
this.ProjectService.replaceComponent(this.nodeId, this.componentId, editedComponentContent);
85+
this.ProjectService.componentChanged();
86+
} catch(e) {
87+
this.NotificationService.showJSONInvalidMessage();
88+
}
89+
}
90+
91+
rememberRecentValidJSON(): void {
92+
this.validComponentContentJSONString = this.componentContentJSONString;
93+
}
94+
95+
rollbackToRecentValidJSON(): void {
96+
this.componentContentJSONString = this.validComponentContentJSONString;
97+
}
98+
}

‎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
@@ -29,6 +29,7 @@ import { WorkgroupInfoComponent } from '../../../wise5/classroomMonitor/classroo
2929
import { NodeAdvancedGeneralAuthoringComponent } from '../../../wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component';
3030
import { WiseAuthoringTinymceEditorComponent } from '../../../wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
3131
import { EditComponentRubricComponent } from './authoring-tool/edit-component-rubric/edit-component-rubric.component';
32+
import { EditComponentJsonComponent } from './authoring-tool/edit-component-json/edit-component-json.component';
3233

3334
@NgModule({
3435
declarations: [
@@ -39,6 +40,7 @@ import { EditComponentRubricComponent } from './authoring-tool/edit-component-ru
3940
ChooseNewComponentLocation,
4041
ComponentNewWorkBadgeComponent,
4142
EditComponentRubricComponent,
43+
EditComponentJsonComponent,
4244
ManageStudentsComponent,
4345
MilestoneReportDataComponent,
4446
NodeAdvancedGeneralAuthoringComponent,

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5789,6 +5789,10 @@
57895789
<context context-type="sourcefile">../../wise5/authoringTool/advanced/advanced-project-authoring.component.html</context>
57905790
<context context-type="linenumber">7</context>
57915791
</context-group>
5792+
<context-group purpose="location">
5793+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5794+
<context context-type="linenumber">5</context>
5795+
</context-group>
57925796
</trans-unit>
57935797
<trans-unit datatype="html" id="a7ff0a41fdb9b51a30db6bed1494c740274cbb84">
57945798
<source>Download Unit</source>
@@ -5974,6 +5978,27 @@
59745978
<context context-type="linenumber">5</context>
59755979
</context-group>
59765980
</trans-unit>
5981+
<trans-unit datatype="html" id="7ad24bfc056ad2a41aa93fbfd75ec6765060606f">
5982+
<source>JSON</source>
5983+
<context-group purpose="location">
5984+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5985+
<context context-type="linenumber">2</context>
5986+
</context-group>
5987+
</trans-unit>
5988+
<trans-unit datatype="html" id="d1ee280fdc6bfc1ea2be84a9c2e38d0a69f432c7">
5989+
<source>Close the JSON view to save the changes</source>
5990+
<context-group purpose="location">
5991+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5992+
<context context-type="linenumber">10</context>
5993+
</context-group>
5994+
</trans-unit>
5995+
<trans-unit datatype="html" id="5d92fa48c74344c46842dca7fb8d35e009d7f5fb">
5996+
<source>Edit Component JSON</source>
5997+
<context-group purpose="location">
5998+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5999+
<context context-type="linenumber">12</context>
6000+
</context-group>
6001+
</trans-unit>
59776002
<trans-unit datatype="html" id="bfab7f41cfc32a926c55987d6a9c3349ae417131">
59786003
<source> Show Save Button </source>
59796004
<context-group purpose="location">

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

Lines changed: 0 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,17 @@ export abstract class EditComponentController {
1212
$translate: any;
1313
allowedConnectedComponentTypes: any[];
1414
authoringComponentContent: any;
15-
authoringComponentContentJSONString: string;
16-
authoringValidComponentContentJSONString: string;
1715
componentChangedSubscription: Subscription;
1816
componentContent: any;
1917
componentId: string;
2018
idToOrder: any;
2119
isDirty: boolean = false;
22-
isJSONStringChanged: boolean = false;
2320
isPromptVisible: boolean = true;
2421
isSaveButtonVisible: boolean;
2522
isSubmitButtonVisible: boolean;
2623
isSubmitDirty: boolean = false;
2724
nodeId: string;
2825
showAdvancedAuthoring: boolean = false;
29-
showJSONAuthoring: boolean = false;
3026
submitCounter: number = 0;
3127
starterStateResponseSubscription: Subscription;
3228
showAdvancedAuthoringSubscription: Subscription;
@@ -46,7 +42,6 @@ export abstract class EditComponentController {
4642
this.resetUI();
4743
this.idToOrder = this.ProjectService.idToOrder;
4844
this.$translate = this.$filter('translate');
49-
this.updateAdvancedAuthoringView();
5045
this.componentChangedSubscription = this.ProjectService.componentChanged$.subscribe(() => {
5146
this.authoringViewComponentChanged();
5247
});
@@ -71,74 +66,8 @@ export abstract class EditComponentController {
7166
this.showAdvancedAuthoringSubscription.unsubscribe();
7267
}
7368

74-
showJSONButtonClicked(): void {
75-
if (this.showJSONAuthoring) {
76-
if (this.isJSONValid()) {
77-
this.saveJSONAuthoringViewChanges();
78-
this.toggleJSONAuthoringView();
79-
this.NotificationService.hideJSONValidMessage();
80-
} else {
81-
let isRollback = confirm(this.$translate('jsonInvalidErrorMessage'));
82-
if (isRollback) {
83-
this.toggleJSONAuthoringView();
84-
this.NotificationService.hideJSONValidMessage();
85-
this.isJSONStringChanged = false;
86-
this.rollbackToRecentValidJSON();
87-
this.saveJSONAuthoringViewChanges();
88-
}
89-
}
90-
} else {
91-
this.toggleJSONAuthoringView();
92-
this.rememberRecentValidJSON();
93-
}
94-
}
95-
96-
isJSONValid(): boolean {
97-
try {
98-
angular.fromJson(this.authoringComponentContentJSONString);
99-
return true;
100-
} catch (e) {
101-
return false;
102-
}
103-
}
104-
105-
saveJSONAuthoringViewChanges(): void {
106-
try {
107-
const editedComponentContent = angular.fromJson(this.authoringComponentContentJSONString);
108-
this.ProjectService.replaceComponent(this.nodeId, this.componentId, editedComponentContent);
109-
this.componentContent = editedComponentContent;
110-
this.ProjectService.nodeChanged();
111-
this.isJSONStringChanged = false;
112-
} catch(e) {
113-
alert(this.$translate('saveErrorAdvancedAuthoring'));
114-
}
115-
}
116-
117-
toggleJSONAuthoringView(): void {
118-
this.showJSONAuthoring = !this.showJSONAuthoring;
119-
}
120-
121-
authoringJSONChanged(): void {
122-
this.isJSONStringChanged = true;
123-
if (this.isJSONValid()) {
124-
this.NotificationService.showJSONValidMessage();
125-
this.rememberRecentValidJSON();
126-
} else {
127-
this.NotificationService.showJSONInvalidMessage();
128-
}
129-
}
130-
131-
rememberRecentValidJSON(): void {
132-
this.authoringValidComponentContentJSONString = this.authoringComponentContentJSONString;
133-
}
134-
135-
rollbackToRecentValidJSON(): void {
136-
this.authoringComponentContentJSONString = this.authoringValidComponentContentJSONString;
137-
}
138-
13969
authoringViewComponentChanged(): void {
14070
this.resetUI();
141-
this.updateAdvancedAuthoringView();
14271
this.ProjectService.nodeChanged();
14372
}
14473

@@ -152,10 +81,6 @@ export abstract class EditComponentController {
15281
this.submitCounter = 0;
15382
}
15483

155-
updateAdvancedAuthoringView(): void {
156-
this.authoringComponentContentJSONString = angular.toJson(this.authoringComponentContent, 4);
157-
}
158-
15984
openAssetChooser(params: any): any {
16085
return this.ProjectAssetService.openAssetChooser(params).then(
16186
(data: any) => { return this.assetSelected(data) }

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -185,28 +185,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
185185
</div>
186186
</div>
187187
</div>
188-
<div>
189-
<label class='node__label--vertical-alignment'>{{ ::'json' | translate }}</label>
190-
<md-button class='topButton md-raised md-primary'
191-
ng-click='animationController.showJSONButtonClicked()'>
192-
<md-icon>code</md-icon>
193-
<md-tooltip md-direction='top'
194-
class='projectButtonTooltip'>
195-
{{ ::'SHOW_JSON' | translate }}
196-
</md-tooltip>
197-
</md-button>
198-
<span ng-if='animationController.isJSONStringChanged'>
199-
{{ ::'closeTheJSONViewToSaveTheChanges' | translate }}
200-
</span>
201-
<div ng-if='animationController.showJSONAuthoring'>
202-
<md-input-container style='width: 100%;'>
203-
<textarea ng-model='animationController.authoringComponentContentJSONString'
204-
style='width: 90%; border: 1px solid black;'
205-
ng-change='animationController.authoringJSONChanged()'>
206-
</textarea>
207-
</md-input-container>
208-
</div>
209-
</div>
188+
<edit-component-json [node-id]="animationController.nodeId" [component-id]="animationController.componentId"></edit-component-json>
210189
</div>
211190
<br/>
212191
</div>

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -181,28 +181,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
181181
</div>
182182
</div>
183183
</div>
184-
<div>
185-
<label class='node__label--vertical-alignment'>{{ 'json' | translate }}</label>
186-
<md-button class='topButton md-raised md-primary'
187-
ng-click='audioOscillatorController.showJSONButtonClicked()'>
188-
<md-icon>code</md-icon>
189-
<md-tooltip md-direction='top'
190-
class='projectButtonTooltip'>
191-
{{ 'SHOW_JSON' | translate }}
192-
</md-tooltip>
193-
</md-button>
194-
<span ng-if='audioOscillatorController.isJSONStringChanged'>
195-
{{ 'closeTheJSONViewToSaveTheChanges' | translate }}
196-
</span>
197-
<div ng-if='audioOscillatorController.showJSONAuthoring'>
198-
<md-input-container style='width: 100%;'>
199-
<textarea ng-model='audioOscillatorController.authoringComponentContentJSONString'
200-
style='width: 90%; border: 1px solid black;'
201-
ng-change='audioOscillatorController.authoringJSONChanged()'>
202-
</textarea>
203-
</md-input-container>
204-
</div>
205-
</div>
184+
<edit-component-json [node-id]="audioOscillatorController.nodeId" [component-id]="audioOscillatorController.componentId"></edit-component-json>
206185
</div>
207186
<br/>
208187
<div ng-if='!audioOscillatorController.authoringComponentContent.showPreviousWork'>

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -282,28 +282,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
282282
</div>
283283
</div>
284284
</div>
285-
<div>
286-
<label class='node__label--vertical-alignment'>{{ ::'json' | translate }}</label>
287-
<md-button class='topButton md-raised md-primary'
288-
ng-click='conceptMapController.showJSONButtonClicked()'>
289-
<md-icon>code</md-icon>
290-
<md-tooltip md-direction='top'
291-
class='projectButtonTooltip'>
292-
{{ ::'SHOW_JSON' | translate }}
293-
</md-tooltip>
294-
</md-button>
295-
<span ng-if='conceptMapController.isJSONStringChanged'>
296-
{{ ::'closeTheJSONViewToSaveTheChanges' | translate }}
297-
</span>
298-
<div ng-if='conceptMapController.showJSONAuthoring'>
299-
<md-input-container style='width: 100%;'>
300-
<textarea ng-model='conceptMapController.authoringComponentContentJSONString'
301-
style='width: 90%; border: 1px solid black;'
302-
ng-change='conceptMapController.authoringJSONChanged()'>
303-
</textarea>
304-
</md-input-container>
305-
</div>
306-
</div>
285+
<edit-component-json [node-id]="conceptMapController.nodeId" [component-id]="conceptMapController.componentId"></edit-component-json>
307286
</div>
308287
<br/>
309288
<div ng-if='!conceptMapController.authoringComponentContent.showPreviousWork'>

0 commit comments

Comments
 (0)