fix: UI fixes + search crash (#1086)

pull/1176/head
NGPixel 5 years ago
parent 57f79c19b2
commit d69dde1df5

@ -104,7 +104,7 @@
v-list-item(to='/dev-flags') v-list-item(to='/dev-flags')
v-list-item-title {{ $t('admin:dev.flags.title') }} v-list-item-title {{ $t('admin:dev.flags.title') }}
v-list-item(href='/graphql') v-list-item(href='/graphql')
v-list-item-title {{ $t('admin:dev.graphiql.title') }} v-list-item-title GraphQL
//- v-list-item(to='/dev-graphiql') //- v-list-item(to='/dev-graphiql')
//- v-list-item-title {{ $t('admin:dev.graphiql.title') }} //- v-list-item-title {{ $t('admin:dev.graphiql.title') }}
//- v-list-item(to='/dev-voyager') //- v-list-item(to='/dev-voyager')

@ -148,16 +148,6 @@
persistent-hint persistent-hint
inset inset
) )
v-switch.ml-3(
v-if='strategy.key === `local`'
:disabled='!strategy.selfRegistration || true'
v-model='strategy.recaptcha'
label='Use reCAPTCHA by Google'
color='primary'
hint='Protects against spam robots and malicious registrations.'
persistent-hint
inset
)
v-combobox.ml-3.mt-3( v-combobox.ml-3.mt-3(
:label='$t(`admin:auth.domainsWhitelist`)' :label='$t(`admin:auth.domainsWhitelist`)'
v-model='strategy.domainWhitelist' v-model='strategy.domainWhitelist'
@ -191,7 +181,19 @@
) )
template(v-if='strategy.useForm') template(v-if='strategy.useForm')
v-divider.mt-3 v-divider.mt-3
.overline.my-5 {{$t('admin:auth.security')}} .d-flex.my-5.align-center
.overline {{$t('admin:auth.security')}}
v-chip.ml-3.grey--text(outlined, small, label) Coming soon
v-switch.ml-3(
v-if='strategy.key === `local`'
:disabled='!strategy.selfRegistration || true'
v-model='strategy.recaptcha'
label='Use reCAPTCHA by Google'
color='primary'
hint='Protects against spam robots and malicious registrations.'
persistent-hint
inset
)
v-switch.ml-3( v-switch.ml-3(
v-model='strategy.recaptcha' v-model='strategy.recaptcha'
:disabled='true' :disabled='true'

@ -12,7 +12,7 @@
v-icon(left) mdi-check v-icon(left) mdi-check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-card.mt-3.white.grey--text.text--darken-3 v-card.mt-3(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `white grey--text text--darken-3`')
v-alert(color='red', :value='true', icon='mdi-alert', dark, prominent) v-alert(color='red', :value='true', icon='mdi-alert', dark, prominent)
span Do NOT enable these flags unless you know what you're doing! span Do NOT enable these flags unless you know what you're doing!
.caption Doing so may result in data loss or broken installation! .caption Doing so may result in data loss or broken installation!

@ -72,6 +72,7 @@
chips chips
deletable-chips deletable-chips
small-chips small-chips
height='48px'
style='flex: 0 1 440px;' style='flex: 0 1 440px;'
:menu-props='{ "maxHeight": 500 }' :menu-props='{ "maxHeight": 500 }'
clearable clearable
@ -99,6 +100,7 @@
v-model='rule.match' v-model='rule.match'
placeholder='Match...' placeholder='Match...'
hide-details hide-details
height='48px'
style='flex: 0 1 250px;' style='flex: 0 1 250px;'
dense dense
) )
@ -118,6 +120,7 @@
placeholder='Any Locale' placeholder='Any Locale'
multiple multiple
hide-details hide-details
height='48px'
dense dense
:menu-props='{ "minWidth": 250 }' :menu-props='{ "minWidth": 250 }'
style='flex: 0 1 150px;' style='flex: 0 1 150px;'
@ -161,7 +164,7 @@
:color='$vuetify.theme.dark ? `grey` : `blue-grey`' :color='$vuetify.theme.dark ? `grey` : `blue-grey`'
) )
v-btn.ml-2.mt-1(icon, @click='removeRule(rule.id)', small) v-btn.ml-2(icon, @click='removeRule(rule.id)', small)
v-icon(:color='$vuetify.theme.dark ? `grey` : `blue-grey`') mdi-close v-icon(:color='$vuetify.theme.dark ? `grey` : `blue-grey`') mdi-close
v-divider.mt-3 v-divider.mt-3
@ -277,6 +280,7 @@ export default {
background-color: mc('blue-grey', '100'); background-color: mc('blue-grey', '100');
border-radius: 4px; border-radius: 4px;
padding: .5rem; padding: .5rem;
align-items: center;
&-enter-active, &-leave-active { &-enter-active, &-leave-active {
transition: all .5s ease; transition: all .5s ease;

@ -39,7 +39,7 @@
v-list-item-content v-list-item-content
v-list-item-title Unassign v-list-item-title Unassign
template(slot='no-data') template(slot='no-data')
v-alert.ma-3(icon='warning', outlined) No users to display. v-alert.ma-3(icon='mdi-alert', outlined) No users to display.
.text-center.py-2(v-if='group.users.length > 15') .text-center.py-2(v-if='group.users.length > 15')
v-pagination(v-model='pagination', :length='pageCount') v-pagination(v-model='pagination', :length='pageCount')

@ -58,17 +58,17 @@
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Title v-list-item-title: .overline.grey--text Title
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.title }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.title }}
v-divider v-divider
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Description v-list-item-title: .overline.grey--text Description
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.description || '-' }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.description || '-' }}
v-divider v-divider
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Locale v-list-item-title: .overline.grey--text Locale
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.locale }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.locale }}
v-list-item-action v-list-item-action
v-btn(icon, x-small) v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil v-icon(color='grey') mdi-pencil
@ -76,7 +76,7 @@
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Path v-list-item-title: .overline.grey--text Path
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.path }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.path }}
v-list-item-action v-list-item-action
v-btn(icon, x-small) v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil v-icon(color='grey') mdi-pencil
@ -84,14 +84,14 @@
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Editor v-list-item-title: .overline.grey--text Editor
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.editor || '?' }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.editor || '?' }}
v-divider v-divider
v-list-item v-list-item
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Content Type v-list-item-title: .overline.grey--text Content Type
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }} v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.contentType || '?' }}
v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(color='white', dense) v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(:color='$vuetify.theme.dark ? `grey darken-3-d5` : `white`', dense)
v-spacer v-spacer
v-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path') v-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path')
v-icon(left) mdi-text-subject v-icon(left) mdi-text-subject
@ -124,7 +124,7 @@
v-icon(color='grey') mdi-account v-icon(color='grey') mdi-account
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Creator v-list-item-title: .overline.grey--text Creator
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})] v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
v-list-item-action v-list-item-action
v-list-item-action-text {{ page.createdAt | moment('calendar') }} v-list-item-action-text {{ page.createdAt | moment('calendar') }}
v-divider v-divider
@ -134,7 +134,7 @@
v-icon(color='grey') mdi-account v-icon(color='grey') mdi-account
v-list-item-content v-list-item-content
v-list-item-title: .overline.grey--text Last Editor v-list-item-title: .overline.grey--text Last Editor
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})] v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
v-list-item-action v-list-item-action
v-list-item-action-text {{ page.updatedAt | moment('calendar') }} v-list-item-action-text {{ page.updatedAt | moment('calendar') }}
v-card.mt-3.animated.fadeInUp.wait-p4s v-card.mt-3.animated.fadeInUp.wait-p4s

@ -1,20 +1,20 @@
<template lang="pug"> <template lang="pug">
.search-results(v-if='searchIsFocused || search.length > 1') .search-results(v-if='searchIsFocused || (search && search.length > 1)')
.search-results-container .search-results-container
.search-results-help(v-if='search.length < 2') .search-results-help(v-if='search && search.length < 2')
img(src='/svg/icon-search-alt.svg') img(src='/svg/icon-search-alt.svg')
.mt-4 {{$t('common:header.searchHint')}} .mt-4 {{$t('common:header.searchHint')}}
.search-results-loader(v-else-if='searchIsLoading && results.length < 1') .search-results-loader(v-else-if='searchIsLoading && (!results || results.length < 1)')
orbit-spinner( orbit-spinner(
:animation-duration='1000' :animation-duration='1000'
:size='100' :size='100'
color='#FFF' color='#FFF'
) )
.headline.mt-5 {{$t('common:header.searchLoading')}} .headline.mt-5 {{$t('common:header.searchLoading')}}
.search-results-none(v-else-if='!searchIsLoading && results.length < 1') .search-results-none(v-else-if='!searchIsLoading && (!results || results.length < 1)')
img(src='/svg/icon-no-results.svg', alt='No Results') img(src='/svg/icon-no-results.svg', alt='No Results')
.subheading {{$t('common:header.searchNoResult')}} .subheading {{$t('common:header.searchNoResult')}}
template(v-if='results.length > 0') template(v-if='results && results.length > 0')
v-subheader.white--text {{$t('common:header.searchResultsCount', { total: response.totalHits })}} v-subheader.white--text {{$t('common:header.searchResultsCount', { total: response.totalHits })}}
v-list.search-results-items.radius-7.py-0(two-line) v-list.search-results-items.radius-7.py-0(two-line)
template(v-for='(item, idx) of results') template(v-for='(item, idx) of results')
@ -34,7 +34,7 @@
v-model='pagination' v-model='pagination'
:length='paginationLength' :length='paginationLength'
) )
template(v-if='suggestions.length > 0') template(v-if='suggestions && suggestions.length > 0')
v-subheader.white--text.mt-3 {{$t('common:header.searchDidYouMean')}} v-subheader.white--text.mt-3 {{$t('common:header.searchDidYouMean')}}
v-list.search-results-suggestions.radius-7(dense, dark) v-list.search-results-suggestions.radius-7(dense, dark)
template(v-for='(term, idx) of suggestions') template(v-for='(term, idx) of suggestions')
@ -44,7 +44,7 @@
v-list-item-content v-list-item-content
v-list-item-title(v-html='term') v-list-item-title(v-html='term')
v-divider(v-if='idx < suggestions.length - 1') v-divider(v-if='idx < suggestions.length - 1')
.text-xs-center.pt-5(v-if='search.length > 1') .text-xs-center.pt-5(v-if='search && search.length > 1')
//- v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0') //- v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
//- v-icon(left) mdi-content-save //- v-icon(left) mdi-content-save
//- span {{$t('common:header.searchCopyLink')}} //- span {{$t('common:header.searchCopyLink')}}
@ -97,7 +97,7 @@ export default {
watch: { watch: {
search(newValue, oldValue) { search(newValue, oldValue) {
this.cursor = 0 this.cursor = 0
if (newValue.length < 2) { if (newValue && newValue.length < 2) {
this.response.results = [] this.response.results = []
this.response.suggestions = [] this.response.suggestions = []
} else { } else {
@ -107,6 +107,7 @@ export default {
}, },
mounted() { mounted() {
this.$root.$on('searchMove', (dir) => { this.$root.$on('searchMove', (dir) => {
console.info()
this.cursor += ((dir === 'up') ? -1 : 1) this.cursor += ((dir === 'up') ? -1 : 1)
if (this.cursor < -1) { if (this.cursor < -1) {
this.cursor = -1 this.cursor = -1
@ -115,6 +116,10 @@ export default {
} }
}) })
this.$root.$on('searchEnter', () => { this.$root.$on('searchEnter', () => {
if (!this.results) {
return
}
if (this.cursor >= 0 && this.cursor < this.results.length) { if (this.cursor >= 0 && this.cursor < this.results.length) {
this.goToPage(_.nth(this.results, this.cursor)) this.goToPage(_.nth(this.results, this.cursor))
} else if (this.cursor >= 0) { } else if (this.cursor >= 0) {

@ -73,21 +73,21 @@
v-card.mb-5(v-if='tags.length > 0') v-card.mb-5(v-if='tags.length > 0')
.pa-5 .pa-5
.overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags .overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags
v-chip.mr-1( v-chip.mr-1.mb-1(
label label
color='teal lighten-5' :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
v-for='(tag, idx) in tags' v-for='(tag, idx) in tags'
:href='`/t/` + tag.tag' :href='`/t/` + tag.tag'
:key='`tag-` + tag.tag' :key='`tag-` + tag.tag'
) )
v-icon(color='teal', left, small) mdi-tag v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', left, small) mdi-tag
span.teal--text.text--darken-2 {{tag.title}} span(:class='$vuetify.theme.dark ? `teal--text text--lighten-5` : `teal--text text--darken-2`') {{tag.title}}
v-chip.mr-1( v-chip.mr-1(
label label
color='teal lighten-5' :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
:href='`/t/` + tags.map(t => t.tag).join(`/`)' :href='`/t/` + tags.map(t => t.tag).join(`/`)'
) )
v-icon(color='teal', size='20') mdi-tag-multiple v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
v-card.mb-5 v-card.mb-5
.pa-5 .pa-5

@ -32,22 +32,12 @@ module.exports = {
} }
// TODO: Add user permissions filtering // TODO: Add user permissions filtering
builder.andWhere(builderSub => { builder.andWhere(builderSub => {
switch (WIKI.config.db.type) { if (WIKI.config.db.type === 'postgres') {
case 'postgres': builderSub.where('title', 'ILIKE', `%${q}%`)
builderSub.where('title', 'ILIKE', `%${q}%`) builderSub.orWhere('description', 'ILIKE', `%${q}%`)
builderSub.orWhere('description', 'ILIKE', `%${q}%`) } else {
break builderSub.where('title', 'LIKE', `%${q}%`)
case 'mysql': builderSub.orWhere('description', 'LIKE', `%${q}%`)
case 'mariadb':
builderSub.whereRaw(`title LIKE '%?%' COLLATE utf8_general_ci`, [q])
builderSub.orWhereRaw(`description LIKE '%?%' COLLATE utf8_general_ci`, [q])
break
// TODO: MSSQL handling
default:
builderSub.where('title', 'LIKE', `%${q}%`)
builderSub.orWhere('description', 'LIKE', `%${q}%`)
break
} }
}) })
}) })

Loading…
Cancel
Save