|
|
|
|
@ -6,21 +6,25 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
.layout-search-sd
|
|
|
|
|
.text-header {{ t('search.sortBy') }}
|
|
|
|
|
q-list(dense, padding)
|
|
|
|
|
q-item(clickable, active)
|
|
|
|
|
q-item(
|
|
|
|
|
v-for='item of orderByOptions'
|
|
|
|
|
clickable
|
|
|
|
|
:active='item.value === state.params.orderBy'
|
|
|
|
|
@click='setOrderBy(item.value)'
|
|
|
|
|
)
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
q-icon(name='las la-stream', color='primary')
|
|
|
|
|
q-icon(:name='item.icon', :color='item.value === state.params.orderBy ? `primary` : ``')
|
|
|
|
|
q-item-section
|
|
|
|
|
q-item-label Relevance
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
q-icon(name='mdi-chevron-double-down', size='sm', color='primary')
|
|
|
|
|
q-item(clickable)
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
q-icon(name='las la-heading')
|
|
|
|
|
q-item-section Title
|
|
|
|
|
q-item(clickable)
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
q-icon(name='las la-calendar')
|
|
|
|
|
q-item-section Last Updated
|
|
|
|
|
q-item-label {{ item.label }}
|
|
|
|
|
q-item-section(
|
|
|
|
|
v-if='item.value === state.params.orderBy'
|
|
|
|
|
side
|
|
|
|
|
)
|
|
|
|
|
q-icon(
|
|
|
|
|
:name='state.params.orderByDirection === `desc` ? `mdi-chevron-double-down` : `mdi-chevron-double-up`'
|
|
|
|
|
size='sm'
|
|
|
|
|
color='primary'
|
|
|
|
|
)
|
|
|
|
|
.text-header {{ t('search.filters') }}
|
|
|
|
|
.q-pa-sm
|
|
|
|
|
q-input(
|
|
|
|
|
@ -28,7 +32,7 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
dense
|
|
|
|
|
placeholder='Path starting with...'
|
|
|
|
|
prefix='/'
|
|
|
|
|
v-model='state.filterPath'
|
|
|
|
|
v-model='state.params.filterPath'
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:prepend)
|
|
|
|
|
q-icon(name='las la-caret-square-right', size='xs')
|
|
|
|
|
@ -55,7 +59,7 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
q-icon(name='las la-user-edit', size='xs')
|
|
|
|
|
q-select.q-mt-sm(
|
|
|
|
|
outlined
|
|
|
|
|
v-model='state.filterLocale'
|
|
|
|
|
v-model='state.params.filterLocale'
|
|
|
|
|
emit-value
|
|
|
|
|
map-options
|
|
|
|
|
dense
|
|
|
|
|
@ -63,14 +67,21 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
:options='siteStore.locales.active'
|
|
|
|
|
option-value='code'
|
|
|
|
|
option-label='name'
|
|
|
|
|
options-dense
|
|
|
|
|
multiple
|
|
|
|
|
:display-value='t(`admin.groups.selectedLocales`, { n: state.filterLocale.length > 0 ? state.filterLocale[0].toUpperCase() : state.filterLocale.length }, state.filterLocale.length)'
|
|
|
|
|
:display-value='t(`search.filterLocaleDisplay`, { n: state.params.filterLocale.length > 0 ? state.params.filterLocale[0].toUpperCase() : state.params.filterLocale.length }, state.params.filterLocale.length)'
|
|
|
|
|
)
|
|
|
|
|
template(v-slot:prepend)
|
|
|
|
|
q-icon(name='las la-language', size='xs')
|
|
|
|
|
template(v-slot:option='scope')
|
|
|
|
|
q-item(v-bind='scope.itemProps')
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
q-checkbox(:model-value='scope.selected', @update:model-value='scope.toggleOption(scope.opt)')
|
|
|
|
|
q-item-section
|
|
|
|
|
q-item-label(v-html='scope.opt.name')
|
|
|
|
|
q-select.q-mt-sm(
|
|
|
|
|
outlined
|
|
|
|
|
v-model='state.filterEditor'
|
|
|
|
|
v-model='state.params.filterEditor'
|
|
|
|
|
emit-value
|
|
|
|
|
map-options
|
|
|
|
|
dense
|
|
|
|
|
@ -81,7 +92,7 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
q-icon(name='las la-pen-nib', size='xs')
|
|
|
|
|
q-select.q-mt-sm(
|
|
|
|
|
outlined
|
|
|
|
|
v-model='state.filterPublishState'
|
|
|
|
|
v-model='state.params.filterPublishState'
|
|
|
|
|
emit-value
|
|
|
|
|
map-options
|
|
|
|
|
dense
|
|
|
|
|
@ -95,6 +106,9 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
span {{t('search.results')}}
|
|
|
|
|
q-space
|
|
|
|
|
span.text-caption #[strong {{ state.total }}] results
|
|
|
|
|
.q-pa-lg(v-if='state.results.length < 1')
|
|
|
|
|
span(v-if='siteStore.search && siteStore.searchLastQuery') No results found for #[strong "{{ siteStore.searchLastQuery }}"] with the current filters.
|
|
|
|
|
span(v-else): em Enter a query in the search field above and press Enter.
|
|
|
|
|
q-list(separator)
|
|
|
|
|
q-item(
|
|
|
|
|
v-for='item of state.results'
|
|
|
|
|
@ -105,8 +119,8 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
q-avatar(color='primary' text-color='white' rounded :icon='item.icon')
|
|
|
|
|
q-item-section
|
|
|
|
|
q-item-label {{ item.title }}
|
|
|
|
|
q-item-label(caption) {{ item.description }}
|
|
|
|
|
q-item-label.text-highlight(caption, v-html='item.highlight')
|
|
|
|
|
q-item-label(v-if='item.description', caption) {{ item.description }}
|
|
|
|
|
q-item-label.text-highlight(v-if='item.highlight', caption, v-html='item.highlight')
|
|
|
|
|
q-item-section(side)
|
|
|
|
|
.flex
|
|
|
|
|
q-chip(
|
|
|
|
|
@ -129,10 +143,10 @@ q-layout(view='hHh Lpr lff')
|
|
|
|
|
<script setup>
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
|
import { useMeta, useQuasar } from 'quasar'
|
|
|
|
|
import { computed, onMounted, reactive, watch } from 'vue'
|
|
|
|
|
import { computed, onMounted, onUnmounted, reactive, watch } from 'vue'
|
|
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
|
import gql from 'graphql-tag'
|
|
|
|
|
import { cloneDeep } from 'lodash-es'
|
|
|
|
|
import { cloneDeep, debounce } from 'lodash-es'
|
|
|
|
|
import { DateTime } from 'luxon'
|
|
|
|
|
|
|
|
|
|
import { useFlagsStore } from 'src/stores/flags'
|
|
|
|
|
@ -172,15 +186,27 @@ useMeta({
|
|
|
|
|
|
|
|
|
|
const state = reactive({
|
|
|
|
|
loading: 0,
|
|
|
|
|
filterPath: '',
|
|
|
|
|
filterTags: [],
|
|
|
|
|
filterLocale: ['en'],
|
|
|
|
|
filterEditor: '',
|
|
|
|
|
filterPublishState: '',
|
|
|
|
|
params: {
|
|
|
|
|
filterPath: '',
|
|
|
|
|
filterTags: [],
|
|
|
|
|
filterLocale: [],
|
|
|
|
|
filterEditor: '',
|
|
|
|
|
filterPublishState: '',
|
|
|
|
|
orderBy: 'relevancy',
|
|
|
|
|
orderByDirection: 'desc'
|
|
|
|
|
},
|
|
|
|
|
results: [],
|
|
|
|
|
total: 0
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const orderByOptions = computed(() => {
|
|
|
|
|
return [
|
|
|
|
|
{ label: t('search.sortByRelevance'), value: 'relevancy', icon: 'las la-stream' },
|
|
|
|
|
{ label: t('search.sortByTitle'), value: 'title', icon: 'las la-heading' },
|
|
|
|
|
{ label: t('search.sortByLastUpdated'), value: 'updatedAt', icon: 'las la-calendar' }
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const editors = computed(() => {
|
|
|
|
|
return [
|
|
|
|
|
{ label: 'Any editor', value: '' },
|
|
|
|
|
@ -208,6 +234,8 @@ watch(() => route.query, async (newQueryObj) => {
|
|
|
|
|
}
|
|
|
|
|
}, { immediate: true })
|
|
|
|
|
|
|
|
|
|
watch(() => state.params, debounce(performSearch, 500), { deep: true })
|
|
|
|
|
|
|
|
|
|
// METHODS
|
|
|
|
|
|
|
|
|
|
function pageStyle (offset, height) {
|
|
|
|
|
@ -220,6 +248,15 @@ function humanizeDate (val) {
|
|
|
|
|
return DateTime.fromISO(val).toFormat(userStore.preferredDateFormat)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setOrderBy (val) {
|
|
|
|
|
if (val === state.params.orderBy) {
|
|
|
|
|
state.params.orderByDirection = state.params.orderByDirection === 'desc' ? 'asc' : 'desc'
|
|
|
|
|
} else {
|
|
|
|
|
state.params.orderBy = val
|
|
|
|
|
state.params.orderByDirection = val === 'title' ? 'asc' : 'desc'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function performSearch () {
|
|
|
|
|
siteStore.searchIsLoading = true
|
|
|
|
|
try {
|
|
|
|
|
@ -268,7 +305,13 @@ async function performSearch () {
|
|
|
|
|
`,
|
|
|
|
|
variables: {
|
|
|
|
|
siteId: siteStore.id,
|
|
|
|
|
query: siteStore.search
|
|
|
|
|
query: siteStore.search,
|
|
|
|
|
path: state.params.filterPath,
|
|
|
|
|
locale: state.params.filterLocale,
|
|
|
|
|
editor: state.params.filterEditor,
|
|
|
|
|
publishState: state.params.filterPublishState || null,
|
|
|
|
|
orderBy: state.params.orderBy,
|
|
|
|
|
orderByDirection: state.params.orderByDirection
|
|
|
|
|
},
|
|
|
|
|
fetchPolicy: 'network-only'
|
|
|
|
|
})
|
|
|
|
|
@ -277,6 +320,7 @@ async function performSearch () {
|
|
|
|
|
}
|
|
|
|
|
state.results = cloneDeep(resp.data.searchPages.results)
|
|
|
|
|
state.total = resp.data.searchPages.totalHits
|
|
|
|
|
siteStore.searchLastQuery = siteStore.search
|
|
|
|
|
} catch (err) {
|
|
|
|
|
$q.notify({
|
|
|
|
|
type: 'negative',
|
|
|
|
|
@ -290,13 +334,17 @@ async function performSearch () {
|
|
|
|
|
// MOUNTED
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
if (siteStore.search) {
|
|
|
|
|
// performSearch()
|
|
|
|
|
} else {
|
|
|
|
|
if (!siteStore.search) {
|
|
|
|
|
siteStore.searchIsLoading = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
siteStore.search = ''
|
|
|
|
|
siteStore.searchLastQuery = ''
|
|
|
|
|
siteStore.searchIsLoading = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@ -386,7 +434,6 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
> b {
|
|
|
|
|
background-color: rgba($yellow-7, .5);
|
|
|
|
|
padding: 0 3px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
NGPixel
2 years ago