mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Copy profile Vue pages for the group profile
This commit is contained in:
Wolfgang Huß
parent
acaf3aacb8
commit
91d797dcfa
33
webapp/pages/group/_id.spec.js
Normal file
33
webapp/pages/group/_id.spec.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { config, mount } from '@vue/test-utils'
|
||||
import _id from './_id.vue'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
|
||||
|
||||
describe('Profile _id.vue', () => {
|
||||
let wrapper
|
||||
let Wrapper
|
||||
let mocks
|
||||
|
||||
beforeEach(() => {
|
||||
mocks = {}
|
||||
})
|
||||
|
||||
describe('mount', () => {
|
||||
Wrapper = () => {
|
||||
return mount(_id, {
|
||||
mocks,
|
||||
localVue,
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders', () => {
|
||||
expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
34
webapp/pages/group/_id.vue
Normal file
34
webapp/pages/group/_id.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<nuxt-child />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import PersistentLinks from '~/mixins/persistentLinks.js'
|
||||
|
||||
const options = {
|
||||
queryId: gql`
|
||||
query($idOrSlug: ID) {
|
||||
User(id: $idOrSlug) {
|
||||
id
|
||||
slug
|
||||
}
|
||||
}
|
||||
`,
|
||||
querySlug: gql`
|
||||
query($idOrSlug: String) {
|
||||
User(slug: $idOrSlug) {
|
||||
id
|
||||
slug
|
||||
}
|
||||
}
|
||||
`,
|
||||
message: 'error-pages.profile-not-found',
|
||||
path: 'profile',
|
||||
}
|
||||
const persistentLinks = PersistentLinks(options)
|
||||
|
||||
export default {
|
||||
mixins: [persistentLinks],
|
||||
}
|
||||
</script>
|
||||
95
webapp/pages/group/_id/_slug.spec.js
Normal file
95
webapp/pages/group/_id/_slug.spec.js
Normal file
@ -0,0 +1,95 @@
|
||||
import { config, mount } from '@vue/test-utils'
|
||||
import ProfileSlug from './_slug.vue'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
localVue.filter('date', (d) => d)
|
||||
|
||||
config.stubs['client-only'] = '<span><slot /></span>'
|
||||
config.stubs['v-popover'] = '<span><slot /></span>'
|
||||
config.stubs['nuxt-link'] = '<span><slot /></span>'
|
||||
config.stubs['infinite-loading'] = '<span><slot /></span>'
|
||||
config.stubs['follow-list'] = '<span><slot /></span>'
|
||||
|
||||
describe('ProfileSlug', () => {
|
||||
let wrapper
|
||||
let Wrapper
|
||||
let mocks
|
||||
|
||||
beforeEach(() => {
|
||||
mocks = {
|
||||
post: {
|
||||
id: 'p23',
|
||||
name: 'It is a post',
|
||||
},
|
||||
$t: jest.fn(),
|
||||
// If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
|
||||
$route: {
|
||||
params: {
|
||||
id: '4711',
|
||||
slug: 'john-doe',
|
||||
},
|
||||
},
|
||||
$router: {
|
||||
history: {
|
||||
push: jest.fn(),
|
||||
},
|
||||
},
|
||||
$toast: {
|
||||
success: jest.fn(),
|
||||
error: jest.fn(),
|
||||
},
|
||||
$apollo: {
|
||||
loading: false,
|
||||
mutate: jest.fn().mockResolvedValue(),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
describe('mount', () => {
|
||||
Wrapper = () => {
|
||||
return mount(ProfileSlug, {
|
||||
mocks,
|
||||
localVue,
|
||||
})
|
||||
}
|
||||
|
||||
describe('given an authenticated user', () => {
|
||||
beforeEach(() => {
|
||||
mocks.$filters = {
|
||||
removeLinks: (c) => c,
|
||||
truncate: (a) => a,
|
||||
}
|
||||
mocks.$store = {
|
||||
getters: {
|
||||
'auth/isModerator': () => false,
|
||||
'auth/user': {
|
||||
id: 'u23',
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
describe('given a user for the profile', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
wrapper.setData({
|
||||
User: [
|
||||
{
|
||||
id: 'u3',
|
||||
name: 'Bob the builder',
|
||||
contributionsCount: 6,
|
||||
shoutedCount: 7,
|
||||
commentedCount: 8,
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
it('displays name of the user', () => {
|
||||
expect(wrapper.text()).toContain('Bob the builder')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
443
webapp/pages/group/_id/_slug.vue
Normal file
443
webapp/pages/group/_id/_slug.vue
Normal file
@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-space />
|
||||
<ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
|
||||
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
|
||||
<base-card
|
||||
:class="{ 'disabled-content': user.disabled }"
|
||||
style="position: relative; height: auto; overflow: visible"
|
||||
>
|
||||
<hc-upload v-if="myProfile" :user="user">
|
||||
<user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
|
||||
</hc-upload>
|
||||
<user-avatar v-else :user="user" class="profile-avatar" size="large" />
|
||||
<!-- Menu -->
|
||||
<client-only>
|
||||
<content-menu
|
||||
placement="bottom-end"
|
||||
resource-type="user"
|
||||
:resource="user"
|
||||
:is-owner="myProfile"
|
||||
class="user-content-menu"
|
||||
@mute="muteUser"
|
||||
@unmute="unmuteUser"
|
||||
@block="blockUser"
|
||||
@unblock="unblockUser"
|
||||
@delete="deleteUser"
|
||||
/>
|
||||
</client-only>
|
||||
<ds-space margin="small">
|
||||
<ds-heading tag="h3" align="center" no-margin>
|
||||
{{ userName }}
|
||||
</ds-heading>
|
||||
<ds-text align="center" color="soft">
|
||||
{{ userSlug }}
|
||||
</ds-text>
|
||||
<ds-text v-if="user.location" align="center" color="soft" size="small">
|
||||
<base-icon name="map-marker" />
|
||||
{{ user.location.name }}
|
||||
</ds-text>
|
||||
<ds-text align="center" color="soft" size="small">
|
||||
{{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
<ds-space v-if="user.badges && user.badges.length" margin="x-small">
|
||||
<hc-badges :badges="user.badges" />
|
||||
</ds-space>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<client-only>
|
||||
<ds-number :label="$t('profile.followers')">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:start-val="followedByCountStartValue"
|
||||
:end-val="user.followedByCount"
|
||||
/>
|
||||
</ds-number>
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<client-only>
|
||||
<ds-number :label="$t('profile.following')">
|
||||
<hc-count-to slot="count" :end-val="user.followingCount" />
|
||||
</ds-number>
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<div v-if="!myProfile" class="action-buttons">
|
||||
<base-button v-if="user.isBlocked" @click="unblockUser(user)">
|
||||
{{ $t('settings.blocked-users.unblock') }}
|
||||
</base-button>
|
||||
<base-button v-if="user.isMuted" @click="unmuteUser(user)">
|
||||
{{ $t('settings.muted-users.unmute') }}
|
||||
</base-button>
|
||||
<hc-follow-button
|
||||
v-if="!user.isMuted && !user.isBlocked"
|
||||
:follow-id="user.id"
|
||||
:is-followed="user.followedByCurrentUser"
|
||||
@optimistic="optimisticFollow"
|
||||
@update="updateFollow"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="user.about">
|
||||
<hr />
|
||||
<ds-space margin-top="small" margin-bottom="small">
|
||||
<ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
|
||||
</ds-space>
|
||||
</template>
|
||||
</base-card>
|
||||
<ds-space />
|
||||
<ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
|
||||
{{ $t('profile.network.title') }}
|
||||
</ds-heading>
|
||||
<follow-list
|
||||
:loading="$apollo.loading"
|
||||
:user="user"
|
||||
type="followedBy"
|
||||
@fetchAllConnections="fetchAllConnections"
|
||||
/>
|
||||
<ds-space />
|
||||
<follow-list
|
||||
:loading="$apollo.loading"
|
||||
:user="user"
|
||||
type="following"
|
||||
@fetchAllConnections="fetchAllConnections"
|
||||
/>
|
||||
<social-media :user-name="userName" :user="user" />
|
||||
</ds-flex-item>
|
||||
|
||||
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
|
||||
<masonry-grid>
|
||||
<!-- TapNavigation -->
|
||||
<tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
|
||||
|
||||
<!-- feed -->
|
||||
<ds-grid-item :row-span="2" column-span="fullWidth">
|
||||
<ds-space centered>
|
||||
<nuxt-link :to="{ name: 'post-create' }">
|
||||
<base-button
|
||||
v-if="myProfile"
|
||||
v-tooltip="{
|
||||
content: $t('contribution.newPost'),
|
||||
placement: 'left',
|
||||
delay: { show: 500 },
|
||||
}"
|
||||
:path="{ name: 'post-create' }"
|
||||
class="profile-post-add-button"
|
||||
icon="plus"
|
||||
circle
|
||||
filled
|
||||
/>
|
||||
</nuxt-link>
|
||||
</ds-space>
|
||||
</ds-grid-item>
|
||||
|
||||
<template v-if="posts.length">
|
||||
<masonry-grid-item
|
||||
v-for="post in posts"
|
||||
:key="post.id"
|
||||
:imageAspectRatio="post.image && post.image.aspectRatio"
|
||||
>
|
||||
<post-teaser
|
||||
:post="post"
|
||||
:width="{ base: '100%', md: '100%', xl: '50%' }"
|
||||
@removePostFromList="posts = removePostFromList(post, posts)"
|
||||
@pinPost="pinPost(post, refetchPostList)"
|
||||
@unpinPost="unpinPost(post, refetchPostList)"
|
||||
/>
|
||||
</masonry-grid-item>
|
||||
</template>
|
||||
<template v-else-if="$apollo.loading">
|
||||
<ds-grid-item column-span="fullWidth">
|
||||
<ds-space centered>
|
||||
<ds-spinner size="base"></ds-spinner>
|
||||
</ds-space>
|
||||
</ds-grid-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ds-grid-item column-span="fullWidth">
|
||||
<hc-empty margin="xx-large" icon="file" />
|
||||
</ds-grid-item>
|
||||
</template>
|
||||
</masonry-grid>
|
||||
<client-only>
|
||||
<infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
|
||||
</client-only>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniqBy from 'lodash/uniqBy'
|
||||
import postListActions from '~/mixins/postListActions'
|
||||
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
|
||||
import HcFollowButton from '~/components/FollowButton.vue'
|
||||
import HcCountTo from '~/components/CountTo.vue'
|
||||
import HcBadges from '~/components/Badges.vue'
|
||||
import FollowList from '~/components/features/FollowList/FollowList'
|
||||
import HcEmpty from '~/components/Empty/Empty'
|
||||
import ContentMenu from '~/components/ContentMenu/ContentMenu'
|
||||
import HcUpload from '~/components/Upload'
|
||||
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
|
||||
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
|
||||
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
|
||||
import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
|
||||
import { profilePagePosts } from '~/graphql/PostQuery'
|
||||
import UserQuery from '~/graphql/User'
|
||||
import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
|
||||
import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
|
||||
import UpdateQuery from '~/components/utils/UpdateQuery'
|
||||
import SocialMedia from '~/components/SocialMedia/SocialMedia'
|
||||
|
||||
const tabToFilterMapping = ({ tab, id }) => {
|
||||
return {
|
||||
post: { author: { id } },
|
||||
comment: { comments_some: { author: { id } } },
|
||||
shout: { shoutedBy_some: { id } },
|
||||
}[tab]
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SocialMedia,
|
||||
PostTeaser,
|
||||
HcFollowButton,
|
||||
HcCountTo,
|
||||
HcBadges,
|
||||
HcEmpty,
|
||||
UserAvatar,
|
||||
ContentMenu,
|
||||
HcUpload,
|
||||
MasonryGrid,
|
||||
MasonryGridItem,
|
||||
FollowList,
|
||||
TabNavigation,
|
||||
},
|
||||
mixins: [postListActions],
|
||||
transition: {
|
||||
name: 'slide-up',
|
||||
mode: 'out-in',
|
||||
},
|
||||
data() {
|
||||
const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
|
||||
return {
|
||||
User: [],
|
||||
posts: [],
|
||||
hasMore: true,
|
||||
offset: 0,
|
||||
pageSize: 6,
|
||||
tabActive: 'post',
|
||||
filter,
|
||||
followedByCountStartValue: 0,
|
||||
followedByCount: 7,
|
||||
followingCount: 7,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myProfile() {
|
||||
return this.$route.params.id === this.$store.getters['auth/user'].id
|
||||
},
|
||||
user() {
|
||||
return this.User ? this.User[0] : {}
|
||||
},
|
||||
userName() {
|
||||
const { name } = this.user || {}
|
||||
return name || this.$t('profile.userAnonym')
|
||||
},
|
||||
userSlug() {
|
||||
const { slug } = this.user || {}
|
||||
return slug && `@${slug}`
|
||||
},
|
||||
tabOptions() {
|
||||
return [
|
||||
{
|
||||
type: 'post',
|
||||
title: this.$t('common.post', null, this.user.contributionsCount),
|
||||
count: this.user.contributionsCount,
|
||||
disabled: this.user.contributionsCount === 0,
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
title: this.$t('profile.commented'),
|
||||
count: this.user.commentedCount,
|
||||
disabled: this.user.commentedCount === 0,
|
||||
},
|
||||
{
|
||||
type: 'shout',
|
||||
title: this.$t('profile.shouted'),
|
||||
count: this.user.shoutedCount,
|
||||
disabled: this.user.shoutedCount === 0,
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTab(tab) {
|
||||
if (this.tabActive !== tab) {
|
||||
this.tabActive = tab
|
||||
this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
|
||||
this.resetPostList()
|
||||
}
|
||||
},
|
||||
uniq(items, field = 'id') {
|
||||
return uniqBy(items, field)
|
||||
},
|
||||
showMoreContributions($state) {
|
||||
const { profilePagePosts: PostQuery } = this.$apollo.queries
|
||||
if (!PostQuery) return // seems this can be undefined on subpages
|
||||
this.offset += this.pageSize
|
||||
|
||||
PostQuery.fetchMore({
|
||||
variables: {
|
||||
offset: this.offset,
|
||||
filter: this.filter,
|
||||
first: this.pageSize,
|
||||
orderBy: 'createdAt_desc',
|
||||
},
|
||||
updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
|
||||
})
|
||||
},
|
||||
resetPostList() {
|
||||
this.offset = 0
|
||||
this.posts = []
|
||||
this.hasMore = true
|
||||
},
|
||||
refetchPostList() {
|
||||
this.resetPostList()
|
||||
this.$apollo.queries.profilePagePosts.refetch()
|
||||
},
|
||||
async muteUser(user) {
|
||||
try {
|
||||
await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message)
|
||||
} finally {
|
||||
this.$apollo.queries.User.refetch()
|
||||
this.resetPostList()
|
||||
this.$apollo.queries.profilePagePosts.refetch()
|
||||
}
|
||||
},
|
||||
async unmuteUser(user) {
|
||||
try {
|
||||
this.$apollo.mutate({ mutation: unmuteUser(), variables: { id: user.id } })
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message)
|
||||
} finally {
|
||||
this.$apollo.queries.User.refetch()
|
||||
this.resetPostList()
|
||||
this.$apollo.queries.profilePagePosts.refetch()
|
||||
}
|
||||
},
|
||||
async blockUser(user) {
|
||||
try {
|
||||
await this.$apollo.mutate({ mutation: blockUser(), variables: { id: user.id } })
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message)
|
||||
} finally {
|
||||
this.$apollo.queries.User.refetch()
|
||||
}
|
||||
},
|
||||
async unblockUser(user) {
|
||||
try {
|
||||
this.$apollo.mutate({ mutation: unblockUser(), variables: { id: user.id } })
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message)
|
||||
} finally {
|
||||
this.$apollo.queries.User.refetch()
|
||||
}
|
||||
},
|
||||
async deleteUser(userdata) {
|
||||
this.$store.commit('modal/SET_OPEN', {
|
||||
name: 'delete',
|
||||
data: {
|
||||
userdata: userdata,
|
||||
},
|
||||
})
|
||||
},
|
||||
optimisticFollow({ followedByCurrentUser }) {
|
||||
/*
|
||||
* Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow
|
||||
*/
|
||||
this.followedByCountStartValue = this.user.followedByCount
|
||||
const currentUser = this.$store.getters['auth/user']
|
||||
if (followedByCurrentUser) {
|
||||
this.user.followedByCount++
|
||||
this.user.followedBy = [currentUser, ...this.user.followedBy]
|
||||
} else {
|
||||
this.user.followedByCount--
|
||||
this.user.followedBy = this.user.followedBy.filter((user) => user.id !== currentUser.id)
|
||||
}
|
||||
this.user.followedByCurrentUser = followedByCurrentUser
|
||||
},
|
||||
updateFollow({ followedByCurrentUser, followedBy, followedByCount }) {
|
||||
this.followedByCountStartValue = this.user.followedByCount
|
||||
this.user.followedByCount = followedByCount
|
||||
this.user.followedByCurrentUser = followedByCurrentUser
|
||||
this.user.followedBy = followedBy
|
||||
},
|
||||
fetchAllConnections(type) {
|
||||
if (type === 'following') this.followingCount = Infinity
|
||||
if (type === 'followedBy') this.followedByCount = Infinity
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
profilePagePosts: {
|
||||
query() {
|
||||
return profilePagePosts(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
return {
|
||||
filter: this.filter,
|
||||
first: this.pageSize,
|
||||
offset: 0,
|
||||
orderBy: 'createdAt_desc',
|
||||
}
|
||||
},
|
||||
update({ profilePagePosts }) {
|
||||
this.posts = profilePagePosts
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
User: {
|
||||
query() {
|
||||
return UserQuery(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
return {
|
||||
id: this.$route.params.id,
|
||||
followedByCount: this.followedByCount,
|
||||
followingCount: this.followingCount,
|
||||
}
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.profile-avatar.user-avatar {
|
||||
margin: auto;
|
||||
margin-top: -60px;
|
||||
}
|
||||
.page-name-profile-id-slug {
|
||||
.ds-flex-item:first-child .content-menu {
|
||||
position: absolute;
|
||||
top: $space-x-small;
|
||||
right: $space-x-small;
|
||||
}
|
||||
}
|
||||
.profile-post-add-button {
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
.action-buttons {
|
||||
margin: $space-small 0;
|
||||
|
||||
> .base-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $space-x-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user