style(Authoring Tool): Edit activity in a dialog

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

@@ -1,16 +1,18 @@
-import { Component, effect, EventEmitter, Input, Output } from '@angular/core';
+import { Component, effect, Input } from '@angular/core';
 import { ComponentContent } from '../../common/ComponentContent';
 import { PreviewComponentComponent } from './preview-component/preview-component.component';
-import { EditComponentComponent } from './edit-component/edit-component.component';
 import { ComponentFactory } from '../../common/ComponentFactory';
 import { Component as WISEComponent } from '../../common/Component';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TeacherProjectTranslationService } from '../../services/teacherProjectTranslationService';
 import { copy } from '../../common/object/object';
+import { MatDialog } from '@angular/material/dialog';
+import { EditComponentDialogComponent } from './edit-component-dialog/edit-component-dialog.component';
+import { Subscription } from 'rxjs';
 
 @Component({
-  imports: [PreviewComponentComponent, EditComponentComponent, MatTooltipModule],
+  imports: [PreviewComponentComponent, EditComponentDialogComponent, MatTooltipModule],
   selector: 'component-authoring',
   styles: [
     `
@@ -33,41 +35,48 @@ import { copy } from '../../common/object/object';
       }
     `
   ],
-  template: `@if (editing) {
-      <edit-component [componentContent]="componentContent" [nodeId]="nodeId" />
-    } @else {
-      <preview-component
-        role="button"
-        tabindex="0"
-        (click)="editComponentEvent.emit()"
-        (keyup.enter)="editComponentEvent.emit()"
-        [component]="component"
-        [disabled]="true"
-        matTooltip="Edit content"
-        i18n-matTooltip
-      />
-    }`
+  template: `
+    <preview-component
+      role="button"
+      tabindex="0"
+      (click)="editComponent()"
+      (keyup.enter)="editComponent()"
+      [component]="component"
+      [disabled]="true"
+      matTooltip="Edit content"
+      i18n-matTooltip
+    />
+  `
 })
 export class ComponentAuthoringComponent {
   protected component: WISEComponent;
   @Input() componentContent: ComponentContent;
-  @Input() editing: boolean;
-  @Output() editComponentEvent: EventEmitter<void> = new EventEmitter<void>();
   @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'
+    });
+  }
 }

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

@@ -0,0 +1,46 @@
+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';
+
+@Component({
+  imports: [
+    EditComponentAdvancedButtonComponent,
+    EditComponentComponent,
+    MatButtonModule,
+    MatDialogModule,
+    MatDividerModule
+  ],
+  template: `
+    <div class="flex flex-row">
+      <h2 mat-dialog-title i18n>Edit Activity ({{ componentTypeLabel }})</h2>
+      <span class="flex grow"></span>
+      <edit-component-advanced-button
+        [componentContent]="data.componentContent"
+        [nodeId]="data.nodeId"
+      />
+    </div>
+    <mat-divider />
+    <div mat-dialog-content>
+      <edit-component [componentContent]="data.componentContent" [nodeId]="data.nodeId" />
+    </div>
+    <mat-divider />
+    <mat-dialog-actions align="end">
+      <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
+        Close
+      </button>
+    </mat-dialog-actions>
+  `
+})
+export class EditComponentDialogComponent {
+  protected componentTypeLabel: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
+    this.componentTypeLabel = inject(ComponentTypeService).getComponentTypeLabel(
+      this.data.componentContent.type
+    );
+  }
+}

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) {
     <div cdkDrag [cdkDragDisabled]="components.length < 2">
       <div class="flex flex-row">
-        <mat-card
-          [id]="component.id"
-          class="component w-full"
-          [ngClass]="{ 'component-editing': component.id === editingComponentId }"
-        >
-          <div
-            class="component-header flex flex-row justify-start items-center"
-            [ngClass]="{ 'selected-bg-bg': component.id === editingComponentId }"
-          >
+        <mat-card [id]="component.id" class="component w-full">
+          <div class="component-header flex flex-row justify-start items-center">
             <div class="flex flex-row justify-start items-center gap-2">
               @if (components.length > 1) {
                 <mat-icon class="drag-handle" cdkDragHandle title="Drag to reorder" i18n-title
@@ -44,9 +37,6 @@
             }
             <span class="flex grow"></span>
             <div class="text flex justify-end items-center">
-              @if (component.id === editingComponentId) {
-                <edit-component-advanced-button [componentContent]="component" [nodeId]="nodeId" />
-              }
               <copy-component-button
                 [node]="node"
                 [componentId]="component.id"
@@ -66,12 +56,7 @@
           </div>
           <mat-divider />
           <div>
-            <component-authoring
-              [nodeId]="nodeId"
-              [componentContent]="component"
-              [editing]="component.id === editingComponentId"
-              (editComponentEvent)="editComponent(component.id)"
-            />
+            <component-authoring [nodeId]="nodeId" [componentContent]="component" />
           </div>
         </mat-card>
         <div class="flex flex-col">

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts

@@ -24,7 +24,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { CommonModule } from '@angular/common';
 import { ComponentAuthoringComponent } from '../../components/component-authoring.component';
-import { EditComponentAdvancedButtonComponent } from '../../components/edit-component-advanced-button/edit-component-advanced-button.component';
 import { ToggleComponentTagComponent } from '../../components/toggle-component-tag/toggle-component-tag.component';
 import { VisibilityConstraintIconComponent } from '../../components/visibility-constraint-icon/visibility-constraint-icon.component';
 import { EditNodeAdvancedButtonComponent } from '../../components/edit-node-advanced-button/edit-node-advanced-button.component';
@@ -36,7 +35,6 @@ import { EditNodeAdvancedButtonComponent } from '../../components/edit-node-adva
     ComponentAuthoringComponent,
     CopyComponentButtonComponent,
     DragDropModule,
-    EditComponentAdvancedButtonComponent,
     EditNodeAdvancedButtonComponent,
     EditNodeTitleComponent,
     FormsModule,
@@ -56,7 +54,6 @@ import { EditNodeAdvancedButtonComponent } from '../../components/edit-node-adva
 })
 export class NodeAuthoringComponent implements OnInit {
   components: ComponentContent[] = [];
-  protected editingComponentId: string;
   protected isGroupNode: boolean;
   protected node: Node;
   private nodeJson: any;
@@ -86,7 +83,6 @@ export class NodeAuthoringComponent implements OnInit {
     this.isGroupNode = this.projectService.isGroupNode(this.nodeId);
     this.nodeJson = this.projectService.getNodeById(this.nodeId);
     this.components = this.projectService.getComponents(this.nodeId);
-    this.editingComponentId = null;
 
     if (history.state.newComponents && history.state.newComponents.length > 0) {
       this.highlightComponents(history.state.newComponents);
@@ -256,8 +252,4 @@ export class NodeAuthoringComponent implements OnInit {
     }
     this.projectService.saveProject();
   }
-
-  protected editComponent(componentId: string): void {
-    this.editingComponentId = componentId;
-  }
 }

src/messages.xlf

@@ -837,6 +837,10 @@
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
           <context context-type="linenumber">10,14</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
+          <context context-type="linenumber">33,38</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
           <context context-type="linenumber">46,50</context>
@@ -1227,7 +1231,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">35,37</context>
+          <context context-type="linenumber">28,30</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html</context>
@@ -1288,7 +1292,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">83,85</context>
+          <context context-type="linenumber">68,70</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1323,7 +1327,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">94,97</context>
+          <context context-type="linenumber">79,82</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -10442,7 +10446,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">59,61</context>
+          <context context-type="linenumber">49,51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6009535360963985115" datatype="html">
@@ -11179,6 +11183,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">17,21</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="470340096537376877" datatype="html">
+        <source>Edit Activity (<x id="INTERPOLATION" equiv-text="{{ componentTypeLabel }}"/>)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
+          <context context-type="linenumber">19,20</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="3021342818793175999" datatype="html">
         <source>Authoring Tool Menu</source>
         <context-group purpose="location">
@@ -13043,7 +13054,7 @@ The branches will be removed but the steps will remain in the unit.</source>
 <x id="PH" equiv-text="componentNumber"/>. <x id="PH_1" equiv-text="component.type"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts</context>
-          <context context-type="linenumber">170</context>
+          <context context-type="linenumber">166</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8956408262591847852" datatype="html">