Skip to content

Commit c4231a5

Browse files
hirokiterashimahirokiterashima
committed
Extracted and converted component tags authoring to Angular component. #2830 
1 parent 1b0b690 commit c4231a5

19 files changed

Lines changed: 178 additions & 636 deletions

File tree

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
2+
<mat-label class="node__label--vertical-alignment" i18n>Tags</mat-label>
3+
<button mat-button
4+
class="topButton mat-raised-button mat-primary"
5+
matTooltip="Add Tag"
6+
i18n-matTooltip
7+
matTooltipPosition="above"
8+
(click)="addTag()">
9+
<mat-icon>add</mat-icon>
10+
</button>
11+
</div>
12+
<div *ngFor="let tag of authoringComponentContent.tags; let i = index"
13+
fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center" style="margin-top: 16px">
14+
<mat-form-field>
15+
<mat-label i18n>Tag Name</mat-label>
16+
<input matInput
17+
[ngModel]="tag"
18+
(ngModelChange)="tagChanged.next({tagIndex: i, tag: $event})"/>
19+
</mat-form-field>
20+
<button mat-button
21+
class="moveComponentButton mat-raised-button mat-primary"
22+
matTooltip="Move Up"
23+
i18n-matTooltip
24+
matTooltipPosition="above"
25+
(click)="moveTagUp(i)">
26+
<mat-icon>arrow_upward</mat-icon>
27+
</button>
28+
<button mat-button
29+
class="moveComponentButton mat-raised-button mat-primary"
30+
matTooltip="Move Down"
31+
i18n-matTooltip
32+
matTooltipPosition="above"
33+
(click)="moveTagDown(i)">
34+
<mat-icon>arrow_downward</mat-icon>
35+
</button>
36+
<button mat-button
37+
class="moveComponentButton mat-raised-button mat-primary"
38+
matTooltip="Delete"
39+
i18n-matTooltip
40+
matTooltipPosition="above"
41+
(click)="deleteTag(i)">
42+
<mat-icon>delete</mat-icon>
43+
</button>
44+
</div>

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Component, Input } from "@angular/core";
2+
import { UpgradeModule } from "@angular/upgrade/static";
3+
import { Subject, Subscription } from "rxjs";
4+
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
5+
import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
6+
7+
@Component({
8+
selector: 'edit-component-tags',
9+
templateUrl: 'edit-component-tags.component.html'
10+
})
11+
export class EditComponentTagsComponent {
12+
13+
@Input()
14+
authoringComponentContent: any;
15+
tagChanged: Subject<any> = new Subject<any>();
16+
tagChangedSubscription: Subscription;
17+
18+
constructor(private ProjectService: TeacherProjectService, private upgrade: UpgradeModule) {
19+
}
20+
21+
ngOnInit() {
22+
this.tagChangedSubscription = this.tagChanged
23+
.pipe(
24+
debounceTime(1000),
25+
distinctUntilChanged()
26+
)
27+
.subscribe(({tagIndex, tag}) => {
28+
this.authoringComponentContent.tags[tagIndex] = tag;
29+
this.ProjectService.componentChanged();
30+
});
31+
}
32+
33+
ngOnDestroy() {
34+
this.tagChangedSubscription.unsubscribe();
35+
}
36+
37+
addTag() {
38+
if (this.authoringComponentContent.tags == null) {
39+
this.authoringComponentContent.tags = [];
40+
}
41+
this.authoringComponentContent.tags.push('');
42+
this.ProjectService.componentChanged();
43+
}
44+
45+
moveTagUp(index: number) {
46+
if (index > 0) {
47+
const tag = this.authoringComponentContent.tags[index];
48+
this.authoringComponentContent.tags.splice(index, 1);
49+
this.authoringComponentContent.tags.splice(index - 1, 0, tag);
50+
this.ProjectService.componentChanged();
51+
}
52+
}
53+
54+
moveTagDown(index: number) {
55+
if (index < this.authoringComponentContent.tags.length - 1) {
56+
const tag = this.authoringComponentContent.tags[index];
57+
this.authoringComponentContent.tags.splice(index, 1);
58+
this.authoringComponentContent.tags.splice(index + 1, 0, tag);
59+
this.ProjectService.componentChanged();
60+
}
61+
}
62+
63+
deleteTag(indexOfTagToDelete: number) {
64+
if (confirm(
65+
this.upgrade.$injector.get('$filter')('translate')('areYouSureYouWantToDeleteThisTag'))) {
66+
this.authoringComponentContent.tags.splice(indexOfTagToDelete, 1);
67+
this.ProjectService.componentChanged();
68+
}
69+
}
70+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ import { NodeAdvancedGeneralAuthoringComponent } from '../../../wise5/authoringT
3030
import { WiseAuthoringTinymceEditorComponent } from '../../../wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
3131
import { EditComponentJsonComponent } from './authoring-tool/edit-component-json/edit-component-json.component';
3232
import { EditComponentMaxScoreComponent } from './authoring-tool/edit-component-max-score/edit-component-max-score.component';
33-
import { EditComponentWidthComponent } from './authoring-tool/edit-component-width/edit-component-width.component';
3433
import { EditComponentRubricComponent } from './authoring-tool/edit-component-rubric/edit-component-rubric.component';
34+
import { EditComponentTagsComponent } from './authoring-tool/edit-component-tags/edit-component-tags.component';
35+
import { EditComponentWidthComponent } from './authoring-tool/edit-component-width/edit-component-width.component';
3536
import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/rubric-authoring.component';
3637

3738
@NgModule({
@@ -45,6 +46,7 @@ import { RubricAuthoringComponent } from '../../../wise5/authoringTool/rubric/ru
4546
EditComponentRubricComponent,
4647
EditComponentJsonComponent,
4748
EditComponentMaxScoreComponent,
49+
EditComponentTagsComponent,
4850
EditComponentWidthComponent,
4951
ManageStudentsComponent,
5052
MilestoneReportDataComponent,

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6010,6 +6010,48 @@
60106010
<context context-type="linenumber">2</context>
60116011
</context-group>
60126012
</trans-unit>
6013+
<trans-unit datatype="html" id="cafc87479686947e2590b9f588a88040aeaf660b">
6014+
<source>Tags</source>
6015+
<context-group purpose="location">
6016+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6017+
<context context-type="linenumber">2</context>
6018+
</context-group>
6019+
</trans-unit>
6020+
<trans-unit datatype="html" id="d9a6d2f30e57a02a6b36a7773c39a3791c42ae9c">
6021+
<source>Add Tag</source>
6022+
<context-group purpose="location">
6023+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6024+
<context context-type="linenumber">5</context>
6025+
</context-group>
6026+
</trans-unit>
6027+
<trans-unit datatype="html" id="f339508e35745934e4cfe06c1f4eb888b0fda212">
6028+
<source>Tag Name</source>
6029+
<context-group purpose="location">
6030+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6031+
<context context-type="linenumber">15</context>
6032+
</context-group>
6033+
</trans-unit>
6034+
<trans-unit datatype="html" id="ab36fe6b1ac84106333447d7c1c4e20fb79c7de3">
6035+
<source>Move Up</source>
6036+
<context-group purpose="location">
6037+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6038+
<context context-type="linenumber">22</context>
6039+
</context-group>
6040+
</trans-unit>
6041+
<trans-unit datatype="html" id="3a12bd96093f8972cbd9d52a68fb9178aaee4388">
6042+
<source>Move Down</source>
6043+
<context-group purpose="location">
6044+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6045+
<context context-type="linenumber">30</context>
6046+
</context-group>
6047+
</trans-unit>
6048+
<trans-unit datatype="html" id="826b25211922a1b46436589233cb6f1a163d89b7">
6049+
<source>Delete</source>
6050+
<context-group purpose="location">
6051+
<context context-type="sourcefile">app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
6052+
<context context-type="linenumber">38</context>
6053+
</context-group>
6054+
</trans-unit>
60136055
<trans-unit datatype="html" id="2485299eb70909a6cfa961bfac54f062a220806c">
60146056
<source>Component Width</source>
60156057
<context-group purpose="location">

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

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -105,39 +105,6 @@ export abstract class EditComponentController {
105105
});
106106
}
107107

108-
addTag() {
109-
if (this.authoringComponentContent.tags == null) {
110-
this.authoringComponentContent.tags = [];
111-
}
112-
this.authoringComponentContent.tags.push('');
113-
this.authoringViewComponentChanged();
114-
}
115-
116-
moveTagUp(index) {
117-
if (index > 0) {
118-
const tag = this.authoringComponentContent.tags[index];
119-
this.authoringComponentContent.tags.splice(index, 1);
120-
this.authoringComponentContent.tags.splice(index - 1, 0, tag);
121-
this.authoringViewComponentChanged();
122-
}
123-
}
124-
125-
moveTagDown(index) {
126-
if (index < this.authoringComponentContent.tags.length - 1) {
127-
const tag = this.authoringComponentContent.tags[index];
128-
this.authoringComponentContent.tags.splice(index, 1);
129-
this.authoringComponentContent.tags.splice(index + 1, 0, tag);
130-
this.authoringViewComponentChanged();
131-
}
132-
}
133-
134-
deleteTag(indexOfTagToDelete) {
135-
if (confirm(this.$translate('areYouSureYouWantToDeleteThisTag'))) {
136-
this.authoringComponentContent.tags.splice(indexOfTagToDelete, 1);
137-
this.authoringViewComponentChanged();
138-
}
139-
}
140-
141108
connectedComponentTypeChanged(connectedComponent) {
142109
this.authoringViewComponentChanged();
143110
}

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

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
4646
<edit-component-max-score [authoring-component-content]="animationController.authoringComponentContent"></edit-component-max-score>
4747
<edit-component-width [authoring-component-content]="animationController.authoringComponentContent"></edit-component-width>
4848
<edit-component-rubric [authoring-component-content]="animationController.authoringComponentContent"></edit-component-rubric>
49+
<edit-component-tags [authoring-component-content]="animationController.authoringComponentContent"></edit-component-tags>
4950
</div>
5051
<div>
5152
<div style='height: 50;'>
@@ -119,57 +120,6 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
119120
</div>
120121
</div>
121122
</div>
122-
<div style='margin-top: 10px; margin-bottom: 10px;'>
123-
<div style='height: 50;'>
124-
<label class='node__label--vertical-alignment'>
125-
{{ ::'tags' | translate }}
126-
</label>
127-
<md-button class='topButton md-raised md-primary'
128-
ng-click='animationController.addTag()'>
129-
<md-icon>add</md-icon>
130-
<md-tooltip md-direction='top'
131-
class='projectButtonTooltip'>
132-
{{ ::'addTag' | translate }}
133-
</md-tooltip>
134-
</md-button>
135-
</div>
136-
<div ng-repeat='tag in animationController.authoringComponentContent.tags track by $index'>
137-
<div layout='row'>
138-
<md-input-container style='margin-bottom: 0px'>
139-
<label></label>
140-
<input ng-model='animationController.authoringComponentContent.tags[$index]'
141-
ng-change='animationController.authoringViewComponentChanged()'
142-
ng-model-options='{ debounce: 1000 }'
143-
size='100'
144-
placeholder='{{ ::"enterTag" | translate }}'/>
145-
</md-input-container>
146-
<md-button class='moveComponentButton md-raised md-primary'
147-
ng-click='animationController.moveTagUp($index)'>
148-
<md-icon>arrow_upward</md-icon>
149-
<md-tooltip md-direction='top'
150-
class='projectButtonTooltip'>
151-
{{ ::'moveUp' | translate }}
152-
</md-tooltip>
153-
</md-button>
154-
<md-button class='moveComponentButton md-raised md-primary'
155-
ng-click='animationController.moveTagDown($index)'>
156-
<md-icon>arrow_downward</md-icon>
157-
<md-tooltip md-direction='top'
158-
class='projectButtonTooltip'>
159-
{{ ::'moveDown' | translate }}
160-
</md-tooltip>
161-
</md-button>
162-
<md-button class='moveComponentButton md-raised md-primary'
163-
ng-click='animationController.deleteTag($index)'>
164-
<md-icon>delete</md-icon>
165-
<md-tooltip md-direction='top'
166-
class='projectButtonTooltip'>
167-
{{ ::'DELETE' | translate }}
168-
</md-tooltip>
169-
</md-button>
170-
</div>
171-
</div>
172-
</div>
173123
<edit-component-json [node-id]="animationController.nodeId" [component-id]="animationController.componentId"></edit-component-json>
174124
</div>
175125
<br/>

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

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
4242
<edit-component-max-score [authoring-component-content]="audioOscillatorController.authoringComponentContent"></edit-component-max-score>
4343
<edit-component-width [authoring-component-content]="audioOscillatorController.authoringComponentContent"></edit-component-width>
4444
<edit-component-rubric [authoring-component-content]="audioOscillatorController.authoringComponentContent"></edit-component-rubric>
45+
<edit-component-tags [authoring-component-content]="audioOscillatorController.authoringComponentContent"></edit-component-tags>
4546
</div>
4647
<div>
4748
<div style='height: 50;'>
@@ -115,57 +116,6 @@ <h6>{{ ::'advancedAuthoringOptions' | translate }}</h6>
115116
</div>
116117
</div>
117118
</div>
118-
<div style='margin-top: 10px; margin-bottom: 10px;'>
119-
<div style='height: 50;'>
120-
<label class='node__label--vertical-alignment'>
121-
{{ 'tags' | translate }}
122-
</label>
123-
<md-button class='topButton md-raised md-primary'
124-
ng-click='audioOscillatorController.addTag()'>
125-
<md-icon>add</md-icon>
126-
<md-tooltip md-direction='top'
127-
class='projectButtonTooltip'>
128-
{{ 'addTag' | translate }}
129-
</md-tooltip>
130-
</md-button>
131-
</div>
132-
<div ng-repeat='tag in audioOscillatorController.authoringComponentContent.tags track by $index'>
133-
<div layout='row'>
134-
<md-input-container style='margin-bottom: 0px'>
135-
<label></label>
136-
<input ng-model='audioOscillatorController.authoringComponentContent.tags[$index]'
137-
ng-change='audioOscillatorController.authoringViewComponentChanged()'
138-
ng-model-options='{ debounce: 1000 }'
139-
size='100'
140-
placeholder='{{ "enterTag" | translate }}'/>
141-
</md-input-container>
142-
<md-button class='moveComponentButton md-raised md-primary'
143-
ng-click='audioOscillatorController.moveTagUp($index)'>
144-
<md-icon>arrow_upward</md-icon>
145-
<md-tooltip md-direction='top'
146-
class='projectButtonTooltip'>
147-
{{ 'moveUp' | translate }}
148-
</md-tooltip>
149-
</md-button>
150-
<md-button class='moveComponentButton md-raised md-primary'
151-
ng-click='audioOscillatorController.moveTagDown($index)'>
152-
<md-icon>arrow_downward</md-icon>
153-
<md-tooltip md-direction='top'
154-
class='projectButtonTooltip'>
155-
{{ 'moveDown' | translate }}
156-
</md-tooltip>
157-
</md-button>
158-
<md-button class='moveComponentButton md-raised md-primary'
159-
ng-click='audioOscillatorController.deleteTag($index)'>
160-
<md-icon>delete</md-icon>
161-
<md-tooltip md-direction='top'
162-
class='projectButtonTooltip'>
163-
{{ 'DELETE' | translate }}
164-
</md-tooltip>
165-
</md-button>
166-
</div>
167-
</div>
168-
</div>
169119
<edit-component-json [node-id]="audioOscillatorController.nodeId" [component-id]="audioOscillatorController.componentId"></edit-component-json>
170120
</div>
171121
<br/>

0 commit comments

Comments
 (0)