fix issue card icon

ls1intum · Oct 26, 2024 · e73d171 · e73d171
1 parent 6707a98
commit e73d171
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/webapp/src/app/user/issue-card/issue-card.component.html b/webapp/src/app/user/issue-card/issue-card.component.html
@@ -6,12 +6,7 @@
           <hlm-skeleton class="size-5 bg-green-500/30"></hlm-skeleton>
           <hlm-skeleton class="h-4 w-16 lg:w-36"></hlm-skeleton>
         } @else {
-          @if (state() === 'OPEN') {
-            <ng-icon [svg]="octGitPullRequest" size="18" class="mr-1 text-github-success-foreground"></ng-icon>
-          } @else {
-            <ng-icon [svg]="octGitPullRequestClosed" size="18" class="mr-1 text-github-danger-foreground"></ng-icon>
-          }
-
+          <ng-icon [svg]="issueIconAndColor().icon" size="18" [class]="'mr-1 ' + issueIconAndColor().color"></ng-icon>
           {{ repositoryName() }} #{{ number() }} on {{ displayCreated().format('MMM D') }}
         }
       </span>

diff --git a/webapp/src/app/user/issue-card/issue-card.component.ts b/webapp/src/app/user/issue-card/issue-card.component.ts
@@ -1,7 +1,7 @@
 import { Component, computed, input } from '@angular/core';
 import { PullRequestInfo, LabelInfo } from '@app/core/modules/openapi';
 import { NgIcon } from '@ng-icons/core';
-import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octX } from '@ng-icons/octicons';
+import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octGitPullRequestDraft, octGitMerge, octX } from '@ng-icons/octicons';
 import { HlmCardModule } from '@spartan-ng/ui-card-helm';
 import { HlmSkeletonComponent } from '@spartan-ng/ui-skeleton-helm';
 import dayjs from 'dayjs';
@@ -18,9 +18,7 @@ export class IssueCardComponent {
   protected readonly octCheck = octCheck;
   protected readonly octX = octX;
   protected readonly octComment = octComment;
-  protected readonly octGitPullRequest = octGitPullRequest;
   protected readonly octFileDiff = octFileDiff;
-  protected readonly octGitPullRequestClosed = octGitPullRequestClosed;
 
   isLoading = input(false);
   class = input('');
@@ -32,12 +30,39 @@ export class IssueCardComponent {
   repositoryName = input<string>();
   createdAt = input<string>();
   state = input<PullRequestInfo.StateEnum>();
+  isDraft = input<boolean>();
+  isMerged = input<boolean>();
   pullRequestLabels = input<Array<LabelInfo>>();
 
   displayCreated = computed(() => dayjs(this.createdAt()));
   displayTitle = computed(() => (this.title() ?? '').replace(/`([^`]+)`/g, '<code class="textCode">$1</code>'));
   computedClass = computed(() => cn('w-72', !this.isLoading() ? 'hover:bg-accent/50 cursor-pointer' : '', this.class()));
 
+  issueIconAndColor = computed(() => {
+    var icon: string;
+    var color: string;
+
+    if (this.state() === PullRequestInfo.StateEnum.Open) {
+      if (this.isDraft()) {
+        icon = octGitPullRequestDraft;
+        color = 'text-github-muted-foreground';
+      } else {
+        icon = octGitPullRequest;
+        color = 'text-github-open-foreground';
+      }
+    } else {
+      if (this.isMerged()) {
+        icon = octGitMerge;
+        color = 'text-github-done-foreground';
+      } else {
+        icon = octGitPullRequestClosed;
+        color = 'text-github-closed-foreground';
+      }
+    }
+
+    return { icon, color };
+  });
+
   hexToRgb(hex: string) {
     const bigint = parseInt(hex, 16);
     const r = (bigint >> 16) & 255;

diff --git a/webapp/src/app/user/issue-card/issue-card.stories.ts b/webapp/src/app/user/issue-card/issue-card.stories.ts
@@ -18,6 +18,8 @@ export const Default: Story = {
     deletions: 5,
     htmlUrl: 'http://example.com',
     state: 'OPEN',
+    isDraft: false,
+    isMerged: false,
     repositoryName: 'Artemis',
     createdAt: '2024-01-01',
     pullRequestLabels: [
@@ -35,6 +37,8 @@ export const isLoading: Story = {
     deletions: 5,
     htmlUrl: 'http://example.com',
     state: 'OPEN',
+    isDraft: false,
+    isMerged: false,
     repositoryName: 'Artemis',
     createdAt: '2024-01-01',
     pullRequestLabels: [

diff --git a/webapp/src/app/user/user-profile.component.html b/webapp/src/app/user/user-profile.component.html
@@ -55,6 +55,8 @@ <h2 class="text-xl font-semibold">Open Pull Requests</h2>
                 [title]="pullRequest.title"
                 [htmlUrl]="pullRequest.htmlUrl"
                 [state]="pullRequest.state"
+                [isDraft]="pullRequest.isDraft"
+                [isMerged]="pullRequest.isMerged"
                 [createdAt]="pullRequest.createdAt"
                 [pullRequestLabels]="pullRequest.labels"
               />