Merge pull request #1081 from libris/feature/cat-spell-checking

Display spelling suggestions in cataloging client
libris · Aug 2, 2024 · bdb9eea · bdb9eea
2 parents 0d43d02 + 961411c
commit bdb9eea
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/vue-client/src/components/search/search-form.vue b/vue-client/src/components/search/search-form.vue
@@ -31,7 +31,7 @@ export default {
       },
       helpToggled: false,
       vocabUrl: 'https://id.kb.se/vocab/',
-      staticProps: { _limit: 20 },
+      staticProps: { _limit: 20, _spell: true },
       searchPhrase: '',
       searchParams: PropertyMappings,
       activeSearchParam: null,

diff --git a/vue-client/src/components/search/search-result.vue b/vue-client/src/components/search/search-result.vue
@@ -1,17 +1,23 @@
 <script>
-import { translatePhrase } from '@/utils/filters';
+import { asAppPath, translatePhrase } from '@/utils/filters';
 import ResultList from './result-list.vue';
 import ResultControls from './result-controls.vue';
 
 export default {
   name: 'search-result',
   props: {
-    result: null,
+    result: {
+      type: Object,
+      default: null,
+    },
     query: {
       type: String,
       default: '',
     },
-    importData: Array,
+    importData: {
+      type: Array,
+      default: null,
+    },
   },
   data() {
     return {
@@ -21,6 +27,7 @@ export default {
   },
   methods: {
     translatePhrase,
+    asAppPath,
     doSort(newsort) {
       const newQuery = Object.assign({}, this.$route.query, { _sort: newsort, _offset: 0 });
       this.$router.push({ query: newQuery });
@@ -57,7 +64,7 @@ export default {
     },
     isChangeView() {
       return this.$route.params.tool === 'changes';
-    }
+    },
   },
   components: {
     'result-controls': ResultControls,
@@ -85,6 +92,19 @@ export default {
       <span v-if="!status.resultList.error" class="is-status">{{ translatePhrase("Fetching results") }}</span>
       <span v-if="status.resultList.error" class="is-error">{{status.resultList.info}}</span>
     </div>
+    <div
+      class="suggestions"
+      v-if="!status.resultList.loading && !status.resultList.error && result['_spell']"
+    >
+      <p :key="suggestion" v-for="suggestion in result['_spell']">
+        {{translatePhrase('Did you mean')}}
+        <router-link
+          :to="asAppPath(suggestion.view['@id'], this.$route.params.tool === 'changes')"
+        >
+          <span v-html="suggestion.labelHTML" />
+        </router-link>?
+      </p>
+    </div>
     <result-controls
       class="SearchResult-controls"
       v-if="!status.resultList.loading && !status.resultList.error"
@@ -100,7 +120,7 @@ export default {
       :import-data="importData"
       :compact="user.settings.resultListType === 'compact'"
       :isChangeView="isChangeView"
-    />  
+    />
     <result-controls
       class="SearchResult-controls"
       v-if="!status.resultList.loading && !status.resultList.error && hasPagination"
@@ -119,6 +139,10 @@ export default {
     padding: 0 0 2rem 0;
   }
 
+  & .suggestions {
+    margin-top: 1em;
+  }
+
   &-loadingText {
     box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
     padding: 20px 0px;

diff --git a/vue-client/src/resources/json/i18n.json b/vue-client/src/resources/json/i18n.json
@@ -349,6 +349,7 @@
     "Hide instructions": "Dölj instruktioner",
     "Show properties": "Visa egenskaper",
     "Hide properties": "Dölj egenskaper",
+    "Did you mean": "Menade du",
     "Sorting": "Sortering",
     "Relevance": "Relevans",
     "Publication year (descending)": "Utgivningsår (nyast först)",