feat(KAN-20): unify dialogs feedback and protect ticket drafts

resources/js/pages/projects/TicketCreate.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
+import { computed, toRef, unref } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import { useFormProtection } from '@/composables/useFormProtection';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -62,9 +64,17 @@ const hasTicketMetadata =
     props.ticketPriorities.length > 0 &&
     props.ticketStatusOptions.length > 0;
 
-const acceptanceCriteriaChecklist = ref('');
+const draftKey = `projects:${props.project.id}:tickets:create`;
+const acceptanceCriteriaDraft = useRemember(
+    { checklist: '' },
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
+);
 
-const form = useForm({
+const form = useForm(draftKey, {
     acceptance_criteria: buildAcceptanceCriteria(
         acceptanceCriteriaChecklist.value,
     ),
@@ -80,6 +90,10 @@ const form = useForm({
     title: '',
 });
 
+const protection = useFormProtection(form, {
+    isDirty: () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
+});
+
 const acceptanceCriteriaPreviewItems = computed(() =>
     parseChecklistLines(acceptanceCriteriaChecklist.value),
 );
@@ -99,9 +113,12 @@ const submit = (): void => {
         acceptanceCriteriaChecklist.value,
     );
 
-    form.submit(ProjectTicketController.store({ project: props.project.id }), {
-        preserveScroll: true,
-    });
+    protection.submit(
+        ProjectTicketController.store({ project: props.project.id }),
+        {
+            preserveScroll: true,
+        },
+    );
 };
 
 const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
@@ -165,17 +182,26 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
 
                 <CardContent>
                     <form class="grid gap-6" @submit.prevent="submit">
+                        <FormFeedback
+                            :state="protection.state.value"
+                            @retry="submit"
+                        />
                         <div class="grid gap-2">
                             <Label for="title">Title</Label>
                             <Input
                                 id="title"
                                 v-model="form.title"
+                                :invalid="Boolean(form.errors.title)"
+                                aria-describedby="title-error"
                                 required
                                 autofocus
                                 :disabled="form.processing"
                                 placeholder="Implement repository sync"
                             />
-                            <InputError :message="form.errors.title" />
+                            <InputError
+                                id="title-error"
+                                :message="form.errors.title"
+                            />
                         </div>
 
                         <div