feat(KAN-32): add hierarchical acceptance criteria checklist

resources/js/pages/projects/TicketCreate.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
-import { computed, toRef, unref } from 'vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { useSessionStorage } from '@vueuse/core';
+import { computed } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
 import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
 import { useLocalization } from '@/composables/useLocalization';
 import FormFeedback from '@/components/FormFeedback.vue';
@@ -17,10 +17,8 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import {
-    buildAcceptanceCriteria,
-    parseChecklistLines,
-} from '@/lib/acceptance-criteria';
+import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
+import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index, show } from '@/routes/projects/index';
@@ -71,19 +69,9 @@ const hasTicketMetadata = computed(
 );
 
 const draftKey = `projects:${props.project.id}:tickets:create`;
-const acceptanceCriteriaDraft = useRemember(
-    { checklist: '' },
-    `${draftKey}:checklist`,
-);
-const acceptanceCriteriaChecklist = toRef(
-    unref(acceptanceCriteriaDraft),
-    'checklist',
-);
-
-const form = useForm(draftKey, {
-    acceptance_criteria: buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    ),
+const draftGeneration = useSessionStorage(`${draftKey}:generation`, 0);
+const form = useForm(`${draftKey}:${draftGeneration.value}`, {
+    acceptance_criteria: [] as AcceptanceCriteriaModel,
     assignee_user_id: '',
     description: '',
     parent_ticket_id: '',
@@ -96,24 +84,17 @@ const form = useForm(draftKey, {
     title: '',
 });
 
-const isDirty = computed(
-    () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
-);
-const protection = useFormProtection(form, { isDirty: () => isDirty.value });
+const isDirty = computed(() => form.isDirty);
+const protection = useFormProtection(form);
 const reset = (): void => {
     if (form.processing || !protection.confirmLeave()) {
         return;
     }
     form.reset();
     form.clearErrors();
-    acceptanceCriteriaChecklist.value = '';
     protection.clearFeedback();
 };
 
-const acceptanceCriteriaPreviewItems = computed(() =>
-    parseChecklistLines(acceptanceCriteriaChecklist.value),
-);
-
 const acceptanceCriteriaError = computed(() => {
     return (
         form.errors.acceptance_criteria ??
@@ -128,17 +109,19 @@ const submit = (): void => {
     if (!hasTicketMetadata.value || form.processing) {
         return;
     }
-    form.acceptance_criteria = buildAcceptanceCriteria(
-        acceptanceCriteriaChecklist.value,
-    );
 
     protection.submit(
         ProjectTicketController.store({ project: props.project.id }),
         {
             preserveScroll: true,
             onSuccess: () => {
+                // The source page is unmounted before this callback, so its storage watcher has stopped.
+                window.sessionStorage.setItem(
+                    `${draftKey}:generation`,
+                    String(draftGeneration.value + 1),
+                );
+                draftGeneration.value++;
                 form.reset();
-                acceptanceCriteriaChecklist.value = '';
             },
         },
     );
@@ -224,46 +207,11 @@ const submit = (): void => {
                             autofocus
                         >
                             <template #content>
-                                <TicketFormField
-                                    id="acceptance_criteria_checklist"
-                                    v-model="acceptanceCriteriaChecklist"
-                                    kind="textarea"
-                                    :label="t('ticketDetail.checklistEditor')"
-                                    :hint="t('ticketForm.checklistHelp')"
-                                    :placeholder="
-                                        t('ticketDetail.checklistPlaceholder')
-                                    "
-                                    :error="acceptanceCriteriaError"
+                                <AcceptanceCriteriaChecklist
+                                    v-model="form.acceptance_criteria"
                                     :disabled="form.processing"
+                                    :error="acceptanceCriteriaError"
                                 />
-                                <div
-                                    v-if="acceptanceCriteriaPreviewItems.length"
-                                    class="bg-muted/30 min-w-0 rounded-xl border p-4 text-sm"
-                                >
-                                    <p class="mb-3 font-medium">
-                                        {{ t('ticketForm.checklistPreview') }}
-                                    </p>
-                                    <ul class="space-y-2">
-                                        <li
-                                            v-for="(
-                                                item, index
-                                            ) in acceptanceCriteriaPreviewItems"
-                                            :key="index"
-                                            :style="{
-                                                marginInlineStart: `${item.indent * 0.75}rem`,
-                                            }"
-                                            class="flex min-w-0 items-start gap-2"
-                                        >
-                                            <span aria-hidden="true">{{
-                                                item.checked ? '☑' : '☐'
-                                            }}</span>
-                                            <span
-                                                class="wrap-anywhere min-w-0"
-                                                >{{ item.text }}</span
-                                            >
-                                        </li>
-                                    </ul>
-                                </div>
                             </template>
                         </TicketFormFields>
                         <div