diff --git a/webapp/src/app/user/issue-card/issue-card.component.html b/webapp/src/app/user/issue-card/issue-card.component.html index 4954ddfa..c598c3a2 100644 --- 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 @@ } @else { - @if (state() === 'OPEN') { - - } @else { - - } - + {{ repositoryName() }} #{{ number() }} on {{ displayCreated().format('MMM D') }} } diff --git a/webapp/src/app/user/issue-card/issue-card.component.ts b/webapp/src/app/user/issue-card/issue-card.component.ts index a732d347..8d09bb99 100644 --- 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(); createdAt = input(); state = input(); + isDraft = input(); + isMerged = input(); pullRequestLabels = input>(); displayCreated = computed(() => dayjs(this.createdAt())); displayTitle = computed(() => (this.title() ?? '').replace(/`([^`]+)`/g, '$1')); 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 index 2e801cdd..467296f2 100644 --- 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 index 34d1d9c6..b4cdd7c8 100644 --- a/webapp/src/app/user/user-profile.component.html +++ b/webapp/src/app/user/user-profile.component.html @@ -55,6 +55,8 @@

Open Pull Requests

[title]="pullRequest.title" [htmlUrl]="pullRequest.htmlUrl" [state]="pullRequest.state" + [isDraft]="pullRequest.isDraft" + [isMerged]="pullRequest.isMerged" [createdAt]="pullRequest.createdAt" [pullRequestLabels]="pullRequest.labels" />