Skip to content

Commit 7860508

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
style(Authoring Tool): Use tabs to organize activity advanced authoring (#2297)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent ebc9529 commit 7860508

67 files changed

Lines changed: 3278 additions & 2276 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
1-
import { Directive, Input } from '@angular/core';
1+
import { Directive, inject, Input } from '@angular/core';
22
import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
33
import { Component } from '../../../assets/wise5/common/Component';
44
import { NotebookService } from '../../../assets/wise5/services/notebookService';
55
import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
66
import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
77
import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array/array';
8+
import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
89

910
@Directive()
1011
export abstract class EditAdvancedComponentComponent {
12+
protected aiEnabled: boolean;
1113
component: Component;
1214
componentContent: ComponentContent;
15+
protected selectedTabIndex: number = 0;
16+
1317
@Input() componentId: string;
1418
@Input() nodeId: string;
19+
@Input() tab: string = 'general';
20+
21+
private componentServiceLookupService = inject(ComponentServiceLookupService);
1522

1623
constructor(
1724
protected nodeService: TeacherNodeService,
@@ -22,7 +29,29 @@ export abstract class EditAdvancedComponentComponent {
2229
ngOnInit(): void {
2330
this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
2431
this.component = new Component(this.componentContent, this.nodeId);
32+
this.aiEnabled = this.teacherProjectService.getProject().ai?.enabled;
33+
if (this.aiEnabled && ['Discussion', 'OpenResponse'].includes(this.component.content.type)) {
34+
if (this.component.content.ai == null) {
35+
const componentService = this.componentServiceLookupService.getService(
36+
this.component.content.type
37+
);
38+
this.component.content.ai = {
39+
teacherSummarySystemPrompt: componentService.getDefaultTeacherSummarySystemPrompt(
40+
this.component.content.prompt
41+
)
42+
};
43+
}
44+
}
2545
this.teacherProjectService.uiChanged();
46+
47+
switch (this.tab) {
48+
case 'visibility':
49+
this.selectedTabIndex = 1;
50+
break;
51+
default:
52+
this.selectedTabIndex = 0;
53+
break;
54+
}
2655
}
2756

2857
setShowSubmitButtonValue(show: boolean = false): void {

‎src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.spec.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts renamed to src/app/authoring-tool/edit-component-advanced/edit-component-advanced-shared.module.ts

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,63 @@
1-
import { Component, Input } from '@angular/core';
2-
import { Component as WISEComponent } from '../../../assets/wise5/common/Component';
3-
import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
4-
import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
5-
import { EditComponentWidthComponent } from '../edit-component-width/edit-component-width.component';
6-
import { EditComponentTagsComponent } from '../edit-component-tags/edit-component-tags.component';
1+
import { NgModule } from '@angular/core';
2+
import { EditComponentDefaultFeedback } from '../edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component';
3+
import { EditComponentExcludeFromTotalScoreComponent } from '../edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component';
4+
import { EditComponentMaxScoreComponent } from '../edit-component-max-score/edit-component-max-score.component';
5+
import { EditComponentMaxSubmitComponent } from '../edit-component-max-submit/edit-component-max-submit.component';
6+
import { EditComponentRubricComponent } from '../edit-component-rubric/edit-component-rubric.component';
77
import { EditComponentSaveButtonComponent } from '../edit-component-save-button/edit-component-save-button.component';
88
import { EditComponentSubmitButtonComponent } from '../edit-component-submit-button/edit-component-submit-button.component';
9-
import { EditComponentRubricComponent } from '../edit-component-rubric/edit-component-rubric.component';
10-
import { EditComponentJsonComponent } from '../edit-component-json/edit-component-json.component';
11-
import { EditComponentMaxSubmitComponent } from '../edit-component-max-submit/edit-component-max-submit.component';
12-
import { EditComponentMaxScoreComponent } from '../edit-component-max-score/edit-component-max-score.component';
13-
import { EditComponentExcludeFromTotalScoreComponent } from '../edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component';
14-
import { EditComponentDefaultFeedback } from '../edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component';
9+
import { EditComponentTagsComponent } from '../edit-component-tags/edit-component-tags.component';
10+
import { EditComponentWidthComponent } from '../edit-component-width/edit-component-width.component';
1511
import { EditComponentConstraintsComponent } from '../edit-component-constraints/edit-component-constraints.component';
12+
import { EditComponentJsonComponent } from '../edit-component-json/edit-component-json.component';
13+
import { MatTabsModule } from '@angular/material/tabs';
14+
import { MatIconModule } from '@angular/material/icon';
15+
import { MatCheckboxModule } from '@angular/material/checkbox';
16+
import { FormsModule } from '@angular/forms';
17+
import { EditComponentAddToNotebookButtonComponent } from '../edit-component-add-to-notebook-button/edit-component-add-to-notebook-button.component';
18+
import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
19+
import { EditComponentSummarizerSystemPromptComponent } from '../edit-component-summarizer-system-prompt/edit-component-summarizer-system-prompt.component';
1620

17-
@Component({
21+
@NgModule({
1822
imports: [
19-
EditComponentConstraintsComponent,
23+
EditComponentAddToNotebookButtonComponent,
24+
EditComponentSaveButtonComponent,
25+
EditComponentSubmitButtonComponent,
26+
EditComponentMaxSubmitComponent,
27+
EditConnectedComponentsComponent,
2028
EditComponentDefaultFeedback,
21-
EditComponentExcludeFromTotalScoreComponent,
2229
EditComponentMaxScoreComponent,
23-
EditComponentMaxSubmitComponent,
24-
EditComponentJsonComponent,
30+
EditComponentExcludeFromTotalScoreComponent,
31+
EditComponentWidthComponent,
2532
EditComponentRubricComponent,
33+
EditComponentSummarizerSystemPromptComponent,
34+
EditComponentTagsComponent,
35+
EditComponentConstraintsComponent,
36+
EditComponentJsonComponent,
37+
FormsModule,
38+
MatCheckboxModule,
39+
MatIconModule,
40+
MatTabsModule
41+
],
42+
exports: [
43+
EditComponentAddToNotebookButtonComponent,
2644
EditComponentSaveButtonComponent,
2745
EditComponentSubmitButtonComponent,
28-
EditComponentTagsComponent,
46+
EditComponentMaxSubmitComponent,
47+
EditConnectedComponentsComponent,
48+
EditComponentDefaultFeedback,
49+
EditComponentMaxScoreComponent,
50+
EditComponentExcludeFromTotalScoreComponent,
2951
EditComponentWidthComponent,
30-
EditConnectedComponentsComponent
31-
],
32-
selector: 'edit-common-advanced',
33-
templateUrl: './edit-common-advanced.component.html'
52+
EditComponentRubricComponent,
53+
EditComponentSummarizerSystemPromptComponent,
54+
EditComponentTagsComponent,
55+
EditComponentConstraintsComponent,
56+
EditComponentJsonComponent,
57+
FormsModule,
58+
MatCheckboxModule,
59+
MatIconModule,
60+
MatTabsModule
61+
]
3462
})
35-
export class EditCommonAdvancedComponent {
36-
@Input() allowedConnectedComponentTypes: string[] = [];
37-
@Input() component: WISEComponent;
38-
39-
constructor(protected projectService: TeacherProjectService) {}
40-
41-
protected connectedComponentsChanged(connectedComponents: any[]): void {
42-
this.component.content.connectedComponents = connectedComponents;
43-
this.projectService.nodeChanged();
44-
}
45-
}
63+
export class EditComponentAdvancedSharedModule {}

‎src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
<h2 mat-dialog-title i18n>Advanced Settings</h2>
2-
<mat-divider />
3-
<div mat-dialog-content>
4-
<div #component></div>
1+
<div class="edit-component-advanced">
2+
<h2 mat-dialog-title i18n>Advanced Activity Settings</h2>
3+
<mat-divider />
4+
<div mat-dialog-content>
5+
<div #component></div>
6+
</div>
7+
<mat-divider />
8+
<mat-dialog-actions align="end">
9+
<button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
10+
Close
11+
</button>
12+
</mat-dialog-actions>
513
</div>
6-
<mat-divider />
7-
<mat-dialog-actions align="end">
8-
<button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
9-
Close
10-
</button>
11-
</mat-dialog-actions>

‎src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NotificationService } from '../../../assets/wise5/services/notification
88
import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
99
import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
1010
import { EditComponentAdvancedComponent } from './edit-component-advanced.component';
11+
import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
1112

1213
let component: EditComponentAdvancedComponent;
1314
let fixture: ComponentFixture<EditComponentAdvancedComponent>;
@@ -19,9 +20,12 @@ describe('EditComponentAdvancedComponent', () => {
1920
{
2021
provide: MAT_DIALOG_DATA,
2122
useValue: {
22-
content: { type: 'ShowMyWork' },
23-
id: 'component1',
24-
nodeId: 'node1'
23+
component: {
24+
content: { type: 'ShowMyWork' },
25+
id: 'component1',
26+
nodeId: 'node1'
27+
},
28+
tab: 'general'
2529
}
2630
},
2731
{
@@ -31,6 +35,7 @@ describe('EditComponentAdvancedComponent', () => {
3135
}
3236
},
3337
MockProviders(
38+
ComponentServiceLookupService,
3439
TeacherNodeService,
3540
NotebookService,
3641
NotificationService,
@@ -44,6 +49,8 @@ describe('EditComponentAdvancedComponent', () => {
4449
spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue({
4550
type: 'ShowMyWork'
4651
} as ComponentContent);
52+
spyOn(TestBed.inject(TeacherProjectService), 'getProject').and.returnValue({});
53+
4754
fixture.detectChanges();
4855
});
4956

‎src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
ElementRef,
77
EnvironmentInjector,
88
Inject,
9-
ViewChild
9+
ViewChild,
10+
ViewEncapsulation
1011
} from '@angular/core';
1112
import { MatButtonModule } from '@angular/material/button';
1213
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -15,9 +16,28 @@ import { Component as WISEComponent } from '../../../assets/wise5/common/Compone
1516
import { components } from '../../../assets/wise5/components/Components';
1617

1718
@Component({
19+
encapsulation: ViewEncapsulation.None,
1820
imports: [MatDivider, MatDialogModule, MatButtonModule],
1921
styles: [
20-
'.mat-divider { margin: 0 -16px; } .mat-mdc-dialog-content { padding-top: 10px !important; padding-bottom: 10px !important; }'
22+
`
23+
.edit-component-advanced {
24+
--mat-tab-divider-color: var(--mat-divider-color);
25+
--mat-tab-divider-height: 1px;
26+
.mat-divider {
27+
margin: 0 -16px;
28+
}
29+
.mat-mdc-tab-body-content {
30+
padding: 16px 0;
31+
}
32+
.mat-mdc-tab-header {
33+
position: sticky;
34+
top: 0;
35+
z-index: 2;
36+
background-color: white;
37+
margin: 0 -16px;
38+
}
39+
}
40+
`
2141
],
2242
templateUrl: './edit-component-advanced.component.html'
2343
})
@@ -26,18 +46,22 @@ export class EditComponentAdvancedComponent {
2646
private componentRef: ComponentRef<WISEComponent>;
2747
constructor(
2848
private applicationRef: ApplicationRef,
29-
@Inject(MAT_DIALOG_DATA) protected component: WISEComponent,
49+
@Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
3050
private injector: EnvironmentInjector
3151
) {}
3252

3353
ngAfterViewInit(): void {
34-
this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
35-
hostElement: this.componentElementRef.nativeElement,
36-
environmentInjector: this.injector
37-
});
54+
this.componentRef = createComponent(
55+
components[this.data.component.content.type].authoringAdvanced,
56+
{
57+
hostElement: this.componentElementRef.nativeElement,
58+
environmentInjector: this.injector
59+
}
60+
);
3861
Object.assign(this.componentRef.instance, {
39-
nodeId: this.component.nodeId,
40-
componentId: this.component.id
62+
nodeId: this.data.component.nodeId,
63+
componentId: this.data.component.id,
64+
tab: this.data.tab
4165
});
4266
this.applicationRef.attachView(this.componentRef.hostView);
4367
}

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

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
1-
<div class="flex flex-row justify-start items-center gap-2">
2-
<mat-label class="node__label--vertical-alignment" i18n>JSON</mat-label>
3-
<button
4-
mat-raised-button
5-
color="primary"
6-
class="topButton"
7-
(click)="toggleJSONView()"
8-
matTooltip="Show JSON"
9-
i18n-matTooltip
10-
matTooltipPosition="above"
11-
>
12-
<mat-icon>code</mat-icon>
13-
</button>
14-
</div>
15-
@if (showJSONAuthoring) {
16-
<div class="flex flex-col gap-2">
17-
<span i18n style="color: red">Close the JSON view to save the changes</span>
18-
<mat-form-field class="w-full">
19-
<mat-label i18n>Edit Activity JSON</mat-label>
20-
<textarea
21-
matInput
22-
cdkTextareaAutosize
23-
[(ngModel)]="componentContentJSONString"
24-
(ngModelChange)="jsonChanged.next($event)"
25-
></textarea>
26-
</mat-form-field>
1+
<div class="pt-4">
2+
<div class="mb-2">
3+
<mat-icon color="warn" class="align-bottom">warning</mat-icon>
4+
<span i18n class="warn">
5+
Editing the JSON directly is generally not recommended, as errors can break the unit. If you
6+
need assistance, please contact WISE staff.
7+
</span>
278
</div>
28-
}
9+
<mat-form-field class="w-full" appearance="outline" style="margin-top: 10px">
10+
<mat-label i18n>Edit Activity JSON</mat-label>
11+
<textarea
12+
class="mat-body-2"
13+
matInput
14+
cdkTextareaAutosize
15+
[(ngModel)]="componentContentJSONString"
16+
(ngModelChange)="jsonChanged.next($event)"
17+
></textarea>
18+
</mat-form-field>
19+
</div>

0 commit comments

Comments
 (0)