Development: Use directive for programming test status details and diff report

src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.html

@@ -0,0 +1,24 @@
+<span jhiTranslate="artemisApp.programmingExercise.diffReport.shortDescription"></span>
+<div class="fw-bold">
+    <jhi-git-diff-line-stat
+        [addedLineCount]="detail.data.addedLineCount"
+        [removedLineCount]="detail.data.removedLineCount"
+        ngbTooltip="{{ 'artemisApp.programmingExercise.diffReport.lineStatTooltipDetailPage' | artemisTranslate }}"
+        placement="right"
+    />
+</div>
+@if (detail.data.addedLineCount > 0 || detail.data.removedLineCount > 0) {
+    <div class="mt-1">
+        <jhi-button
+            [featureToggle]="FeatureToggle.ProgrammingExercises"
+            [isLoading]="detail.data.isLoadingDiffReport ?? false"
+            [btnSize]="ButtonSize.SMALL"
+            [icon]="faCodeCompare"
+            [title]="'artemisApp.programmingExercise.diffReport.button'"
+            [tooltip]="'artemisApp.programmingExercise.diffReport.tooltip'"
+            (onClick)="showGitDiff(detail.data.gitDiffReport)"
+            [btnType]="WARNING"
+            [tooltipPlacement]="TooltipPlacement.RIGHT"
+        />
+    </div>
+}

src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } 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 } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'jhi-programming-diff-report-detail',
+    templateUrl: 'programming-diff-report-detail.component.html',
+    standalone: true,
+    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffReportModule],
+})
+export class ProgrammingDiffReportDetailComponent {
+    protected readonly FeatureToggle = FeatureToggle;
+    protected readonly ButtonSize = ButtonSize;
+    protected readonly TooltipPlacement = TooltipPlacement;
+    protected readonly WARNING = ButtonType.WARNING;
+
+    protected readonly faCodeCompare = faCodeCompare;
+
+    @Input() detail: ProgrammingDiffReportDetail;
+
+    constructor(private modalService: NgbModal) {}
+
+    showGitDiff(gitDiff?: ProgrammingExerciseGitDiffReport) {
+        if (!gitDiff) {
+            return;
+        }
+
+        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
+        modalRef.componentInstance.report = gitDiff;
+    }
+}

src/main/webapp/app/detail-overview-list/components/programming-test-status-detail/programming-test-status-detail.component.html

@@ -0,0 +1,38 @@
+@if (detail.data.participation) {
+    <div class="d-flex align-items-center">
+        @if (!detail.data.loading) {
+            <jhi-updating-result
+                [exercise]="detail.data.exercise"
+                [participation]="detail.data.participation"
+                [showUngradedResults]="true"
+                [personalParticipation]="false"
+                [short]="false"
+                (onParticipationChange)="detail.data.onParticipationChange()"
+                class="me-2"
+            />
+        }
+        @if (detail.data.participation.results?.length) {
+            <jhi-programming-exercise-instructor-status
+                class="repository-status-icon me-2"
+                [participationType]="detail.data.type"
+                [participation]="detail.data.participation"
+                [exercise]="detail.data.exercise"
+            />
+            @if (detail.data.exercise.isAtLeastEditor) {
+                <jhi-programming-exercise-instructor-trigger-build-button [exercise]="detail.data.exercise" [participation]="detail.data.participation" />
+            }
+        }
+        @if (detail.data.exercise.isAtLeastEditor && detail.data.participation.id) {
+            <a [routerLink]="detail.data.submissionRouterLink" [queryParams]="{ isTmpOrSolutionProgrParticipation: true }" class="ms-2">
+                @switch (detail.data.type) {
+                    @case (ProgrammingExerciseParticipationType.TEMPLATE) {
+                        <span jhiTranslate="artemisApp.programmingExercise.detail.showTemplateSubmissions"></span>
+                    }
+                    @case (ProgrammingExerciseParticipationType.SOLUTION) {
+                        <span jhiTranslate="artemisApp.programmingExercise.detail.showSolutionSubmissions"></span>
+                    }
+                }
+            </a>
+        }
+    </div>
+}

src/main/webapp/app/detail-overview-list/components/programming-test-status-detail/programming-test-status-detail.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import type { ProgrammingTestStatusDetail } from 'app/detail-overview-list/detail.model';
+import { RouterModule } from '@angular/router';
+import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
+import { ProgrammingExerciseParticipationType } from 'app/entities/programming-exercise-participation.model';
+import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module';
+import { ArtemisProgrammingExerciseStatusModule } from 'app/exercises/programming/manage/status/programming-exercise-status.module';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+
+@Component({
+    selector: 'jhi-programming-test-status-detail',
+    templateUrl: 'programming-test-status-detail.component.html',
+    standalone: true,
+    imports: [RouterModule, ArtemisProgrammingExerciseActionsModule, SubmissionResultStatusModule, ArtemisProgrammingExerciseStatusModule, TranslateDirective],
+})
+export class ProgrammingTestStatusDetailComponent {
+    protected readonly ProgrammingExerciseParticipationType = ProgrammingExerciseParticipationType;
+
+    @Input() detail: ProgrammingTestStatusDetail;
+}

src/main/webapp/app/detail-overview-list/detail-overview-list.component.html

@@ -15,79 +15,6 @@ <h3 class="section-headline" [id]="headlinesRecord[section.headline]">{{ section
                     </dt>
                 }
                 @switch (detail.type) {
-                    @case (DetailType.ProgrammingTestStatus) {
-                        <dd id="detail-value-{{ detail.title }}">
-                            @if (detail.data.participation) {
-                                <div class="d-flex align-items-center">
-                                    @if (!detail.data.loading) {
-                                        <jhi-updating-result
-                                            [exercise]="detail.data.exercise"
-                                            [participation]="detail.data.participation"
-                                            [showUngradedResults]="true"
-                                            [personalParticipation]="false"
-                                            [short]="false"
-                                            (onParticipationChange)="detail.data.onParticipationChange()"
-                                            class="me-2"
-                                        />
-                                    }
-                                    @if (detail.data.participation.results?.length) {
-                                        <jhi-programming-exercise-instructor-status
-                                            class="repository-status-icon me-2"
-                                            [participationType]="detail.data.type"
-                                            [participation]="detail.data.participation"
-                                            [exercise]="detail.data.exercise"
-                                        />
-                                        @if (detail.data.exercise.isAtLeastEditor) {
-                                            <jhi-programming-exercise-instructor-trigger-build-button
-                                                [exercise]="detail.data.exercise"
-                                                [participation]="detail.data.participation"
-                                            />
-                                        }
-                                    }
-                                    @if (detail.data.exercise.isAtLeastEditor && detail.data.participation.id) {
-                                        <a [routerLink]="detail.data.submissionRouterLink" [queryParams]="{ isTmpOrSolutionProgrParticipation: true }" class="ms-2">
-                                            @switch (detail.data.type) {
-                                                @case (ProgrammingExerciseParticipationType.TEMPLATE) {
-                                                    <span jhiTranslate="artemisApp.programmingExercise.detail.showTemplateSubmissions"></span>
-                                                }
-                                                @case (ProgrammingExerciseParticipationType.SOLUTION) {
-                                                    <span jhiTranslate="artemisApp.programmingExercise.detail.showSolutionSubmissions"></span>
-                                                }
-                                            }
-                                        </a>
-                                    }
-                                </div>
-                            }
-                        </dd>
-                    }
-                    @case (DetailType.ProgrammingDiffReport) {
-                        <dd id="detail-value-{{ detail.title }}">
-                            <span jhiTranslate="artemisApp.programmingExercise.diffReport.shortDescription"></span>
-                            <div class="fw-bold">
-                                <jhi-git-diff-line-stat
-                                    [addedLineCount]="detail.data.addedLineCount"
-                                    [removedLineCount]="detail.data.removedLineCount"
-                                    ngbTooltip="{{ 'artemisApp.programmingExercise.diffReport.lineStatTooltipDetailPage' | artemisTranslate }}"
-                                    placement="right"
-                                />
-                            </div>
-                            @if (detail.data.addedLineCount > 0 || detail.data.removedLineCount > 0) {
-                                <div class="mt-1">
-                                    <jhi-button
-                                        [featureToggle]="FeatureToggle.ProgrammingExercises"
-                                        [isLoading]="detail.data.isLoadingDiffReport ?? false"
-                                        [btnSize]="ButtonSize.SMALL"
-                                        [icon]="faCodeCompare"
-                                        [title]="'artemisApp.programmingExercise.diffReport.button'"
-                                        [tooltip]="'artemisApp.programmingExercise.diffReport.tooltip'"
-                                        (onClick)="showGitDiff(detail.data.gitDiffReport)"
-                                        [btnType]="WARNING"
-                                        [tooltipPlacement]="TooltipPlacement.RIGHT"
-                                    />
-                                </div>
-                            }
-                        </dd>
-                    }
                     @case (DetailType.ProgrammingProblemStatement) {
                         @if (detail.data.exercise?.templateParticipation) {
                             <dd class="p-3 border" id="detail-value-{{ detail.title }}">

src/main/webapp/app/detail-overview-list/detail-overview-list.component.ts

@@ -1,11 +1,7 @@
 import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { faCodeCompare } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty } from 'lodash-es';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
-import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/button.component';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
-import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
+import { ButtonSize, TooltipPlacement } from 'app/shared/components/button.component';
 import { IrisSubSettingsType } from 'app/entities/iris/settings/iris-sub-settings.model';
 import { ModelingExerciseService } from 'app/exercises/modeling/manage/modeling-exercise.service';
 import { AlertService } from 'app/core/util/alert.service';
@@ -52,6 +48,7 @@ export class DetailOverviewListComponent implements OnInit, OnDestroy {
     protected readonly FeatureToggle = FeatureToggle;
     protected readonly ButtonSize = ButtonSize;
     protected readonly ProgrammingExerciseParticipationType = ProgrammingExerciseParticipationType;
+
     readonly CHAT = IrisSubSettingsType.CHAT;
 
     @Input()
@@ -62,16 +59,10 @@ export class DetailOverviewListComponent implements OnInit, OnDestroy {
     // headline record to avoid function call in html
     headlinesRecord: Record<string, string>;
 
-    // icons
-    readonly faCodeCompare = faCodeCompare;
-
-    WARNING = ButtonType.WARNING;
-
     profileSubscription: Subscription;
     isLocalVC = false;
 
     constructor(
-        private modalService: NgbModal,
         private modelingExerciseService: ModelingExerciseService,
         private alertService: AlertService,
         private profileService: ProfileService,
@@ -92,15 +83,6 @@ export class DetailOverviewListComponent implements OnInit, OnDestroy {
         }, {});
     }
 
-    showGitDiff(gitDiff?: ProgrammingExerciseGitDiffReport) {
-        if (!gitDiff) {
-            return;
-        }
-
-        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
-        modalRef.componentInstance.report = gitDiff;
-    }
-
     downloadApollonDiagramAsPDf(umlModel?: UMLModel, title?: string) {
         if (umlModel) {
             this.modelingExerciseService.convertToPdf(JSON.stringify(umlModel), `${title}-example-solution`).subscribe({

src/main/webapp/app/detail-overview-list/detail.model.ts

@@ -97,7 +97,7 @@ export interface ProgrammingAuxiliaryRepositoryButtonsDetail extends DetailBase
     data: { auxiliaryRepositories: AuxiliaryRepository[]; exerciseId?: number };
 }
 
-interface ProgrammingTestStatusDetail extends DetailBase {
+export interface ProgrammingTestStatusDetail extends DetailBase {
     type: DetailType.ProgrammingTestStatus;
     data: {
         participation?: TemplateProgrammingExerciseParticipation | SolutionProgrammingExerciseParticipation;
@@ -108,7 +108,7 @@ interface ProgrammingTestStatusDetail extends DetailBase {
         submissionRouterLink?: (string | number | undefined)[];
     };
 }
-interface ProgrammingDiffReportDetail extends DetailBase {
+export interface ProgrammingDiffReportDetail extends DetailBase {
     type: DetailType.ProgrammingDiffReport;
     data: { addedLineCount: number; removedLineCount: number; isLoadingDiffReport?: boolean; gitDiffReport?: ProgrammingExerciseGitDiffReport };
 }

src/main/webapp/app/detail-overview-list/exercise-detail.directive.ts

@@ -1,12 +1,14 @@
 import { ComponentRef, Directive, Input, OnDestroy, OnInit, Type, ViewContainerRef } from '@angular/core';
 import type { Detail, ShownDetail } from 'app/detail-overview-list/detail.model';
 import { DetailType } from 'app/detail-overview-list/detail-overview-list.component';
-import { TextDetailComponent } from 'app/detail-overview-list/components/text-detail.component';
-import { DateDetailComponent } from 'app/detail-overview-list/components/date-detail.component';
-import { LinkDetailComponent } from 'app/detail-overview-list/components/link-detail.component';
-import { BooleanDetailComponent } from 'app/detail-overview-list/components/boolean-detail.component';
-import { ProgrammingRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-repository-buttons-detail.component';
-import { ProgrammingAuxiliaryRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail.component';
+import { TextDetailComponent } from 'app/detail-overview-list/components/text-detail/text-detail.component';
+import { DateDetailComponent } from 'app/detail-overview-list/components/date-detail/date-detail.component';
+import { LinkDetailComponent } from 'app/detail-overview-list/components/link-detail/link-detail.component';
+import { BooleanDetailComponent } from 'app/detail-overview-list/components/boolean-detail/boolean-detail.component';
+import { ProgrammingRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-repository-buttons-detail/programming-repository-buttons-detail.component';
+import { ProgrammingAuxiliaryRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail/programming-auxiliary-repository-buttons-detail.component';
+import { ProgrammingTestStatusDetailComponent } from 'app/detail-overview-list/components/programming-test-status-detail/programming-test-status-detail.component';
+import { ProgrammingDiffReportDetailComponent } from 'app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component';
 
 @Directive({
     selector: '[jhiExerciseDetail]',
@@ -33,6 +35,8 @@ export class ExerciseDetailDirective implements OnInit, OnDestroy {
                 | BooleanDetailComponent
                 | ProgrammingRepositoryButtonsDetailComponent
                 | ProgrammingAuxiliaryRepositoryButtonsDetailComponent
+                | ProgrammingTestStatusDetailComponent
+                | ProgrammingDiffReportDetailComponent
             >;
         } = {
             [DetailType.Text]: TextDetailComponent,
@@ -41,6 +45,8 @@ export class ExerciseDetailDirective implements OnInit, OnDestroy {
             [DetailType.Boolean]: BooleanDetailComponent,
             [DetailType.ProgrammingRepositoryButtons]: ProgrammingRepositoryButtonsDetailComponent,
             [DetailType.ProgrammingAuxiliaryRepositoryButtons]: ProgrammingAuxiliaryRepositoryButtonsDetailComponent,
+            [DetailType.ProgrammingTestStatus]: ProgrammingTestStatusDetailComponent,
+            [DetailType.ProgrammingDiffReport]: ProgrammingDiffReportDetailComponent,
         };
 
         const detailComponent = detailTypeToComponent[this.detail.type];

src/main/webapp/app/shared/language/translate.directive.ts

@@ -9,6 +9,7 @@ import { takeUntil } from 'rxjs/operators';
  */
 @Directive({
     selector: '[jhiTranslate]',
+    standalone: true,
 })
 export class TranslateDirective implements OnChanges, OnInit, OnDestroy {
     @Input() jhiTranslate!: string;

src/main/webapp/app/shared/shared-common.module.ts

@@ -15,13 +15,12 @@ import { CloseCircleComponent } from 'app/shared/close-circle/close-circle.compo
 import { ArtemisDateRangePipe } from 'app/shared/pipes/artemis-date-range.pipe';
 
 @NgModule({
-    imports: [ArtemisSharedLibsModule],
+    imports: [ArtemisSharedLibsModule, TranslateDirective],
     declarations: [
         ArtemisDatePipe,
         ArtemisDateRangePipe,
         FindLanguageFromKeyPipe,
         AlertOverlayComponent,
-        TranslateDirective,
         SortByDirective,
         SortDirective,
         ArtemisTranslatePipe,