Development: Redesign the rating card

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

@@ -1,15 +1,22 @@
-<div class="flex gap-[2%] w-full max-w-[21rem] h-4 rounded-pill overflow-hidden">
-  @for (item of likertValues; track $index) {
-    <div
-      class="flex-1 transition-colors"
-      [class]="selectable() ? 'cursor-pointer hover:brightness-75' : ''"
-      [style.background-color]="getSectionColor($index)"
-      [pTooltip]="tooltipTexts()[$index]"
-      tooltipPosition="top"
-      tabindex="0"
-      role="button"
-      (click)="onSectionClick($index)"
-      (keydown.enter)="onSectionClick($index)"
-    ></div>
-  }
-</div>
+@if (selectable()) {
+  <div class="flex flex-wrap gap-2">
+    @for (item of likertValues; track $index) {
+      <button
+        type="button"
+        class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors duration-150 border border-border-default focus:outline-none"
+        [style.background-color]="getButtonBg($index)"
+        [style.color]="getButtonTextColor($index)"
+        (click)="onSectionClick($index)"
+        (keydown.enter)="onSectionClick($index)"
+      >
+        {{ tooltipTexts()[$index] }}
+      </button>
+    }
+  </div>
+} @else if (rating() !== undefined) {
+  <span
+    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white"
+    [style.background-color]="getColorForValue(rating()!)"
+    >{{ getSelectedLabel() }}</span
+  >
+}

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

@@ -1,71 +1,85 @@
 import { Component, computed, inject, input, model } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { TranslateService } from '@ngx-translate/core';
-import { TooltipModule } from 'primeng/tooltip';
+
+type LikertValue = -2 | -1 | 0 | 1 | 2;
+
+interface LikertEntry {
+  value: LikertValue;
+  key: string;
+}
 
 @Component({
   selector: 'jhi-rating',
-  imports: [TooltipModule],
   templateUrl: './rating.component.html',
 })
 export class RatingComponent {
   rating = model<number | undefined>(undefined);
   selectable = input<boolean>(false);
 
-  // Likert scale values from -2 to +2
-  readonly likertValues = [-2, -1, 0, 1, 2];
+  readonly likertScale: LikertEntry[] = [
+    { value: -2, key: 'very_bad' },
+    { value: -1, key: 'bad' },
+    { value: 0, key: 'neutral' },
+    { value: 1, key: 'good' },
+    { value: 2, key: 'very_good' },
+  ];
+
+  readonly likertValues: LikertValue[] = this.likertScale.map(s => s.value);
 
   readonly tooltipTexts = computed(() => {
     this.langChange();
-    return this.tooltipKeys.map(suffix => this.translateService.instant(`evaluation.ratings.${suffix}`));
+    return this.likertScale.map(s => this.translateService.instant(`evaluation.ratings.${s.key}`) as string);
   });
 
-  protected readonly Array = Array;
-
-  private readonly tooltipKeys = ['very_bad', 'bad', 'neutral', 'good', 'very_good'];
   private translateService = inject(TranslateService);
   private langChange = toSignal(this.translateService.onLangChange, { initialValue: undefined });
 
   onSectionClick(index: number): void {
-    if (!this.selectable()) {
-      return;
-    }
+    if (!this.selectable()) return;
+    const entry = this.entryAt(index);
+    if (entry === undefined) return;
+    this.rating.set(this.rating() === entry.value ? undefined : entry.value);
+  }
 
-    const newRating = this.likertValues[index];
-    // If clicking the same rating, unselect it
-    if (this.rating() === newRating) {
-      this.rating.set(undefined);
-    } else {
-      this.rating.set(newRating);
+  getColorForValue(value: number): string {
+    switch (value) {
+      case -2:
+        return 'var(--color-negative-active)';
+      case -1:
+        return 'var(--color-negative-hover)';
+      case 0:
+        return 'var(--color-warning-default)';
+      case 1:
+        return 'var(--color-positive-hover)';
+      case 2:
+        return 'var(--color-positive-active)';
+      default:
+        return 'var(--p-background-surface-alt)';
     }
   }
 
-  getSectionColor(index: number): string {
-    const currentRating = this.rating();
-    const sectionValue = this.likertValues[index];
+  getButtonBg(index: number): string {
+    const entry = this.entryAt(index);
+    if (entry === undefined) return 'var(--p-background-surface-alt)';
+    return this.rating() === entry.value ? this.getColorForValue(entry.value) : 'var(--p-background-surface-alt)';
+  }
 
-    if (currentRating === undefined) {
-      return 'var(--p-background-surface-alt)';
-    }
+  getButtonTextColor(index: number): string {
+    const entry = this.entryAt(index);
+    if (entry === undefined) return 'var(--p-text-color)';
+    return this.rating() === entry.value ? 'white' : 'var(--p-text-color)';
+  }
 
-    if (sectionValue === currentRating) {
-      switch (sectionValue) {
-        case -2:
-          return 'var(--color-negative-active)';
-        case -1:
-          return 'var(--color-negative-hover)';
-        case 0:
-          return 'var(--color-warning-default)';
-        case 1:
-          return 'var(--color-positive-hover)';
-        case 2:
-          return 'var(--color-positive-active)';
-      }
-    }
-    return 'var(--p-background-surface-alt)';
+  getSelectedLabel(): string {
+    const r = this.rating();
+    if (r === undefined) return '';
+    const entry = this.likertScale.find(s => s.value === r);
+    if (entry === undefined) return '';
+    return this.translateService.instant(`evaluation.ratings.${entry.key}`) as string;
   }
 
-  getCursor(): string {
-    return this.selectable() ? 'pointer' : 'default';
+  private entryAt(index: number): LikertEntry | undefined {
+    return this.likertScale.find((_, i) => i === index);
   }
 }

src/main/webapp/app/shared/components/molecules/comment-section/comment-section.html

@@ -12,6 +12,7 @@
           [canEdit]="c.canEdit ?? false"
           [isCreate]="false"
           [text]="c.message ?? ''"
+          [rating]="ratingForAuthor(c.author ?? '')"
           [editingId]="editingId()"
           (enterEdit)="editingId.set(c.commentId)"
           (exitEdit)="editingId.set(undefined)"

src/main/webapp/app/shared/components/molecules/comment-section/comment-section.ts

@@ -5,6 +5,8 @@ import { ToastService } from 'app/service/toast-service';
 import { Comment } from 'app/shared/components/molecules/comment/comment';
 import { InternalCommentResourceApi } from 'app/generated/api/internal-comment-resource-api';
 import { InternalCommentDTO } from 'app/generated/model/internal-comment-dto';
+import { RatingResourceApi } from 'app/generated/api/rating-resource-api';
+import { RatingDTO } from 'app/generated/model/rating-dto';
 
 import TranslateDirective from '../../../language/translate.directive';
 
@@ -15,12 +17,15 @@ import TranslateDirective from '../../../language/translate.directive';
 })
 export class CommentSection {
   commentApi = inject(InternalCommentResourceApi);
+  ratingApi = inject(RatingResourceApi);
   accountService = inject(AccountService);
   toast = inject(ToastService);
 
   applicationId = input.required<string | undefined>();
 
   protected comments = signal<InternalCommentDTO[]>([]);
+  protected otherRatings = signal<RatingDTO[]>([]);
+  protected currentUserRating = signal<number | undefined>(undefined);
   protected createDraft = signal<string>('');
   protected currentUser = this.accountService.loadedUser()?.name ?? '';
   protected editingId = signal<string | undefined>(undefined);
@@ -30,11 +35,31 @@ export class CommentSection {
     this.createDraft.set('');
     if (id !== undefined) {
       void this.loadComments();
+      void this.loadOtherRatings(id);
     } else {
       this.comments.set([]);
+      this.otherRatings.set([]);
+      this.currentUserRating.set(undefined);
     }
   });
 
+  ratingForAuthor(author: string): number | undefined {
+    if (author === this.currentUser) {
+      return this.currentUserRating();
+    }
+    return this.otherRatings().find(r => r.from === author)?.rating;
+  }
+
+  async loadOtherRatings(applicationId: string): Promise<void> {
+    try {
+      const data = await firstValueFrom(this.ratingApi.getRatings(applicationId));
+      this.otherRatings.set(data.otherRatings ?? []);
+      this.currentUserRating.set(data.currentUserRating ?? undefined);
+    } catch {
+      this.toast.showError({ summary: 'Error', detail: 'Failed to load comment ratings' });
+    }
+  }
+
   async loadComments(): Promise<void> {
     const id = this.applicationId();
     if (id === undefined) {

src/main/webapp/app/shared/components/molecules/comment/comment.html

@@ -3,6 +3,9 @@
   <div class="flex justify-between items-center w-full h-[2.1rem] px-4 py-1 rounded-t-lg border border-border-default">
     <div class="flex flex-row items-center gap-4">
       <span class="font-semibold">{{ author() }}</span>
+      @if (!isCreate() && rating() !== undefined) {
+        <jhi-rating [rating]="rating()" />
+      }
       @if (!isCreate()) {
         <span class="text-[0.8rem] text-text-secondary">
           {{ createdAt() | timeAgo }}
@@ -52,7 +55,7 @@
     </div>
   } @else if (isCreate()) {
     <div class="flex flex-row justify-end gap-4 mt-4">
-      <jhi-button label="button.send" icon="paper-plane" severity="primary" (click)="onSave()" [disabled]="!canSave()" />
+      <jhi-button label="button.post" icon="paper-plane" severity="primary" (click)="onSave()" [disabled]="!canSave()" />
     </div>
   }
 </div>

src/main/webapp/app/shared/components/molecules/comment/comment.ts

@@ -6,10 +6,11 @@ import { TimeAgoPipe } from 'app/shared/pipes';
 
 import { ButtonComponent } from '../../atoms/button/button.component';
 import { ConfirmDialog } from '../../atoms/confirm-dialog/confirm-dialog';
+import { RatingComponent } from '../../atoms/rating/rating.component';
 
 @Component({
   selector: 'jhi-comment',
-  imports: [ButtonComponent, TextareaModule, TimeAgoPipe, ConfirmDialog],
+  imports: [ButtonComponent, TextareaModule, TimeAgoPipe, ConfirmDialog, RatingComponent],
   templateUrl: './comment.html',
   encapsulation: ViewEncapsulation.None,
 })
@@ -22,6 +23,7 @@ export class Comment {
   createdAt = input<string>('');
   canEdit = input<boolean>(false);
   isCreate = input<boolean>(false);
+  rating = input<number | undefined>(undefined);
 
   saved = output<string>();
   deleted = output();

src/main/webapp/app/shared/components/molecules/rating-section/rating-section.html

@@ -2,10 +2,7 @@
   <p class="text-sm" jhiTranslate="evaluation.details.ratingDescription"></p>
 
   <jhi-sub-section class="w-full flex gap-8" titleKey="evaluation.details.ratingYourRating">
-    <p class="text-xs" jhiTranslate="evaluation.details.ratingYourRatingLabel"></p>
-    <div class="mt-2">
-      <jhi-rating [(rating)]="myRating" [selectable]="true" />
-    </div>
+    <jhi-rating [(rating)]="myRating" [selectable]="true" />
   </jhi-sub-section>
 
   @if (otherRatings().length > 0) {

src/main/webapp/i18n/de/button.json

@@ -10,6 +10,7 @@
     "edit": "Bearbeiten",
     "save": "Speichern",
     "send": "Senden",
+    "post": "Posten",
     "view": "Anzeigen",
     "withdraw": "Zurückziehen",
     "back": "Zurück",

src/main/webapp/i18n/en/button.json

@@ -10,6 +10,7 @@
     "edit": "Edit",
     "save": "Save",
     "send": "Send",
+    "post": "Post",
     "view": "View",
     "withdraw": "Withdraw",
     "back": "Back",

src/test/webapp/app/shared/components/atoms/rating/rating.component.spec.ts

@@ -50,6 +50,7 @@ describe('RatingComponent', () => {
     expect(component.rating()).toBe(2);
   });
 
+  // ---------------- BUTTON BACKGROUND ----------------
   it.each<[number | undefined, number, string]>([
     [undefined, 0, 'var(--p-background-surface-alt)'],
     [-2, 0, 'var(--color-negative-active)'],
@@ -58,10 +59,22 @@ describe('RatingComponent', () => {
     [1, 3, 'var(--color-positive-hover)'],
     [2, 4, 'var(--color-positive-active)'],
     [2, 0, 'var(--p-background-surface-alt)'],
-  ])('should return %s for rating=%s section=%s', (rating, section, expected) => {
+  ])('getButtonBg: rating=%s index=%s → %s', (rating, index, expected) => {
     fixture.componentRef.setInput('rating', rating);
     fixture.detectChanges();
-    expect(component.getSectionColor(section)).toBe(expected);
+    expect(component.getButtonBg(index)).toBe(expected);
+  });
+
+  // ---------------- BUTTON TEXT COLOR ----------------
+  it.each<[number | undefined, number, string]>([
+    [-2, 0, 'white'],
+    [1, 3, 'white'],
+    [undefined, 0, 'var(--p-text-color)'],
+    [-2, 1, 'var(--p-text-color)'],
+  ])('getButtonTextColor: rating=%s index=%s → %s', (rating, index, expected) => {
+    fixture.componentRef.setInput('rating', rating);
+    fixture.detectChanges();
+    expect(component.getButtonTextColor(index)).toBe(expected);
   });
 
   // ---------------- TOOLTIP TEXTS ----------------
@@ -74,12 +87,17 @@ describe('RatingComponent', () => {
     expect(tooltips[4]).toBe('evaluation.ratings.very_good');
   });
 
-  it.each<[boolean, string]>([
-    [true, 'pointer'],
-    [false, 'default'],
-  ])('should return cursor=%s for selectable=%s', (selectable, expected) => {
-    fixture.componentRef.setInput('selectable', selectable);
+  // ---------------- SELECTED LABEL ----------------
+  it.each<[number | undefined, string]>([
+    [undefined, ''],
+    [-2, 'evaluation.ratings.very_bad'],
+    [-1, 'evaluation.ratings.bad'],
+    [0, 'evaluation.ratings.neutral'],
+    [1, 'evaluation.ratings.good'],
+    [2, 'evaluation.ratings.very_good'],
+  ])('getSelectedLabel: rating=%s → %s', (rating, expected) => {
+    fixture.componentRef.setInput('rating', rating);
     fixture.detectChanges();
-    expect(component.getCursor()).toBe(expected);
+    expect(component.getSelectedLabel()).toBe(expected);
   });
 });