Development: Migrate the online code editor to a standalone component (…

…#9505)
ls1intum · Oct 24, 2024 · 4c34fe6 · 4c34fe6
1 parent 5e64de4
commit 4c34fe6
Show file tree

Hide file tree

Showing 14 changed files with 421 additions and 353 deletions.
diff --git a/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html b/src/main/webapp/app/exercises/programming/manage/build-plan-editor.component.html
@@ -40,7 +40,7 @@
     </button>
 </div>
 <div class="card build-plan-editor">
-    <jhi-code-editor-header [filename]="'artemisApp.programmingExercise.buildplan' | artemisTranslate" [isLoading]="isLoading" (tabSizeChanged)="updateTabSize($event)" />
+    <jhi-code-editor-header [fileName]="'artemisApp.programmingExercise.buildplan' | artemisTranslate" [isLoading]="isLoading" (onValidateTabSize)="updateTabSize($event)" />
     <div class="d-flex card-body build-plan-editor__content">
         <div class="build-plan-editor__content__editor">
             <jhi-monaco-editor

diff --git a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
@@ -28,6 +28,7 @@ import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { IrisModule } from 'app/iris/iris.module';
 import { ArtemisExerciseModule } from 'app/exercises/shared/exercise/exercise.module';
 import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
+import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 
 @NgModule({
     imports: [
@@ -55,6 +56,7 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         DetailModule,
         IrisModule,
         MonacoEditorComponent,
+        CodeEditorHeaderComponent,
     ],
     declarations: [
         ProgrammingExerciseDetailComponent,

diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
@@ -19,7 +19,6 @@ import { CodeEditorContainerComponent } from 'app/exercises/programming/shared/c
 import { ArtemisProgrammingManualAssessmentModule } from 'app/exercises/programming/assess/programming-manual-assessment.module';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeviewModule } from 'app/exercises/programming/shared/code-editor/treeview/treeview.module';
-import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/shared/code-editor/file-browser/code-editor-file-browser-badge.component';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
@@ -37,6 +36,7 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         MonacoEditorComponent,
         ArtemisSharedComponentModule,
         RequestFeedbackButtonComponent,
+        CodeEditorMonacoComponent,
     ],
     declarations: [
         CodeEditorGridComponent,
@@ -54,8 +54,6 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         CodeEditorResolveConflictModalComponent,
         CodeEditorConfirmRefreshModalComponent,
         CodeEditorContainerComponent,
-        CodeEditorHeaderComponent,
-        CodeEditorMonacoComponent,
     ],
     exports: [
         CodeEditorGridComponent,
@@ -65,8 +63,6 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         CodeEditorInstructionsComponent,
         CodeEditorBuildOutputComponent,
         CodeEditorContainerComponent,
-        CodeEditorHeaderComponent,
-        CodeEditorMonacoComponent,
     ],
     providers: [],
 })

diff --git a/...app/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html b/...app/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html
@@ -1,12 +1,12 @@
 <div class="d-flex justify-content-between card-header bg-primary text-white">
     <h3 class="mt-1 card-title">
         <fa-icon [icon]="farFileAlt" />
-        <span> &nbsp;{{ filename }}</span>
-        @if (isLoading) {
+        <span> &nbsp;{{ fileName() }}</span>
+        @if (isLoading()) {
             <fa-icon [icon]="faCircleNotch" animation="spin" class="ms-2" title="{{ 'artemisApp.editor.loadingFile' | artemisTranslate }}" />
         }
     </h3>
-    @if (showTabSizeSelector) {
+    @if (showTabSizeSelector()) {
         <div ngbDropdown class="ms-2" placement="bottom-end auto" [autoClose]="'outside'" aria-label="Code Editor Settings">
             <button ngbDropdownToggle class="btn btn-sm btn-primary" type="button" id="dropdownCodeEditorSettings" aria-expanded="false">
                 <fa-icon [icon]="faGear" />

diff --git a/...ebapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts b/...ebapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
@@ -1,26 +1,23 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
 import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
 import { faCircleNotch, faGear } from '@fortawesome/free-solid-svg-icons';
 import { MAX_TAB_SIZE } from 'app/shared/monaco-editor/monaco-editor.component';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-code-editor-header',
     templateUrl: './code-editor-header.component.html',
+    imports: [ArtemisSharedModule],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CodeEditorHeaderComponent {
-    @Input()
-    filename: string;
+    readonly fileName = input<string>();
+    readonly isLoading = input<boolean>(false);
+    readonly showTabSizeSelector = input<boolean>(true);
+    readonly onValidateTabSize = output<number>();
 
-    @Input()
-    isLoading: boolean;
-
-    @Input()
-    showTabSizeSelector = true;
-
-    @Output()
-    tabSizeChanged = new EventEmitter<number>();
-
-    tabSize = 4;
+    readonly tabSize = model<number>(4);
 
     readonly MAX_TAB_SIZE = MAX_TAB_SIZE;
 
@@ -35,7 +32,7 @@ export class CodeEditorHeaderComponent {
      * Valid values are in range [1, {@link MAX_TAB_SIZE}].
      */
     validateTabSize(): void {
-        this.tabSize = Math.max(1, Math.min(this.tabSize, MAX_TAB_SIZE));
-        this.tabSizeChanged.emit(this.tabSize);
+        this.tabSize.set(Math.max(1, Math.min(this.tabSize(), MAX_TAB_SIZE)));
+        this.onValidateTabSize.emit(this.tabSize());
     }
 }
diff --git a/...app/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html b/...app/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html
@@ -1,60 +1,60 @@
 <div class="card">
-    <jhi-code-editor-header [showTabSizeSelector]="false" [filename]="selectedFile!" [isLoading]="loadingCount > 0" />
+    <jhi-code-editor-header [showTabSizeSelector]="false" [fileName]="selectedFile()" [isLoading]="loadingCount() > 0" />
     <div class="card-body card-body-monaco">
-        @if (selectedFile) {
-            @for (feedback of filterFeedbackForSelectedFile(feedbacks); track feedback.id) {
+        @if (selectedFile()) {
+            @for (feedback of feedbackForSelectedFile(); track feedback.id + feedback.reference) {
                 <!-- actual, stored feedback -->
                 <jhi-code-editor-tutor-assessment-inline-feedback
                     class="monaco-hidden-element"
-                    [selectedFile]="selectedFile"
-                    [codeLine]="Feedback.getReferenceLine(feedback)!"
+                    [selectedFile]="selectedFile()!"
+                    [codeLine]="feedback.line"
                     [feedback]="feedback"
-                    [readOnly]="readOnlyManualFeedback"
-                    [highlightDifferences]="highlightDifferences"
-                    [course]="course"
+                    [readOnly]="readOnlyManualFeedback()"
+                    [highlightDifferences]="highlightDifferences()"
+                    [course]="course()"
                     (onUpdateFeedback)="updateFeedback($event)"
                     (onDeleteFeedback)="deleteFeedback($event)"
                     (onCancelFeedback)="cancelFeedback($event)"
                 />
             }
             <!-- new, unsaved feedback -->
-            @for (line of newFeedbackLines; track line) {
+            @for (line of newFeedbackLines(); track line) {
                 <jhi-code-editor-tutor-assessment-inline-feedback
                     class="monaco-hidden-element"
-                    [selectedFile]="selectedFile"
+                    [selectedFile]="selectedFile()!"
                     [codeLine]="line"
                     [feedback]="undefined"
-                    [highlightDifferences]="highlightDifferences"
-                    [readOnly]="readOnlyManualFeedback"
-                    [course]="course"
+                    [highlightDifferences]="highlightDifferences()"
+                    [readOnly]="readOnlyManualFeedback()"
+                    [course]="course()"
                     (onUpdateFeedback)="updateFeedback($event)"
                     (onDeleteFeedback)="deleteFeedback($event)"
                     (onCancelFeedback)="cancelFeedback($event)"
                 />
             }
             <!-- feedback suggestions -->
-            @for (suggestion of filterFeedbackForSelectedFile(feedbackSuggestions); track suggestion.id) {
+            @for (suggestion of feedbackSuggestionsForSelectedFile(); track suggestion.id + suggestion.reference) {
                 <jhi-code-editor-tutor-assessment-inline-feedback-suggestion
-                    [codeLine]="Feedback.getReferenceLine(suggestion)!"
+                    [codeLine]="suggestion.line"
                     [feedback]="suggestion"
-                    [course]="course"
+                    [course]="course()"
                     (onAcceptSuggestion)="acceptSuggestion($event)"
                     (onDiscardSuggestion)="discardSuggestion($event)"
                 />
             }
         }
         <jhi-monaco-editor
             (textChanged)="onFileTextChanged($event)"
-            [hidden]="!selectedFile || loadingCount > 0 || binaryFileSelected"
-            [readOnly]="editorLocked"
+            [hidden]="!selectedFile() || loadingCount() > 0 || binaryFileSelected()"
+            [readOnly]="editorLocked()"
             [textChangedEmitDelay]="200"
             #editor
-            [id]="'monaco-editor-' + sessionId"
+            [id]="'monaco-editor-' + sessionId()"
         />
 
-        @if (!selectedFile && !loadingCount) {
+        @if (!selectedFile() && !loadingCount()) {
             <p id="no-file-selected" class="text-center lead text-body-secondary pt-5" jhiTranslate="artemisApp.editor.selectFile"></p>
-        } @else if (binaryFileSelected) {
+        } @else if (binaryFileSelected()) {
             <p id="binary-file-selected" class="text-center lead pt-5" jhiTranslate="artemisApp.editor.binaryFileSelected"></p>
         }
     </div>