Update checklist sync without hard resets

2026-05-20 09:19:44 +00:00
parent 456b165987
commit 507460f1a3
8 changed files with 404 additions and 92 deletions
@@ -5,6 +5,8 @@ import { computed, ref, watch } from 'vue';
 import {
    acceptanceCriteriaToEditorState,
    buildAcceptanceCriteria,
+    formatChecklistLines,
+    normalizeAcceptanceCriteria,
    parseChecklistLines,
 } from '@/lib/acceptance-criteria';
 import ProjectTicketBranchController from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
@@ -112,6 +114,11 @@ const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
    props.ticket.acceptance_criteria,
 );
 const acceptanceCriteriaChecklist = ref(acceptanceCriteriaEditorState.checklist);
+const savedAcceptanceCriteria = ref(
+    normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
+);
+const isPersistingAcceptanceCriteriaToggle = ref(false);
+const acceptanceCriteriaToggleError = ref('');

 const form = useForm({
    acceptance_criteria: buildAcceptanceCriteria(acceptanceCriteriaChecklist.value),
@@ -141,7 +148,13 @@ const form = useForm({
 });

 const acceptanceCriteriaPreviewItems = computed(() =>
-    parseChecklistLines(acceptanceCriteriaChecklist.value),
+    savedAcceptanceCriteria.value,
+);
+
+const hasUnsavedAcceptanceCriteriaDraft = computed(
+    () =>
+        acceptanceCriteriaChecklist.value !==
+        formatChecklistLines(savedAcceptanceCriteria.value),
 );

 const acceptanceCriteriaError = computed(() => {
@@ -337,12 +350,117 @@ const submitBranchCreation = (): void => {
    );
 };

+const buildAcceptanceCriteriaForSubmit = () => {
+    const draftItems = buildAcceptanceCriteria(acceptanceCriteriaChecklist.value);
+
+    return draftItems.map((item, index) => ({
+        ...item,
+        ...(savedAcceptanceCriteria.value[index]?.id !== undefined
+            ? { id: savedAcceptanceCriteria.value[index].id }
+            : {}),
+    }));
+};
+
+const buildSavedTicketPayload = (acceptanceCriteria = savedAcceptanceCriteria.value) => ({
+    acceptance_criteria: acceptanceCriteria,
+    assignee_user_id: props.ticket.assignee_user_id,
+    author_user_id: props.ticket.author_user_id,
+    blocked_comment: props.ticket.blocked_comment,
+    description: props.ticket.description,
+    field_values: (props.ticket.field_values ?? []).map((fieldValue) => ({
+        ticket_field_definition_id: fieldValue.ticket_field_definition_id,
+        value_number: fieldValue.value_number,
+        value_user_id: fieldValue.value_user_id,
+    })),
+    is_blocked: props.ticket.is_blocked,
+    parent_ticket_id: props.ticket.parent_ticket_id,
+    story_points: props.ticket.story_points,
+    ticket_priority_id: props.ticket.ticket_priority_id,
+    ticket_type_id: props.ticket.ticket_type_id,
+    title: props.ticket.title,
+});
+
+const persistAcceptanceCriteriaToggle = async (
+    index: number,
+    checked: boolean,
+): Promise<void> => {
+    if (
+        !props.canEditTicket ||
+        isPersistingAcceptanceCriteriaToggle.value ||
+        hasUnsavedAcceptanceCriteriaDraft.value
+    ) {
+        return;
+    }
+
+    const nextAcceptanceCriteria = savedAcceptanceCriteria.value.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, checked } : item,
+    );
+    const previousChecklist = formatChecklistLines(savedAcceptanceCriteria.value);
+    const nextChecklist = formatChecklistLines(nextAcceptanceCriteria);
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+
+    isPersistingAcceptanceCriteriaToggle.value = true;
+    acceptanceCriteriaToggleError.value = '';
+
+    try {
+        const response = await fetch(
+            ProjectTicketController.update.url({
+                project: props.project.id,
+                ticket: props.ticket.id,
+            }),
+            {
+                method: 'PATCH',
+                credentials: 'same-origin',
+                headers: {
+                    Accept: 'text/html, application/xhtml+xml',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken ?? '',
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify(
+                    buildSavedTicketPayload(nextAcceptanceCriteria),
+                ),
+            },
+        );
+
+        if (!response.ok) {
+            throw new Error('Checklist toggle update failed.');
+        }
+
+        savedAcceptanceCriteria.value = nextAcceptanceCriteria;
+
+        if (acceptanceCriteriaChecklist.value === previousChecklist) {
+            acceptanceCriteriaChecklist.value = nextChecklist;
+        }
+    } catch (_error) {
+        acceptanceCriteriaToggleError.value =
+            'Checklist status could not be saved right now.';
+    } finally {
+        isPersistingAcceptanceCriteriaToggle.value = false;
+    }
+};
+
+const onAcceptanceCriteriaCheckboxChange = (
+    index: number,
+    event: Event,
+): void => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    void persistAcceptanceCriteriaToggle(index, target.checked);
+};
+
 const submit = (): void => {
    if (!props.canEditTicket) {
        return;
    }

-    form.acceptance_criteria = buildAcceptanceCriteria(acceptanceCriteriaChecklist.value);
+    form.acceptance_criteria = buildAcceptanceCriteriaForSubmit();

    form.submit(
        ProjectTicketController.update({
@@ -632,10 +750,20 @@ const formatDateTime = (value: string): string => {
                                    />
                                    <p class="text-muted-foreground text-xs">
                                        Use <code>[ ]</code> / <code>[x]</code> for checklist items. Indent with two spaces for nested steps.
+                                        Text changes are saved with the main ticket update.
+                                    </p>
+                                    <p
+                                        v-if="hasUnsavedAcceptanceCriteriaDraft"
+                                        class="text-muted-foreground text-xs"
+                                    >
+                                        Save checklist text changes before toggling completion directly.
                                    </p>
                                    <InputError
                                        :message="acceptanceCriteriaError"
                                    />
+                                    <InputError
+                                        :message="acceptanceCriteriaToggleError"
+                                    />
                                </div>

                                <div
@@ -643,19 +771,36 @@ const formatDateTime = (value: string): string => {
                                    class="border-border rounded-xl border p-4 text-sm"
                                >
                                    <p class="mb-3 font-medium">
-                                        Checklist preview
+                                        Saved checklist
                                    </p>
                                    <ul class="space-y-2">
                                        <li
                                            v-for="(item, index) in acceptanceCriteriaPreviewItems"
-                                            :key="index"
+                                            :key="item.id ?? index"
                                            :style="{
                                                marginLeft: `${item.indent * 1.25}rem`,
                                            }"
                                            class="flex items-start gap-2"
                                        >
-                                            <span class="mt-0.5">{{ item.checked ? '☑' : '☐' }}</span>
-                                            <span>{{ item.text }}</span>
+                                            <input
+                                                :id="`acceptance-criteria-${item.id ?? index}`"
+                                                :checked="item.checked"
+                                                type="checkbox"
+                                                :disabled="
+                                                    !canEditTicket ||
+                                                    form.processing ||
+                                                    isPersistingAcceptanceCriteriaToggle ||
+                                                    hasUnsavedAcceptanceCriteriaDraft
+                                                "
+                                                class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
+                                                @change="onAcceptanceCriteriaCheckboxChange(index, $event)"
+                                            />
+                                            <label
+                                                :for="`acceptance-criteria-${item.id ?? index}`"
+                                                class="flex-1"
+                                            >
+                                                {{ item.text }}
+                                            </label>
                                        </li>
                                    </ul>
                                </div>