q-layout(view='hHh Lpr lff')
header-nav
q-page-container.layout-search
.layout-search-card
q-btn.layout-search-back(
icon='las la-arrow-circle-left'
color='white'
flat
round
@click='goBack'
)
q-tooltip(anchor='center left', self='center right') {{ t('common.actions.goback') }}
.layout-search-sd
.text-header {{ t('search.sortBy') }}
q-list(dense, padding)
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='item.icon', :color='item.value === state.params.orderBy ? `primary` : ``')
q-item-section
q-item-label {{ item.label }}
q-item-section(
v-if='item.value === state.params.orderBy'
side
)
q-icon(
:name='state.params.orderByDirection === `desc` ? `mdi-transfer-down` : `mdi-transfer-up`'
size='sm'
color='primary'
)
.text-header {{ t('search.filters') }}
.q-pa-sm
q-input(
outlined
dense
:placeholder='t(`search.filterPath`)'
prefix='/'
v-model='state.params.filterPath'
)
template(v-slot:prepend)
q-icon(name='las la-caret-square-right', size='xs')
q-select.q-mt-sm(
outlined
v-model='state.selectedTags'
:options='state.filteredTags'
dense
options-dense
use-input
use-chips
multiple
hide-dropdown-icon
:input-debounce='0'
@update:model-value='v => syncTags(v)'
@filter='filterTags'
:placeholder='state.selectedTags.length < 1 ? t(`search.filterTags`) : ``'
:loading='state.loading > 0'
)
template(v-slot:prepend)
q-icon(name='las la-hashtag', 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)', size='sm')
q-item-section
q-item-label(v-html='scope.opt')
//- q-input.q-mt-sm(
//- outlined
//- dense
//- placeholder='Last updated...'
//- )
//- template(v-slot:prepend)
//- q-icon(name='las la-calendar', size='xs')
//- q-input.q-mt-sm(
//- outlined
//- dense
//- placeholder='Last edited by...'
//- )
//- template(v-slot:prepend)
//- q-icon(name='las la-user-edit', size='xs')
q-select.q-mt-sm(
outlined
v-model='state.params.filterLocale'
emit-value
map-options
dense
:aria-label='t(`search.filterLocale`)'
:options='siteStore.locales.active'
option-value='code'
option-label='name'
options-dense
multiple
: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.params.filterEditor'
emit-value
map-options
dense
:aria-label='t(`search.filterEditor`)'
:options='editors'
)
template(v-slot:prepend)
q-icon(name='las la-pen-nib', size='xs')
q-select.q-mt-sm(
outlined
v-model='state.params.filterPublishState'
emit-value
map-options
dense
:aria-label='t(`search.filterPublishState`)'
:options='publishStates'
)
template(v-slot:prepend)
q-icon(name='las la-traffic-light', size='xs')
q-page(:style-fn='pageStyle')
.text-header.flex
span {{t('search.results')}}
q-space
transition(name='slide-up', mode='out-in')
i18n-t(
v-if='!siteStore.searchIsLoading'
keypath='search.totalResults'
tag='span'
class='text-caption'
:plural='state.total'
)
strong {{ state.total }}
.q-pa-lg(v-if='state.results.length < 1')
i18n-t(keypath='search.noResults', tag='span', v-if='siteStore.search && siteStore.searchLastQuery')
strong {{ siteStore.searchLastQuery }}
span(v-else): em {{ t('search.emptyQuery') }}
q-list(separator)
q-item(
v-for='item of state.results'
clickable
:to='`/` + item.path'
)
q-item-section(avatar)
q-avatar(color='primary' text-color='white' rounded :icon='item.icon')
q-item-section
q-item-label {{ item.title }}
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.layout-search-itemtags
q-chip(
v-for='tag of item.tags'
square
color='secondary'
text-color='white'
icon='las la-hashtag'
size='sm'
) {{ tag }}
.flex
.text-caption.q-mr-sm.text-grey /{{ item.path }}
.text-caption {{ humanizeDate(item.updatedAt) }}
q-inner-loading(:showing='state.loading > 0')
main-overlay-dialog
footer-nav