Add ProfileActivityCard Story

ls1intum · Oct 8, 2024 · 460995e · 460995e
1 parent 9a82520
commit 460995e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 92 deletions.
diff --git a/webapp/src/app/core/issue-card/issue-card.stories.ts b/webapp/src/app/core/issue-card/issue-card.stories.ts
@@ -20,7 +20,7 @@ export const Default: Story = {
     url: 'http://example.com',
     state: 'OPEN',
     repositoryName: 'Artemis',
-    createdAt: dayjs('Jan 1'),
+    createdAt: '2024-01-01',
     pullRequestLabels: [
       { name: 'bug', color: 'red' },
       { name: 'enhancement', color: 'green' }

diff --git a/webapp/src/app/core/profile-activity-card/profile-activity-card.component.html b/webapp/src/app/core/profile-activity-card/profile-activity-card.component.html
@@ -1,6 +1,6 @@
 <a
   class="w-[500px] grid grid-cols-[20%_50%_30%] border border-border bg-card hover:bg-accent hover:text-accent-foreground rounded-lg p-4 my-2"
-  [href]="this.review().url ?? this.review().pullRequest?.url"
+  [href]="this.url() ?? this.pullRequestUrl()"
   target="_blank"
   rel="noopener noreferrer"
 >
@@ -14,8 +14,8 @@
     </div>
   </div>
   <div class="justify-self-end flex items-center gap-2">
-    <a class="text-muted-foreground font-normal text-sm"> {{ this.review().pullRequest?.repository?.name }} #{{ this.review().pullRequest?.number }}</a>
-    @if (this.review().pullRequest?.state === 'OPEN') {
+    <a class="text-muted-foreground font-normal text-sm"> {{ this.repositoryName() }} #{{ this.pullRequestNumber() }}</a>
+    @if (this.pullRequestState() === 'OPEN') {
       <ng-icon [svg]="octGitPullRequest" size="20" class="text-github-success-foreground"></ng-icon>
     } @else {
       <ng-icon [svg]="octGitPullRequestClosed" size="20" class="text-github-muted-foreground"></ng-icon>

diff --git a/webapp/src/app/core/profile-activity-card/profile-activity-card.component.ts b/webapp/src/app/core/profile-activity-card/profile-activity-card.component.ts
@@ -1,5 +1,5 @@
 import { Component, computed, input } from '@angular/core';
-import { PullRequestReview, PullRequestReviewDTO } from '@app/core/modules/openapi';
+import { PullRequestDTO, PullRequestReviewDTO } from '@app/core/modules/openapi';
 import { NgIcon } from '@ng-icons/core';
 import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed } from '@ng-icons/octicons';
 import dayjs from 'dayjs';
@@ -14,34 +14,42 @@ dayjs.extend(relativeTime);
   standalone: true
 })
 export class ProfileActivityCardComponent {
-  review = input.required<PullRequestReviewDTO>();
+  url = input<string | undefined>(undefined);
+  createdAt = input.required<string>();
+  state = input.required<PullRequestReviewDTO.StateEnum>();
+  repositoryName = input.required<string>();
+  pullRequestNumber = input.required<number>();
+  pullRequestState = input.required<PullRequestDTO.StateEnum>();
+  pullRequestUrl = input.required<string>();
+
   protected readonly octCheck = octCheck;
   protected readonly octFileDiff = octFileDiff;
   protected readonly octComment = octComment;
   protected readonly octGitPullRequest = octGitPullRequest;
   protected readonly octGitPullRequestClosed = octGitPullRequestClosed;
 
-  displayAge = computed(() => dayjs(this.review().createdAt).fromNow());
+  displayAge = computed(() => dayjs(this.createdAt()).fromNow());
 
   reviewStateProps = computed(() => {
-    if (this.review().state === 'APPROVED') {
-      return {
-        icon: this.octCheck,
-        color: 'text-github-success-foreground',
-        text: 'Approved'
-      };
-    } else if (this.review().state === 'CHANGES_REQUESTED') {
-      return {
-        icon: this.octFileDiff,
-        color: 'text-github-danger-foreground',
-        text: 'Changes requested'
-      };
-    } else {
-      return {
-        icon: this.octComment,
-        color: 'text-github-neutral-foreground',
-        text: 'Commented'
-      };
+    switch (this.state()) {
+      case 'APPROVED':
+        return {
+          icon: this.octCheck,
+          color: 'text-github-success-foreground',
+          text: 'Approved'
+        };
+      case 'CHANGES_REQUESTED':
+        return {
+          icon: this.octFileDiff,
+          color: 'text-github-danger-foreground',
+          text: 'Changes requested'
+        };
+      default:
+        return {
+          icon: this.octComment,
+          color: 'text-github-neutral-foreground',
+          text: 'Commented'
+        };
     }
   });
 
@@ -52,10 +60,4 @@ export class ProfileActivityCardComponent {
       .map((s) => s.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase()))
       .join(' ');
   }
-
-  openIssue() {
-    if (this.review().pullRequest?.url) {
-      window.open(this.review().pullRequest?.url, '_blank');
-    }
-  }
 }
diff --git a/webapp/src/app/core/profile-activity-card/profile-activity-card.stories.ts b/webapp/src/app/core/profile-activity-card/profile-activity-card.stories.ts
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ProfileActivityCardComponent } from './profile-activity-card.component';
+
+const meta: Meta<ProfileActivityCardComponent> = {
+  component: ProfileActivityCardComponent,
+  tags: ['autodocs'] // Auto-generate docs if enabled
+};
+
+export default meta;
+
+type Story = StoryObj<ProfileActivityCardComponent>;
+
+export const Default: Story = {
+  args: {
+    createdAt: '2024-10-06',
+    state: 'CHANGES_REQUESTED',
+    repositoryName: 'Hephaestus',
+    pullRequestNumber: 100,
+    pullRequestState: 'OPEN',
+    pullRequestUrl: 'https://github.com/ls1intum/Hephaestus/pull/100'
+  }
+};
diff --git a/webapp/src/app/home/profile/profile.component.html b/webapp/src/app/home/profile/profile.component.html
@@ -41,7 +41,15 @@ <h1 class="text-3xl font-bold leading-6">{{ userData.login }}</h1>
           <h2 class="text-xl font-semibold">Latest Activity</h2>
           <hlm-scroll-area class="w-[510px] h-[400px]">
             @for (activity of userData.activity; track activity.id) {
-              <app-profile-activity-card [review]="activity" />
+              <app-profile-activity-card
+                [url]="activity.url"
+                [state]="activity.state!"
+                [createdAt]="activity.createdAt!"
+                [pullRequestNumber]="activity.pullRequest?.number!"
+                [pullRequestState]="activity.pullRequest?.state!"
+                [pullRequestUrl]="activity.pullRequest?.url!"
+                [repositoryName]="activity.pullRequest?.repository?.name!"
+              />
             }
           </hlm-scroll-area>
         </div>

diff --git a/webapp/src/app/home/profile/profile.component.ts b/webapp/src/app/home/profile/profile.component.ts
@@ -63,65 +63,6 @@ export class ProfileComponent {
   // get user id from the url
   protected userLogin: string | null = null;
 
-  userData = signal({
-    name: 'GODrums',
-    avatarUrl: 'https://github.com/godrums.png',
-    first_contribution: '2024-08-01',
-    repositories: ['ls1intum/Hephaestus', 'ls1intum/ls1intum/Artemis'],
-    activity: [
-      {
-        id: 1,
-        createdAt: '2024-10-06',
-        updatedAt: '2024-10-06',
-        state: 'CHANGES_REQUESTED',
-        submittedAt: '2024-10-06',
-        pullRequest: {
-          title: 'Add feature Y',
-          state: 'OPEN',
-          number: 100,
-          repository: {
-            name: 'Hephaestus',
-            nameWithOwner: 'ls1intum/Hephaestus',
-            defaultBranch: 'develop',
-            visibility: 'PUBLIC',
-            url: 'https://github.com/ls1intum/Hephaestus'
-          }
-        }
-      },
-      {
-        id: 2,
-        createdAt: '2024-10-07',
-        updatedAt: '2024-10-07',
-        state: 'APPROVED',
-        submittedAt: '2024-10-07',
-        pullRequest: {
-          title: 'Add feature X',
-          state: 'CLOSED',
-          number: 99,
-          repository: {
-            name: 'Hephaestus',
-            nameWithOwner: 'ls1intum/Hephaestus',
-            defaultBranch: 'develop',
-            visibility: 'PUBLIC',
-            url: 'https://github.com/ls1intum/Hephaestus'
-          }
-        }
-      }
-    ] as PullRequestReview[],
-    pullRequests: [
-      {
-        title: 'Add feature X',
-        state: 'OPEN',
-        createdAt: '2024-10-04',
-        repository: {
-          name: 'Hephaestus',
-          nameWithOwner: 'ls1intum/Hephaestus',
-          url: 'https://github.com/ls1intum/Hephaestus'
-        }
-      }
-    ] as PullRequestDTO[]
-  });
-
   displayFirstContribution = computed(() => {
     if (this.query.data()) {
       return dayjs(this.query.data()?.firstContribution).format('Do [of] MMMM YYYY');
@@ -131,7 +72,6 @@ export class ProfileComponent {
 
   constructor(private route: ActivatedRoute) {
     this.userLogin = this.route.snapshot.paramMap.get('id');
-    console.log(this.userLogin);
   }
 
   getRepositoryImage = (name: string) => {