Skip to content

Commit 1c9164a

Browse files
Extracted component rubric authoring to new Angular component. #2824
1 parent 5564017 commit 1c9164a

24 files changed

Lines changed: 116 additions & 286 deletions

File tree

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>
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+
}
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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ 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';
3132

3233
@NgModule({
3334
declarations: [
@@ -37,6 +38,7 @@ import { WiseAuthoringTinymceEditorComponent } from '../../../wise5/directives/w
3738
ChooseNewComponent,
3839
ChooseNewComponentLocation,
3940
ComponentNewWorkBadgeComponent,
41+
EditComponentRubricComponent,
4042
ManageStudentsComponent,
4143
MilestoneReportDataComponent,
4244
NodeAdvancedGeneralAuthoringComponent,

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5960,6 +5960,20 @@
59605960
<context context-type="linenumber">36</context>
59615961
</context-group>
59625962
</trans-unit>
5963+
<trans-unit datatype="html" id="7affaae0e14529c0192d5a4bfabd6fcb1ea27529">
5964+
<source>Rubric</source>
5965+
<context-group purpose="location">
5966+
<context context-type="sourcefile">app/authoring-tool/edit-component-rubric/edit-component-rubric.component.html</context>
5967+
<context context-type="linenumber">2</context>
5968+
</context-group>
5969+
</trans-unit>
5970+
<trans-unit datatype="html" id="234445d1fce45c501510346137158fe0e81665f6">
5971+
<source>Edit Component Rubric</source>
5972+
<context-group purpose="location">
5973+
<context context-type="sourcefile">app/authoring-tool/edit-component-rubric/edit-component-rubric.component.html</context>
5974+
<context context-type="linenumber">5</context>
5975+
</context-group>
5976+
</trans-unit>
59635977
<trans-unit datatype="html" id="bfab7f41cfc32a926c55987d6a9c3349ae417131">
59645978
<source> Show Save Button </source>
59655979
<context-group purpose="location">

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

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export abstract class EditComponentController {
1414
authoringComponentContent: any;
1515
authoringComponentContentJSONString: string;
1616
authoringValidComponentContentJSONString: string;
17+
componentChangedSubscription: Subscription;
1718
componentContent: any;
1819
componentId: string;
1920
idToOrder: any;
@@ -29,7 +30,6 @@ export abstract class EditComponentController {
2930
submitCounter: number = 0;
3031
starterStateResponseSubscription: Subscription;
3132
showAdvancedAuthoringSubscription: Subscription;
32-
rubric: string = '';
3333

3434
constructor(
3535
protected $filter: any,
@@ -46,8 +46,10 @@ export abstract class EditComponentController {
4646
this.resetUI();
4747
this.idToOrder = this.ProjectService.idToOrder;
4848
this.$translate = this.$filter('translate');
49-
this.initializeRubric();
5049
this.updateAdvancedAuthoringView();
50+
this.componentChangedSubscription = this.ProjectService.componentChanged$.subscribe(() => {
51+
this.authoringViewComponentChanged();
52+
});
5153
this.showAdvancedAuthoringSubscription =
5254
this.ProjectService.showAdvancedComponentView$.subscribe((event) => {
5355
if (event.componentId === this.componentId) {
@@ -63,15 +65,8 @@ export abstract class EditComponentController {
6365
});
6466
}
6567

66-
initializeRubric() {
67-
if (this.componentContent.rubric == null) {
68-
this.rubric = '';
69-
} else {
70-
this.rubric = this.componentContent.rubric;
71-
}
72-
}
73-
7468
$onDestroy() {
69+
this.componentChangedSubscription.unsubscribe();
7570
this.starterStateResponseSubscription.unsubscribe();
7671
this.showAdvancedAuthoringSubscription.unsubscribe();
7772
}
@@ -327,10 +322,4 @@ export abstract class EditComponentController {
327322
}
328323

329324
saveStarterState(starterState: any) {}
330-
331-
rubricChanged(): void {
332-
this.authoringComponentContent.rubric =
333-
this.ConfigService.removeAbsoluteAssetPaths(this.rubric);
334-
this.authoringViewComponentChanged();
335-
}
336325
}

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -60,25 +60,8 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
6060
ng-change='animationController.authoringViewComponentChanged()'/>
6161
</md-input-container>
6262
</div>
63-
<div>
64-
<label class='node__label--vertical-alignment'>
65-
{{ ::'RUBRIC' | translate }}
66-
</label>
67-
<md-button class='topButton md-raised md-primary'
68-
ng-click='animationController.showRubricAuthoring = !animationController.showRubricAuthoring'>
69-
<md-icon>message</md-icon>
70-
<md-tooltip md-direction='top'
71-
class='projectButtonTooltip'>
72-
{{ ::'EDIT_COMPONENT_RUBRIC' | translate }}
73-
</md-tooltip>
74-
</md-button>
75-
<div ng-if='animationController.showRubricAuthoring'>
76-
<wise-authoring-tinymce-editor
77-
[(model)]='animationController.rubric'
78-
(model-change)='animationController.rubricChanged()'>
79-
</wise-authoring-tinymce-editor>
80-
</div>
81-
</div>
63+
<edit-component-rubric [authoring-component-content]="animationController.authoringComponentContent">
64+
</edit-component-rubric>
8265
<div>
8366
<div style='height: 50;'>
8467
<label class='node__label--vertical-alignment'>

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -56,25 +56,8 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
5656
ng-change='audioOscillatorController.authoringViewComponentChanged()'/>
5757
</md-input-container>
5858
</div>
59-
<div>
60-
<label class='node__label--vertical-alignment'>
61-
{{ 'RUBRIC' | translate }}
62-
</label>
63-
<md-button class='topButton md-raised md-primary'
64-
ng-click='audioOscillatorController.showRubricAuthoring = !audioOscillatorController.showRubricAuthoring'>
65-
<md-icon>message</md-icon>
66-
<md-tooltip md-direction='top'
67-
class='projectButtonTooltip'>
68-
{{ 'EDIT_COMPONENT_RUBRIC' | translate }}
69-
</md-tooltip>
70-
</md-button>
71-
<div ng-if='audioOscillatorController.showRubricAuthoring'>
72-
<wise-authoring-tinymce-editor
73-
[(model)]='audioOscillatorController.rubric'
74-
(model-change)='audioOscillatorController.rubricChanged()'>
75-
</wise-authoring-tinymce-editor>
76-
</div>
77-
</div>
59+
<edit-component-rubric [authoring-component-content]="audioOscillatorController.authoringComponentContent">
60+
</edit-component-rubric>
7861
<div>
7962
<div style='height: 50;'>
8063
<label class='node__label--vertical-alignment'>

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -147,25 +147,8 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
147147
ng-change='conceptMapController.authoringViewComponentChanged()'/>
148148
</md-input-container>
149149
</div>
150-
<div>
151-
<label class='node__label--vertical-alignment'>
152-
{{ ::'RUBRIC' | translate }}
153-
</label>
154-
<md-button class='topButton md-raised md-primary'
155-
ng-click='conceptMapController.showRubricAuthoring = !conceptMapController.showRubricAuthoring'>
156-
<md-icon>message</md-icon>
157-
<md-tooltip md-direction='top'
158-
class='projectButtonTooltip'>
159-
{{ ::'EDIT_COMPONENT_RUBRIC' | translate }}
160-
</md-tooltip>
161-
</md-button>
162-
<div ng-if='conceptMapController.showRubricAuthoring'>
163-
<wise-authoring-tinymce-editor
164-
[(model)]='conceptMapController.rubric'
165-
(model-change)='conceptMapController.rubricChanged()'>
166-
</wise-authoring-tinymce-editor>
167-
</div>
168-
</div>
150+
<edit-component-rubric [authoring-component-content]="conceptMapController.authoringComponentContent">
151+
</edit-component-rubric>
169152
<div>
170153
<div style='height: 50;'>
171154
<label class='node__label--vertical-alignment'>

src/main/webapp/wise5/components/discussion/authoring.html

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,8 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
2222
ng-change='discussionController.authoringViewComponentChanged()'/>
2323
</md-input-container>
2424
</div>
25-
<div>
26-
<label class='node__label--vertical-alignment'>
27-
{{ ::'RUBRIC' | translate }}
28-
</label>
29-
<md-button class='topButton md-raised md-primary'
30-
ng-click='discussionController.showRubricAuthoring = !discussionController.showRubricAuthoring'>
31-
<md-icon>message</md-icon>
32-
<md-tooltip md-direction='top'
33-
class='projectButtonTooltip'>
34-
{{ ::'EDIT_COMPONENT_RUBRIC' | translate }}
35-
</md-tooltip>
36-
</md-button>
37-
<div ng-if='discussionController.showRubricAuthoring'>
38-
<wise-authoring-tinymce-editor
39-
[(model)]='discussionController.rubric'
40-
(model-change)='discussionController.rubricChanged()'>
41-
</wise-authoring-tinymce-editor>
42-
</div>
43-
</div>
25+
<edit-component-rubric [authoring-component-content]="discussionController.authoringComponentContent">
26+
</edit-component-rubric>
4427
<div>
4528
<div style='height: 50;'>
4629
<label class='node__label--vertical-alignment'>

0 commit comments

Comments
 (0)