From cfea4811589620f027129287e9258e743881a350 Mon Sep 17 00:00:00 2001
From: Pedro Dinis <pdinisricardo@gmail.com>
Date: Mon, 2 Sep 2024 11:03:27 +0100
Subject: [PATCH] Implement matching of annotation id to label name visually in
 search box

---
 .../DocumentAnnotations/AnnotationFilters.vue  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/DocumentAnnotations/AnnotationFilters.vue b/src/components/DocumentAnnotations/AnnotationFilters.vue
index ea09c0d4..c51d87da 100644
--- a/src/components/DocumentAnnotations/AnnotationFilters.vue
+++ b/src/components/DocumentAnnotations/AnnotationFilters.vue
@@ -8,6 +8,9 @@
           icon="search"
           :placeholder="$t('search')"
         >
+          <template #tag="props">
+            <span>{{ labelNameForAnnotationId(props.tag) || props.tag }}</span>
+          </template>
         </b-taginput>
       </b-field>
     </div>
@@ -27,7 +30,7 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 export default {
   name: "AnnotationFilters",
   data() {
@@ -41,6 +44,7 @@ export default {
       "annotationFilters",
       "annotationSearch",
     ]),
+    ...mapGetters("document", ["annotationById", "labelOfAnnotation"]),
   },
 
   watch: {
@@ -56,6 +60,18 @@ export default {
   mounted() {
     this.search = this.annotationSearch;
   },
+  methods: {
+    labelNameForAnnotationId(annotationId) {
+      const annotation = this.annotationById(Number(annotationId));
+      if (annotation) {
+        const label = this.labelOfAnnotation(annotation);
+        if (label) {
+          return label.name;
+        }
+      }
+      return false;
+    },
+  },
 };
 </script>