mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge branch '2144-Add_Search_Results_Page' of https://github.com/Human-Connection/Human-Connection into 2144-Add_Search_Results_Page
This commit is contained in:
Moriz Wahl
commit
40c35599f6
@ -2,10 +2,10 @@
|
||||
<div class="search-results">
|
||||
<tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
|
||||
<section
|
||||
:class="['results', activeTab === 'User' && '--user', !activeResources.length && '--empty']"
|
||||
:class="['results', activeTab === 'User' && '--user', !activeResourceCount > 0 && '--empty']"
|
||||
>
|
||||
<hc-empty
|
||||
v-if="!activeResources.length"
|
||||
v-if="!activeResourceCount"
|
||||
icon="tasks"
|
||||
:message="$t('search.no-results', { search })"
|
||||
/>
|
||||
@ -15,6 +15,7 @@
|
||||
<post-teaser :post="resource" />
|
||||
</masonry-grid-item>
|
||||
</masonry-grid>
|
||||
{{postPage}}
|
||||
<pagination-buttons
|
||||
:hasNext="hasMorePosts"
|
||||
:hasPrevious="hasPreviousPosts"
|
||||
@ -35,12 +36,25 @@
|
||||
@next="nextUsers"
|
||||
/>
|
||||
</ul>
|
||||
<ul v-else-if="activeTab === 'Hashtag'" class="hashtag-list">
|
||||
<li v-for="resource in activeResources" :key="resource.key" class="item">
|
||||
<base-card :wideContent="true">
|
||||
<hc-hashtag :id="resource.id" />
|
||||
</base-card>
|
||||
</li>
|
||||
<pagination-buttons
|
||||
:hasNext="hasMoreHashtags"
|
||||
:hasPrevious="hasPreviousHashtags"
|
||||
@back="previousHashtags"
|
||||
@next="nextHashtags"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchPosts, searchUsers } from '~/graphql/Search.js'
|
||||
import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js'
|
||||
import HcEmpty from '~/components/Empty/Empty'
|
||||
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
|
||||
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
|
||||
@ -48,6 +62,7 @@ import PostTeaser from '~/components/PostTeaser/PostTeaser'
|
||||
import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
|
||||
import UserTeaser from '~/components/UserTeaser/UserTeaser'
|
||||
import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
|
||||
import HcHashtag from '~/components/Hashtag/Hashtag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -58,6 +73,8 @@ export default {
|
||||
PostTeaser,
|
||||
PaginationButtons,
|
||||
UserTeaser,
|
||||
searchHashtags,
|
||||
HcHashtag,
|
||||
},
|
||||
props: {
|
||||
search: {
|
||||
@ -69,33 +86,56 @@ export default {
|
||||
return {
|
||||
posts: [],
|
||||
users: [],
|
||||
hashtags: [],
|
||||
postCount: 0,
|
||||
postPage: 0,
|
||||
userCount: 0,
|
||||
userPage: 0,
|
||||
hashtagCount: 0,
|
||||
hashtagPage: 0,
|
||||
activeTab: null,
|
||||
pageSize,
|
||||
firstPosts: pageSize,
|
||||
firstUsers: pageSize,
|
||||
firstHashtags: pageSize,
|
||||
postsOffset: 0,
|
||||
usersOffset: 0,
|
||||
hashtagsOffset: 0,
|
||||
hasMorePosts: false,
|
||||
hasMoreUsers: false,
|
||||
hasMoreHashtags: false,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeResources() {
|
||||
if (this.activeTab === 'Post') return this.posts
|
||||
else if (this.activeTab === 'User') return this.users
|
||||
else if (this.activeTab === 'Hashtag') return this.hashtags
|
||||
else return []
|
||||
},
|
||||
activeResourceCount() {
|
||||
if (this.activeTab === 'Post') return this.postCount
|
||||
else if (this.activeTab === 'User') return this.userCount
|
||||
else if (this.activeTab === 'Hashtag') return this.hashtagCount
|
||||
else return []
|
||||
},
|
||||
tabOptions() {
|
||||
return [
|
||||
{
|
||||
type: 'Post',
|
||||
title: `${this.posts.length} ${this.$t('search.heading.Post')}`,
|
||||
disabled: !this.posts.length,
|
||||
title: `${this.postCount} ${this.$t('search.heading.Post')}`,
|
||||
disabled: this.postCount == 0,
|
||||
},
|
||||
{
|
||||
type: 'User',
|
||||
title: `${this.users.length} ${this.$t('search.heading.User')}`,
|
||||
disabled: !this.users.length,
|
||||
title: `${this.userCount} ${this.$t('search.heading.User')}`,
|
||||
disabled: this.userCount == 0,
|
||||
},
|
||||
{
|
||||
type: 'Hashtag',
|
||||
title: `${this.hashtagCount} ${this.$t('search.heading.Tag')}`,
|
||||
disabled: this.hashtagCount == 0,
|
||||
},
|
||||
]
|
||||
},
|
||||
@ -105,22 +145,37 @@ export default {
|
||||
hasPreviousUsers() {
|
||||
return this.usersOffset > 0
|
||||
},
|
||||
hasPreviousHashtags() {
|
||||
return this.hashtagsOffset > 0
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.activeTab = tab
|
||||
},
|
||||
previousPosts() {
|
||||
this.postsOffset = Math.max(this.postsOffset - this.pageSize, 0)
|
||||
this.postsOffset = this.postPage * this.pageSize
|
||||
this.postPage--
|
||||
},
|
||||
nextPosts() {
|
||||
this.postsOffset += this.pageSize
|
||||
this.postPage++
|
||||
},
|
||||
previousUsers() {
|
||||
this.usersOffset = Math.max(this.usersOffset - this.pageSize, 0)
|
||||
this.userPage--
|
||||
},
|
||||
nextUsers() {
|
||||
this.usersOffset += this.pageSize
|
||||
this.userPage++
|
||||
},
|
||||
previousHashtags() {
|
||||
this.usersOffset = Math.max(this.usersOffset - this.pageSize, 0)
|
||||
this.hashtagPage--
|
||||
},
|
||||
nextHashtags() {
|
||||
this.usersOffset += this.pageSize
|
||||
this.hashtagPage++
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
@ -140,9 +195,10 @@ export default {
|
||||
return !this.search
|
||||
},
|
||||
update({ searchPosts }) {
|
||||
this.posts = searchPosts
|
||||
this.hasMorePosts = this.posts.length >= this.pageSize
|
||||
if (searchPosts.length) this.activeTab = 'Post'
|
||||
this.posts = searchPosts.posts
|
||||
this.postCount = searchPosts.postCount
|
||||
this.hasMorePosts = this.postCount >= (this.pageSize * this.postPage)
|
||||
if (searchPosts.posts.length) this.activeTab = 'Post'
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
@ -162,9 +218,33 @@ export default {
|
||||
return !this.search
|
||||
},
|
||||
update({ searchUsers }) {
|
||||
this.users = searchUsers
|
||||
this.users = searchUsers.users
|
||||
this.userCount = searchUsers.userCount
|
||||
this.hasMoreUsers = this.users.length >= this.pageSize
|
||||
if (!searchPosts.length && searchUsers.length) this.activeTab = 'User'
|
||||
if (!searchPosts.posts.length && searchUsers.users.length) this.activeTab = 'User'
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
searchHashtags: {
|
||||
query() {
|
||||
return searchHashtags
|
||||
},
|
||||
variables() {
|
||||
const { firstHashtags, hashtagsOffset, search } = this
|
||||
return {
|
||||
query: search,
|
||||
firstHashtags,
|
||||
hashtagsOffset,
|
||||
}
|
||||
},
|
||||
skip() {
|
||||
return !this.search
|
||||
},
|
||||
update({ searchHashtags }) {
|
||||
this.hashtags = searchHashtags.hashtags
|
||||
this.hashtagCount = searchHashtags.hashtagCount
|
||||
this.hasMoreHashtags = this.hashtags.length >= this.pageSize
|
||||
if (!searchPosts.posts.length && !searchUsers.users.length && searchHashtags.hashtags.length) this.activeTab = 'Hashtag'
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
|
||||
@ -6,13 +6,9 @@ export const searchQuery = gql`
|
||||
${postFragment}
|
||||
${tagsCategoriesAndPinnedFragment}
|
||||
|
||||
query($query: String!, $firstPosts: Int, $firstUsers: Int, $offset: Int) {
|
||||
searchResults(
|
||||
query: $query
|
||||
firstPosts: $firstPosts
|
||||
firstUsers: $firstUsers
|
||||
offset: $offset
|
||||
) {
|
||||
query($query: String!) {
|
||||
searchResults(query: $query, limit: 5)
|
||||
{
|
||||
__typename
|
||||
... on Post {
|
||||
...post
|
||||
@ -40,6 +36,8 @@ export const searchPosts = gql`
|
||||
|
||||
query($query: String!, $firstPosts: Int, $postsOffset: Int) {
|
||||
searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
|
||||
postCount
|
||||
posts {
|
||||
__typename
|
||||
...post
|
||||
...tagsCategoriesAndPinned
|
||||
@ -50,6 +48,7 @@ export const searchPosts = gql`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const searchUsers = gql`
|
||||
@ -57,8 +56,24 @@ export const searchUsers = gql`
|
||||
|
||||
query($query: String!, $firstUsers: Int, $usersOffset: Int) {
|
||||
searchUsers(query: $query, firstUsers: $firstUsers, usersOffset: $usersOffset) {
|
||||
userCount
|
||||
users {
|
||||
__typename
|
||||
...user
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const searchHashtags = gql`
|
||||
|
||||
query($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
|
||||
searchHashtags(query: $query, firstHashtags: $firstHashtags, hashtagsOffset: $hashtagsOffset) {
|
||||
hashtagCount
|
||||
hashtags {
|
||||
__typename
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user