109 lines
4.7 KiB
Vue
109 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { computed, useTemplateRef } from 'vue';
|
|
import TicketDetailBlocker from '@/components/tickets/detail/TicketDetailBlocker.vue';
|
|
import TicketDetailContent from '@/components/tickets/detail/TicketDetailContent.vue';
|
|
import TicketDetailGit from '@/components/tickets/detail/TicketDetailGit.vue';
|
|
import TicketDetailHeader from '@/components/tickets/detail/TicketDetailHeader.vue';
|
|
import TicketDetailHistory from '@/components/tickets/detail/TicketDetailHistory.vue';
|
|
import TicketDetailMetadata from '@/components/tickets/detail/TicketDetailMetadata.vue';
|
|
import TicketDetailRelationships from '@/components/tickets/detail/TicketDetailRelationships.vue';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { index as projectIndex, show } from '@/routes/projects';
|
|
import { show as showTicket } from '@/routes/projects/tickets';
|
|
import type { BreadcrumbItem, ProjectTicketPageProps } from '@/types';
|
|
const props = defineProps<ProjectTicketPageProps>();
|
|
const { t } = useLocalization();
|
|
const ticketContent = useTemplateRef('ticketContent');
|
|
const breadcrumbs = computed<BreadcrumbItem[]>(() => [
|
|
{ title: t('navigation.projects'), href: projectIndex() },
|
|
{ title: props.project.name, href: show(props.project.id) },
|
|
{
|
|
title: props.ticket.ticket_key,
|
|
href: showTicket({
|
|
project: props.project.id,
|
|
ticket: props.ticket.id,
|
|
}),
|
|
},
|
|
]);
|
|
</script>
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head :title="ticket.ticket_key" />
|
|
<div
|
|
:key="`${project.id}:${ticket.id}`"
|
|
class="mx-auto flex w-full min-w-0 max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8"
|
|
>
|
|
<TicketDetailHeader
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-edit-ticket="canEditTicket"
|
|
/>
|
|
<p
|
|
v-if="status"
|
|
role="status"
|
|
class="border-primary/20 bg-primary/10 rounded-xl border px-4 py-3 text-sm"
|
|
>
|
|
{{ status }}
|
|
</p>
|
|
<div
|
|
class="grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]"
|
|
>
|
|
<TicketDetailContent
|
|
ref="ticketContent"
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-edit-ticket="canEditTicket"
|
|
:can-manage-project="canManageProject"
|
|
:parent-ticket-options="parentTicketOptions"
|
|
:ticket-field-definitions="ticketFieldDefinitions"
|
|
:ticket-priorities="ticketPriorities"
|
|
:ticket-types="ticketTypes"
|
|
:users="users"
|
|
class="xl:col-start-1 xl:row-start-1"
|
|
/>
|
|
<aside
|
|
:aria-label="t('ticketDetail.metadata')"
|
|
class="min-w-0 xl:col-start-2 xl:row-span-5 xl:row-start-1"
|
|
>
|
|
<TicketDetailMetadata
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-manage-project="canManageProject"
|
|
:ticket-field-definitions="ticketFieldDefinitions"
|
|
/>
|
|
</aside>
|
|
<TicketDetailBlocker
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-edit-ticket="canEditTicket"
|
|
class="xl:col-start-1"
|
|
/>
|
|
<TicketDetailRelationships
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-edit-ticket="canEditTicket"
|
|
:parent-ticket-options="parentTicketOptions"
|
|
:child-ticket-tree="childTicketTree"
|
|
:linked-tickets="linkedTickets"
|
|
:ticket-link-types="ticketLinkTypes"
|
|
:ticket-link-options="ticketLinkOptions"
|
|
@edit-parent="ticketContent?.editParent()"
|
|
class="xl:col-start-1"
|
|
/>
|
|
<TicketDetailHistory :ticket="ticket" class="xl:col-start-1" />
|
|
<TicketDetailGit
|
|
:ticket="ticket"
|
|
:project="project"
|
|
:can-edit-ticket="canEditTicket"
|
|
:repository-branches="repositoryBranches"
|
|
:repository-pull-requests="repositoryPullRequests"
|
|
:suggested-branch-name="suggestedBranchName"
|
|
class="xl:col-start-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|