CU-862k62rxx: small improvements to picker for search edge cases

CogStack · Jul 24, 2023 · 2a1104e · 2a1104e
1 parent f1ab0ff
commit 2a1104e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/webapp/frontend/package-lock.json b/webapp/frontend/package-lock.json
diff --git a/webapp/frontend/package.json b/webapp/frontend/package.json
@@ -27,7 +27,7 @@
     "vue-cookie": "^1.1.4",
     "vue-multipane": "^0.9.5",
     "vue-router": "^3.5.3",
-    "vue-select": "^3.16.0",
+    "vue-select": "^3.20.0",
     "vue-sidebar-menu": "^4.8.1",
     "vue-simple-context-menu": "^3.4.2",
     "vue-splitpane": "^1.0.6"

diff --git a/webapp/frontend/src/components/common/ConceptPicker.vue b/webapp/frontend/src/components/common/ConceptPicker.vue
@@ -9,6 +9,11 @@
             label="cui"
             @open="$emit('picker:opened')"
             @close="$emit('picker:closed')">
+    <template v-slot:no-options="{ search, searching }">
+      <template v-if="searching">No results found for <em>{{ search }}</em>.
+      </template>
+      <em v-else style="opacity: 0.5">Start typing to search for a concept.</em>
+    </template>
     <template v-slot:option="option">
       <span class="select-option">{{option.name}}</span>
       <span class="select-option-cui"> - {{option.cui}}</span>