mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Basic Search Is Working For Users And Posts
The story of SearchInput.vue throws errors because of line 81, dateTime. What must be included to fix this? The search results shown by the frontend are sometimes differnt from the response of the backend. It shows no results found though there are results incoming. Tests are not implemented yet.
This commit is contained in:
Moriz Wahl
parent
fa3d6c6c08
commit
72e4d0abbc
@ -85,7 +85,7 @@ export default shield(
|
||||
'*': deny,
|
||||
findPosts: allow,
|
||||
findUsers: allow,
|
||||
findAnything: allow,
|
||||
findResources: allow,
|
||||
embed: allow,
|
||||
Category: allow,
|
||||
Tag: allow,
|
||||
|
||||
@ -11,7 +11,7 @@ export default {
|
||||
},
|
||||
},
|
||||
Query: {
|
||||
findAnything: async (_parent, args, context, _resolveInfo) => {
|
||||
findResources: async (_parent, args, context, _resolveInfo) => {
|
||||
const query = args.query
|
||||
const filter = {}
|
||||
const limit = args.limit
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
union SearchResult = Post | User
|
||||
|
||||
type Query {
|
||||
findAnything(query: String!, limit: Int = 5): [SearchResult]!
|
||||
findResources(query: String!, limit: Int = 5): [SearchResult]!
|
||||
}
|
||||
|
||||
@ -6,16 +6,14 @@ import helpers from '~/storybook/helpers'
|
||||
helpers.init()
|
||||
|
||||
export const results = [
|
||||
{
|
||||
heading: 'Contributions'
|
||||
},
|
||||
{
|
||||
id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
|
||||
searchType: 'Contributions',
|
||||
__typename: 'Post',
|
||||
slug: 'user-post-by-jenny',
|
||||
label: 'User Post by Jenny',
|
||||
title: 'User Post by Jenny',
|
||||
value: 'User Post by Jenny',
|
||||
shoutedCount: 0,
|
||||
commentCount: 4,
|
||||
createdAt: '2019-11-13T03:03:16.155Z',
|
||||
author: {
|
||||
id: 'u3',
|
||||
@ -25,11 +23,12 @@ export const results = [
|
||||
},
|
||||
{
|
||||
id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
|
||||
searchType: 'Contributions',
|
||||
__typename: 'Post',
|
||||
slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
|
||||
label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
shoutedCount: 0,
|
||||
commentCount: 0,
|
||||
createdAt: '2019-11-13T03:00:45.478Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
@ -39,11 +38,12 @@ export const results = [
|
||||
},
|
||||
{
|
||||
id: 'p7',
|
||||
searchType: 'Contributions',
|
||||
__typename: 'Post',
|
||||
slug: 'this-is-post-7',
|
||||
label: 'This is post #7',
|
||||
title: 'This is post #7',
|
||||
value: 'This is post #7',
|
||||
shoutedCount: 1,
|
||||
commentCount: 1,
|
||||
createdAt: '2019-11-13T03:00:23.098Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
@ -53,11 +53,12 @@ export const results = [
|
||||
},
|
||||
{
|
||||
id: 'p12',
|
||||
searchType: 'Contributions',
|
||||
__typename: 'Post',
|
||||
slug: 'this-is-post-12',
|
||||
label: 'This is post #12',
|
||||
title: 'This is post #12',
|
||||
value: 'This is post #12',
|
||||
shoutedCount: 0,
|
||||
commentCount: 12,
|
||||
createdAt: '2019-11-13T03:00:23.098Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
@ -65,43 +66,36 @@ export const results = [
|
||||
slug: 'louie',
|
||||
},
|
||||
},
|
||||
{
|
||||
heading: 'Users'
|
||||
},
|
||||
{
|
||||
id: 'u1',
|
||||
searchType: 'Users',
|
||||
__typename: 'User',
|
||||
avatar:
|
||||
'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
name: 'Peter Lustig',
|
||||
label: 'Peter Lustig',
|
||||
slug: 'peter-lustig',
|
||||
},
|
||||
{
|
||||
id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
|
||||
searchType: 'Users',
|
||||
__typename: 'User',
|
||||
avatar:
|
||||
'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
name: 'Herbert Schultz',
|
||||
label: 'Herbert Schultz',
|
||||
slug: 'herbert-schultz',
|
||||
},
|
||||
{
|
||||
id: 'u2',
|
||||
searchType: 'Users',
|
||||
__typename: 'User',
|
||||
avatar:
|
||||
'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
name: 'Bob der Baumeister',
|
||||
label: 'Bob der Baumeister',
|
||||
slug: 'bob-der-baumeister',
|
||||
},
|
||||
{
|
||||
id: '7b654f72-f4da-4315-8bed-39de0859754b',
|
||||
searchType: 'Users',
|
||||
__typename: 'User',
|
||||
avatar:
|
||||
'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
name: 'Tonya Mohr',
|
||||
label: 'Tonya Mohr',
|
||||
slug: 'tonya-mohr',
|
||||
},
|
||||
]
|
||||
|
||||
@ -1,309 +1,315 @@
|
||||
<template>
|
||||
<div
|
||||
class="search"
|
||||
aria-label="search"
|
||||
role="search"
|
||||
:class="{
|
||||
'is-active': isActive,
|
||||
'is-open': isOpen,
|
||||
}"
|
||||
>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a v-if="isActive" class="search-clear-btn" @click="clear"> </a>
|
||||
<ds-select
|
||||
:id="id"
|
||||
ref="input"
|
||||
v-model="searchValue"
|
||||
class="input"
|
||||
name="search"
|
||||
type="search"
|
||||
icon="search"
|
||||
label-prop="id"
|
||||
:no-options-available="emptyText"
|
||||
:icon-right="isActive ? 'close' : null"
|
||||
:filter="item => item"
|
||||
:options="results"
|
||||
:auto-reset-search="!searchValue"
|
||||
:placeholder="$t('search.placeholder')"
|
||||
:loading="pending"
|
||||
@keyup.enter.native="onEnter"
|
||||
@focus.capture.native="onFocus"
|
||||
@blur.capture.native="onBlur"
|
||||
@keyup.delete.native="onDelete"
|
||||
@keyup.esc.native="clear"
|
||||
@input.exact="onSelect"
|
||||
@input.native="handleInput"
|
||||
@click.capture.native="isOpen = true"
|
||||
>
|
||||
<template slot="option" slot-scope="{ option }">
|
||||
<ds-flex v-if="option.heading" class="search-option-heading">
|
||||
<ds-flex-item>
|
||||
<ds-heading soft size="h5">{{ option.heading }}</ds-heading>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-flex v-else-if="option.searchType === 'Users'">
|
||||
<ds-flex-item class="search-option">
|
||||
<ds-avatar class="avatar" name="option.name" image="option.avatar" />
|
||||
<div>
|
||||
<ds-text class="userinfo">
|
||||
<b class="username">{{ option.label | truncate(70) }}</b>
|
||||
</ds-text>
|
||||
</div>
|
||||
<ds-text align="left" size="small" color="soft">
|
||||
@{{ option.slug | truncate(70) }}
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-flex v-else>
|
||||
<ds-flex-item class="search-option-label">
|
||||
<ds-text>{{ option.label | truncate(70) }}</ds-text>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="search-option-meta" width="280px">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-text size="small" color="softer" class="search-meta">
|
||||
<span style="text-align: right;">
|
||||
<b>{{ option.commentsCount }}</b>
|
||||
<base-icon name="comments" />
|
||||
</span>
|
||||
<span style="width: 36px; display: inline-block; text-align: right;">
|
||||
<b>{{ option.shoutedCount }}</b>
|
||||
<base-icon name="bullhorn" />
|
||||
</span>
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-text size="small" color="softer" align="right">
|
||||
{{ option.author.name | truncate(32) }} -
|
||||
{{ option.createdAt }}
|
||||
<!-- removed | dateTime('dd.MM.yyyy') -->
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</template>
|
||||
</ds-select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="search"
|
||||
aria-label="search"
|
||||
role="search"
|
||||
:class="{
|
||||
'is-active': isActive,
|
||||
'is-open': isOpen,
|
||||
}"
|
||||
>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a v-if="isActive" class="search-clear-btn" @click="clear"> </a>
|
||||
<ds-select
|
||||
:id="id"
|
||||
ref="input"
|
||||
v-model="searchValue"
|
||||
class="input"
|
||||
name="search"
|
||||
type="search"
|
||||
icon="search"
|
||||
label-prop="id"
|
||||
:no-options-available="emptyText"
|
||||
:icon-right="isActive ? 'close' : null"
|
||||
:filter="item => item"
|
||||
:options="results"
|
||||
:auto-reset-search="!searchValue"
|
||||
:placeholder="$t('search.placeholder')"
|
||||
:loading="pending"
|
||||
@keyup.enter.native="onEnter"
|
||||
@focus.capture.native="onFocus"
|
||||
@blur.capture.native="onBlur"
|
||||
@keyup.delete.native="onDelete"
|
||||
@keyup.esc.native="clear"
|
||||
@input.exact="onSelect"
|
||||
@input.native="handleInput"
|
||||
@click.capture.native="isOpen = true"
|
||||
>
|
||||
<template slot="option" slot-scope="{ option }">
|
||||
<ds-flex v-if="isFirstOfType(option)" class="search-option-heading">
|
||||
<ds-flex-item>
|
||||
<ds-heading soft size="h5">
|
||||
{{ $t(`search.heading.${option.__typename}`) }}
|
||||
</ds-heading>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-flex v-else-if="option.__typename === 'User'">
|
||||
<ds-flex-item class="search-option">
|
||||
<ds-avatar class="avatar" name="option.name" image="option.avatar" />
|
||||
<div>
|
||||
<ds-text class="userinfo">
|
||||
<b class="username">{{ option.name | truncate(70) }}</b>
|
||||
</ds-text>
|
||||
</div>
|
||||
<ds-text align="left" size="small" color="soft">
|
||||
@{{ option.slug | truncate(70) }}
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-flex v-else>
|
||||
<ds-flex-item class="search-option-label">
|
||||
<ds-text>{{ option.title | truncate(70) }}</ds-text>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="search-option-meta" width="280px">
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<ds-text size="small" color="softer" class="search-meta">
|
||||
<span style="text-align: right;">
|
||||
<b>{{ option.commentsCount }}</b>
|
||||
<base-icon name="comments" />
|
||||
</span>
|
||||
<span style="width: 36px; display: inline-block; text-align: right;">
|
||||
<b>{{ option.shoutedCount }}</b>
|
||||
<base-icon name="bullhorn" />
|
||||
</span>
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<ds-text size="small" color="softer" align="right">
|
||||
{{ option.author.name | truncate(32) }} -
|
||||
{{ option.createdAt | dateTime('dd.MM.yyyy') }}
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</template>
|
||||
</ds-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isEmpty } from 'lodash'
|
||||
export default {
|
||||
name: 'SearchInput',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'nav-search',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
results: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
pending: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchProcess: null,
|
||||
isOpen: false,
|
||||
lastSearchTerm: '',
|
||||
unprocessedSearchInput: '',
|
||||
searchValue: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// #: Unused at the moment?
|
||||
isActive() {
|
||||
return !isEmpty(this.lastSearchTerm)
|
||||
},
|
||||
emptyText() {
|
||||
return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async query(value) {
|
||||
if (isEmpty(value) || value.length < 3) {
|
||||
this.clear()
|
||||
return
|
||||
}
|
||||
this.$emit('search', value)
|
||||
},
|
||||
handleInput(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
this.isOpen = true
|
||||
this.unprocessedSearchInput = value
|
||||
this.searchProcess = setTimeout(() => {
|
||||
this.lastSearchTerm = value
|
||||
this.query(value)
|
||||
}, this.delay)
|
||||
},
|
||||
onSelect(item) {
|
||||
this.isOpen = false
|
||||
console.log('onSelect', item)
|
||||
this.$emit('select', item)
|
||||
this.$nextTick(() => {
|
||||
this.searchValue = this.lastSearchTerm
|
||||
})
|
||||
},
|
||||
onFocus(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
this.isOpen = true
|
||||
},
|
||||
onBlur(e) {
|
||||
this.searchValue = this.lastSearchTerm
|
||||
// this.$nextTick(() => {
|
||||
// this.searchValue = this.lastSearchTerm
|
||||
// })
|
||||
this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
},
|
||||
onDelete(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
if (isEmpty(value)) {
|
||||
this.clear()
|
||||
} else {
|
||||
this.handleInput(e)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* TODO: on enter we should go to a dedicated search page!?
|
||||
*/
|
||||
onEnter(e) {
|
||||
// this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
if (!this.pending) {
|
||||
// this.lastSearchTerm = this.unprocessedSearchInput
|
||||
this.query(this.unprocessedSearchInput)
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.$emit('clear')
|
||||
clearTimeout(this.searchProcess)
|
||||
this.isOpen = false
|
||||
this.unprocessedSearchInput = ''
|
||||
this.lastSearchTerm = ''
|
||||
this.searchValue = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
import { isEmpty } from 'lodash'
|
||||
export default {
|
||||
name: 'SearchInput',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'nav-search',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
results: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
pending: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchProcess: null,
|
||||
isOpen: false,
|
||||
lastSearchTerm: '',
|
||||
unprocessedSearchInput: '',
|
||||
searchValue: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// #: Unused at the moment?
|
||||
isActive() {
|
||||
return !isEmpty(this.lastSearchTerm)
|
||||
},
|
||||
emptyText() {
|
||||
return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async query(value) {
|
||||
if (isEmpty(value) || value.length < 3) {
|
||||
this.clear()
|
||||
return
|
||||
}
|
||||
this.$emit('search', value)
|
||||
},
|
||||
handleInput(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
this.isOpen = true
|
||||
this.unprocessedSearchInput = value
|
||||
this.searchProcess = setTimeout(() => {
|
||||
this.lastSearchTerm = value
|
||||
this.query(value)
|
||||
}, this.delay)
|
||||
},
|
||||
onSelect(item) {
|
||||
this.isOpen = false
|
||||
this.$emit('select', item)
|
||||
this.$nextTick(() => {
|
||||
this.searchValue = this.lastSearchTerm
|
||||
})
|
||||
},
|
||||
onFocus(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
this.isOpen = true
|
||||
},
|
||||
onBlur(e) {
|
||||
this.searchValue = this.lastSearchTerm
|
||||
// this.$nextTick(() => {
|
||||
// this.searchValue = this.lastSearchTerm
|
||||
// })
|
||||
this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
},
|
||||
onDelete(e) {
|
||||
clearTimeout(this.searchProcess)
|
||||
const value = e.target ? e.target.value.trim() : ''
|
||||
if (isEmpty(value)) {
|
||||
this.clear()
|
||||
} else {
|
||||
this.handleInput(e)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* TODO: on enter we should go to a dedicated search page!?
|
||||
*/
|
||||
onEnter(e) {
|
||||
// this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
if (!this.pending) {
|
||||
// this.lastSearchTerm = this.unprocessedSearchInput
|
||||
this.query(this.unprocessedSearchInput)
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.$emit('clear')
|
||||
clearTimeout(this.searchProcess)
|
||||
this.isOpen = false
|
||||
this.unprocessedSearchInput = ''
|
||||
this.lastSearchTerm = ''
|
||||
this.searchValue = ''
|
||||
},
|
||||
isFirstOfType(option) {
|
||||
return (
|
||||
this.results.findIndex(o => o === option) ===
|
||||
this.results.findIndex(o => o.__typename === option.__typename)
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
$padding-left: $space-x-small;
|
||||
.search-option-label {
|
||||
align-self: center;
|
||||
padding-left: $padding-left;
|
||||
}
|
||||
.search-option-meta {
|
||||
align-self: center;
|
||||
.ds-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
&,
|
||||
.ds-select-dropdown {
|
||||
transition: box-shadow 100ms;
|
||||
max-height: 70vh;
|
||||
}
|
||||
&.is-open {
|
||||
.ds-select-dropdown {
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
}
|
||||
.ds-select-dropdown-message {
|
||||
opacity: 0.5;
|
||||
padding-left: $padding-left;
|
||||
}
|
||||
.search-clear-btn {
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-meta {
|
||||
float: right;
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
word-wrap: none;
|
||||
.base-icon {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
.ds-select {
|
||||
z-index: $z-index-dropdown + 1;
|
||||
}
|
||||
.ds-select-option-hover {
|
||||
.ds-text-size-small,
|
||||
.ds-text-size-small-x {
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
.search-option-heading {
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
background-color:white;
|
||||
margin: -8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .ds-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: $space-xx-small;
|
||||
}
|
||||
}
|
||||
.user {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover,
|
||||
&.active {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
color: #17b53f;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
$padding-left: $space-x-small;
|
||||
.search-option-label {
|
||||
align-self: center;
|
||||
padding-left: $padding-left;
|
||||
}
|
||||
.search-option-meta {
|
||||
align-self: center;
|
||||
.ds-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
&,
|
||||
.ds-select-dropdown {
|
||||
transition: box-shadow 100ms;
|
||||
max-height: 70vh;
|
||||
}
|
||||
&.is-open {
|
||||
.ds-select-dropdown {
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
}
|
||||
.ds-select-dropdown-message {
|
||||
opacity: 0.5;
|
||||
padding-left: $padding-left;
|
||||
}
|
||||
.search-clear-btn {
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-meta {
|
||||
float: right;
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
word-wrap: none;
|
||||
.base-icon {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
.ds-select {
|
||||
z-index: $z-index-dropdown + 1;
|
||||
}
|
||||
.ds-select-option-hover {
|
||||
.ds-text-size-small,
|
||||
.ds-text-size-small-x {
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
.search-option-heading {
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
background-color: white;
|
||||
margin: -8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .ds-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: $space-xx-small;
|
||||
}
|
||||
}
|
||||
.user {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover,
|
||||
&.active {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
color: #17b53f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
:results="quickSearchResults"
|
||||
@clear="quickSearchClear"
|
||||
@search="value => quickSearch({ value })"
|
||||
@select="goToPost"
|
||||
@select="goToResource"
|
||||
/>
|
||||
</div>
|
||||
</ds-flex-item>
|
||||
@ -140,12 +140,24 @@ export default {
|
||||
quickSearchClear: 'search/quickClear',
|
||||
quickSearch: 'search/quickSearch',
|
||||
}),
|
||||
goToPost(item) {
|
||||
goToResource(item) {
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({
|
||||
name: 'post-id-slug',
|
||||
params: { id: item.id, slug: item.slug },
|
||||
})
|
||||
switch (item.__typename) {
|
||||
case 'Post':
|
||||
this.$router.push({
|
||||
name: 'post-id-slug',
|
||||
params: { id: item.id, slug: item.slug },
|
||||
})
|
||||
break
|
||||
case 'User':
|
||||
this.$router.push({
|
||||
name: 'profile-id-slug',
|
||||
params: { id: item.id, slug: item.slug },
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
},
|
||||
toggleMobileMenuView() {
|
||||
|
||||
@ -513,7 +513,11 @@
|
||||
"search": {
|
||||
"placeholder": "Suchen",
|
||||
"hint": "Wonach suchst Du?",
|
||||
"failed": "Nichts gefunden"
|
||||
"failed": "Nichts gefunden",
|
||||
"heading": {
|
||||
"Post": "Beiträge",
|
||||
"User": "Benutzer"
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"password-reset": {
|
||||
|
||||
@ -197,7 +197,11 @@
|
||||
"search": {
|
||||
"placeholder": "Search",
|
||||
"hint": "What are you searching for?",
|
||||
"failed": "Nothing found"
|
||||
"failed": "Nothing found",
|
||||
"heading": {
|
||||
"Post": "Posts",
|
||||
"User": "Users"
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"name": "Settings",
|
||||
|
||||
@ -46,29 +46,35 @@ export const actions = {
|
||||
await this.app.apolloProvider.defaultClient
|
||||
.query({
|
||||
query: gql`
|
||||
query findPosts($query: String!, $filter: _PostFilter) {
|
||||
findPosts(query: $query, limit: 10, filter: $filter) {
|
||||
id
|
||||
slug
|
||||
label: title
|
||||
value: title
|
||||
shoutedCount
|
||||
createdAt
|
||||
author {
|
||||
query findResources($query: String!) {
|
||||
findResources(query: $query, limit: 5) {
|
||||
__typename
|
||||
... on Post {
|
||||
id
|
||||
title
|
||||
slug
|
||||
commentsCount
|
||||
shoutedCount
|
||||
createdAt
|
||||
author {
|
||||
name
|
||||
}
|
||||
}
|
||||
... on User {
|
||||
id
|
||||
name
|
||||
slug
|
||||
avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
query: value.replace(/\s/g, '~ ') + '~',
|
||||
filter: {},
|
||||
query: value,
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
commit('SET_QUICK_RESULTS', res.data.findPosts || [])
|
||||
commit('SET_QUICK_RESULTS', res.data.findResources || [])
|
||||
})
|
||||
.catch(() => {
|
||||
commit('SET_QUICK_RESULTS', [])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user