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

Pagination is working, pageSize set to 12

Browse Source
This commit is contained in:
Moriz Wahl 2020-05-11 17:53:48 +02:00
parent 2ffdbe80f8
commit 0892d6aaa3
4 changed files with 106 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,16 +18,17 @@
icon="tasks" icon="tasks"
:message="$t('search.no-results', { search })" :message="$t('search.no-results', { search })"
/> />
<template > <template>
<pagination-buttons <pagination-buttons
v-show="resultsCount > pageSize" v-show="activeResourceCount > pageSize"
:hasMoreResults="hasMoreResults" :hasMoreResults="hasMoreResults"
:hasPreviousResult="hasPreviousResult" :hasPreviousResult="hasPreviousResult"
:activePage="resultsPage" :activePage="activePage"
:totalResultCount="resultsCount" :activeResourceCount="activeResourceCount"
:resultPages="resultPages"
@back="previousResults" @back="previousResults"
@next="nextResults" @next="nextResults"
:key="'Top'"
:pageSize="pageSize"
/> />
<masonry-grid v-show="activeTab === 'Post'"> <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">
@ -35,37 +36,33 @@
</masonry-grid-item> </masonry-grid-item>
</masonry-grid> </masonry-grid>
<ul v-show="activeTab === 'User'" class="user-list"> <ul v-show="activeTab === 'User'" class="user-list">
<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> </ul>
<ul v-show="activeTab === 'Hashtag'" class="hashtag-list">
</ul> <li v-for="resource in activeResources" :key="resource.key" class="item">
<ul v-show="activeTab === 'Hashtag'" class="hashtag-list"> <base-card :wideContent="true">
<hc-hashtag :id="resource.id" />
<li v-for="resource in activeResources" :key="resource.key" class="item"> </base-card>
<base-card :wideContent="true"> </li>
<hc-hashtag :id="resource.id" /> </ul>
</base-card>
</li>
</ul>
<pagination-buttons <pagination-buttons
v-show="resultsCount > pageSize" v-show="activeResourceCount > pageSize"
:hasMoreResults="hasMoreResults" :hasMoreResults="hasMoreResults"
:hasPreviousResult="hasPreviousResult" :hasPreviousResult="hasPreviousResult"
:activePage="resultsPage" :activePage="activePage"
:totalResultCount="resultsCount" :activeResourceCount="activeResourceCount"
@back="previousResults" @back="previousResults"
@next="nextResults" @next="nextResults"
:key="'Bottom'"
:pageSize="pageSize"
/> />
</template> </template>
</section> </section>
</div> </div>
</template> </template>
@ -98,7 +95,7 @@ export default {
}, },
pageSize: { pageSize: {
type: Number, type: Number,
default: 24 default: 12,
}, },
}, },
data() { data() {
@ -107,20 +104,15 @@ export default {
users: [], users: [],
hashtags: [], hashtags: [],
resultsPage: 0,
resultsCount: 0,
postCount: 0, postCount: 0,
userCount: 0, userCount: 0,
userPage: 0,
hashtagCount: 0, hashtagCount: 0,
postPage: 0,
userPage: 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,
@ -129,24 +121,26 @@ export default {
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 if (this.activeTab === 'User') return this.users
else if (this.activeTab === 'Hashtag') return this.hashtags if (this.activeTab === 'Hashtag') return this.hashtags
else return [] 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 if (this.activeTab === 'User') return this.userCount
else if (this.activeTab === 'Hashtag') return this.hashtagCount if (this.activeTab === 'Hashtag') return this.hashtagCount
else return [] return 0
},
activePage() {
if (this.activeTab === 'Post') return this.postPage
if (this.activeTab === 'User') return this.userPage
if (this.activeTab === 'Hashtag') return this.hashtagPage
return 0
}, },
tabOptions() { tabOptions() {
return [ return [
@ -157,7 +151,7 @@ export default {
}, },
{ {
type: 'User', type: 'User',
title: `${this.userCount} ${this.$t('search.heading.User')}`, title: `${this.userCount} ${this.$t('search.heading.User', {}, this.userCount)}`,
disabled: this.userCount === 0, disabled: this.userCount === 0,
}, },
{ {
@ -167,21 +161,19 @@ export default {
}, },
] ]
}, },
hasPreviousResult(){ hasPreviousResult() {
console.log("hasPreviousResult()") if (this.activeTab === 'Post') return this.postsOffset > 0
if (this.activeTab === 'Post') return this.postsOffset > 0 if (this.activeTab === 'User') return this.usersOffset > 0
else if (this.activeTab === 'User') return this.usersOffset > 0 if (this.activeTab === 'Hashtag') return this.hashtagsOffset > 0
else if (this.activeTab === 'Hashtag') return this.hashtagsOffset > 0 return false
else return [] },
hasMoreResults() {
if (this.activeTab === 'Post') return (this.postPage + 1) * this.pageSize < this.postCount
if (this.activeTab === 'User') return (this.userPage + 1) * this.pageSize < this.userCount
if (this.activeTab === 'Hashtag')
return (this.hashtagPage + 1) * this.pageSize < this.hashtagCount
return false
}, },
hasMoreResults() {
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 []
},
searchCount() { searchCount() {
return this.postCount + this.userCount + this.hashtagCount return this.postCount + this.userCount + this.hashtagCount
}, },
@ -189,50 +181,45 @@ export default {
methods: { methods: {
clearPage() { clearPage() {
this.resultsPage = 0 this.resultsPage = 0
}, },
switchTab(tab) { switchTab(tab) {
this.activeTab = tab this.activeTab = tab
}, },
previousResults() { previousResults() {
console.log("previousResults()") switch (this.activeTab) {
if (this.activeTab === 'Post') { case 'Post':
this.postPage--
this.resultsPage = this.postPage - 1 this.postsOffset = this.postPage * this.pageSize
this.postsOffset - this.pageSize break
case 'User':
} this.userPage--
else if (this.activeTab === 'User') { this.usersOffset = this.userPage * this.pageSize
this.resultsPage = this.userPage - 1 break
this.usersOffset - this.pageSize case 'Hashtag':
this.hashtagPage--
this.hashtagsOffset = this.hashtagPage * this.pageSize
break
} }
else if (this.activeTab === 'Hashtag') {
this.resultsPage = this.hashtagPage - 1
this.hashtagsOffset - this.pageSize
}
else return []
}, },
nextResults() { nextResults() {
console.log("nextResults()") switch (this.activeTab) {
if (this.activeTab === 'Post') { case 'Post':
this.resultsPage = parseInt(this.postPage) + 1 this.postPage++
this.postsOffset + this.pageSize this.postsOffset += this.pageSize
} break
else if (this.activeTab === 'User') { case 'User':
this.resultsPage = this.userPage + 1 this.userPage++
this.usersOffset + this.pageSize this.usersOffset += this.pageSize
} break
else if (this.activeTab === 'Hashtag') { case 'Hashtag':
this.resultsPage = this.hashtagPage + 1 this.hashtagPage++
this.hashtagsOffset + this.pageSize this.hashtagsOffset += this.pageSize
} break
else return [] }
}, },
}, },
apollo: { apollo: {
searchHashtags: { searchHashtags: {
query() { query() {
return searchHashtags return searchHashtags
}, },
@ -248,11 +235,8 @@ export default {
return !this.search return !this.search
}, },
update({ searchHashtags }) { update({ searchHashtags }) {
console.log(" update({ searchHashtags }")
this.hashtags = searchHashtags.hashtags this.hashtags = searchHashtags.hashtags
this.resultsCount = searchHashtags.hashtagCount this.hashtagCount = searchHashtags.hashtagCount
this.hashtagCount = searchHashtags.hashtagCount
if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0) if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0)
this.activeTab = 'Hashtag' this.activeTab = 'Hashtag'
}, },
@ -274,40 +258,30 @@ 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 if (this.postCount === 0 && this.userCount > 0) this.activeTab = 'User'
if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.resultsCount === 0 && this.userCount > 0) this.activeTab = 'User'
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',
}, },
searchPosts: { searchPosts: {
query() { query() {
return searchPosts return searchPosts
}, },
variables() { variables() {
const { firstPosts, postsOffset, search } = this const { firstPosts, postsOffset, search } = this
console.log("firstPosts",firstPosts)
console.log("postsOffset",postsOffset)
return { return {
query: search, query: search,
firstPosts, firstPosts,
postsOffset, postsOffset,
} }
}, },
skip() { skip() {
return !this.search return !this.search
}, },
update({ searchPosts }) { update({ searchPosts }) {
console.log(" update({ searchPosts }")
this.posts = searchPosts.posts this.posts = searchPosts.posts
this.postCount = searchPosts.postCount this.postCount = searchPosts.postCount
this.resultsCount = this.postCount
if (this.resultsCount > this.pageSize) this.hasPagination = true
if (this.postCount > 0) this.activeTab = 'Post' if (this.postCount > 0) this.activeTab = 'Post'
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',

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

@ -1,19 +1,21 @@
<template> <template>
<div class="pagination-buttons"> <div class="pagination-buttons">
<base-button <base-button
v-show="hasPreviousResult"
@click="$emit('back')" @click="$emit('back')"
:disabled="!hasPreviousResult" :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">
{{ $t('search.page') }} {{ activePage + 1 }} /
Seite {{ activePage + 1 }} / {{ Math.round(totalResultCount / pageSize) + 1 }} {{ Math.floor((activeResourceCount - 1) / pageSize) + 1 }}
</span> </span>
<base-button <base-button
v-show="hasMoreResults"
@click="$emit('next')" @click="$emit('next')"
:disabled="!hasMoreResults" :disabled="!hasMoreResults"
icon="arrow-right" icon="arrow-right"
@ -29,7 +31,7 @@ export default {
props: { props: {
pageSize: { pageSize: {
type: Number, type: Number,
default: 24 default: 24,
}, },
hasMoreResults: { hasMoreResults: {
type: Boolean, type: Boolean,
@ -42,11 +44,11 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
resultPages: { totalResultCount: {
type: Number, type: Number,
default: 0, default: 0,
}, },
totalResultCount: { activeResourceCount: {
type: Number, type: Number,
default: 0, default: 0,
}, },

7
webapp/locales/de.json
View File

@ -592,12 +592,13 @@
"heading": { "heading": {
"Post": "Beitrag ::: Beiträge", "Post": "Beitrag ::: Beiträge",
"Tag": "Hashtag ::: Hashtags", "Tag": "Hashtag ::: Hashtags",
"User": "Benutzer" "User": "Benutzer ::: Benutzer"
}, },
"hint": "Wonach suchst Du?", "hint": "Wonach suchst Du?",
"results": "Ergebniss gefunden ::: Ergebnisse gefunden",
"no-results": "Keine Ergebnisse für \"{search}\" gefunden. Versuch' es mit einem anderen Begriff!", "no-results": "Keine Ergebnisse für \"{search}\" gefunden. Versuch' es mit einem anderen Begriff!",
"placeholder": "Suchen" "page": "Seite",
"placeholder": "Suchen",
"results": "Ergebniss gefunden ::: Ergebnisse gefunden"
}, },
"settings": { "settings": {
"blocked-users": { "blocked-users": {

11
webapp/locales/en.json
View File

@ -590,14 +590,15 @@
"search": { "search": {
"failed": "Nothing found", "failed": "Nothing found",
"heading": { "heading": {
"Post": "Posts", "Post": "Post ::: Posts",
"Tag": "Hashtags", "Tag": "Hashtag ::: Hashtags",
"User": "Users" "User": "User ::: Users"
}, },
"hint": "What are you searching for?", "hint": "What are you searching for?",
"results": "Results found",
"no-results": "No results found for \"{search}\". Try a different search term!", "no-results": "No results found for \"{search}\". Try a different search term!",
"placeholder": "Search" "page": "Page",
"placeholder": "Search",
"results": "Results found"
}, },
"settings": { "settings": {
"blocked-users": { "blocked-users": {