made more ticket components

2026-04-18 14:04:09 +02:00
parent 550c837c5e
commit fdf2af1ad3
15 changed files with 1574 additions and 1578 deletions
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { frostedAsideCardClass } from '@/lib/ticket-styles';
+import { edit as editGitConnections } from '@/routes/git-connections/index';
+import type { TicketRepositoryPullRequestModel } from '@/types/models/ticket-repository-pull-request-model';
+
+const props = defineProps<{
+    repositoryPullRequests: TicketRepositoryPullRequestModel[];
+}>();
+
+const visibleRepositoryPullRequests = computed(() =>
+    props.repositoryPullRequests.filter(
+        (repositoryPullRequest) =>
+            repositoryPullRequest.pull_requests.length > 0 ||
+            repositoryPullRequest.error !== null ||
+            !repositoryPullRequest.repository_connection.has_personal_access,
+    ),
+);
+</script>
+
+<template>
+    <Card :class="frostedAsideCardClass">
+        <CardHeader>
+            <CardTitle>Pull requests</CardTitle>
+            <CardDescription>
+                Matching pull requests are detected from linked repositories by
+                checking whether the source branch starts with this ticket key.
+            </CardDescription>
+        </CardHeader>
+
+        <CardContent class="space-y-4">
+            <div
+                v-if="visibleRepositoryPullRequests.length === 0"
+                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+            >
+                No matching pull requests were found across the linked
+                repositories you can access.
+            </div>
+
+            <div v-else class="space-y-3">
+                <div
+                    v-for="repositoryPullRequest in visibleRepositoryPullRequests"
+                    :key="repositoryPullRequest.repository_connection.id"
+                    class="border-border rounded-xl border px-4 py-4"
+                >
+                    <div class="flex flex-wrap items-center gap-2">
+                        <Badge variant="secondary">
+                            {{
+                                repositoryPullRequest.repository_connection
+                                    .provider_label
+                            }}
+                        </Badge>
+                        <span class="font-medium">
+                            {{
+                                repositoryPullRequest.repository_connection
+                                    .repository_full_name
+                            }}
+                        </span>
+                    </div>
+
+                    <p class="text-muted-foreground mt-2 text-sm">
+                        {{
+                            repositoryPullRequest.repository_connection.base_url
+                        }}
+                    </p>
+
+                    <div
+                        v-if="
+                            !repositoryPullRequest.repository_connection
+                                .has_personal_access
+                        "
+                        class="mt-3 space-y-3"
+                    >
+                        <p class="text-muted-foreground text-sm">
+                            Connect a matching Git account in your user settings
+                            to inspect pull requests for this repository.
+                        </p>
+
+                        <Button as-child variant="outline" size="sm">
+                            <Link :href="editGitConnections()">
+                                Open Git connections
+                            </Link>
+                        </Button>
+                    </div>
+
+                    <div
+                        v-else-if="repositoryPullRequest.error"
+                        class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                    >
+                        {{ repositoryPullRequest.error }}
+                    </div>
+
+                    <div v-else class="mt-3 space-y-3">
+                        <div
+                            v-for="pullRequest in repositoryPullRequest.pull_requests"
+                            :key="pullRequest.html_url"
+                            class="border-border/70 rounded-xl border px-4 py-3"
+                        >
+                            <div class="flex flex-wrap items-center gap-2">
+                                <Badge variant="outline">
+                                    #{{ pullRequest.number }}
+                                </Badge>
+                                <Badge variant="secondary">
+                                    {{ pullRequest.status }}
+                                </Badge>
+                                <a
+                                    :href="pullRequest.html_url"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    class="text-foreground hover:text-primary font-medium transition"
+                                >
+                                    {{ pullRequest.title }}
+                                </a>
+                            </div>
+                            <p class="text-muted-foreground mt-2 text-sm">
+                                Source branch: {{ pullRequest.source_branch }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>