feat: Add search functionality for public portal (#5683)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas
committed by
GitHub
GitHub
parent
bce0bb8acb
commit
1fb1be3ddc
129
app/javascript/portal/components/PublicArticleSearch.vue
Normal file
129
app/javascript/portal/components/PublicArticleSearch.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div
|
||||
v-on-clickaway="closeSearch"
|
||||
class="mx-auto max-w-md w-full relative my-4"
|
||||
>
|
||||
<public-search-input
|
||||
v-model="searchTerm"
|
||||
:search-placeholder="searchTranslations.searchPlaceholder"
|
||||
@focus="openSearch"
|
||||
/>
|
||||
<div
|
||||
v-if="shouldShowSearchBox"
|
||||
class="absolute show-search-box w-full"
|
||||
@mouseover="openSearch"
|
||||
>
|
||||
<search-suggestions
|
||||
:items="searchResults"
|
||||
:is-loading="isLoading"
|
||||
:empty-placeholder="searchTranslations.emptyPlaceholder"
|
||||
:results-title="searchTranslations.resultsTitle"
|
||||
:loading-placeholder="searchTranslations.loadingPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
|
||||
import SearchSuggestions from './SearchSuggestions';
|
||||
import PublicSearchInput from './PublicSearchInput';
|
||||
|
||||
import ArticlesAPI from '../api/article';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PublicSearchInput,
|
||||
SearchSuggestions,
|
||||
},
|
||||
mixins: [clickaway],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
isLoading: false,
|
||||
showSearchBox: false,
|
||||
searchResults: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
portalSlug() {
|
||||
return window.portalConfig.portalSlug;
|
||||
},
|
||||
localeCode() {
|
||||
return window.portalConfig.localeCode;
|
||||
},
|
||||
shouldShowSearchBox() {
|
||||
return this.searchTerm !== '' && this.showSearchBox;
|
||||
},
|
||||
searchTranslations() {
|
||||
const { searchTranslations = {} } = window.portalConfig;
|
||||
return searchTranslations;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
searchTerm() {
|
||||
if (this.typingTimer) {
|
||||
clearTimeout(this.typingTimer);
|
||||
}
|
||||
|
||||
this.openSearch();
|
||||
this.isLoading = true;
|
||||
this.typingTimer = setTimeout(() => {
|
||||
this.fetchArticlesByQuery();
|
||||
}, 1000);
|
||||
},
|
||||
currentPage() {
|
||||
this.clearSearchTerm();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.$emit('input', e.target.value);
|
||||
},
|
||||
onBlur(e) {
|
||||
this.$emit('blur', e.target.value);
|
||||
},
|
||||
openSearch() {
|
||||
this.showSearchBox = true;
|
||||
},
|
||||
closeSearch() {
|
||||
this.showSearchBox = false;
|
||||
},
|
||||
clearSearchTerm() {
|
||||
this.searchTerm = '';
|
||||
},
|
||||
async fetchArticlesByQuery() {
|
||||
try {
|
||||
this.isLoading = true;
|
||||
this.searchResults = [];
|
||||
const { data } = await ArticlesAPI.searchArticles(
|
||||
this.portalSlug,
|
||||
this.localeCode,
|
||||
this.searchTerm
|
||||
);
|
||||
this.searchResults = data.payload;
|
||||
this.isLoading = true;
|
||||
} catch (error) {
|
||||
// Show something wrong message
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.show-search-box {
|
||||
top: 4rem;
|
||||
}
|
||||
</style>
|
||||
60
app/javascript/portal/components/PublicSearchInput.vue
Normal file
60
app/javascript/portal/components/PublicSearchInput.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div
|
||||
class="w-full flex items-center rounded-md border-solid h-16 bg-white px-4 py-2 text-slate-600"
|
||||
:class="{
|
||||
'shadow border-2 border-woot-100': isFocused,
|
||||
'border border-slate-50 shadow-sm': !isFocused,
|
||||
}"
|
||||
>
|
||||
<fluent-icon icon="search" />
|
||||
<input
|
||||
:value="value"
|
||||
type="text"
|
||||
class="w-full search-input focus:outline-none text-base h-full bg-white px-2 py-2
|
||||
text-slate-700 placeholder-slate-500 sm:text-sm"
|
||||
:placeholder="searchPlaceholder"
|
||||
role="search"
|
||||
@input="onChange"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FluentIcon,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFocused: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.$emit('input', e.target.value);
|
||||
},
|
||||
onFocus(e) {
|
||||
this.isFocused = true;
|
||||
this.$emit('focus', e.target.value);
|
||||
},
|
||||
onBlur(e) {
|
||||
this.isFocused = false;
|
||||
this.$emit('blur', e.target.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
103
app/javascript/portal/components/SearchSuggestions.vue
Normal file
103
app/javascript/portal/components/SearchSuggestions.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div
|
||||
class="shadow-md bg-white mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700"
|
||||
>
|
||||
<div v-if="isLoading" class="font-medium text-sm text-slate-400">
|
||||
{{ loadingPlaceholder }}
|
||||
</div>
|
||||
<h3 v-if="shouldShowResults" class="font-medium text-sm text-slate-400">
|
||||
{{ resultsTitle }}
|
||||
</h3>
|
||||
<ul
|
||||
v-if="shouldShowResults"
|
||||
class="bg-white mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700"
|
||||
role="listbox"
|
||||
>
|
||||
<li
|
||||
v-for="(article, index) in items"
|
||||
:id="article.id"
|
||||
:key="article.id"
|
||||
class="group flex cursor-default select-none items-center rounded-md p-2 mb-1"
|
||||
:class="{ 'bg-slate-25': index === selectedIndex }"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
@mouseover="onHover(index)"
|
||||
>
|
||||
<a
|
||||
:href="generateArticleUrl(article)"
|
||||
class="flex-auto truncate text-base font-medium leading-6 w-full hover:underline"
|
||||
>
|
||||
{{ article.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="showEmptyResults" class="font-medium text-sm text-slate-400">
|
||||
{{ emptyPlaceholder }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
|
||||
|
||||
export default {
|
||||
mixins: [mentionSelectionKeyboardMixin],
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
emptyPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loadingPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
resultsTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedIndex: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showEmptyResults() {
|
||||
return !this.items.length && !this.isLoading;
|
||||
},
|
||||
shouldShowResults() {
|
||||
return this.items.length && !this.isLoading;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
generateArticleUrl(article) {
|
||||
return `/hc/${article.portal.slug}/${article.category.locale}/${article.category.slug}/${article.id}`;
|
||||
},
|
||||
handleKeyboardEvent(e) {
|
||||
this.processKeyDownEvent(e);
|
||||
this.$el.scrollTop = 40 * this.selectedIndex;
|
||||
},
|
||||
onHover(index) {
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
onSelect() {
|
||||
window.location = this.generateArticleUrl(this.items[this.selectedIndex]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user