style(Authoring Tool): Edit activity in a dialog

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<EditComponentAdvancedComponent>;
@@ -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);

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

@@ -5,63 +5,56 @@ 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';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [MatDivider, MatDialogModule, MatButtonModule],
+  selector: 'edit-component-advanced',
   styles: [
     `
       .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;
         }
       }
     `
   ],
-  templateUrl: './edit-component-advanced.component.html'
+  template: '<div class="edit-component-advanced" #component></div>'
 })
 export class EditComponentAdvancedComponent {
+  @Input() component: WISEComponent;
   @ViewChild('component') private componentElementRef: ElementRef;
   private componentRef: ComponentRef<WISEComponent>;
   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);
   }

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();
       });
   }
 

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();

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();
   }
 }

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,15 +60,15 @@ export class EditComponentTagsComponent {
       this.componentContent.tags = [];
     }
     this.componentContent.tags.push('');
-    this.projectService.componentChanged();
+    this.projectService.saveProject();
   }
 
   moveTagUp(index: number): void {
     if (index > 0) {
       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();
     }
   }
 }

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,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'
+    });
+  }
 }

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: `
+    <div class="flex items-center justify-between pe-4">
+      <h2 mat-dialog-title i18n>Edit: {{ componentIndex }}. {{ componentTypeLabel }}</h2>
+      <mat-slide-toggle color="primary" [(ngModel)]="advancedMode" i18n>Advanced</mat-slide-toggle>
+    </div>
+    <mat-divider />
+    <mat-dialog-content class="!max-h-none" [class.advanced]="advancedMode">
+      @if (advancedMode) {
+        <edit-component-advanced [component]="component" />
+      } @else {
+        <edit-component
+          class="block py-4"
+          [componentContent]="data.componentContent"
+          [nodeId]="data.nodeId"
+        />
+      }
+    </mat-dialog-content>
+    <mat-divider />
+    <mat-dialog-actions align="end">
+      <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
+        Close
+      </button>
+    </mat-dialog-actions>
+  `,
+  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
+    );
+  }
+}