Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,120 @@
|
||||
<script>
|
||||
import SearchSuggestions from './SearchSuggestions.vue';
|
||||
import PublicSearchInput from './PublicSearchInput.vue';
|
||||
|
||||
import ArticlesAPI from '../api/article';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PublicSearchInput,
|
||||
SearchSuggestions,
|
||||
},
|
||||
emits: ['input', 'blur'],
|
||||
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: {
|
||||
currentPage() {
|
||||
this.clearSearchTerm();
|
||||
},
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
clearTimeout(this.typingTimer);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onUpdateSearchTerm(value) {
|
||||
this.searchTerm = value;
|
||||
if (this.typingTimer) {
|
||||
clearTimeout(this.typingTimer);
|
||||
}
|
||||
|
||||
this.openSearch();
|
||||
this.isLoading = true;
|
||||
this.typingTimer = setTimeout(() => {
|
||||
this.fetchArticlesByQuery();
|
||||
}, 1000);
|
||||
},
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
|
||||
<PublicSearchInput
|
||||
:search-term="searchTerm"
|
||||
:search-placeholder="searchTranslations.searchPlaceholder"
|
||||
@update:search-term="onUpdateSearchTerm"
|
||||
@focus="openSearch"
|
||||
/>
|
||||
<div
|
||||
v-if="shouldShowSearchBox"
|
||||
class="absolute w-full top-14"
|
||||
@mouseover="openSearch"
|
||||
>
|
||||
<SearchSuggestions
|
||||
:items="searchResults"
|
||||
:is-loading="isLoading"
|
||||
:search-term="searchTerm"
|
||||
:empty-placeholder="searchTranslations.emptyPlaceholder"
|
||||
:results-title="searchTranslations.resultsTitle"
|
||||
:loading-placeholder="searchTranslations.loadingPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
searchTerm: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:searchTerm', 'focus', 'blur']);
|
||||
const isFocused = ref(false);
|
||||
|
||||
const onChange = e => {
|
||||
emit('update:searchTerm', e.target.value);
|
||||
};
|
||||
|
||||
const onFocus = e => {
|
||||
isFocused.value = true;
|
||||
emit('focus', e.target.value);
|
||||
};
|
||||
|
||||
const onBlur = e => {
|
||||
isFocused.value = false;
|
||||
emit('blur', e.target.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="w-full flex items-center rounded-lg border-solid border h-12 bg-white dark:bg-slate-900 px-5 py-2 text-slate-600 dark:text-slate-200"
|
||||
:class="{
|
||||
'shadow border-woot-100 dark:border-woot-700': isFocused,
|
||||
'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
|
||||
}"
|
||||
>
|
||||
<FluentIcon icon="search" />
|
||||
<input
|
||||
:value="searchTerm"
|
||||
type="text"
|
||||
class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
|
||||
:placeholder="searchPlaceholder"
|
||||
role="search"
|
||||
@input="onChange"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import { ref, computed, nextTick } from 'vue';
|
||||
import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
emptyPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loadingPlaceholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchTerm: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const selectedIndex = ref(-1);
|
||||
const portalSearchSuggestionsRef = ref(null);
|
||||
const { highlightContent } = useMessageFormatter();
|
||||
const adjustScroll = () => {
|
||||
nextTick(() => {
|
||||
portalSearchSuggestionsRef.value.scrollTop = 102 * selectedIndex.value;
|
||||
});
|
||||
};
|
||||
|
||||
const isSearchItemActive = index => {
|
||||
return index === selectedIndex.value
|
||||
? 'bg-slate-25 dark:bg-slate-800'
|
||||
: 'bg-white dark:bg-slate-900';
|
||||
};
|
||||
|
||||
useKeyboardNavigableList({
|
||||
items: computed(() => props.items),
|
||||
adjustScroll,
|
||||
selectedIndex,
|
||||
});
|
||||
|
||||
return {
|
||||
selectedIndex,
|
||||
portalSearchSuggestionsRef,
|
||||
isSearchItemActive,
|
||||
highlightContent,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showEmptyResults() {
|
||||
return !this.items.length && !this.isLoading;
|
||||
},
|
||||
shouldShowResults() {
|
||||
return this.items.length && !this.isLoading;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
generateArticleUrl(article) {
|
||||
return `/hc/${article.portal.slug}/articles/${article.slug}`;
|
||||
},
|
||||
prepareContent(content) {
|
||||
return this.highlightContent(
|
||||
content,
|
||||
this.searchTerm,
|
||||
'bg-slate-100 dark:bg-slate-700 font-semibold text-slate-600 dark:text-slate-200'
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="portalSearchSuggestionsRef"
|
||||
class="p-5 mt-2 overflow-y-auto text-sm bg-white border border-solid rounded-lg shadow-xl hover:shadow-lg dark:bg-slate-900 max-h-96 scroll-py-2 text-slate-700 dark:text-slate-100 border-slate-50 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="text-sm font-medium text-slate-400 dark:text-slate-700"
|
||||
>
|
||||
{{ loadingPlaceholder }}
|
||||
</div>
|
||||
<ul
|
||||
v-if="shouldShowResults"
|
||||
class="flex flex-col gap-4 text-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
|
||||
role="listbox"
|
||||
>
|
||||
<li
|
||||
v-for="(article, index) in items"
|
||||
:id="article.id"
|
||||
:key="article.id"
|
||||
class="flex items-center p-4 border border-solid rounded-lg cursor-pointer select-none group hover:bg-slate-25 dark:hover:bg-slate-800 border-slate-100 dark:border-slate-800"
|
||||
:class="isSearchItemActive(index)"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
@mouse-enter="onHover(index)"
|
||||
@mouse-leave="onHover(-1)"
|
||||
>
|
||||
<a
|
||||
class="flex flex-col gap-1 overflow-y-hidden"
|
||||
:href="generateArticleUrl(article)"
|
||||
>
|
||||
<span
|
||||
v-dompurify-html="prepareContent(article.title)"
|
||||
class="flex-auto w-full overflow-hidden text-base font-semibold leading-6 truncate text-ellipsis whitespace-nowrap"
|
||||
/>
|
||||
<div
|
||||
v-dompurify-html="prepareContent(article.content)"
|
||||
class="overflow-hidden text-sm line-clamp-2 text-ellipsis whitespace-nowrap text-slate-600 dark:text-slate-300"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-if="showEmptyResults"
|
||||
class="text-sm font-medium text-slate-400 dark:text-slate-700"
|
||||
>
|
||||
{{ emptyPlaceholder }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
rows: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentSlug: window.location?.hash?.substring(1) || '',
|
||||
intersectionObserver: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
h1Count() {
|
||||
return this.rows.filter(el => el.tag === 'h1').length;
|
||||
},
|
||||
h2Count() {
|
||||
return this.rows.filter(el => el.tag === 'h2').length;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initializeIntersectionObserver();
|
||||
window.addEventListener('hashchange', this.onURLHashChange);
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener('hashchange', this.onURLHashChange);
|
||||
if (this.intersectionObserver) {
|
||||
this.intersectionObserver.disconnect();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getClassName(el) {
|
||||
if (el.tag === 'h1') {
|
||||
return '';
|
||||
}
|
||||
if (el.tag === 'h2') {
|
||||
if (this.h1Count > 0) {
|
||||
return 'ltr:ml-2 rtl:mr-2';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
if (el.tag === 'h3') {
|
||||
if (!this.h1Count && !this.h2Count) {
|
||||
return '';
|
||||
}
|
||||
return 'ltr:ml-5 rtl:mr-5';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
initializeIntersectionObserver() {
|
||||
this.intersectionObserver = new IntersectionObserver(
|
||||
entries => {
|
||||
const currentSection = entries.find(entry => entry.isIntersecting);
|
||||
if (currentSection) {
|
||||
this.currentSlug = currentSection.target.id;
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold: 0.25,
|
||||
rootMargin: '0px 0px -20% 0px',
|
||||
}
|
||||
);
|
||||
|
||||
this.rows.forEach(el => {
|
||||
const sectionElement = document.getElementById(el.slug);
|
||||
if (!sectionElement) return;
|
||||
this.intersectionObserver.observe(sectionElement);
|
||||
});
|
||||
},
|
||||
onURLHashChange() {
|
||||
this.currentSlug = window.location?.hash?.substring(1) || '';
|
||||
},
|
||||
isElementActive(el) {
|
||||
return this.currentSlug === el.slug;
|
||||
},
|
||||
elementBorderStyles(el) {
|
||||
if (this.isElementActive(el)) {
|
||||
return 'border-slate-400 dark:border-slate-50 transition-colors duration-200';
|
||||
}
|
||||
return 'border-slate-100 dark:border-slate-800';
|
||||
},
|
||||
elementTextStyles(el) {
|
||||
if (this.isElementActive(el)) {
|
||||
return 'text-slate-900 dark:text-slate-25 transition-colors duration-200';
|
||||
}
|
||||
return 'text-slate-700 dark:text-slate-100';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="hidden lg:block flex-1 py-6 scroll-mt-24 ltr:pl-4 rtl:pr-4 sticky top-24"
|
||||
>
|
||||
<div v-if="rows.length > 0" class="py-2 overflow-auto">
|
||||
<nav class="max-w-2xl">
|
||||
<ol
|
||||
role="list"
|
||||
class="flex flex-col gap-2 text-base ltr:border-l-2 rtl:border-r-2 border-solid border-slate-100 dark:border-slate-800"
|
||||
>
|
||||
<li
|
||||
v-for="element in rows"
|
||||
:key="element.slug"
|
||||
class="leading-6 ltr:border-l-2 rtl:border-r-2 relative ltr:-left-0.5 rtl:-right-0.5 border-solid"
|
||||
:class="elementBorderStyles(element)"
|
||||
>
|
||||
<p class="py-1 px-3" :class="getClassName(element)">
|
||||
<a
|
||||
:href="`#${element.slug}`"
|
||||
data-turbolinks="false"
|
||||
class="font-medium text-sm tracking-[0.28px] cursor-pointer"
|
||||
:class="elementTextStyles(element)"
|
||||
>
|
||||
{{ element.title }}
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user