#82: rename, add colors for icons, refactor story

webapp/package.json

@@ -36,6 +36,7 @@
     "autoprefixer": "10.4.20",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "dayjs": "^1.11.13",
     "lucide-angular": "0.429.0",
     "postcss": "8.4.41",
     "rxjs": "7.8.1",

webapp/src/app/core/IssueCard/issue-card.component.html

@@ -0,0 +1,37 @@
+<div class="border border-border bg-card rounded-lg p-4 w-72" (click)="openIssue()">
+  <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">
+      @if (state() === 'OPEN') {
+        <ng-icon [svg]="octGitPullRequest" size="16" class="mr-1 text-github-success-foreground"></ng-icon>
+      } @else {
+        <ng-icon [svg]="octGitPullRequestClosed" size="16" class="mr-1 text-github-danger-foreground"></ng-icon>
+      }
+
+      {{ repositoryName() }} #{{ number() }} on {{ createdAt().format('MMM D') }}
+    </span>
+    <span class="flex items-center space-x-2">
+      <span class="text-github-success-foreground font-bold">+{{ additions() }}</span>
+      <span class="text-github-danger-foreground font-bold">-{{ deletions() }}</span>
+    </span>
+  </div>
+
+  <div class="flex justify-between font-bold text-sm mb-3">
+    {{ title() }}
+    @if (getMostRecentReview(); as review) {
+      @if (review.state === 'APPROVED') {
+        <ng-icon [svg]="octCheck" size="16" class="text-github-success-foreground"></ng-icon>
+      } @else if (review.state === 'DISMISSED') {
+        <ng-icon [svg]="octX" size="16" class="text-github-danger-foreground"></ng-icon>
+      } @else if (review.state === 'COMMENTED') {
+        <ng-icon [svg]="octComment" size="16" class="text-github-muted-foreground"></ng-icon>
+      } @else {
+        <ng-icon [svg]="octFileDiff" size="16" class="text-github-danger-foreground"></ng-icon>
+      }
+    }
+  </div>
+  <div class="flex gap-1 flex-wrap">
+    @for (label of pullRequestLabels(); track label.name) {
+      <span class="px-2 py-1 rounded-full text-xs mr-2 text-white" [style.background-color]="label.color">{{ label.name }}</span>
+    }
+  </div>
+</div>

webapp/src/app/core/IssueCard/issue-card.component.ts

@@ -0,0 +1,41 @@
+import { Component, input } from '@angular/core';
+import { PullRequestLabel, PullRequestReview } from '@app/core/modules/openapi';
+import { NgIcon } from '@ng-icons/core';
+import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octX } from '@ng-icons/octicons';
+import { Dayjs } from 'dayjs';
+import { NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'app-issue-card',
+  templateUrl: './issue-card.component.html',
+  imports: [NgIcon, NgStyle],
+  standalone: true
+})
+export class IssueCardComponent {
+  title = input.required<string>();
+  number = input.required<number>();
+  additions = input.required<number>();
+  deletions = input.required<number>();
+  url = input.required<string>();
+  repositoryName = input.required<string>();
+  reviews = input.required<Array<PullRequestReview>>();
+  createdAt = input.required<Dayjs>();
+  state = input.required<string>();
+  pullRequestLabels = input.required<Array<PullRequestLabel>>();
+  protected readonly octCheck = octCheck;
+  protected readonly octX = octX;
+  protected readonly octComment = octComment;
+  protected readonly octGitPullRequest = octGitPullRequest;
+  protected readonly octFileDiff = octFileDiff;
+  protected readonly octGitPullRequestClosed = octGitPullRequestClosed;
+
+  getMostRecentReview() {
+    return Array.from(this.reviews() || []).reduce((latest: PullRequestReview, review: PullRequestReview) => {
+      return new Date(review.updatedAt || 0) > new Date(latest.updatedAt || 0) ? review : latest;
+    });
+  }
+
+  openIssue() {
+    window.open(this.url());
+  }
+}

webapp/src/app/core/IssueCard/issue-card.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { IssueCardComponent } from './issue-card.component';
+import dayjs from 'dayjs';
+
+const meta: Meta<IssueCardComponent> = {
+  title: 'Component/IssueCard',
+  component: IssueCardComponent,
+  tags: ['autodocs'] // Auto-generate docs if enabled
+};
+
+export default meta;
+
+type Story = StoryObj<IssueCardComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Add feature X',
+    number: 12,
+    additions: 10,
+    deletions: 5,
+    url: 'http://example.com',
+    state: 'OPEN',
+    repositoryName: 'Artemis',
+    createdAt: dayjs('Jan 1'),
+    pullRequestLabels: [
+      { name: 'bug', color: 'red' },
+      { name: 'enhancement', color: 'green' }
+    ],
+    reviews: [
+      {
+        state: 'APPROVED',
+        updatedAt: 'Jan 2'
+      },
+      {
+        state: 'CHANGES_REQUESTED',
+        updatedAt: 'Jan 4'
+      }
+    ]
+  }
+};