Update checklist sync without hard resets
This commit is contained in:
@@ -17,6 +17,9 @@ export const normalizeAcceptanceCriteria = (
|
||||
const items = Array.isArray(value)
|
||||
? value
|
||||
.map((item) => ({
|
||||
...(typeof item.id === 'number' && item.id > 0
|
||||
? { id: item.id }
|
||||
: {}),
|
||||
checked: item.checked === true,
|
||||
indent: clampIndent(item.indent),
|
||||
text: item.text.trim(),
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export type AcceptanceCriteriaItemModel = {
|
||||
id?: number;
|
||||
checked: boolean;
|
||||
indent: number;
|
||||
text: string;
|
||||
|
||||
Reference in New Issue
Block a user