();
@Input() nodeId: string;
+ private subscriptions = new Subscription();
constructor(
+ private dialog: MatDialog,
private projectService: TeacherProjectService,
private projectTranslationService: TeacherProjectTranslationService
) {
effect(() => {
this.setComponent();
});
+ this.subscriptions.add(
+ this.projectService.projectSaved$.subscribe(() => {
+ this.setComponent();
+ })
+ );
}
ngOnChanges(): void {
this.setComponent();
}
+ ngOnDestroy(): void {
+ this.subscriptions.unsubscribe();
+ }
+
private setComponent(): void {
// when current translations change, apply translations to a copy of the component content
// so the original component content is not modified for subsequent use.
@@ -81,4 +90,15 @@ export class ComponentAuthoringComponent {
this.nodeId
);
}
+
+ protected editComponent(): void {
+ this.dialog.open(EditComponentDialogComponent, {
+ data: {
+ 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
new file mode 100644
index 00000000000..473a6be0a7c
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -0,0 +1,76 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { EditComponentComponent } from '../edit-component/edit-component.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';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+
+@Component({
+ imports: [
+ EditComponentComponent,
+ EditComponentAdvancedComponent,
+ FormsModule,
+ MatButtonModule,
+ MatDialogModule,
+ MatDividerModule,
+ MatSlideToggle
+ ],
+ template: `
+
+
Edit: {{ componentIndex }}. {{ componentTypeLabel }}
+ Advanced
+
+
+
+ @if (advancedMode) {
+
+ } @else {
+
+ }
+
+
+
+
+
+ `,
+ styles: `
+ .mat-divider {
+ margin: 0;
+ }
+ .advanced {
+ padding: 0 !important;
+ }
+ `
+})
+export class EditComponentDialogComponent {
+ protected advancedMode = false;
+ protected component: WISEComponent;
+ protected componentIndex: number;
+ protected componentTypeLabel: string;
+
+ constructor(
+ private componentTypeService: ComponentTypeService,
+ @Inject(MAT_DIALOG_DATA) public data: any,
+ private projectService: TeacherProjectService
+ ) {
+ this.component = new WISEComponent(this.data.componentContent, this.data.nodeId);
+ this.componentIndex =
+ this.projectService
+ .getNode(this.data.nodeId)
+ .getComponentIndex(this.data.componentContent.id) + 1;
+ this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel(
+ this.data.componentContent.type
+ );
+ }
+}
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
index 0be75da4469..a77d8e31043 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -21,15 +21,8 @@
@for (component of components; track component.id; let i = $index; let last = $last) {