Skip to content

Commit 91cf5ce

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
feat(Authoring): Toggle activity advanced authoring view (#2313)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent 53806fe commit 91cf5ce

10 files changed

Lines changed: 83 additions & 110 deletions

File tree

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

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

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
32
import { MockComponent, MockProviders } from 'ng-mocks';
43
import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
54
import { EditShowMyWorkAdvancedComponent } from '../../../assets/wise5/components/showMyWork/edit-show-my-work-advanced/edit-show-my-work-advanced.component';
@@ -9,6 +8,7 @@ import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeSe
98
import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
109
import { EditComponentAdvancedComponent } from './edit-component-advanced.component';
1110
import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
11+
import { Component } from '../../../assets/wise5/common/Component';
1212

1313
let component: EditComponentAdvancedComponent;
1414
let fixture: ComponentFixture<EditComponentAdvancedComponent>;
@@ -17,23 +17,6 @@ describe('EditComponentAdvancedComponent', () => {
1717
await TestBed.configureTestingModule({
1818
imports: [MockComponent(EditShowMyWorkAdvancedComponent), EditComponentAdvancedComponent],
1919
providers: [
20-
{
21-
provide: MAT_DIALOG_DATA,
22-
useValue: {
23-
component: {
24-
content: { type: 'ShowMyWork' },
25-
id: 'component1',
26-
nodeId: 'node1'
27-
},
28-
tab: 'general'
29-
}
30-
},
31-
{
32-
provide: MatDialogRef,
33-
useValue: {
34-
close: () => {}
35-
}
36-
},
3720
MockProviders(
3821
ComponentServiceLookupService,
3922
TeacherNodeService,
@@ -46,6 +29,11 @@ describe('EditComponentAdvancedComponent', () => {
4629

4730
fixture = TestBed.createComponent(EditComponentAdvancedComponent);
4831
component = fixture.componentInstance;
32+
component.component = {
33+
id: 'component1',
34+
nodeId: 'node1',
35+
content: { type: 'ShowMyWork' }
36+
} as Component;
4937
spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue({
5038
type: 'ShowMyWork'
5139
} as ComponentContent);

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

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,56 @@ import {
55
createComponent,
66
ElementRef,
77
EnvironmentInjector,
8-
Inject,
8+
Input,
99
ViewChild,
1010
ViewEncapsulation
1111
} from '@angular/core';
1212
import { MatButtonModule } from '@angular/material/button';
13-
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
13+
import { MatDialogModule } from '@angular/material/dialog';
1414
import { MatDivider } from '@angular/material/divider';
1515
import { Component as WISEComponent } from '../../../assets/wise5/common/Component';
1616
import { components } from '../../../assets/wise5/components/Components';
1717

1818
@Component({
1919
encapsulation: ViewEncapsulation.None,
2020
imports: [MatDivider, MatDialogModule, MatButtonModule],
21+
selector: 'edit-component-advanced',
2122
styles: [
2223
`
2324
.edit-component-advanced {
2425
--mat-tab-divider-color: var(--mat-divider-color);
2526
--mat-tab-divider-height: 1px;
26-
.mat-divider {
27-
margin: 0 -16px;
28-
}
2927
.mat-mdc-tab-body-content {
30-
padding: 16px 0;
28+
padding: 16px;
3129
}
3230
.mat-mdc-tab-header {
3331
position: sticky;
3432
top: 0;
3533
z-index: 2;
3634
background-color: white;
37-
margin: 0 -16px;
3835
}
3936
}
4037
`
4138
],
42-
templateUrl: './edit-component-advanced.component.html'
39+
template: '<div class="edit-component-advanced" #component></div>'
4340
})
4441
export class EditComponentAdvancedComponent {
42+
@Input() component: WISEComponent;
4543
@ViewChild('component') private componentElementRef: ElementRef;
4644
private componentRef: ComponentRef<WISEComponent>;
4745
constructor(
4846
private applicationRef: ApplicationRef,
49-
@Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
5047
private injector: EnvironmentInjector
5148
) {}
5249

5350
ngAfterViewInit(): void {
54-
this.componentRef = createComponent(
55-
components[this.data.component.content.type].authoringAdvanced,
56-
{
57-
hostElement: this.componentElementRef.nativeElement,
58-
environmentInjector: this.injector
59-
}
60-
);
51+
this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
52+
hostElement: this.componentElementRef.nativeElement,
53+
environmentInjector: this.injector
54+
});
6155
Object.assign(this.componentRef.instance, {
62-
nodeId: this.data.component.nodeId,
63-
componentId: this.data.component.id,
64-
tab: this.data.tab
56+
nodeId: this.component.nodeId,
57+
componentId: this.component.id
6558
});
6659
this.applicationRef.attachView(this.componentRef.hostView);
6760
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export abstract class EditComponentFieldComponent {
1515
this.inputChangedSubscription = this.inputChanged
1616
.pipe(debounceTime(1000), distinctUntilChanged())
1717
.subscribe(() => {
18-
this.projectService.componentChanged();
18+
this.projectService.saveProject();
1919
});
2020
}
2121

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class EditComponentJsonComponent {
5656
this.projectService
5757
.getNode(this.component.nodeId)
5858
.replaceComponent(this.component.id, JSON.parse(this.componentContentJSONString));
59-
this.projectService.componentChanged();
59+
this.projectService.saveProject();
6060
this.notificationService.showJSONValidMessage();
6161
} catch (e) {
6262
this.notificationService.showJSONInvalidMessage();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ export class EditComponentRubricComponent {
1717
constructor(private projectService: TeacherProjectService) {}
1818

1919
protected save(): void {
20-
this.projectService.componentChanged();
20+
this.projectService.saveProject();
2121
}
2222
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class EditComponentTagsComponent {
4747
.pipe(debounceTime(1000), distinctUntilChanged())
4848
.subscribe(({ tagIndex, tag }) => {
4949
this.componentContent.tags[tagIndex] = tag;
50-
this.projectService.componentChanged();
50+
this.projectService.saveProject();
5151
});
5252
}
5353

@@ -60,15 +60,15 @@ export class EditComponentTagsComponent {
6060
this.componentContent.tags = [];
6161
}
6262
this.componentContent.tags.push('');
63-
this.projectService.componentChanged();
63+
this.projectService.saveProject();
6464
}
6565

6666
moveTagUp(index: number): void {
6767
if (index > 0) {
6868
const tag = this.componentContent.tags[index];
6969
this.componentContent.tags.splice(index, 1);
7070
this.componentContent.tags.splice(index - 1, 0, tag);
71-
this.projectService.componentChanged();
71+
this.projectService.saveProject();
7272
}
7373
}
7474

@@ -77,14 +77,14 @@ export class EditComponentTagsComponent {
7777
const tag = this.componentContent.tags[index];
7878
this.componentContent.tags.splice(index, 1);
7979
this.componentContent.tags.splice(index + 1, 0, tag);
80-
this.projectService.componentChanged();
80+
this.projectService.saveProject();
8181
}
8282
}
8383

8484
deleteTag(indexOfTagToDelete: number): void {
8585
if (confirm($localize`Are you sure you want to delete this tag?`)) {
8686
this.componentContent.tags.splice(indexOfTagToDelete, 1);
87-
this.projectService.componentChanged();
87+
this.projectService.saveProject();
8888
}
8989
}
9090
}

‎src/assets/wise5/authoringTool/components/component-authoring.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export class ComponentAuthoringComponent {
9797
componentContent: this.componentContent,
9898
nodeId: this.nodeId
9999
},
100+
height: '90vh',
100101
panelClass: 'dialog-xl'
101102
});
102103
}

‎src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,41 @@
1-
import { Component, inject, Inject } from '@angular/core';
1+
import { Component, Inject } from '@angular/core';
22
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
33
import { EditComponentComponent } from '../edit-component/edit-component.component';
4-
import { EditComponentAdvancedButtonComponent } from '../edit-component-advanced-button/edit-component-advanced-button.component';
54
import { MatButtonModule } from '@angular/material/button';
65
import { MatDividerModule } from '@angular/material/divider';
76
import { ComponentTypeService } from '../../../services/componentTypeService';
7+
import { MatSlideToggle } from '@angular/material/slide-toggle';
8+
import { FormsModule } from '@angular/forms';
9+
import { Component as WISEComponent } from '../../../common/Component';
10+
import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
811
import { TeacherProjectService } from '../../../services/teacherProjectService';
912

1013
@Component({
1114
imports: [
12-
EditComponentAdvancedButtonComponent,
1315
EditComponentComponent,
16+
EditComponentAdvancedComponent,
17+
FormsModule,
1418
MatButtonModule,
1519
MatDialogModule,
16-
MatDividerModule
20+
MatDividerModule,
21+
MatSlideToggle
1722
],
1823
template: `
19-
<div class="flex items-center">
24+
<div class="flex items-center justify-between pe-4">
2025
<h2 mat-dialog-title i18n>Edit: {{ componentIndex }}. {{ componentTypeLabel }}</h2>
21-
<span class="flex grow"></span>
22-
<edit-component-advanced-button
23-
[componentContent]="data.componentContent"
24-
[nodeId]="data.nodeId"
25-
/>
26+
<mat-slide-toggle color="primary" [(ngModel)]="advancedMode" i18n>Advanced</mat-slide-toggle>
2627
</div>
2728
<mat-divider />
28-
<mat-dialog-content>
29-
<edit-component
30-
class="block py-4"
31-
[componentContent]="data.componentContent"
32-
[nodeId]="data.nodeId"
33-
/>
29+
<mat-dialog-content class="!max-h-none" [class.advanced]="advancedMode">
30+
@if (advancedMode) {
31+
<edit-component-advanced [component]="component" />
32+
} @else {
33+
<edit-component
34+
class="block py-4"
35+
[componentContent]="data.componentContent"
36+
[nodeId]="data.nodeId"
37+
/>
38+
}
3439
</mat-dialog-content>
3540
<mat-divider />
3641
<mat-dialog-actions align="end">
@@ -43,21 +48,28 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
4348
.mat-divider {
4449
margin: 0;
4550
}
51+
.advanced {
52+
padding: 0 !important;
53+
}
4654
`
4755
})
4856
export class EditComponentDialogComponent {
57+
protected advancedMode = false;
58+
protected component: WISEComponent;
4959
protected componentIndex: number;
5060
protected componentTypeLabel: string;
5161

5262
constructor(
63+
private componentTypeService: ComponentTypeService,
5364
@Inject(MAT_DIALOG_DATA) public data: any,
5465
private projectService: TeacherProjectService
5566
) {
67+
this.component = new WISEComponent(this.data.componentContent, this.data.nodeId);
5668
this.componentIndex =
5769
this.projectService
5870
.getNode(this.data.nodeId)
5971
.getComponentIndex(this.data.componentContent.id) + 1;
60-
this.componentTypeLabel = inject(ComponentTypeService).getComponentTypeLabel(
72+
this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel(
6173
this.data.componentContent.type
6274
);
6375
}

‎src/messages.xlf‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -824,32 +824,6 @@
824824
<context context-type="linenumber">16,19</context>
825825
</context-group>
826826
</trans-unit>
827-
<trans-unit id="5222210534332546893" datatype="html">
828-
<source>Advanced Activity Settings</source>
829-
<context-group purpose="location">
830-
<context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
831-
<context context-type="linenumber">2,5</context>
832-
</context-group>
833-
</trans-unit>
834-
<trans-unit id="5547981558491672240" datatype="html">
835-
<source> Close </source>
836-
<context-group purpose="location">
837-
<context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
838-
<context context-type="linenumber">10,14</context>
839-
</context-group>
840-
<context-group purpose="location">
841-
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
842-
<context context-type="linenumber">38,43</context>
843-
</context-group>
844-
<context-group purpose="location">
845-
<context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
846-
<context context-type="linenumber">46,50</context>
847-
</context-group>
848-
<context-group purpose="location">
849-
<context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
850-
<context context-type="linenumber">114,119</context>
851-
</context-group>
852-
</trans-unit>
853827
<trans-unit id="7783846153124093220" datatype="html">
854828
<source>Add Visibility Constraint</source>
855829
<context-group purpose="location">
@@ -11176,22 +11150,40 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
1117611150
<context context-type="linenumber">22,26</context>
1117711151
</context-group>
1117811152
</trans-unit>
11179-
<trans-unit id="6201638315245239510" datatype="html">
11180-
<source>Advanced</source>
11153+
<trans-unit id="7383335766319610131" datatype="html">
11154+
<source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
1118111155
<context-group purpose="location">
11182-
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.html</context>
11183-
<context context-type="linenumber">6,10</context>
11156+
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
11157+
<context context-type="linenumber">25,26</context>
1118411158
</context-group>
11159+
</trans-unit>
11160+
<trans-unit id="6159883120617273592" datatype="html">
11161+
<source>Advanced mode</source>
1118511162
<context-group purpose="location">
11186-
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
11187-
<context context-type="linenumber">17,21</context>
11163+
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
11164+
<context context-type="linenumber">26,29</context>
1118811165
</context-group>
1118911166
</trans-unit>
11190-
<trans-unit id="7383335766319610131" datatype="html">
11191-
<source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
11167+
<trans-unit id="5547981558491672240" datatype="html">
11168+
<source> Close </source>
1119211169
<context-group purpose="location">
1119311170
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
11194-
<context context-type="linenumber">20,21</context>
11171+
<context context-type="linenumber">43,48</context>
11172+
</context-group>
11173+
<context-group purpose="location">
11174+
<context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
11175+
<context context-type="linenumber">46,50</context>
11176+
</context-group>
11177+
<context-group purpose="location">
11178+
<context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
11179+
<context context-type="linenumber">114,119</context>
11180+
</context-group>
11181+
</trans-unit>
11182+
<trans-unit id="6201638315245239510" datatype="html">
11183+
<source>Advanced</source>
11184+
<context-group purpose="location">
11185+
<context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
11186+
<context context-type="linenumber">17,21</context>
1119511187
</context-group>
1119611188
</trans-unit>
1119711189
<trans-unit id="3021342818793175999" datatype="html">

0 commit comments

Comments
 (0)