ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: pagenation

Browse Source
This commit is contained in:
ogerly 2020-05-07 16:24:51 +02:00
parent 446fd18e3b
commit 2ffdbe80f8
2 changed files with 138 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -18,82 +18,54 @@
icon="tasks" icon="tasks"
:message="$t('search.no-results', { search })" :message="$t('search.no-results', { search })"
/> />
<template v-else-if="activeTab === 'Post'"> <template >
<pagination-buttons <pagination-buttons
v-show="postCount > pageSize" v-show="resultsCount > pageSize"
:hasNext="hasMorePosts" :hasMoreResults="hasMoreResults"
:hasPrevious="hasPreviousPosts" :hasPreviousResult="hasPreviousResult"
:activePage="postPage" :activePage="resultsPage"
:totalResultCount="postCount" :totalResultCount="resultsCount"
@back="previousPosts" :resultPages="resultPages"
@next="nextPosts" @back="previousResults"
@next="nextResults"
/> />
<masonry-grid> <masonry-grid v-show="activeTab === 'Post'">
<masonry-grid-item v-for="resource in activeResources" :key="resource.key"> <masonry-grid-item v-for="resource in activeResources" :key="resource.key">
<post-teaser :post="resource" /> <post-teaser :post="resource" />
</masonry-grid-item> </masonry-grid-item>
</masonry-grid> </masonry-grid>
<pagination-buttons
v-show="postCount > pageSize" <ul v-show="activeTab === 'User'" class="user-list">
:hasNext="hasMorePosts"
:hasPrevious="hasPreviousPosts"
:activePage="postPage"
:totalResultCount="postCount"
@back="previousPosts"
@next="nextPosts"
/>
</template>
<ul v-else-if="activeTab === 'User'" class="user-list">
<pagination-buttons
v-show="userCount > pageSize"
:hasNext="hasMoreUsers"
:hasPrevious="hasPreviousUsers"
:activePage="userPage"
:totalResultCount="userCount"
@back="previousUsers"
@next="nextUsers"
/>
<li v-for="resource in activeResources" :key="resource.key" class="item"> <li v-for="resource in activeResources" :key="resource.key" class="item">
<base-card :wideContent="true"> <base-card :wideContent="true">
<user-teaser :user="resource" /> <user-teaser :user="resource" />
</base-card> </base-card>
</li> </li>
<pagination-buttons
v-show="userCount > pageSize"
:hasNext="hasMoreUsers"
:hasPrevious="hasPreviousUsers"
:activePage="userPage"
:totalResultCount="userCount"
@back="previousUsers"
@next="nextUsers"
/>
</ul> </ul>
<ul v-else-if="activeTab === 'Hashtag'" class="hashtag-list"> <ul v-show="activeTab === 'Hashtag'" class="hashtag-list">
<pagination-buttons
v-show="hashtagCount > pageSize"
:hasNext="hasMoreHashtags"
:hasPrevious="hasPreviousHashtags"
:activePage="hashtagPage"
:totalResultCount="hashtagCount"
@back="previousHashtags"
@next="nextHashtags"
/>
<li v-for="resource in activeResources" :key="resource.key" class="item"> <li v-for="resource in activeResources" :key="resource.key" class="item">
<base-card :wideContent="true"> <base-card :wideContent="true">
<hc-hashtag :id="resource.id" /> <hc-hashtag :id="resource.id" />
</base-card> </base-card>
</li> </li>
<pagination-buttons
v-show="hashtagCount > pageSize"
:hasNext="hasMoreHashtags"
:hasPrevious="hasPreviousHashtags"
:activePage="hashtagPage"
:totalResultCount="hashtagCount"
@back="previousHashtags"
@next="nextHashtags"
/>
</ul> </ul>
<pagination-buttons
v-show="resultsCount > pageSize"
:hasMoreResults="hasMoreResults"
:hasPreviousResult="hasPreviousResult"
:activePage="resultsPage"
:totalResultCount="resultsCount"
@back="previousResults"
@next="nextResults"
/>
</template>
</section> </section>
</div> </div>
</template> </template>
@ -134,29 +106,43 @@ export default {
posts: [], posts: [],
users: [], users: [],
hashtags: [], hashtags: [],
resultsPage: 0,
resultsCount: 0,
postCount: 0, postCount: 0,
postPage: 0,
userCount: 0, userCount: 0,
userPage: 0, userPage: 0,
hashtagCount: 0, hashtagCount: 0,
hashtagPage: 0, hashtagPage: 0,
activeTab: null, activeTab: null,
resultPages: 1,
activeResultPage: 1,
firstPosts: this.pageSize, firstPosts: this.pageSize,
firstUsers: this.pageSize, firstUsers: this.pageSize,
firstHashtags: this.pageSize, firstHashtags: this.pageSize,
postsOffset: 0, postsOffset: 0,
usersOffset: 0, usersOffset: 0,
hashtagsOffset: 0, hashtagsOffset: 0,
hasPagination: false,
} }
}, },
computed: { computed: {
activeResources() { activeResources() {
console.log("activeResources()")
if (this.activeTab === 'Post') return this.posts if (this.activeTab === 'Post') return this.posts
else if (this.activeTab === 'User') return this.users else if (this.activeTab === 'User') return this.users
else if (this.activeTab === 'Hashtag') return this.hashtags else if (this.activeTab === 'Hashtag') return this.hashtags
else return [] else return []
}, },
activeResourceCount() { activeResourceCount() {
console.log("activeResourceCount()")
if (this.activeTab === 'Post') return this.postCount if (this.activeTab === 'Post') return this.postCount
else if (this.activeTab === 'User') return this.userCount else if (this.activeTab === 'User') return this.userCount
else if (this.activeTab === 'Hashtag') return this.hashtagCount else if (this.activeTab === 'Hashtag') return this.hashtagCount
@ -181,87 +167,94 @@ export default {
}, },
] ]
}, },
hasPreviousPosts() { hasPreviousResult(){
return this.postsOffset > 0 console.log("hasPreviousResult()")
if (this.activeTab === 'Post') return this.postsOffset > 0
else if (this.activeTab === 'User') return this.usersOffset > 0
else if (this.activeTab === 'Hashtag') return this.hashtagsOffset > 0
else return []
}, },
hasPreviousUsers() { hasMoreResults() {
return this.usersOffset > 0 console.log("hasMoreResults()")
if (this.activeTab === 'Post') return this.postsOffset < this.resultsCount
else if (this.activeTab === 'User') return this.usersOffset < this.resultsCount
else if (this.activeTab === 'Hashtag') return this.hashtagsOffset < this.resultsCount
else return []
}, },
hasPreviousHashtags() {
return this.hashtagsOffset > 0
},
hasMorePosts() {
console.log("this.postPage",this.postPage)
console.log("this.pageSize",this.pageSize)
console.log("this.postCount",this.postCount)
return (this.postPage + 1) * this.pageSize < this.postCount
},
hasMoreUsers() {
return (this.userPage + 1) * this.pageSize < this.userCount
},
hasMoreHashtags() {
return (this.hashtagPage + 1) * this.pageSize < this.hashtagCount
},
searchCount() { searchCount() {
return this.postCount + this.userCount + this.hashtagCount return this.postCount + this.userCount + this.hashtagCount
}, },
}, },
methods: { methods: {
clearPage() { clearPage() {
this.postPage = 0 this.resultsPage = 0
this.userPage = 0
this.hashtagPage = 0
}, },
switchTab(tab) { switchTab(tab) {
this.activeTab = tab this.activeTab = tab
}, },
previousPosts() { previousResults() {
this.postPage-- console.log("previousResults()")
this.postsOffset = this.postPage * this.pageSize if (this.activeTab === 'Post') {
this.resultsPage = this.postPage - 1
this.postsOffset - this.pageSize
}
else if (this.activeTab === 'User') {
this.resultsPage = this.userPage - 1
this.usersOffset - this.pageSize
}
else if (this.activeTab === 'Hashtag') {
this.resultsPage = this.hashtagPage - 1
this.hashtagsOffset - this.pageSize
}
else return []
}, },
nextPosts() { nextResults() {
this.postsOffset += this.pageSize console.log("nextResults()")
this.postPage++ if (this.activeTab === 'Post') {
}, this.resultsPage = parseInt(this.postPage) + 1
previousUsers() { this.postsOffset + this.pageSize
this.userPage-- }
this.usersOffset = this.userPage * this.pageSize else if (this.activeTab === 'User') {
}, this.resultsPage = this.userPage + 1
nextUsers() { this.usersOffset + this.pageSize
this.usersOffset += this.pageSize }
this.userPage++ else if (this.activeTab === 'Hashtag') {
}, this.resultsPage = this.hashtagPage + 1
previousHashtags() { this.hashtagsOffset + this.pageSize
this.hashtagPage-- }
this.hashtagsOffset = this.hashtagPage * this.pageSize else return []
},
nextHashtags() {
this.hashtagsOffset += this.pageSize
this.hashtagPage++
}, },
}, },
apollo: { apollo: {
searchPosts: { searchHashtags: {
query() { query() {
return searchPosts return searchHashtags
}, },
variables() { variables() {
const { firstPosts, postsOffset, search } = this const { firstHashtags, hashtagsOffset, search } = this
return { return {
query: search, query: search,
firstPosts, firstHashtags,
postsOffset, hashtagsOffset,
} }
}, },
skip() { skip() {
return !this.search return !this.search
}, },
update({ searchPosts }) { update({ searchHashtags }) {
this.posts = searchPosts.posts console.log(" update({ searchHashtags }")
this.postCount = searchPosts.postCount this.hashtags = searchHashtags.hashtags
this.clearPage() this.resultsCount = searchHashtags.hashtagCount
if (this.postCount > 0) this.activeTab = 'Post' this.hashtagCount = searchHashtags.hashtagCount
if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0)
this.activeTab = 'Hashtag'
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',
}, },
@ -281,34 +274,41 @@ export default {
return !this.search return !this.search
}, },
update({ searchUsers }) { update({ searchUsers }) {
console.log(" update({ searchUsers }")
this.users = searchUsers.users this.users = searchUsers.users
this.resultsCount = searchUsers.userCount
this.userCount = searchUsers.userCount this.userCount = searchUsers.userCount
this.clearPage() if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.postCount === 0 && this.userCount > 0) this.activeTab = 'User' if (this.resultsCount === 0 && this.userCount > 0) this.activeTab = 'User'
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',
}, },
searchHashtags: { searchPosts: {
query() { query() {
return searchHashtags return searchPosts
}, },
variables() { variables() {
const { firstHashtags, hashtagsOffset, search } = this
const { firstPosts, postsOffset, search } = this
console.log("firstPosts",firstPosts)
console.log("postsOffset",postsOffset)
return { return {
query: search, query: search,
firstHashtags, firstPosts,
hashtagsOffset, postsOffset,
} }
}, },
skip() { skip() {
return !this.search return !this.search
}, },
update({ searchHashtags }) { update({ searchPosts }) {
this.hashtags = searchHashtags.hashtags console.log(" update({ searchPosts }")
this.hashtagCount = searchHashtags.hashtagCount this.posts = searchPosts.posts
this.clearPage() this.postCount = searchPosts.postCount
if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0) this.resultsCount = this.postCount
this.activeTab = 'Hashtag' if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.postCount > 0) this.activeTab = 'Post'
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',
}, },

17
webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
View File

@ -2,19 +2,20 @@
<div class="pagination-buttons"> <div class="pagination-buttons">
<base-button <base-button
@click="$emit('back')" @click="$emit('back')"
:disabled="!hasPrevious" :disabled="!hasPreviousResult"
icon="arrow-left" icon="arrow-left"
circle circle
data-test="previous-button" data-test="previous-button"
/> />
<span class="pagination-pageCount"> <span class="pagination-pageCount">
{{ totalResultCount }} - {{ pageSize }} - {{activePage}} - {{ Math.round(totalResultCount ) }}
Seite {{ activePage + 1 }} / {{ Math.round(totalResultCount / pageSize) + 1 }} Seite {{ activePage + 1 }} / {{ Math.round(totalResultCount / pageSize) + 1 }}
</span> </span>
<base-button <base-button
@click="$emit('next')" @click="$emit('next')"
:disabled="!hasNext" :disabled="!hasMoreResults"
icon="arrow-right" icon="arrow-right"
circle circle
data-test="next-button" data-test="next-button"
@ -30,24 +31,26 @@ export default {
type: Number, type: Number,
default: 24 default: 24
}, },
hasNext: { hasMoreResults: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
hasPrevious: { hasPreviousResult: {
type: Boolean, type: Boolean,
default: false,
}, },
activePage: { activePage: {
type: Number, type: Number,
default: 0, default: 0,
}, },
resultPages: {
type: Number,
default: 0,
},
totalResultCount: { totalResultCount: {
type: Number, type: Number,
default: 0, default: 0,
}, },
}, },
} }
</script> </script>