feat(task): improve relation task search results

Author: kergma-lw

frontend/src/components/tasks/partials/RelatedTasks.vue

@@ -68,6 +68,7 @@
 										{{ task.differentProject }} >
 									</span>
 								</span>
+								<span class="task-identifier">{{ getTaskIdentifier(task) }}</span>
 								{{ task.title }}
 							</span>
 							<span
@@ -145,6 +146,7 @@
 									{{ task.differentProject }} >
 								</span>
 							</span>
+							<span class="task-identifier">{{ getTaskIdentifier(task) }}</span>
 							{{ task.title }}
 						</RouterLink>
 					</div>
@@ -194,7 +196,7 @@ import {useI18n} from 'vue-i18n'
 import {useRoute} from 'vue-router'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import TaskModel, {getTaskIdentifier} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
 import type {ITaskRelation} from '@/modelTypes/ITaskRelation'
 import {RELATION_KINDS, type IRelationKind} from '@/types/IRelationKind'
@@ -281,6 +283,23 @@ function mapRelatedTasks(tasks: ITask[]) {
 	})
 }
 
+function sortTasksForRelationSearch(tasks: ITask[]) {
+	return [...tasks].sort((a, b) => {
+		if (a.done !== b.done) {
+			return a.done ? 1 : -1
+		}
+
+		const aIsCurrentProject = a.projectId === props.projectId
+		const bIsCurrentProject = b.projectId === props.projectId
+
+		if (aIsCurrentProject === bIsCurrentProject) {
+			return 0
+		}
+
+		return aIsCurrentProject ? -1 : 1
+	})
+}
+
 const mapRelationKindsTitleGetter = computed(() => ({
 	'subtask': (count: number) => t('task.relation.kinds.subtask', count),
 	'parenttask': (count: number) => t('task.relation.kinds.parenttask', count),
@@ -302,7 +321,7 @@ const mappedRelatedTasks = computed(() => Object.entries(relatedTasks.value).map
 		kind: kind as IRelationKind,
 	}),
 ))
-const mappedFoundTasks = computed(() => mapRelatedTasks(foundTasks.value.filter(t => t.id !== props.taskId)))
+const mappedFoundTasks = computed(() => mapRelatedTasks(sortTasksForRelationSearch(foundTasks.value.filter(t => t.id !== props.taskId))))
 
 const taskRelationService = shallowReactive(new TaskRelationService())
 const saved = ref(false)
@@ -414,6 +433,11 @@ async function toggleTaskDone(task: ITask) {
 	inline-size: auto;
 }
 
+.task-identifier {
+	color: var(--grey-500);
+	margin-inline-end: .35rem;
+}
+
 .title {
 	font-size: 1rem;
 	margin: 0;

frontend/tests/e2e/task/related-tasks-quick-add-magic.spec.ts

@@ -12,6 +12,14 @@ async function openRelatedTasksForm(page) {
 	return input
 }
 
+function relationSearchResults(page) {
+	return page.locator('.task-relations .multiselect .search-results .search-result-button')
+}
+
+function relationTaskSearchResults(page) {
+	return page.locator('.task-relations .multiselect .search-results .search-result-button:not(.is-create-option)')
+}
+
 test.describe('Related tasks quick add magic', () => {
 	test('Applies a label parsed via *prefix to the new related task', async ({authenticatedPage: page}) => {
 		const project = (await ProjectFactory.create(1, {id: 1, title: 'Project A'}))[0]
@@ -72,6 +80,60 @@ test.describe('Related tasks quick add magic', () => {
 		await expect(relatedTaskRow.locator('.different-project')).toContainText('TargetProject')
 	})
 
+	test('Shows task identifiers in relation search results', async ({authenticatedPage: page}) => {
+		const project = (await ProjectFactory.create(1, {id: 1, title: 'Project A', identifier: 'PA'}))[0]
+		await createDefaultViews(project.id)
+		const parent = (await TaskFactory.create(1, {id: 10, title: 'Parent task', project_id: project.id}, false))[0]
+		await TaskFactory.create(1, {
+			id: 11,
+			title: 'Identifier search candidate',
+			project_id: project.id,
+			index: 42,
+		}, false)
+
+		await page.goto(`/tasks/${parent.id}`)
+		const input = await openRelatedTasksForm(page)
+		await input.pressSequentially('Identifier search candidate')
+
+		const firstResult = relationTaskSearchResults(page).filter({hasText: 'Identifier search candidate'}).first()
+		await expect(firstResult).toBeVisible({timeout: 10000})
+		await expect(firstResult).toContainText('PA-42')
+	})
+
+	test('Prioritizes tasks from the current project in relation search results', async ({authenticatedPage: page}) => {
+		const currentProject = (await ProjectFactory.create(1, {id: 1, title: 'Current Project'}))[0]
+		await createDefaultViews(currentProject.id)
+		const otherProject = (await ProjectFactory.create(1, {id: 2, title: 'Other Project'}, false))[0]
+		await createDefaultViews(otherProject.id, 5)
+
+		const currentProjectParent = (await TaskFactory.create(1, {
+			id: 30,
+			title: 'Parent task',
+			project_id: currentProject.id,
+		}, false))[0]
+		await TaskFactory.create(1, {
+			id: 5,
+			title: 'Queue candidate other',
+			project_id: otherProject.id,
+		}, false)
+		await TaskFactory.create(1, {
+			id: 80,
+			title: 'Queue candidate current',
+			project_id: currentProject.id,
+		}, false)
+
+		await page.goto(`/tasks/${currentProjectParent.id}`)
+		const input = await openRelatedTasksForm(page)
+		await input.pressSequentially('Queue candidate')
+
+		const results = relationTaskSearchResults(page)
+		await expect(results).toHaveCount(2, {timeout: 10000})
+		await expect(results.first()).toContainText('Queue candidate current')
+		await expect(results.first().locator('.different-project')).toHaveCount(0)
+		await expect(results.nth(1)).toContainText('Other Project')
+		await expect(results.nth(1)).toContainText('Queue candidate other')
+	})
+
 	test('Keeps the title literal when quick add magic is disabled', async ({page, apiContext}) => {
 		const user = (await UserFactory.create(1, {
 			frontend_settings: JSON.stringify({