From 850e4ecc15b03a159ff2602ce1321bf47e2593d1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 23 Jan 2021 19:05:26 +0100
Subject: [PATCH] Show list if the search result for a task belongs to a
 different list

---
 src/components/tasks/partials/relatedTasks.vue | 17 ++++++++++++++++-
 src/styles/components/taskRelations.scss       | 10 +++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index f133a5d6..4b91ff57 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -35,7 +35,22 @@
 						:creatable="true"
 						create-placeholder="Add this as new related task"
 						@create="createAndRelateTask"
-					/>
+					>
+						<template v-slot:searchResult="props">
+							<span v-if="typeof props.option !== 'string'" class="search-result">
+								<span
+									class="different-list"
+									v-if="props.option.listId !== listId"
+									v-tooltip="'This task belongs to a different list.'">
+									{{ $store.getters['lists/getListById'](props.option.listId) === null ? '' : $store.getters['lists/getListById'](props.option.listId).title }} >
+								</span>
+								{{ props.option.title }}
+							</span>
+							<span class="search-result" v-else>
+								{{ props.option }}
+							</span>
+						</template>
+					</multiselect>
 				</div>
 				<div class="field has-addons mb-4" key="field-kind">
 					<div class="control is-expanded">
diff --git a/src/styles/components/taskRelations.scss b/src/styles/components/taskRelations.scss
index d45a9e39..4da758ee 100644
--- a/src/styles/components/taskRelations.scss
+++ b/src/styles/components/taskRelations.scss
@@ -9,6 +9,11 @@ $remove-icon-width: 24px;
     }
   }
 
+  .different-list {
+    color: $grey-500;
+    width: auto;
+  }
+
   .related-tasks {
     .title {
       font-size: 1rem;
@@ -20,11 +25,6 @@ $remove-icon-width: 24px;
 
       a:not(.remove) {
         width: calc(100% - #{$remove-icon-width});
-
-        .different-list {
-          color: $grey-500;
-          width: auto;
-        }
       }
 
       .task .tasktext {