Merge remote-tracking branch 'origin/main' into chore/semantic-interactive-elements

# Conflicts:
#	src/main/webapp/app/shared/components/atoms/rating/rating.component.html

Author: az108

openapi/openapi.yaml

@@ -3544,6 +3544,7 @@ components:
       type: object
       properties:
         author: {type: string}
+        authorUserId: {type: string, format: uuid}
         canEdit: {type: boolean}
         commentId: {type: string, format: uuid}
         createdAt: {type: string, format: date-time}
@@ -4071,6 +4072,7 @@ components:
       type: object
       properties:
         from: {type: string}
+        fromUserId: {type: string, format: uuid}
         rating: {type: integer, format: int32}
     RatingOverviewDTO:
       type: object

src/main/java/de/tum/cit/aet/evaluation/dto/InternalCommentDTO.java

@@ -7,7 +7,7 @@
 import java.util.UUID;
 import lombok.NonNull;
 
-public record InternalCommentDTO(UUID commentId, String author, String message, Instant createdAt, boolean canEdit) {
+public record InternalCommentDTO(UUID commentId, UUID authorUserId, String author, String message, Instant createdAt, boolean canEdit) {
     /**
      * Creates a DTO representation of an internal comment for the given user context.
      *
@@ -22,6 +22,7 @@ public static InternalCommentDTO from(@NonNull InternalComment comment, @NonNull
         User author = comment.getCreatedBy();
         return new InternalCommentDTO(
             comment.getInternalCommentId(),
+            author.getUserId(),
             author.getFirstName() + " " + author.getLastName(),
             comment.getMessage(),
             comment.getCreatedAt().toInstant(ZoneOffset.UTC),

src/main/java/de/tum/cit/aet/evaluation/dto/RatingDTO.java

@@ -1,15 +1,18 @@
 package de.tum.cit.aet.evaluation.dto;
 
 import de.tum.cit.aet.evaluation.domain.Rating;
+import de.tum.cit.aet.usermanagement.domain.User;
+import java.util.UUID;
 
-public record RatingDTO(String from, int rating) {
+public record RatingDTO(UUID fromUserId, String from, int rating) {
     /**
      * Creates a {@link RatingDTO} from a given {@link Rating} entity.
      *
      * @param rating the {@link Rating} entity to convert; must not be {@code null}
-     * @return a {@link RatingDTO} containing the rater's full name and rating value
+     * @return a {@link RatingDTO} containing the rater's id, full name and rating value
      */
     public static RatingDTO from(Rating rating) {
-        return new RatingDTO(rating.getFrom().getFirstName() + " " + rating.getFrom().getLastName(), rating.getRating());
+        User rater = rating.getFrom();
+        return new RatingDTO(rater.getUserId(), rater.getFirstName() + " " + rater.getLastName(), rating.getRating());
     }
 }

src/main/webapp/app/config/font-awesome-icons.ts

@@ -113,6 +113,7 @@ import {
   faSortUp,
   faSpinner,
   faStar,
+  faStarHalfStroke,
   faSun,
   faSync,
   faTableList,
@@ -255,6 +256,7 @@ export const fontAwesomeIcons = [
   faSortDown,
   faSortUp,
   faStar,
+  faStarHalfStroke,
   faSun,
   faSync,
   faTableList,

src/main/webapp/app/evaluation/application-detail/application-detail.component.html

@@ -385,12 +385,16 @@ <h1>
         <div class="grid gap-16 grid-cols-1 md:grid-cols-[3fr_7fr]">
           <div>
             <jhi-section titleKey="evaluation.details.ratingTitle" icon="star">
-              <jhi-rating-section [applicationId]="currentApplicationId()" (ratingUpdated)="onRatingUpdated()" />
+              <jhi-rating-section
+                [applicationId]="currentApplicationId()"
+                (ratingUpdated)="onRatingUpdated()"
+                (ratingsLoaded)="applicationRatings.set($event)"
+              />
             </jhi-section>
           </div>
           <div>
             <jhi-section titleKey="evaluation.details.commentTitle" icon="comments">
-              <jhi-comment-section [applicationId]="currentApplicationId()" />
+              <jhi-comment-section [applicationId]="currentApplicationId()" [ratings]="applicationRatings()" />
             </jhi-section>
           </div>
         </div>

src/main/webapp/app/evaluation/application-detail/application-detail.component.ts

@@ -23,6 +23,7 @@ import { AcceptDTO } from 'app/generated/model/accept-dto';
 import { RejectDTO } from 'app/generated/model/reject-dto';
 import { ApplicationEvaluationDetailListDTO } from 'app/generated/model/application-evaluation-detail-list-dto';
 import { ApplicationDocumentIdsDTO } from 'app/generated/model/application-document-ids-dto';
+import { RatingOverviewDTO } from 'app/generated/model/rating-overview-dto';
 import { formatGradeWithTranslation } from 'app/core/util/grade-conversion';
 import LocalizedDatePipe from 'app/shared/pipes/localized-date.pipe';
 import { TooltipModule } from 'primeng/tooltip';
@@ -168,6 +169,9 @@ export class ApplicationDetailComponent {
     return this.currentApplication()?.applicationDetailDTO.applicationId;
   });
 
+  /** Loaded once by the rating section and shared with the comment section, which shows each comment author's rating. */
+  protected readonly applicationRatings = signal<RatingOverviewDTO | undefined>(undefined);
+
   protected readonly CAROUSEL_SIZE = CAROUSEL_SIZE;
   protected readonly sortableFields = sortableFields;
 

src/main/webapp/app/generated/model/internal-comment-dto.ts

@@ -11,6 +11,7 @@
 
 export interface InternalCommentDTO {
     readonly author?: string;
+    readonly authorUserId?: string;
     readonly canEdit?: boolean;
     readonly commentId?: string;
     readonly createdAt?: string;

src/main/webapp/app/generated/model/rating-dto.ts

@@ -11,5 +11,6 @@
 
 export interface RatingDTO {
     readonly from?: string;
+    readonly fromUserId?: string;
     readonly rating?: number;
 }

src/main/webapp/app/interview/interviewee-assessment/interviewee-assessment.component.html

@@ -32,12 +32,7 @@ <h3 class="text-lg font-bold text-text-primary mb-0" jhiTranslate="interview.ass
 
             <p class="text-text-secondary text-sm mb-2" jhiTranslate="interview.assessment.rating.info">Rate the interview.</p>
 
-            <div class="flex items-center gap-4 h-10">
-              <jhi-rating [(rating)]="rating" [selectable]="true" class="flex-1" />
-            </div>
-            <span class="text-text-secondary text-sm" jhiTranslate="evaluation.details.ratingYourRatingLabel"
-              >Click a box to select your rating</span
-            >
+            <jhi-rating [(rating)]="rating" [selectable]="true" />
           </div>
 
           <!-- Notes Section -->

src/main/webapp/app/shared/components/atoms/rating/rating.component.html

@@ -1,13 +1,44 @@
-<div class="flex gap-[2%] w-full max-w-[21rem] h-4 rounded-pill overflow-hidden">
-  @for (item of likertValues; track $index) {
-    <button
-      type="button"
-      class="btn-bare flex-1 transition-colors"
-      [class]="selectable() ? 'cursor-pointer hover:brightness-75' : ''"
-      [style.background-color]="getSectionColor($index)"
-      [pTooltip]="tooltipTexts()[$index]"
-      tooltipPosition="top"
-      (click)="onSectionClick($index)"
-    ></button>
-  }
-</div>
+@if (selectable()) {
+  <div class="inline-flex flex-col gap-1">
+    <div
+      class="flex items-center gap-1"
+      role="radiogroup"
+      [attr.aria-label]="groupLabel()"
+      (mouseleave)="onHoverLeave()"
+      (focusout)="onHoverLeave()"
+    >
+      @for (star of stars(); track star.value) {
+        <button
+          #starButton
+          type="button"
+          role="radio"
+          class="p-0.5 rounded-sm border-0 bg-transparent cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-primary"
+          [attr.aria-checked]="star.selected"
+          [attr.aria-label]="star.label"
+          [attr.tabindex]="star.tabbable ? 0 : -1"
+          (click)="onStarClick(star.value)"
+          (keydown)="onKeydown($event)"
+          (mouseenter)="onStarHover(star.value)"
+          (focus)="onStarHover(star.value)"
+        >
+          <fa-icon
+            class="text-lg transition-colors"
+            [class]="star.filled ? star.colourClass : emptyStarColourClass"
+            [icon]="['fas', 'star']"
+          />
+        </button>
+      }
+    </div>
+    <!-- Height is reserved so previewing or picking a rating does not shift the surrounding layout. -->
+    <span class="min-h-5 text-sm text-text-secondary">{{ selectedLabel() }}</span>
+  </div>
+} @else {
+  <div class="inline-flex items-center gap-1" role="img" [attr.aria-label]="readonlyLabel()">
+    @for (star of stars(); track star.value) {
+      <fa-icon class="text-base" [class]="star.filled ? star.colourClass : emptyStarColourClass" [icon]="['fas', 'star']" />
+    }
+    @if (selectedLabel() !== '') {
+      <span class="ml-1.5 text-sm text-text-secondary">{{ selectedLabel() }}</span>
+    }
+  </div>
+}