Skip to content

Commit c4b3011

Browse files
geoffreykwangeoffreykwan
authored
Merge pull request #2825 from WISE-Community/issue-2824-extract-advanced-component-authoring-to-angular-component
Extracted component json and rubric authoring to Angular components
2 parents 60a7473 + 05f7c3f commit c4b3011

27 files changed

Lines changed: 287 additions & 669 deletions

‎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: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
nodeChangedSubscription: Subscription;
21+
@Input()
22+
nodeId: string;
23+
showJSONAuthoring: boolean = false;
24+
jsonChanged: Subject<string> = new Subject<string>();
25+
jsonChangedSubscription: Subscription;
26+
27+
constructor(private upgrade: UpgradeModule, private NotificationService: NotificationService,
28+
private ProjectService: TeacherProjectService) {
29+
}
30+
31+
ngOnInit() {
32+
this.setComponentContentJsonString()
33+
this.jsonChangedSubscription = this.jsonChanged
34+
.pipe(
35+
debounceTime(1000),
36+
distinctUntilChanged()
37+
)
38+
.subscribe(() => {
39+
if (this.isJSONValid()) {
40+
this.rememberRecentValidJSON();
41+
this.NotificationService.showJSONValidMessage();
42+
} else {
43+
this.NotificationService.showJSONInvalidMessage();
44+
}
45+
});
46+
this.nodeChangedSubscription = this.ProjectService.nodeChanged$.subscribe(() => {
47+
this.setComponentContentJsonString();
48+
});
49+
}
50+
51+
ngOnDestory() {
52+
this.jsonChangedSubscription.unsubscribe();
53+
this.nodeChangedSubscription.unsubscribe();
54+
}
55+
56+
setComponentContentJsonString() {
57+
const authoringComponentContent = this.ProjectService.getComponentByNodeIdAndComponentId(
58+
this.nodeId, this.componentId);
59+
this.componentContentJSONString = angular.toJson(authoringComponentContent, 4);
60+
}
61+
62+
toggleJSONView(): void {
63+
if (this.showJSONAuthoring) {
64+
if (this.isJSONValid()) {
65+
this.saveChanges();
66+
this.showJSONAuthoring = false;
67+
} else {
68+
const doRollback =
69+
confirm(this.upgrade.$injector.get('$filter')('translate')('jsonInvalidErrorMessage'));
70+
if (doRollback) {
71+
this.rollbackToRecentValidJSON();
72+
this.saveChanges();
73+
}
74+
}
75+
} else {
76+
this.showJSONAuthoring = true;
77+
this.rememberRecentValidJSON();
78+
}
79+
}
80+
81+
isJSONValid(): boolean {
82+
try {
83+
angular.fromJson(this.componentContentJSONString);
84+
return true;
85+
} catch (e) {
86+
return false;
87+
}
88+
}
89+
90+
saveChanges(): void {
91+
try {
92+
const editedComponentContent = angular.fromJson(this.componentContentJSONString);
93+
this.ProjectService.replaceComponent(this.nodeId, this.componentId, editedComponentContent);
94+
this.ProjectService.componentChanged();
95+
} catch(e) {
96+
this.NotificationService.showJSONInvalidMessage();
97+
}
98+
}
99+
100+
rememberRecentValidJSON(): void {
101+
this.validComponentContentJSONString = this.componentContentJSONString;
102+
}
103+
104+
rollbackToRecentValidJSON(): void {
105+
this.componentContentJSONString = this.validComponentContentJSONString;
106+
}
107+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div>
2+
<label class='node__label--vertical-alignment' i18n>Rubric</label>
3+
<button mat-button class='topButton mat-raised-button mat-primary'
4+
(click)='showRubricAuthoring = !showRubricAuthoring'
5+
matTooltip="Edit Component Rubric" i18n-matTooltip matTooltipPosition="above">
6+
<mat-icon>message</mat-icon>
7+
</button>
8+
</div>
9+
<wise-authoring-tinymce-editor *ngIf='showRubricAuthoring'
10+
[(model)]='rubric'
11+
(modelChange)='rubricChanged()'>
12+
</wise-authoring-tinymce-editor>

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

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

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component, Input } from "@angular/core";
2+
import { ConfigService } from "../../../../../wise5/services/configService";
3+
import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
4+
5+
@Component({
6+
selector: 'edit-component-rubric',
7+
templateUrl: 'edit-component-rubric.component.html',
8+
styleUrls: ['edit-component-rubric.component.scss']
9+
})
10+
export class EditComponentRubricComponent {
11+
12+
@Input()
13+
authoringComponentContent: any;
14+
rubric: string;
15+
showRubricAuthoring: boolean = false;
16+
17+
constructor(private ConfigService: ConfigService, private ProjectService: TeacherProjectService) {
18+
}
19+
20+
ngOnInit() {
21+
const componentContent = this.ConfigService.replaceStudentNames(
22+
this.ProjectService.injectAssetPaths(this.authoringComponentContent));
23+
if (componentContent.rubric == null) {
24+
this.rubric = '';
25+
} else {
26+
this.rubric = componentContent.rubric;
27+
}
28+
}
29+
30+
rubricChanged(): void {
31+
this.authoringComponentContent.rubric =
32+
this.ConfigService.removeAbsoluteAssetPaths(this.rubric);
33+
this.ProjectService.componentChanged();
34+
}
35+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ import { NodeAdvancedJsonAuthoringComponent } from '../../../wise5/authoringTool
2828
import { WorkgroupInfoComponent } from '../../../wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component';
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';
31+
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';
3133
import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/rubric-authoring.component';
3234

3335
@NgModule({
@@ -38,6 +40,8 @@ import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/ru
3840
ChooseNewComponent,
3941
ChooseNewComponentLocation,
4042
ComponentNewWorkBadgeComponent,
43+
EditComponentRubricComponent,
44+
EditComponentJsonComponent,
4145
ManageStudentsComponent,
4246
MilestoneReportDataComponent,
4347
NodeAdvancedGeneralAuthoringComponent,

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5793,6 +5793,10 @@
57935793
<context context-type="sourcefile">../../wise5/authoringTool/advanced/advanced-project-authoring.component.html</context>
57945794
<context context-type="linenumber">7</context>
57955795
</context-group>
5796+
<context-group purpose="location">
5797+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5798+
<context context-type="linenumber">5</context>
5799+
</context-group>
57965800
</trans-unit>
57975801
<trans-unit datatype="html" id="a7ff0a41fdb9b51a30db6bed1494c740274cbb84">
57985802
<source>Download Unit</source>
@@ -5964,6 +5968,41 @@
59645968
<context context-type="linenumber">36</context>
59655969
</context-group>
59665970
</trans-unit>
5971+
<trans-unit datatype="html" id="7affaae0e14529c0192d5a4bfabd6fcb1ea27529">
5972+
<source>Rubric</source>
5973+
<context-group purpose="location">
5974+
<context context-type="sourcefile">app/authoring-tool/edit-component-rubric/edit-component-rubric.component.html</context>
5975+
<context context-type="linenumber">2</context>
5976+
</context-group>
5977+
</trans-unit>
5978+
<trans-unit datatype="html" id="234445d1fce45c501510346137158fe0e81665f6">
5979+
<source>Edit Component Rubric</source>
5980+
<context-group purpose="location">
5981+
<context context-type="sourcefile">app/authoring-tool/edit-component-rubric/edit-component-rubric.component.html</context>
5982+
<context context-type="linenumber">5</context>
5983+
</context-group>
5984+
</trans-unit>
5985+
<trans-unit datatype="html" id="7ad24bfc056ad2a41aa93fbfd75ec6765060606f">
5986+
<source>JSON</source>
5987+
<context-group purpose="location">
5988+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5989+
<context context-type="linenumber">2</context>
5990+
</context-group>
5991+
</trans-unit>
5992+
<trans-unit datatype="html" id="d1ee280fdc6bfc1ea2be84a9c2e38d0a69f432c7">
5993+
<source>Close the JSON view to save the changes</source>
5994+
<context-group purpose="location">
5995+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
5996+
<context context-type="linenumber">10</context>
5997+
</context-group>
5998+
</trans-unit>
5999+
<trans-unit datatype="html" id="5d92fa48c74344c46842dca7fb8d35e009d7f5fb">
6000+
<source>Edit Component JSON</source>
6001+
<context-group purpose="location">
6002+
<context context-type="sourcefile">app/authoring-tool/edit-component-json/edit-component-json.component.html</context>
6003+
<context context-type="linenumber">12</context>
6004+
</context-group>
6005+
</trans-unit>
59676006
<trans-unit datatype="html" id="bfab7f41cfc32a926c55987d6a9c3349ae417131">
59686007
<source> Show Save Button </source>
59696008
<context-group purpose="location">

0 commit comments

Comments
 (0)