ls1intum · krusche · Oct 12, 2024 · Oct 7, 2024 · Oct 7, 2024 · Oct 7, 2024
@@ -1,20 +1,20 @@
-import { Component, Input, OnDestroy, inject } from '@angular/core';
+import { Component, Input, OnDestroy, inject, signal } from '@angular/core';
 import type { ProgrammingDiffReportDetail } from 'app/detail-overview-list/detail.model';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
 import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/button.component';
 import { faCodeCompare } from '@fortawesome/free-solid-svg-icons';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 
 @Component({
     selector: 'jhi-programming-diff-report-detail',
     templateUrl: 'programming-diff-report-detail.component.html',
     standalone: true,
-    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffReportModule],
+    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffLineStatComponent],
 })
 export class ProgrammingDiffReportDetailComponent implements OnDestroy {
     protected readonly FeatureToggle = FeatureToggle;
@@ -38,7 +38,7 @@ export class ProgrammingDiffReportDetailComponent implements OnDestroy {
             return;
         }
 
-        this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
-        this.modalRef.componentInstance.report = gitDiff;
+        this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: GitDiffReportModalComponent.WINDOW_CLASS });
+        this.modalRef.componentInstance.report = signal(gitDiff);
     }
 }
@@ -6,7 +6,6 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
 import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module';
 import { ArtemisProgrammingExerciseStatusModule } from 'app/exercises/programming/manage/status/programming-exercise-status.module';
 import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseInstructionsEditorModule } from 'app/exercises/programming/manage/instructions-editor/programming-exercise-instructions-editor.module';
 import { ArtemisProgrammingExerciseLifecycleModule } from 'app/exercises/programming/shared/lifecycle/programming-exercise-lifecycle.module';
 import { AssessmentInstructionsModule } from 'app/assessment/assessment-instructions/assessment-instructions.module';
@@ -25,7 +24,6 @@ import { NoDataComponent } from 'app/shared/no-data-component';
         SubmissionResultStatusModule,
         ArtemisProgrammingExerciseStatusModule,
         ArtemisProgrammingExerciseActionsModule,
-        GitDiffReportModule,
         ArtemisProgrammingExerciseInstructionsEditorModule,
         ArtemisProgrammingExerciseLifecycleModule,
         AssessmentInstructionsModule,

@@ -67,11 +67,11 @@ import { ArtemisExamNavigationBarModule } from 'app/exam/participate/exam-naviga
 import { ArtemisExamSubmissionComponentsModule } from 'app/exam/participate/exercises/exam-submission-components.module';
 import { MatSliderModule } from '@angular/material/slider';
 import { ProgrammingExerciseExamDiffComponent } from './student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseModule } from 'app/exercises/programming/shared/programming-exercise.module';
 import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { ArtemisDurationFromSecondsPipe } from 'app/shared/pipes/artemis-duration-from-seconds.pipe';
 import { NoDataComponent } from 'app/shared/no-data-component';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 
 const ENTITY_STATES = [...examManagementState];
 
@@ -110,10 +110,10 @@ const ENTITY_STATES = [...examManagementState];
         ArtemisExamNavigationBarModule,
         ArtemisExamSubmissionComponentsModule,
         MatSliderModule,
-        GitDiffReportModule,
         ArtemisProgrammingExerciseModule,
         DetailModule,
         NoDataComponent,
+        GitDiffLineStatComponent,
     ],
     declarations: [
         ExamManagementComponent,

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core';
 import { ProgrammingExercise } from 'app/entities/programming/programming-exercise.model';
 import { ProgrammingSubmission } from 'app/entities/programming/programming-submission.model';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
@@ -123,10 +123,10 @@ export class ProgrammingExerciseExamDiffComponent extends ExamPageComponent impl
      * Shows the git-diff in a modal.
      */
     showGitDiff(): void {
-        const modalRef = this.modalService.open(GitDiffReportModalComponent, { size: 'xl' });
-        modalRef.componentInstance.report = this.exercise.gitDiffReport;
-        modalRef.componentInstance.diffForTemplateAndSolution = false;
-        modalRef.componentInstance.cachedRepositoryFiles = this.cachedRepositoryFiles;
+        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: GitDiffReportModalComponent.WINDOW_CLASS });
+        modalRef.componentInstance.report = signal(this.exercise.gitDiffReport);
+        modalRef.componentInstance.diffForTemplateAndSolution = signal(false);
+        modalRef.componentInstance.cachedRepositoryFiles = signal(this.cachedRepositoryFiles);
         this.cachedRepositoryFilesService.getCachedRepositoryFilesObservable().subscribe((cachedRepositoryFiles) => {
             this.cachedRepositoryFiles = cachedRepositoryFiles;
         });

@@ -9,13 +9,13 @@ import { CoverageGenerationStepComponent } from '../steps/coverage-generation-st
 import { SolutionEntryGenerationStepComponent } from '../steps/solution-entry-generation-step/solution-entry-generation-step.component';
 import { CodeHintGenerationStepComponent } from '../steps/code-hint-generation-step/code-hint-generation-step.component';
 import { TestwiseCoverageReportModule } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.module';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { CodeHintGenerationOverviewComponent } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.component';
 import { RouterModule } from '@angular/router';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { CodeHintGenerationStatusStepComponent } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-status/code-hint-generation-status-step.component';
 import { ManualSolutionEntryCreationModalComponent } from '../manual-solution-entry-creation-modal/manual-solution-entry-creation-modal.component';
+import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 
 @NgModule({
     imports: [
@@ -24,13 +24,9 @@ import { ManualSolutionEntryCreationModalComponent } from '../manual-solution-en
         ArtemisExerciseHintSharedModule,
         ArtemisSharedComponentModule,
         TestwiseCoverageReportModule,
-        GitDiffReportModule,
-        GitDiffReportModule,
-        TestwiseCoverageReportModule,
-        ArtemisSharedComponentModule,
         ArtemisMarkdownModule,
-        ArtemisExerciseHintSharedModule,
         MatExpansionModule,
+        GitDiffReportComponent,
     ],
     declarations: [
         CodeHintGenerationStatusComponent,

@@ -1,13 +1,13 @@
 <div class="my-2 ps-1 file-path-with-badge">
-    {{ title }}
-    @if (fileStatus !== FileStatus.UNCHANGED) {
+    {{ title() }}
+    @if (fileStatus() !== FileStatus.UNCHANGED) {
         <span
-            [jhiTranslate]="'artemisApp.programmingExercise.diffReport.fileChange.' + fileStatus"
+            [jhiTranslate]="'artemisApp.programmingExercise.diffReport.fileChange.' + fileStatus()"
             [ngClass]="{
                 badge: true,
-                'bg-success': fileStatus === FileStatus.CREATED,
-                'bg-warning': fileStatus === FileStatus.RENAMED,
-                'bg-danger': fileStatus === FileStatus.DELETED,
+                'bg-success': fileStatus() === FileStatus.CREATED,
+                'bg-warning': fileStatus() === FileStatus.RENAMED,
+                'bg-danger': fileStatus() === FileStatus.DELETED,
             }"
         ></span>
     }

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { CommonModule } from '@angular/common';
 
 enum FileStatus {
     CREATED = 'created',
@@ -10,35 +12,33 @@ enum FileStatus {
     selector: 'jhi-git-diff-file-panel-title',
     templateUrl: './git-diff-file-panel-title.component.html',
     styleUrls: ['./git-diff-file-panel-title.component.scss'],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslateDirective, CommonModule],
 })
-export class GitDiffFilePanelTitleComponent implements OnInit {
-    @Input()
-    previousFilePath?: string;
+export class GitDiffFilePanelTitleComponent {
+    readonly originalFilePath = input<string>();
+    readonly modifiedFilePath = input<string>();
 
-    @Input()
-    filePath?: string;
+    readonly titleAndFileStatus = computed(() => this.getTitleAndFileStatus());
+    readonly title = computed(() => this.titleAndFileStatus().title);
+    readonly fileStatus = computed(() => this.titleAndFileStatus().fileStatus);
 
-    title?: string;
-    fileStatus: FileStatus = FileStatus.UNCHANGED;
-
-    // Expose to template
     protected readonly FileStatus = FileStatus;
 
-    ngOnInit(): void {
-        if (this.filePath && this.previousFilePath) {
-            if (this.filePath !== this.previousFilePath) {
-                this.title = `${this.previousFilePath} → ${this.filePath}`;
-                this.fileStatus = FileStatus.RENAMED;
+    private getTitleAndFileStatus(): { title?: string; fileStatus: FileStatus } {
+        const originalFilePath = this.originalFilePath();
+        const modifiedFilePath = this.modifiedFilePath();
+        if (modifiedFilePath && originalFilePath) {
+            if (modifiedFilePath !== originalFilePath) {
+                return { title: `${originalFilePath} → ${modifiedFilePath}`, fileStatus: FileStatus.RENAMED };
             } else {
-                this.title = this.filePath;
-                this.fileStatus = FileStatus.UNCHANGED;
+                return { title: modifiedFilePath, fileStatus: FileStatus.UNCHANGED };
             }
-        } else if (this.filePath) {
-            this.title = this.filePath;
-            this.fileStatus = FileStatus.CREATED;
+        } else if (modifiedFilePath) {
+            return { title: modifiedFilePath, fileStatus: FileStatus.CREATED };
         } else {
-            this.title = this.previousFilePath;
-            this.fileStatus = FileStatus.DELETED;
+            return { title: originalFilePath, fileStatus: FileStatus.DELETED };
         }
     }
 }
@@ -1,13 +1,13 @@
 <div ngbAccordion [destroyOnHide]="false" class="git-diff-file-panel">
     <div ngbAccordionItem #fileDiffPanel="ngbAccordionItem" [collapsed]="false">
         <div ngbAccordionHeader class="d-flex align-items-center justify-content-between">
-            <jhi-git-diff-file-panel-title [filePath]="filePath" [previousFilePath]="previousFilePath" />
+            <jhi-git-diff-file-panel-title [modifiedFilePath]="modifiedFilePath()" [originalFilePath]="originalFilePath()" />
             <div>
                 <jhi-git-diff-line-stat
-                    [addedLineCount]="addedLineCount"
-                    [removedLineCount]="removedLineCount"
+                    [addedLineCount]="addedLineCount()"
+                    [removedLineCount]="removedLineCount()"
                     ngbTooltip="{{
-                        (diffForTemplateAndSolution
+                        (diffForTemplateAndSolution()
                             ? 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReport'
                             : 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReportExamTimeline'
                         ) | artemisTranslate
@@ -21,11 +21,13 @@
         <div ngbAccordionCollapse>
             <div ngbAccordionBody>
                 <jhi-git-diff-file
-                    [allowSplitView]="allowSplitView"
-                    [diffForTemplateAndSolution]="diffForTemplateAndSolution"
-                    [diffEntries]="diffEntries"
-                    [originalFileContent]="templateFileContent"
-                    [modifiedFileContent]="solutionFileContent"
+                    [allowSplitView]="allowSplitView()"
+                    [diffForTemplateAndSolution]="diffForTemplateAndSolution()"
+                    [diffEntries]="diffEntries()"
+                    [originalFileContent]="originalFileContent()"
+                    [originalFilePath]="originalFilePath()"
+                    [modifiedFileContent]="modifiedFileContent()"
+                    [modifiedFilePath]="modifiedFilePath()"
                     (onDiffReady)="onDiffReady.emit($event)"
                 />
             </div>

@@ -1,58 +1,66 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
+import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-git-diff-file-panel',
     templateUrl: './git-diff-file-panel.component.html',
     styleUrls: ['./git-diff-file-panel.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [GitDiffFilePanelTitleComponent, GitDiffLineStatComponent, GitDiffFileComponent, ArtemisSharedModule],
 })
-export class GitDiffFilePanelComponent implements OnInit {
-    @Input() diffEntries: ProgrammingExerciseGitDiffEntry[];
+export class GitDiffFilePanelComponent {
+    protected readonly faAngleUp = faAngleUp;
+    protected readonly faAngleDown = faAngleDown;
 
-    @Input() templateFileContent: string | undefined;
+    readonly diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
+    readonly originalFileContent = input<string>();
+    readonly modifiedFileContent = input<string>();
+    readonly diffForTemplateAndSolution = input<boolean>(true);
+    readonly allowSplitView = input<boolean>(true);
+    readonly onDiffReady = output<boolean>();
 
-    @Input() solutionFileContent: string | undefined;
-
-    @Input() diffForTemplateAndSolution = true;
-
-    @Input() allowSplitView = true;
-
-    @Output() onDiffReady = new EventEmitter<boolean>();
-
-    previousFilePath: string | undefined;
-    filePath: string | undefined;
-
-    addedLineCount: number;
-    removedLineCount: number;
-
-    faAngleUp = faAngleUp;
-    faAngleDown = faAngleDown;
-
-    ngOnInit(): void {
-        this.filePath = this.diffEntries
-            .map((entry) => entry.filePath)
+    readonly originalFilePath = computed(() =>
+        this.diffEntries()
+            .map((entry) => entry.previousFilePath)
             .filter((filePath) => filePath)
-            .first();
+            .first(),
+    );
 
-        this.previousFilePath = this.diffEntries
-            .map((entry) => entry.previousFilePath)
+    readonly modifiedFilePath = computed(() =>
+        this.diffEntries()
+            .map((entry) => entry.filePath)
             .filter((filePath) => filePath)
-            .first();
+            .first(),
+    );
 
-        this.addedLineCount = this.diffEntries
-            .filter((entry) => entry && entry.filePath && entry.startLine && entry.lineCount)
-            .flatMap((entry) => {
-                return this.solutionFileContent?.split('\n').slice(entry.startLine! - 1, entry.startLine! + entry.lineCount! - 1);
-            })
-            .filter((line) => line && line.trim().length !== 0).length;
+    readonly addedLineCount = computed(
+        () =>
+            this.diffEntries()
+                .filter((entry) => entry && entry.filePath && entry.startLine && entry.lineCount)
+                .flatMap((entry) => {
+                    return this.modifiedFileContent()
+                        ?.split('\n')
+                        .slice(entry.startLine! - 1, entry.startLine! + entry.lineCount! - 1);
+                })
+                .filter((line) => line && line.trim().length !== 0).length,
+    );
 
-        this.removedLineCount = this.diffEntries
-            .filter((entry) => entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount)
-            .flatMap((entry) => {
-                return this.templateFileContent?.split('\n').slice(entry.previousStartLine! - 1, entry.previousStartLine! + entry.previousLineCount! - 1);
-            })
-            .filter((line) => line && line.trim().length !== 0).length;
-    }
+    readonly removedLineCount = computed(
+        () =>
+            this.diffEntries()
+                .filter((entry) => entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount)
+                .flatMap((entry) => {
+                    return this.originalFileContent()
+                        ?.split('\n')
+                        .slice(entry.previousStartLine! - 1, entry.previousStartLine! + entry.previousLineCount! - 1);
+                })
+                .filter((line) => line && line.trim().length !== 0).length,
+    );
 }
@@ -1,9 +1,9 @@
 <div class="ph-1">
-    @if (fileUnchanged) {
+    @if (fileUnchanged()) {
         <div class="w-100 d-flex justify-content-center">
             <span class="p-2" jhiTranslate="artemisApp.repository.commitHistory.commitDetails.fileUnchanged"></span>
         </div>
     }
     <!-- The editor is only hidden, not removed, as we still want it to report its readiness. -->
-    <jhi-monaco-diff-editor [hidden]="fileUnchanged" [allowSplitView]="allowSplitView" (onReadyForDisplayChange)="onDiffReady.emit($event)" />
+    <jhi-monaco-diff-editor [hidden]="fileUnchanged()" [allowSplitView]="allowSplitView()" (onReadyForDisplayChange)="onDiffReady.emit($event)" />
 </div>