();
@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,14 @@ export class ComponentAuthoringComponent {
this.nodeId
);
}
+
+ protected editComponent(): void {
+ this.dialog.open(EditComponentDialogComponent, {
+ data: {
+ componentContent: this.componentContent,
+ nodeId: this.nodeId
+ },
+ 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..2adb28cb02a
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -0,0 +1,57 @@
+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 { 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: [
+ EditComponentComponent,
+ EditComponentAdvancedComponent,
+ FormsModule,
+ MatButtonModule,
+ MatDialogModule,
+ MatDividerModule,
+ MatSlideToggle
+ ],
+ template: `
+
+
Edit Activity ({{ componentTypeLabel }})
+ Advanced mode
+
+
+
+ @if (advancedMode) {
+
+ } @else {
+
+ }
+
+
+
+
+
+ `
+})
+export class EditComponentDialogComponent {
+ protected advancedMode = false;
+ protected component: WISEComponent;
+ protected componentTypeLabel: string;
+
+ 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/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) {