fix: UI fixes + search crash (#1086)

client/components/admin.vue

@@ -104,7 +104,7 @@
               v-list-item(to='/dev-flags')
                 v-list-item-title {{ $t('admin:dev.flags.title') }}
               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-title {{ $t('admin:dev.graphiql.title') }}
               //- v-list-item(to='/dev-voyager')

client/components/admin/admin-auth.vue

@@ -148,16 +148,6 @@
                   persistent-hint
                   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(
                   :label='$t(`admin:auth.domainsWhitelist`)'
                   v-model='strategy.domainWhitelist'
@@ -191,7 +181,19 @@
                   )
               template(v-if='strategy.useForm')
                 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-model='strategy.recaptcha'
                   :disabled='true'

client/components/admin/admin-dev-flags.vue

@@ -12,7 +12,7 @@
             v-icon(left) mdi-check
             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)
             span Do NOT enable these flags unless you know what you're doing!
             .caption Doing so may result in data loss or broken installation!

client/components/admin/admin-groups-edit-rules.vue

@@ -72,6 +72,7 @@
               chips
               deletable-chips
               small-chips
+              height='48px'
               style='flex: 0 1 440px;'
               :menu-props='{ "maxHeight": 500 }'
               clearable
@@ -99,6 +100,7 @@
               v-model='rule.match'
               placeholder='Match...'
               hide-details
+              height='48px'
               style='flex: 0 1 250px;'
               dense
               )
@@ -118,6 +120,7 @@
               placeholder='Any Locale'
               multiple
               hide-details
+              height='48px'
               dense
               :menu-props='{ "minWidth": 250 }'
               style='flex: 0 1 150px;'
@@ -161,7 +164,7 @@
               :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-divider.mt-3
@@ -277,6 +280,7 @@ export default {
   background-color: mc('blue-grey', '100');
   border-radius: 4px;
   padding: .5rem;
+  align-items: center;
 
   &-enter-active, &-leave-active {
     transition: all .5s ease;

client/components/admin/admin-groups-edit-users.vue

@@ -39,7 +39,7 @@
                 v-list-item-content
                   v-list-item-title Unassign
       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')
       v-pagination(v-model='pagination', :length='pageCount')
 

client/components/admin/admin-pages-edit.vue

@@ -58,17 +58,17 @@
             v-list-item
               v-list-item-content
                 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-list-item
               v-list-item-content
                 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-list-item
               v-list-item-content
                 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-btn(icon, x-small)
                   v-icon(color='grey') mdi-pencil
@@ -76,7 +76,7 @@
             v-list-item
               v-list-item-content
                 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-btn(icon, x-small)
                   v-icon(color='grey') mdi-pencil
@@ -84,14 +84,14 @@
             v-list-item
               v-list-item-content
                 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-list-item
               v-list-item-content
                 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-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path')
             v-icon(left) mdi-text-subject
@@ -124,7 +124,7 @@
                   v-icon(color='grey') mdi-account
               v-list-item-content
                 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-text {{ page.createdAt | moment('calendar') }}
             v-divider
@@ -134,7 +134,7 @@
                   v-icon(color='grey') mdi-account
               v-list-item-content
                 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-text {{ page.updatedAt | moment('calendar') }}
         v-card.mt-3.animated.fadeInUp.wait-p4s

client/components/common/search-results.vue

@@ -1,20 +1,20 @@
 <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-help(v-if='search.length < 2')
+      .search-results-help(v-if='search && search.length < 2')
         img(src='/svg/icon-search-alt.svg')
         .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(
           :animation-duration='1000'
           :size='100'
           color='#FFF'
         )
         .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')
         .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-list.search-results-items.radius-7.py-0(two-line)
           template(v-for='(item, idx) of results')
@@ -34,7 +34,7 @@
           v-model='pagination'
           :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-list.search-results-suggestions.radius-7(dense, dark)
           template(v-for='(term, idx) of suggestions')
@@ -44,7 +44,7 @@
               v-list-item-content
                 v-list-item-title(v-html='term')
             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-icon(left) mdi-content-save
         //-   span {{$t('common:header.searchCopyLink')}}
@@ -97,7 +97,7 @@ export default {
   watch: {
     search(newValue, oldValue) {
       this.cursor = 0
-      if (newValue.length < 2) {
+      if (newValue && newValue.length < 2) {
         this.response.results = []
         this.response.suggestions = []
       } else {
@@ -107,6 +107,7 @@ export default {
   },
   mounted() {
     this.$root.$on('searchMove', (dir) => {
+      console.info()
       this.cursor += ((dir === 'up') ? -1 : 1)
       if (this.cursor < -1) {
         this.cursor = -1
@@ -115,6 +116,10 @@ export default {
       }
     })
     this.$root.$on('searchEnter', () => {
+      if (!this.results) {
+        return
+      }
+
       if (this.cursor >= 0 && this.cursor < this.results.length) {
         this.goToPage(_.nth(this.results, this.cursor))
       } else if (this.cursor >= 0) {

client/themes/default/components/page.vue

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

server/modules/search/db/engine.js

@@ -32,22 +32,12 @@ module.exports = {
         }
         // TODO: Add user permissions filtering
         builder.andWhere(builderSub => {
-          switch (WIKI.config.db.type) {
-            case 'postgres':
-              builderSub.where('title', 'ILIKE', `%${q}%`)
-              builderSub.orWhere('description', 'ILIKE', `%${q}%`)
-              break
-            case 'mysql':
-            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
+          if (WIKI.config.db.type === 'postgres') {
+            builderSub.where('title', 'ILIKE', `%${q}%`)
+            builderSub.orWhere('description', 'ILIKE', `%${q}%`)
+          } else {
+            builderSub.where('title', 'LIKE', `%${q}%`)
+            builderSub.orWhere('description', 'LIKE', `%${q}%`)
           }
         })
       })