117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { Link, useForm } from '@inertiajs/vue3';
|
|
import { ArrowDownLeft, ArrowUpRight, Unlink } from 'lucide-vue-next';
|
|
import { computed } from 'vue';
|
|
import { destroy } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
|
|
import FormFeedback from '@/components/FormFeedback.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useFormProtection } from '@/composables/useFormProtection';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import { show } from '@/routes/projects/tickets';
|
|
import type { TicketLinkModel } from '@/types/models/ticket-link-model';
|
|
|
|
const props = defineProps<{
|
|
link: TicketLinkModel;
|
|
projectId: number;
|
|
ticketId: number;
|
|
ticketKey: string;
|
|
canEdit: boolean;
|
|
}>();
|
|
const emit = defineEmits<{ removed: [] }>();
|
|
const { t } = useLocalization();
|
|
const outgoing = computed(() => props.link.source_ticket_id === props.ticketId);
|
|
const form = useForm({});
|
|
const protection = useFormProtection(form);
|
|
function remove(): void {
|
|
if (!props.canEdit) {
|
|
return;
|
|
}
|
|
protection.submit(
|
|
destroy({
|
|
project: props.projectId,
|
|
ticket: props.ticketId,
|
|
ticketLink: props.link.id,
|
|
}),
|
|
{
|
|
preserveScroll: true,
|
|
onSuccess: () => emit('removed'),
|
|
},
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<li
|
|
class="grid min-w-0 gap-3 rounded-xl border p-4"
|
|
:data-ticket-link="link.id"
|
|
>
|
|
<div class="flex min-w-0 flex-wrap items-center gap-2">
|
|
<Badge
|
|
variant="outline"
|
|
class="text-muted-foreground max-w-full whitespace-normal"
|
|
>
|
|
<ArrowUpRight
|
|
v-if="outgoing"
|
|
class="size-3.5 shrink-0"
|
|
aria-hidden="true"
|
|
/><ArrowDownLeft
|
|
v-else
|
|
class="size-3.5 shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
{{
|
|
t(
|
|
outgoing
|
|
? 'ticketRelationships.outgoing'
|
|
: 'ticketRelationships.incoming',
|
|
)
|
|
}}
|
|
</Badge>
|
|
<span class="text-muted-foreground font-mono text-xs">{{
|
|
ticketKey
|
|
}}</span>
|
|
<span class="text-sm font-medium">{{
|
|
link.ticket_link_type.label
|
|
}}</span>
|
|
</div>
|
|
<div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
|
|
<Link
|
|
:href="
|
|
show({ project: projectId, ticket: link.linked_ticket.id })
|
|
"
|
|
class="hover:text-primary focus-visible:ring-ring/35 grid min-w-0 flex-1 basis-40 gap-1 rounded-md outline-none transition-colors focus-visible:ring-2"
|
|
>
|
|
<span class="text-primary font-mono text-xs font-semibold">{{
|
|
link.linked_ticket.ticket_key
|
|
}}</span>
|
|
<span class="wrap-anywhere text-sm font-medium">{{
|
|
link.linked_ticket.title
|
|
}}</span>
|
|
</Link>
|
|
<form v-if="canEdit" @submit.prevent="remove">
|
|
<Button
|
|
type="submit"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="text-muted-foreground hover:text-destructive"
|
|
:aria-label="
|
|
t('ticketRelationships.removeLink', {
|
|
key: link.linked_ticket.ticket_key,
|
|
})
|
|
"
|
|
:disabled="form.processing"
|
|
><Unlink class="size-4" aria-hidden="true" />{{
|
|
t('ticketDetail.removeLink')
|
|
}}</Button
|
|
>
|
|
</form>
|
|
</div>
|
|
<FormFeedback
|
|
v-if="canEdit"
|
|
:state="protection.state.value"
|
|
@retry="remove"
|
|
/>
|
|
</li>
|
|
</template>
|