146 lines
5.4 KiB
Vue
146 lines
5.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import FeatureComingSoonPanel from '@/components/FeatureComingSoonPanel.vue';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { frostedAsideCardClass } from '@/lib/ticket-styles';
|
|
import type { TicketModel } from '@/types/models/ticket-model';
|
|
import type { TicketRepositoryBranchModel } from '@/types/models/ticket-repository-branch-model';
|
|
import type { TicketRepositoryPullRequestModel } from '@/types/models/ticket-repository-pull-request-model';
|
|
|
|
const props = defineProps<{
|
|
repositoryBranches: TicketRepositoryBranchModel[];
|
|
repositoryPullRequests: TicketRepositoryPullRequestModel[];
|
|
ticket: TicketModel;
|
|
}>();
|
|
|
|
const repositoryBranchCount = computed(() =>
|
|
props.repositoryBranches.reduce(
|
|
(count, repositoryBranch) => count + repositoryBranch.branches.length,
|
|
0,
|
|
),
|
|
);
|
|
|
|
const pullRequestCount = computed(() =>
|
|
props.repositoryPullRequests.reduce(
|
|
(count, repositoryPullRequest) =>
|
|
count + repositoryPullRequest.pull_requests.length,
|
|
0,
|
|
),
|
|
);
|
|
|
|
const formatDateTime = (value: string): string => {
|
|
return new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
}).format(new Date(value));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<Card :class="frostedAsideCardClass">
|
|
<CardHeader>
|
|
<CardTitle
|
|
class="font-display dark:text-foreground text-xl text-[#2d3335]"
|
|
>
|
|
Snapshot
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Quick context for the ticket without scrolling through the
|
|
full detail form.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-3">
|
|
<div
|
|
class="dark:bg-muted/35 rounded-[1.25rem] bg-[#f1f4f5] px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]"
|
|
>
|
|
<p
|
|
class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
|
|
>
|
|
Assignee
|
|
</p>
|
|
<p
|
|
class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
|
|
>
|
|
{{ ticket.assignee?.name ?? 'Unassigned' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
|
|
>
|
|
<p
|
|
class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
|
|
>
|
|
Author
|
|
</p>
|
|
<p
|
|
class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
|
|
>
|
|
{{ ticket.author?.name ?? 'No author' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-1">
|
|
<div
|
|
class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
|
|
>
|
|
<p
|
|
class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
|
|
>
|
|
Branches
|
|
</p>
|
|
<p
|
|
class="dark:text-foreground mt-1 text-lg font-semibold text-[#2d3335]"
|
|
>
|
|
{{ repositoryBranchCount }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
|
|
>
|
|
<p
|
|
class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
|
|
>
|
|
Pull requests
|
|
</p>
|
|
<p
|
|
class="dark:text-foreground mt-1 text-lg font-semibold text-[#2d3335]"
|
|
>
|
|
{{ pullRequestCount }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
|
|
>
|
|
<p
|
|
class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
|
|
>
|
|
Last updated
|
|
</p>
|
|
<p
|
|
class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
|
|
>
|
|
{{ formatDateTime(ticket.updated_at) }}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<FeatureComingSoonPanel
|
|
feature="Comments & discussion"
|
|
description="The Stitch design already reserves this full rail for threaded comments, collaboration, and follow-up context. The visual shell is in place here until the feature is wired."
|
|
/>
|
|
</div>
|
|
</template>
|