From 3c67209e0f8ad10c7eade6e04099ee7744fc5d2f Mon Sep 17 00:00:00 2001 From: Florian Ehrenstorfer Date: Thu, 2 Jan 2025 08:26:08 +0100 Subject: [PATCH] design Pr bad practice component and activity dashboard(#199) --- .../activity-dashboard.component.html | 8 +- .../bad-practice-card.component.html | 13 ++- .../bad-practice-card.component.ts | 10 ++- .../bad-practice-card.stories.ts | 3 +- ...l-request-bad-practice-card.component.html | 85 +++++++++++-------- ...ull-request-bad-practice-card.component.ts | 11 ++- .../pull-request-bad-practice-card.stories.ts | 30 +++++++ 7 files changed, 111 insertions(+), 49 deletions(-) diff --git a/webapp/src/app/home/activity/activity-dashboard.component.html b/webapp/src/app/home/activity/activity-dashboard.component.html index 6eb97ffe..e52ba271 100644 --- a/webapp/src/app/home/activity/activity-dashboard.component.html +++ b/webapp/src/app/home/activity/activity-dashboard.component.html @@ -1,5 +1,5 @@
-
+

Activities

@@ -9,16 +9,16 @@

Activities

-
+

Your open pull requests

- -
+
@if (query.data()?.pullRequests) { @for (pullRequest of query.data()?.pullRequests; track pullRequest.id) { +
+ @if (resolved()) { + + } @else { + + } +
+

{{ title() }}

-
{{ description() }}
+

{{ description() }}

- +
diff --git a/webapp/src/app/user/bad-practice-card/bad-practice-card.component.ts b/webapp/src/app/user/bad-practice-card/bad-practice-card.component.ts index 161f4113..0954450b 100644 --- a/webapp/src/app/user/bad-practice-card/bad-practice-card.component.ts +++ b/webapp/src/app/user/bad-practice-card/bad-practice-card.component.ts @@ -1,16 +1,20 @@ import { Component, input } from '@angular/core'; import { HlmCardModule } from '@spartan-ng/ui-card-helm'; +import { NgIcon } from '@ng-icons/core'; +import { octCheck, octX } from '@ng-icons/octicons'; @Component({ selector: 'app-bad-practice-card', standalone: true, - imports: [HlmCardModule], + imports: [HlmCardModule, NgIcon], templateUrl: './bad-practice-card.component.html', styles: `` }) export class BadPracticeCardComponent { + protected readonly octCheck = octCheck; + protected readonly octX = octX; + title = input(); description = input(); - repositoryName = input(); - number = input(); + resolved = input(); } diff --git a/webapp/src/app/user/bad-practice-card/bad-practice-card.stories.ts b/webapp/src/app/user/bad-practice-card/bad-practice-card.stories.ts index 381a20c3..2674cfab 100644 --- a/webapp/src/app/user/bad-practice-card/bad-practice-card.stories.ts +++ b/webapp/src/app/user/bad-practice-card/bad-practice-card.stories.ts @@ -14,8 +14,7 @@ export const Default: Story = { args: { title: 'Avoid using any type', description: 'Using the any type defeats the purpose of TypeScript.', - repositoryName: 'Hepheastus', - number: 200 + resolved: false } }; /* diff --git a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.html b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.html index 8d805768..27598863 100644 --- a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.html +++ b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.html @@ -1,48 +1,63 @@ - + } + +
+
+ @if (isLoading()) { } @else {
} - -
You have {{ badPractices()?.length }} bad practices in this pull request.
+ + @if (isLoading()) { + + + } @else { + +{{ additions() }} + -{{ deletions() }} + }
@if (!isLoading()) { -
- - @for (badpractice of badPractices(); track badpractice.title) { - - - } - +
+ @for (label of pullRequestLabels(); track label.name) { + + }
} - - +
+ @if (!isLoading()) { +
+ + @for (badpractice of badPractices(); track badpractice.title) { + + + } + +
+ } + diff --git a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.ts b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.ts index 03219be3..598ccb05 100644 --- a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.ts +++ b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.component.ts @@ -1,7 +1,7 @@ import { Component, computed, input } from '@angular/core'; import { PullRequestInfo, LabelInfo, PullRequestBadPractice } from '@app/core/modules/openapi'; import { NgIcon } from '@ng-icons/core'; -import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octGitPullRequestDraft, octGitMerge, octX } from '@ng-icons/octicons'; +import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octGitPullRequestDraft, octGitMerge, octX, octFold } from '@ng-icons/octicons'; import { HlmCardModule } from '@spartan-ng/ui-card-helm'; import { HlmSkeletonComponent } from '@spartan-ng/ui-skeleton-helm'; @@ -10,6 +10,9 @@ import { BadPracticeCardComponent } from '@app/user/bad-practice-card/bad-practi import { BrnSeparatorComponent } from '@spartan-ng/ui-separator-brain'; import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm'; import { BrnCollapsibleComponent, BrnCollapsibleContentComponent, BrnCollapsibleTriggerDirective } from '@spartan-ng/ui-collapsible-brain'; +import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; +import { GithubLabelComponent } from '@app/ui/github-label/github-label.component'; +import { cn } from '@app/utils'; @Component({ selector: 'app-pull-request-bad-practice-card', @@ -23,7 +26,9 @@ import { BrnCollapsibleComponent, BrnCollapsibleContentComponent, BrnCollapsible HlmSeparatorDirective, BrnCollapsibleComponent, BrnCollapsibleContentComponent, - BrnCollapsibleTriggerDirective + BrnCollapsibleTriggerDirective, + HlmButtonDirective, + GithubLabelComponent ], standalone: true }) @@ -32,6 +37,7 @@ export class PullRequestBadPracticeCardComponent { protected readonly octX = octX; protected readonly octComment = octComment; protected readonly octFileDiff = octFileDiff; + protected readonly octFold = octFold; isLoading = input(false); class = input(''); @@ -50,6 +56,7 @@ export class PullRequestBadPracticeCardComponent { displayCreated = computed(() => dayjs(this.createdAt())); displayTitle = computed(() => (this.title() ?? '').replace(/`([^`]+)`/g, '$1')); + computedClass = computed(() => cn('w-full', !this.isLoading() ? 'hover:bg-accent/50 cursor-pointer' : '', this.class())); issueIconAndColor = computed(() => { var icon: string; diff --git a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.stories.ts b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.stories.ts index 74e5fd36..54482f24 100644 --- a/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.stories.ts +++ b/webapp/src/app/user/pull-request-bad-practice-card/pull-request-bad-practice-card.stories.ts @@ -38,3 +38,33 @@ export const Default: Story = { ] } }; + +export const isLoading: Story = { + args: { + title: 'Add feature X', + number: 12, + additions: 10, + deletions: 5, + htmlUrl: 'http://example.com', + state: 'OPEN', + isDraft: false, + isMerged: false, + repositoryName: 'Artemis', + createdAt: '2024-01-01', + pullRequestLabels: [ + { id: 1, name: 'bug', color: 'f00000' }, + { id: 2, name: 'enhancement', color: '008000' } + ], + badPractices: [ + { + title: 'Avoid using any type', + description: 'Using the any type defeats the purpose of TypeScript.' + }, + { + title: 'Unchecked checkbox in description', + description: 'Unchecked checkboxes in the description are not allowed.' + } + ], + isLoading: true + } +};