Merge branch 'issue/#67-no-search-result' into 'develop'

no-search-result

Closes #67

See merge request !56

src/.vuepress/components/SearchPage.vue

 <template>
   <div>
     <SearchInput @search="onSearchInput" />
+
     <p
       v-if="total > 0"
       class="text-overline mb-0"
-    >{{total}} Results</p>
+      >
+      {{ total }} {{ total === 1 ? 'Result' : 'Results' }}
+    </p>
 
     <div
       v-if="loading"
@@ -17,14 +20,20 @@
       />
     </div>
 
-    <SearchResultList v-else :items="items" />
+    <SearchResultList
+      v-else
+
+      :items="items"
+      :message="message"
+      :query="query"
+    />
 
     <div
       class="text-center"
       @click="scrollUp()"
       >
       <v-pagination
-        v-if="items.length > 0"
+        v-if="total > size"
         v-model="page"
         :length="pagesAmount"
         :total-visible="7"
@@ -47,8 +56,9 @@ export default {
     return {
       items: [],
       loading: false,
+      message: '',
       page: 1,
-      query: '',
+      query: null,
       size: 20,
       total: 0,
     }
@@ -63,22 +73,26 @@ export default {
       immediate: true,
     },
     page: function() {
-      const from = this.size * (this.page - 1);
-      this.search(this.query, from, this.size);
       this.loading = true;
+
+      const from = this.size * (this.page - 1);
+      this.search(this.query.trim(), from, this.size);
     }
   },
   computed: {
+    invalid() {
+      return this.query.match(/^\s*$/);
+    },
     pagesAmount() {
       return this.total > 0 ? Math.ceil(this.total / this.size) : 1;
-    }
+    },
   },
   methods: {
     onSearchInput(query) {
       this.query = query;
       this.page = 1;
 
-      this.search(this.query, 0, this.size)
+      this.search(this.query.trim(), 0, this.size)
     },
     async search(value, from, size) {
       try {
@@ -94,9 +108,13 @@ export default {
           this.total = searchResponse.hits?.total?.value || 0;
           this.items = items.map(x => ({ ...x, searchTerm: value }));
         }
+
+        if (!this.invalid) this.message = `No search results found for <code>${this.query}</code>.`;
       } catch(error) {
           this.items = [];
           this.total = 0;
+
+          this.message = 'Please enter a valid search term.';
       } finally {
         this.loading = false;
       }

src/.vuepress/components/SearchResultEmpty.vue

@@ -2,18 +2,23 @@
   <div>
     <v-alert
       border="left"
-      colored-border
       color="red accent-4"
+      colored-border
       elevation="2"
-    >
-      <!--
-        TODO: provide translation
-        TODO: insert the string the user searched for in the message
-      -->
-      No search results found.
+      >
+      <!-- TODO: provide translation -->
+      <span v-html="message"></span>
     </v-alert>
   </div>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+      default: () => '',
+    },
+  },
+};
+</script>

src/.vuepress/components/SearchResultList.vue

 <template>
   <div class="result-container">
     <v-list
-      two-line
-      subheader
       v-if="items.length > 0"
-    >
+      subheader
+      two-line
+      >
       <v-list-item v-for="item in items" :key="item.item" class="pl-0">
         <v-list-item-content>
-          <a :href="getItemUrl(item)" target="_blank">
-            <v-list-item-title>{{item.label}}</v-list-item-title>
+          <a :href="getItemUrl(item)">
+            <v-list-item-title>{{ item.label }}</v-list-item-title>
+
             <v-list-item-subtitle class="d-flex">
               <span v-for="(matchItem, i) in item.matches" :key="i" class="d-flex">
-                <span>"{{matchItem.match}}"</span>
-                <span>&nbsp;({{matchItem.occurrencesOnPage}})</span>
+                <span>"{{ matchItem.match }}"</span>
+                <span>&nbsp;({{ matchItem.occurrencesOnPage }})</span>
                 <span v-if="i < item.matches.length - 1">, </span>
               </span>
-              <span class="ml-1">in Sheet {{item.n}}</span>
+
+              <span class="ml-1">in Sheet {{ item.n }}</span>
             </v-list-item-subtitle>
-            <v-list-item-subtitle>{{getLanguage(item.lang)}}</v-list-item-subtitle>
+
+            <v-list-item-subtitle>{{ getLanguage(item.lang) }}</v-list-item-subtitle>
           </a>
         </v-list-item-content>
       </v-list-item>
     </v-list>
-    <SearchResultEmpty v-else />
+
+    <SearchResultEmpty :message="message" :query="query" v-else-if="query !== null" />
   </div>
 </template>
 
@@ -33,8 +37,8 @@ export default {
       languagesMap: {
         ara: 'Arabic',
         syc: 'Syriac',
-      }
-    }
+      },
+    };
   },
   computed: {
     viewerBaseUrl() {
@@ -44,7 +48,15 @@ export default {
   props: {
     items: {
       type: Array,
-      default: []
+      default: () => [],
+    },
+    message: {
+      type: String,
+      default: () => '',
+    },
+    query: {
+      type: String,
+      default: () => null,
     },
   },
   methods: {
@@ -57,7 +69,7 @@ export default {
       if (item.lang === 'ara') {
         language = 'arabic-karshuni';
       } else if (item.lang === 'syc') {
-        language = 'syriac'
+        language = 'syriac';
       }
       return `${this.viewerBaseUrl}/${language}/#/?itemurl=${item.item}&source=external&searchTerm=${item.searchTerm}&redirectUrl=${window.location.href.replace(/\?(.*)/g,'')}`;
     },
@@ -65,9 +77,9 @@ export default {
   watch: {
     page: function() {
       this.$emit('page-change', this.page);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>