From 3eb2ffea81e324982350a9194c1381747d68f51f Mon Sep 17 00:00:00 2001
From: Florian Ehrenstorfer <flo.ehrenstorfer@tum.de>
Date: Mon, 16 Sep 2024 12:30:54 +0200
Subject: [PATCH] create component for pull requests(#82)

---
 .../pull-request-widget.component.html        | 13 +++++++
 .../pull-request-widget.component.ts          | 11 ++++++
 .../pull-request-widget.stories.ts            | 36 +++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
 create mode 100644 webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts
 create mode 100644 webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts

diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
new file mode 100644
index 00000000..001330ce
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
@@ -0,0 +1,13 @@
+<div class="border border-gray-300 rounded-lg p-4 bg-white w-72">
+  <!-- Header -->
+  <div class="flex justify-between items-center mb-2 text-xs text-gray-500">
+    <span class="font-bold">{{ pullRequest().repository.name }} #{{ pullRequest().id }} on {{ pullRequest().createdAt }}</span>
+    <span class="flex items-center space-x-2">
+      <span class="text-green-600 font-bold">+{{ pullRequest().additions }}</span>
+      <span class="text-red-600 font-bold">-{{ pullRequest().deletions }}</span>
+    </span>
+  </div>
+
+  <!-- Title -->
+  <div class="font-bold text-sm mb-3">{{ pullRequest().title }}</div>
+</div>
diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts
new file mode 100644
index 00000000..6eac1057
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts
@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+import { PullRequest } from '@app/core/modules/openapi';
+
+@Component({
+  selector: 'app-pull-request-widget',
+  templateUrl: './pull-request-widget.component.html',
+  standalone: true
+})
+export class PullRequestWidgetComponent {
+  pullRequest = input.required<PullRequest>();
+}
diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
new file mode 100644
index 00000000..2f2583f5
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { PullRequestWidgetComponent } from './pull-request-widget.component';
+import { PullRequest, Repository } from '@app/core/modules/openapi';
+
+const meta: Meta<PullRequestWidgetComponent> = {
+  title: 'Components/PullRequestCard',
+  component: PullRequestWidgetComponent,
+  tags: ['autodocs'] // Auto-generate docs if enabled
+};
+
+export default meta;
+
+type Story = StoryObj<PullRequestWidgetComponent>;
+
+const repo: Repository = {
+  name: 'Artemis',
+  nameWithOwner: 'artemis-education/artemis',
+  defaultBranch: 'master',
+  visibility: 'PUBLIC',
+  url: 'http://example.com'
+};
+
+const pullRequest: PullRequest = {
+  title: 'Add feature X',
+  additions: 10,
+  deletions: 5,
+  url: 'http://example.com',
+  state: 'OPEN',
+  repository: repo,
+  createdAt: 'Jan 1',
+  id: 12
+};
+
+export const Default: Story = {
+  args: { pullRequest }
+};