Implement switching of tabs and updating list

This commit is contained in:
Robert Schäfer 2019-06-06 18:34:22 +02:00
parent 4278c75d52
commit c9ef1bc5ce
3 changed files with 27 additions and 16 deletions

View File

@ -1,7 +1,7 @@
import gql from 'graphql-tag' import gql from 'graphql-tag'
export default app => { export default (i18n) => {
const lang = app.$i18n.locale().toUpperCase() const lang = i18n.locale().toUpperCase()
return gql(` return gql(`
query Post($filter: _PostFilter, $first: Int, $offset: Int) { query Post($filter: _PostFilter, $first: Int, $offset: Int) {
Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) { Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {

View File

@ -1,7 +1,7 @@
import gql from 'graphql-tag' import gql from 'graphql-tag'
export default app => { export default (i18n) => {
const lang = app.$i18n.locale().toUpperCase() const lang = i18n.locale().toUpperCase()
return gql(` return gql(`
query User($id: ID!) { query User($id: ID!) {
User(id: $id) { User(id: $id) {

View File

@ -223,6 +223,17 @@ import HcUpload from '~/components/Upload'
import HcAvatar from '~/components/Avatar/Avatar.vue' import HcAvatar from '~/components/Avatar/Avatar.vue'
import PostMutationHelpers from '~/mixins/PostMutationHelpers' import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import PostQuery from '~/graphql/UserProfile/Post.js'
import UserQuery from '~/graphql/UserProfile/User.js'
const tabToFilterMapping = ({ tab, id }) => {
return {
post: { author: { id } },
comment: { comments_some: { author: { id } } },
shout: { shoutedBy_some: { id } },
}[tab]
}
export default { export default {
components: { components: {
User, User,
@ -242,6 +253,7 @@ export default {
mode: 'out-in', mode: 'out-in',
}, },
data() { data() {
const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
return { return {
User: [], User: [],
Post: [], Post: [],
@ -249,6 +261,7 @@ export default {
page: 1, page: 1,
pageSize: 6, pageSize: 6,
tabActive: 'post', tabActive: 'post',
filter
} }
}, },
computed: { computed: {
@ -300,9 +313,10 @@ export default {
}, },
}, },
methods: { methods: {
handleTab(str) { handleTab(tab) {
this.$toast.info('!load posts here! =>' + str) this.tabActive = tab
this.tabActive = str this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
this.showMoreContributions()
}, },
uniq(items, field = 'id') { uniq(items, field = 'id') {
return uniqBy(items, field) return uniqBy(items, field)
@ -317,17 +331,14 @@ export default {
this.page++ this.page++
this.$apollo.queries.Post.fetchMore({ this.$apollo.queries.Post.fetchMore({
variables: { variables: {
filter: { author: { id: this.$route.params.id } }, filter: this.filter,
first: this.pageSize, first: this.pageSize,
offset: this.offset, offset: this.offset,
}, },
// Transform the previous result with new data // Transform the previous result with new data
updateQuery: (previousResult, { fetchMoreResult }) => { updateQuery: (previousResult, { fetchMoreResult }) => {
let output = { Post: this.Post} let output = { Post: this.Post }
output.Post = [ output.Post = [...previousResult.Post, ...fetchMoreResult.Post]
...previousResult.Post,
...fetchMoreResult.Post,
]
return output return output
}, },
fetchPolicy: 'cache-and-network', fetchPolicy: 'cache-and-network',
@ -337,11 +348,11 @@ export default {
apollo: { apollo: {
Post: { Post: {
query() { query() {
return require('~/graphql/UserProfile/Post.js').default(this) return PostQuery(this.$i18n)
}, },
variables() { variables() {
return { return {
filter: { author: { id: this.$route.params.id } }, filter: this.filter,
first: this.pageSize, first: this.pageSize,
offset: 0, offset: 0,
} }
@ -350,7 +361,7 @@ export default {
}, },
User: { User: {
query() { query() {
return require('~/graphql/UserProfile/User.js').default(this) return UserQuery(this.$i18n)
}, },
variables() { variables() {
return { id: this.$route.params.id } return { id: this.$route.params.id }