feat: simplify ticket links to action and ticket (KAN-12)

resources/js/components/tickets/detail/TicketDetailRelationships.vue

@@ -12,8 +12,12 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { useFormProtection } from '@/composables/useFormProtection';
 import { useLocalization } from '@/composables/useLocalization';
+import { useTicketLinkActions } from '@/composables/useTicketLinkActions';
 import { show as showTicket } from '@/routes/projects/tickets';
-import type { TicketDetailRelationshipsProps } from '@/types/ticket-detail';
+import type {
+    TicketDetailRelationshipsProps,
+    TicketLinkFormData,
+} from '@/types/ticket-detail';
 
 const props = defineProps<TicketDetailRelationshipsProps>();
 defineEmits<{ editParent: [] }>();
@@ -33,7 +37,7 @@ const canAddLink = computed(
         props.ticketLinkTypes.length > 0 &&
         props.ticketLinkOptions.length > 0,
 );
-const form = useForm({
+const form = useForm<TicketLinkFormData>({
     ticket_link_type_id: props.ticketLinkTypes[0]?.id ?? '',
     link_direction: 'source',
     linked_ticket_id: '',
@@ -41,10 +45,9 @@ const form = useForm({
 const protection = useFormProtection(form, {
     isDirty: () => props.canEditTicket && form.isDirty,
 });
-const selectedType = computed(() =>
-    props.ticketLinkTypes.find(
-        (type) => String(type.id) === String(form.ticket_link_type_id),
-    ),
+const { actions, selectedAction, selectedActionLabel } = useTicketLinkActions(
+    () => props.ticketLinkTypes,
+    form,
 );
 const selectedTicket = computed(() =>
     props.ticketLinkOptions.find(
@@ -221,40 +224,18 @@ function submit(): void {
                     />
                     <fieldset
                         :disabled="form.processing"
-                        class="grid min-w-0 gap-4 sm:grid-cols-3"
+                        class="grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
                     >
                         <TicketFormField
                             id="ticket_link_type_id"
-                            v-model="form.ticket_link_type_id"
+                            v-model="selectedAction"
                             kind="select"
-                            :label="t('ticketDetail.linkType')"
-                            :options="
-                                ticketLinkTypes.map((type) => ({
-                                    value: type.id,
-                                    label: `${type.label} / ${type.counterpart_label}`,
-                                }))
+                            :label="t('ticketDetail.linkAction')"
+                            :options="actions"
+                            :error="
+                                form.errors.ticket_link_type_id ||
+                                form.errors.link_direction
                             "
-                            :error="form.errors.ticket_link_type_id"
-                            :disabled="form.processing"
-                            required
-                        />
-                        <TicketFormField
-                            id="link_direction"
-                            v-model="form.link_direction"
-                            kind="select"
-                            :label="t('ticketRelationships.direction')"
-                            :options="[
-                                {
-                                    value: 'source',
-                                    label: selectedType?.label ?? '',
-                                },
-                                {
-                                    value: 'counterpart',
-                                    label:
-                                        selectedType?.counterpart_label ?? '',
-                                },
-                            ]"
-                            :error="form.errors.link_direction"
                             :disabled="form.processing"
                             required
                         />
@@ -281,26 +262,19 @@ function submit(): void {
                         />
                     </fieldset>
                     <p
-                        v-if="selectedType && selectedTicket"
+                        v-if="selectedActionLabel && selectedTicket"
                         aria-live="polite"
                         class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm"
                     >
                         <span class="font-mono text-xs">{{
                             ticket.ticket_key
                         }}</span
-                        ><span>{{
-                            form.link_direction === 'source'
-                                ? selectedType.label
-                                : selectedType.counterpart_label
-                        }}</span
+                        ><span>{{ selectedActionLabel }}</span
                         ><ArrowRight class="size-4" aria-hidden="true" /><span
                             class="font-mono text-xs"
                             >{{ selectedTicket.ticket_key }}</span
                         >
                     </p>
-                    <p class="text-muted-foreground text-xs">
-                        {{ t('ticketRelationships.directionHelp') }}
-                    </p>
                     <Button
                         type="submit"
                         :disabled="form.processing || !selectedTicket"