mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<template>
|
|
<base-card style="position: relative; height: auto;">
|
|
<ds-space v-if="this.connections && this.connections.length" margin="x-small">
|
|
<ds-text tag="h5" color="soft">
|
|
{{ userName | truncate(15) }} {{ $t('profile.network.following') }}
|
|
</ds-text>
|
|
</ds-space>
|
|
<template v-if="this.connections && this.connections.length">
|
|
<ds-space v-for="follow in uniq(this.connections)" :key="follow.id" margin="x-small">
|
|
<!-- TODO: find better solution for rendering errors -->
|
|
<client-only>
|
|
<user-teaser :user="follow" />
|
|
</client-only>
|
|
</ds-space>
|
|
<ds-space v-if="this.counts[this.type] - this.connections.length" margin="small">
|
|
<base-button @click="fetchConnections" size="small" color="softer">
|
|
{{
|
|
$t('profile.network.andMore', {
|
|
number: this.counts[this.type] - this.connections.length,
|
|
})
|
|
}}
|
|
</base-button>
|
|
</ds-space>
|
|
</template>
|
|
<template v-else>
|
|
<p style="text-align: center; opacity: .5;">
|
|
{{ userName }} {{ $t('profile.network.followingNobody') }}
|
|
</p>
|
|
</template>
|
|
</base-card>
|
|
</template>
|
|
|
|
<script>
|
|
import uniqBy from 'lodash/uniqBy'
|
|
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
|
|
import UserTeaser from '~/components/UserTeaser/UserTeaser'
|
|
import { followedByQuery, followingQuery } from '~/graphql/User'
|
|
|
|
export default {
|
|
name: 'FollowerList',
|
|
components: {
|
|
UserAvatar,
|
|
UserTeaser,
|
|
},
|
|
props: {
|
|
user: { type: Object, default: null },
|
|
type: { type: String, default: 'following' },
|
|
},
|
|
data() {
|
|
return {
|
|
connections: this.user[this.type],
|
|
queries: {
|
|
followedBy: followedByQuery,
|
|
following: followingQuery,
|
|
},
|
|
counts: {
|
|
followedBy: this.user.followedByCount,
|
|
following: this.user.followingCount,
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
userName() {
|
|
const { name } = this.user || {}
|
|
return name || this.$t('profile.userAnonym')
|
|
},
|
|
},
|
|
methods: {
|
|
uniq(items, field = 'id') {
|
|
return uniqBy(items, field)
|
|
},
|
|
async fetchConnections() {
|
|
const query = this.queries[this.type]
|
|
const { data } = await this.$apollo.query({
|
|
query: this.queries[this.type],
|
|
variables: { id: this.user.id },
|
|
// neither result nor update are being called when defined here (?)
|
|
})
|
|
const connections = data.User[0][this.type]
|
|
this.connections = this.connections.concat(connections)
|
|
},
|
|
},
|
|
}
|
|
</script>
|