#82: update naming, add more details to appIssueCard

server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/pullrequest/PullRequestLabel.java

@@ -3,13 +3,17 @@
 import jakarta.persistence.Embeddable;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
+import lombok.NonNull;
 import lombok.Setter;
 
 @Embeddable
 @Getter
 @Setter
 @NoArgsConstructor
 public class PullRequestLabel {
+    @NonNull
     private String name;
+
+    @NonNull
     private String color;
 }

webapp/src/app/ui/app-issue-card/app-issue-card.component.html

@@ -0,0 +1,31 @@
+<div class="border border-gray-300 rounded-lg p-4 w-72">
+  <div class="flex justify-between items-center mb-2 text-xs text-gray-500">
+    <span class="font-bold flex justify-center items-center space-x-1">
+      <ng-icon [svg]="octGitPullRequest" size="16" class="mr-1"></ng-icon> {{ pullRequest().repository.name }} #{{ pullRequest().number }} on {{ pullRequest().createdAt }}
+    </span>
+    <span class="flex items-center space-x-2">
+      <span class="text-github-success-foreground font-bold">+{{ pullRequest().additions }}</span>
+      <span class="text-github-danger-foreground font-bold">-{{ pullRequest().deletions }}</span>
+    </span>
+  </div>
+
+  <div class="flex justify-between font-bold text-sm mb-3">
+    {{ pullRequest().title }}
+    @if (getMostRecentReview(); as review) {
+      @if(review.state === 'APPROVED') {
+        <ng-icon [svg]="octCheck" size="16"></ng-icon>
+      } @else if(review.state === 'DISMISSED') {
+        <ng-icon [svg]="octX" size="16"></ng-icon>
+      } @else if (review.state === 'COMMENTED') {
+        <ng-icon [svg]="octComment" size="16"></ng-icon>
+      } @else {
+        <ng-icon [svg]="octFileDiff" size="16"></ng-icon>
+      }
+    }
+  </div>
+  <div class="flex gap-1 flex-wrap">
+    @for (label of pullRequest().pullRequestLabels; track label.name) {
+      <span class="px-2 py-1 rounded-full text-xs text-white mr-2" [style.background-color]="label.color">{{ label.name }}</span>
+    }
+  </div>
+</div>

webapp/src/app/ui/app-issue-card/app-issue-card.component.ts

@@ -0,0 +1,30 @@
+import { Component, input } from '@angular/core';
+import { PullRequest, PullRequestReview } from '@app/core/modules/openapi';
+import { NgIcon } from '@ng-icons/core';
+import { octCheck, octComment, octFileDiff, octGitPullRequest, octX } from '@ng-icons/octicons';
+
+@Component({
+  selector: 'app-issue-card',
+  templateUrl: './app-issue-card.component.html',
+  imports: [NgIcon],
+  standalone: true
+})
+export class AppIssueCardComponent {
+  pullRequest = input.required<PullRequest>();
+  protected readonly octCheck = octCheck;
+  protected readonly octX = octX;
+  protected readonly octComment = octComment;
+  protected readonly octGitPullRequest = octGitPullRequest;
+
+  getMostRecentReview() {
+    if (!this.pullRequest() || !this.pullRequest().reviews) {
+      return null;
+    }
+
+    return Array.from(this.pullRequest().reviews || []).reduce((latest: PullRequestReview, review: PullRequestReview) => {
+      return new Date(review.updatedAt || 0) > new Date(latest.updatedAt || 0) ? review : latest;
+    });
+  }
+
+  protected readonly octFileDiff = octFileDiff;
+}

webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts → webapp/src/app/ui/app-issue-card/app-issue-card.stories.ts

@@ -1,16 +1,16 @@
 import { Meta, StoryObj } from '@storybook/angular';
-import { PullRequestWidgetComponent } from './pull-request-widget.component';
+import { AppIssueCardComponent } from './app-issue-card.component';
 import { PullRequest, PullRequestReview, Repository } from '@app/core/modules/openapi';
 
-const meta: Meta<PullRequestWidgetComponent> = {
-  title: 'Components/PullRequestCard',
-  component: PullRequestWidgetComponent,
+const meta: Meta<AppIssueCardComponent> = {
+  title: 'UI/AppIssueCard',
+  component: AppIssueCardComponent,
   tags: ['autodocs'] // Auto-generate docs if enabled
 };
 
 export default meta;
 
-type Story = StoryObj<PullRequestWidgetComponent>;
+type Story = StoryObj<AppIssueCardComponent>;
 
 const repo: Repository = {
   name: 'Artemis',
@@ -22,10 +22,12 @@ const repo: Repository = {
 
 const reviews = new Set<PullRequestReview>([
   {
-    state: 'APPROVED'
+    state: 'APPROVED',
+    updatedAt: 'Jan 2'
   },
   {
-    state: 'CHANGES_REQUESTED'
+    state: 'CHANGES_REQUESTED',
+    updatedAt: 'Jan 4'
   }
 ]);