From 7b94a80d58919b26c5dbd0e9bd10849b1c214cb4 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 15 May 2026 15:37:03 -0700 Subject: [PATCH 1/2] feat(Authoring): Toggle activity advanced authoring view --- .../edit-component-advanced.component.html | 13 ---- .../edit-component-advanced.component.spec.ts | 24 ++----- .../edit-component-advanced.component.ts | 25 ++++---- .../edit-component-field.component.ts | 2 +- .../edit-component-json.component.ts | 2 +- .../edit-component-rubric.component.ts | 2 +- .../edit-component-tags.component.ts | 10 +-- .../edit-component-dialog.component.ts | 35 +++++++---- src/messages.xlf | 62 ++++++++----------- 9 files changed, 75 insertions(+), 100 deletions(-) delete mode 100644 src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html deleted file mode 100644 index 79e1be3824d..00000000000 --- a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
-

Advanced Activity Settings

- -
-
-
- - - - -
diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts index 2166cae3fe7..ee81e49755c 100644 --- a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts +++ b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MockComponent, MockProviders } from 'ng-mocks'; import { ComponentContent } from '../../../assets/wise5/common/ComponentContent'; 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 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService'; import { EditComponentAdvancedComponent } from './edit-component-advanced.component'; import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService'; +import { Component } from '../../../assets/wise5/common/Component'; let component: EditComponentAdvancedComponent; let fixture: ComponentFixture; @@ -17,23 +17,6 @@ describe('EditComponentAdvancedComponent', () => { await TestBed.configureTestingModule({ imports: [MockComponent(EditShowMyWorkAdvancedComponent), EditComponentAdvancedComponent], providers: [ - { - provide: MAT_DIALOG_DATA, - useValue: { - component: { - content: { type: 'ShowMyWork' }, - id: 'component1', - nodeId: 'node1' - }, - tab: 'general' - } - }, - { - provide: MatDialogRef, - useValue: { - close: () => {} - } - }, MockProviders( ComponentServiceLookupService, TeacherNodeService, @@ -46,6 +29,11 @@ describe('EditComponentAdvancedComponent', () => { fixture = TestBed.createComponent(EditComponentAdvancedComponent); component = fixture.componentInstance; + component.component = { + id: 'component1', + nodeId: 'node1', + content: { type: 'ShowMyWork' } + } as Component; spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue({ type: 'ShowMyWork' } as ComponentContent); diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts index febba44f6fe..6ec7460149a 100644 --- a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts +++ b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts @@ -5,12 +5,12 @@ import { createComponent, ElementRef, EnvironmentInjector, - Inject, + Input, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatDivider } from '@angular/material/divider'; import { Component as WISEComponent } from '../../../assets/wise5/common/Component'; import { components } from '../../../assets/wise5/components/Components'; @@ -18,6 +18,7 @@ import { components } from '../../../assets/wise5/components/Components'; @Component({ encapsulation: ViewEncapsulation.None, imports: [MatDivider, MatDialogModule, MatButtonModule], + selector: 'edit-component-advanced', styles: [ ` .edit-component-advanced { @@ -39,29 +40,25 @@ import { components } from '../../../assets/wise5/components/Components'; } ` ], - templateUrl: './edit-component-advanced.component.html' + template: '
' }) export class EditComponentAdvancedComponent { + @Input() component: WISEComponent; @ViewChild('component') private componentElementRef: ElementRef; private componentRef: ComponentRef; constructor( private applicationRef: ApplicationRef, - @Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string }, private injector: EnvironmentInjector ) {} ngAfterViewInit(): void { - this.componentRef = createComponent( - components[this.data.component.content.type].authoringAdvanced, - { - hostElement: this.componentElementRef.nativeElement, - environmentInjector: this.injector - } - ); + this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, { + hostElement: this.componentElementRef.nativeElement, + environmentInjector: this.injector + }); Object.assign(this.componentRef.instance, { - nodeId: this.data.component.nodeId, - componentId: this.data.component.id, - tab: this.data.tab + nodeId: this.component.nodeId, + componentId: this.component.id }); this.applicationRef.attachView(this.componentRef.hostView); } diff --git a/src/app/authoring-tool/edit-component-field.component.ts b/src/app/authoring-tool/edit-component-field.component.ts index a8fe4df789d..db1ec2ee855 100644 --- a/src/app/authoring-tool/edit-component-field.component.ts +++ b/src/app/authoring-tool/edit-component-field.component.ts @@ -15,7 +15,7 @@ export abstract class EditComponentFieldComponent { this.inputChangedSubscription = this.inputChanged .pipe(debounceTime(1000), distinctUntilChanged()) .subscribe(() => { - this.projectService.componentChanged(); + this.projectService.saveProject(); }); } diff --git a/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts b/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts index cb629d507b5..d8e6247e87a 100644 --- a/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts +++ b/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts @@ -56,7 +56,7 @@ export class EditComponentJsonComponent { this.projectService .getNode(this.component.nodeId) .replaceComponent(this.component.id, JSON.parse(this.componentContentJSONString)); - this.projectService.componentChanged(); + this.projectService.saveProject(); this.notificationService.showJSONValidMessage(); } catch (e) { this.notificationService.showJSONInvalidMessage(); diff --git a/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts b/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts index 12c0bafd13e..8ca9c7b9f46 100644 --- a/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts +++ b/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts @@ -17,6 +17,6 @@ export class EditComponentRubricComponent { constructor(private projectService: TeacherProjectService) {} protected save(): void { - this.projectService.componentChanged(); + this.projectService.saveProject(); } } diff --git a/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts b/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts index ae7998727e0..ce820e29564 100644 --- a/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts +++ b/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts @@ -47,7 +47,7 @@ export class EditComponentTagsComponent { .pipe(debounceTime(1000), distinctUntilChanged()) .subscribe(({ tagIndex, tag }) => { this.componentContent.tags[tagIndex] = tag; - this.projectService.componentChanged(); + this.projectService.saveProject(); }); } @@ -60,7 +60,7 @@ export class EditComponentTagsComponent { this.componentContent.tags = []; } this.componentContent.tags.push(''); - this.projectService.componentChanged(); + this.projectService.saveProject(); } moveTagUp(index: number): void { @@ -68,7 +68,7 @@ export class EditComponentTagsComponent { const tag = this.componentContent.tags[index]; this.componentContent.tags.splice(index, 1); this.componentContent.tags.splice(index - 1, 0, tag); - this.projectService.componentChanged(); + this.projectService.saveProject(); } } @@ -77,14 +77,14 @@ export class EditComponentTagsComponent { const tag = this.componentContent.tags[index]; this.componentContent.tags.splice(index, 1); this.componentContent.tags.splice(index + 1, 0, tag); - this.projectService.componentChanged(); + this.projectService.saveProject(); } } deleteTag(indexOfTagToDelete: number): void { if (confirm($localize`Are you sure you want to delete this tag?`)) { this.componentContent.tags.splice(indexOfTagToDelete, 1); - this.projectService.componentChanged(); + this.projectService.saveProject(); } } } diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts index bd0bb45b0ee..2adb28cb02a 100644 --- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts +++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts @@ -1,31 +1,36 @@ import { Component, inject, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { EditComponentComponent } from '../edit-component/edit-component.component'; -import { EditComponentAdvancedButtonComponent } from '../edit-component-advanced-button/edit-component-advanced-button.component'; import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { ComponentTypeService } from '../../../services/componentTypeService'; +import { MatSlideToggle } from '@angular/material/slide-toggle'; +import { FormsModule } from '@angular/forms'; +import { Component as WISEComponent } from '../../../common/Component'; +import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component'; @Component({ imports: [ - EditComponentAdvancedButtonComponent, EditComponentComponent, + EditComponentAdvancedComponent, + FormsModule, MatButtonModule, MatDialogModule, - MatDividerModule + MatDividerModule, + MatSlideToggle ], template: ` -
+

Edit Activity ({{ componentTypeLabel }})

- - + Advanced mode
- + @if (advancedMode) { + + } @else { + + }
@@ -36,10 +41,16 @@ import { ComponentTypeService } from '../../../services/componentTypeService'; ` }) export class EditComponentDialogComponent { + protected advancedMode = false; + protected component: WISEComponent; protected componentTypeLabel: string; - constructor(@Inject(MAT_DIALOG_DATA) public data: any) { - this.componentTypeLabel = inject(ComponentTypeService).getComponentTypeLabel( + constructor( + private componentTypeService: ComponentTypeService, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + this.component = new WISEComponent(this.data.componentContent, this.data.nodeId); + this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel( this.data.componentContent.type ); } diff --git a/src/messages.xlf b/src/messages.xlf index 14300c9099b..b36f52d8df6 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -824,32 +824,6 @@ 16,19 - - Advanced Activity Settings - - src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html - 2,5 - - - - Close - - src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html - 10,14 - - - src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts - 33,38 - - - src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html - 46,50 - - - src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html - 114,119 - - Add Visibility Constraint @@ -11172,22 +11146,40 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.22,26 - - Advanced + + Edit Activity () - src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.html - 6,10 + src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts + 24,25 + + + Advanced mode - src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts - 17,21 + src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts + 25,28 - - Edit Activity () + + Close src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts - 19,20 + 38,43 + + + src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html + 46,50 + + + src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html + 114,119 + + + + Advanced + + src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts + 17,21 From d7e7726bc684360b2ba554a3b45f6b28998aed88 Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Fri, 22 May 2026 13:24:33 -0700 Subject: [PATCH 2/2] Clean up styles and layout; simplify advanced toggle text --- .../edit-component-advanced.component.ts | 8 ++------ .../components/component-authoring.component.ts | 1 + .../edit-component-dialog.component.ts | 9 ++++++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts index 6ec7460149a..b93a7cb52b9 100644 --- a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts +++ b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts @@ -24,23 +24,19 @@ import { components } from '../../../assets/wise5/components/Components'; .edit-component-advanced { --mat-tab-divider-color: var(--mat-divider-color); --mat-tab-divider-height: 1px; - .mat-divider { - margin: 0 -16px; - } .mat-mdc-tab-body-content { - padding: 16px 0; + padding: 16px; } .mat-mdc-tab-header { position: sticky; top: 0; z-index: 2; background-color: white; - margin: 0 -16px; } } ` ], - template: '
' + template: '
' }) export class EditComponentAdvancedComponent { @Input() component: WISEComponent; diff --git a/src/assets/wise5/authoringTool/components/component-authoring.component.ts b/src/assets/wise5/authoringTool/components/component-authoring.component.ts index 8791c59f8d7..d4a16616144 100644 --- a/src/assets/wise5/authoringTool/components/component-authoring.component.ts +++ b/src/assets/wise5/authoringTool/components/component-authoring.component.ts @@ -97,6 +97,7 @@ export class ComponentAuthoringComponent { componentContent: this.componentContent, nodeId: this.nodeId }, + height: '90vh', panelClass: 'dialog-xl' }); } diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts index c9a59a971b5..473a6be0a7c 100644 --- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts +++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts @@ -21,12 +21,12 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; MatSlideToggle ], template: ` -
+

Edit: {{ componentIndex }}. {{ componentTypeLabel }}

- Advanced mode + Advanced
- + @if (advancedMode) { } @else { @@ -48,6 +48,9 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; .mat-divider { margin: 0; } + .advanced { + padding: 0 !important; + } ` }) export class EditComponentDialogComponent {