From f7b586de2cb91f93dfb9f668019bd6e69169b499 Mon Sep 17 00:00:00 2001
From: pestov <pestov@sub.uni-goettingen.de>
Date: Wed, 25 Aug 2021 14:48:52 +0000
Subject: [PATCH] feat: add landing message to search page
---
src/.vuepress/components/SearchPage.vue | 43 ++++++++++++++-----
src/.vuepress/components/SearchResultList.vue | 15 -------
2 files changed, 33 insertions(+), 25 deletions(-)
diff --git a/src/.vuepress/components/SearchPage.vue b/src/.vuepress/components/SearchPage.vue
index 4c884fc..a073840 100644
--- a/src/.vuepress/components/SearchPage.vue
+++ b/src/.vuepress/components/SearchPage.vue
@@ -12,10 +12,23 @@
<code class="font-weight-black">{{ distinctManuscripts }}</code> {{ 'Manuscript' | numerus(distinctManuscripts) }}.
</p>
+ <v-alert
+ v-if="showPlaceholder"
+ border="left"
+ colored-border
+ color="secondary accent-4"
+ elevation="1"
+ >
+ <!-- TODO: provide translation -->
+ Please use the form above to enter a and search for a term of your choice.
+ </v-alert>
+
+ <SearchResultEmpty v-if="showNoResult" :message="message" />
+
<div
v-if="loading"
class="loading-wrapper py-10"
- >
+ >
<v-progress-circular
color="primary"
indeterminate
@@ -67,6 +80,8 @@ export default {
query: null,
size: 20,
total: 0,
+ showPlaceholder: false,
+ showNoResult: false,
};
},
watch:{
@@ -80,6 +95,8 @@ export default {
mounted(){
if(this.$route.query?.searchTerm) {
this.onSearchInput(this.$route.query.searchTerm);
+ } else {
+ this.showPlaceholder = true;
}
},
computed: {
@@ -103,21 +120,21 @@ export default {
onSearchInput(query) {
this.query = query;
this.page = 1;
+ this.resetList();
+
+ this.showPlaceholder = false;
+ this.showNoResult = false;
this.search(this.query.trim(), 0, this.size);
if (this.$route.query.searchTerm !== query) {
this.$router.push({ query: { ...this.$route.query, searchTerm:query } });
- };
+ }
},
async search(value, from, size) {
this.hitCounter = from + 1;
try {
- this.items = [];
- this.total = 0;
- this.distinctSheets = 0;
-
this.loading = true;
const searchResponse = await apiService.search(value, from, size);
@@ -132,13 +149,14 @@ export default {
this.total = searchResponse.hits?.total?.matches || 0;
}
+ // Toggle no result message on top of result list
+ this.showNoResult = this.total === 0;
+
// TODO: make string translable
if (!this.invalid) this.message = `No search results found for <code>${this.query}</code>.`;
} catch(error) {
- this.items = [];
- this.distinctSheets = 0;
- this.total = 0;
-
+ this.resetList();
+ this.showNoResult = true;
this.message = 'Please enter a valid search term.';
} finally {
this.loading = false;
@@ -151,6 +169,11 @@ export default {
behavior: 'smooth',
});
},
+ resetList() {
+ this.items = [];
+ this.distinctSheets = 0;
+ this.total = 0;
+ }
},
};
</script>
diff --git a/src/.vuepress/components/SearchResultList.vue b/src/.vuepress/components/SearchResultList.vue
index 6cb3258..e662293 100644
--- a/src/.vuepress/components/SearchResultList.vue
+++ b/src/.vuepress/components/SearchResultList.vue
@@ -27,8 +27,6 @@
</v-list-item-content>
</v-list-item>
</v-list>
-
- <SearchResultEmpty :message="message" v-else-if="query !== null" />
</div>
</template>
@@ -47,11 +45,6 @@ export default {
mixins: [
pathUrl,
],
- computed: {
- viewerBaseUrl() {
- return process.env.VUE_APP_BASE_URL_VIEWER;
- },
- },
props: {
hitCounter: {
type: Number,
@@ -61,14 +54,6 @@ export default {
type: Array,
default: () => [],
},
- message: {
- type: String,
- default: () => '',
- },
- query: {
- type: String,
- default: () => null,
- },
},
computed: {
viewerBaseUrl() {
--
GitLab