PetschStudios/KanbanGit
3
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 24 Wiki Activity

Add checklist acceptance criteria
linter / quality (pull_request) Successful in 1m16s
Details
tests / ci (8.4) (pull_request) Successful in 1m33s
Details

Browse Source
This commit is contained in:
Koda
2026-05-18 23:24:52 +00:00
parent f4661acf1b
commit 3ddfcc89f9
16 changed files with 937 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/projects/Ticket.vue
+94 -17
View File
@@ -2,6 +2,11 @@
import { Form, useForm, Head, Link, usePage } from '@inertiajs/vue3';
import { CheckCircle2, GitBranchPlus, XCircle } from 'lucide-vue-next';
import { computed, ref, watch } from 'vue';
import {
acceptanceCriteriaToEditorState,
buildAcceptanceCriteria,
parseChecklistLines,
} from '@/lib/acceptance-criteria';
import ProjectTicketBranchController from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
@@ -103,8 +108,17 @@ const breadcrumbs: BreadcrumbItem[] = [
},
];
const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
props.ticket.acceptance_criteria,
);
const acceptanceCriteriaSummary = ref(acceptanceCriteriaEditorState.summary);
const acceptanceCriteriaChecklist = ref(acceptanceCriteriaEditorState.checklist);
const form = useForm({
acceptance_criteria: props.ticket.acceptance_criteria ?? '',
acceptance_criteria: buildAcceptanceCriteria(
acceptanceCriteriaSummary.value,
acceptanceCriteriaChecklist.value,
),
assignee_user_id: props.ticket.assignee_user_id ?? '',
author_user_id: props.ticket.author_user_id ?? '',
blocked_comment: props.ticket.blocked_comment ?? '',
@@ -130,6 +144,22 @@ const form = useForm({
story_points: props.ticket.story_points,
});
const acceptanceCriteriaPreviewItems = computed(() =>
parseChecklistLines(acceptanceCriteriaChecklist.value),
);
const acceptanceCriteriaError = computed(() => {
return (
form.errors.acceptance_criteria ??
form.errors['acceptance_criteria.summary'] ??
form.errors['acceptance_criteria.items'] ??
Object.entries(form.errors).find(([key]) =>
key.startsWith('acceptance_criteria.items.'),
)?.[1] ??
''
);
});
const isCreateBranchDialogOpen = ref(false);
const isCheckingBranchName = ref(false);
const branchNameValidation = ref<BranchNameValidationModel | null>(null);
@@ -318,6 +348,11 @@ const submit = (): void => {
return;
}
form.acceptance_criteria = buildAcceptanceCriteria(
acceptanceCriteriaSummary.value,
acceptanceCriteriaChecklist.value,
);
form.submit(
ProjectTicketController.update({
project: props.project.id,
@@ -589,22 +624,64 @@ const formatDateTime = (value: string): string => {
/>
</div>
<div class="grid gap-2">
<Label for="acceptance_criteria">
Acceptance criteria
</Label>
<textarea
id="acceptance_criteria"
v-model="form.acceptance_criteria"
rows="5"
:disabled="
!canEditTicket || form.processing
"
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
/>
<InputError
:message="form.errors.acceptance_criteria"
/>
<div class="grid gap-4">
<div class="grid gap-2">
<Label for="acceptance_criteria_summary">
Acceptance criteria summary
</Label>
<Input
id="acceptance_criteria_summary"
v-model="acceptanceCriteriaSummary"
:disabled="
!canEditTicket || form.processing
"
placeholder="What should be true when this ticket is done?"
/>
</div>
<div class="grid gap-2">
<Label for="acceptance_criteria_checklist">
Acceptance criteria checklist
</Label>
<textarea
id="acceptance_criteria_checklist"
v-model="acceptanceCriteriaChecklist"
rows="5"
:disabled="
!canEditTicket || form.processing
"
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
placeholder="[ ] User can sign in&#10; [x] Validation is shown for invalid credentials"
/>
<p class="text-muted-foreground text-xs">
Use <code>[ ]</code> / <code>[x]</code> for checklist items. Indent with two spaces for nested steps.
</p>
<InputError
:message="acceptanceCriteriaError"
/>
</div>
<div
v-if="acceptanceCriteriaPreviewItems.length > 0"
class="border-border rounded-xl border p-4 text-sm"
>
<p class="mb-3 font-medium">
Checklist preview
</p>
<ul class="space-y-2">
<li
v-for="(item, index) in acceptanceCriteriaPreviewItems"
:key="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>
</li>
</ul>
</div>
</div>
<div