kopia lustrzana https://github.com/nextcloud/social
Merge pull request #1571 from nextcloud/artonge/fix/correctly_store_followers_in_store
Fixes on user profilepull/1573/head
commit
c0b8bf771c
|
@ -23,19 +23,30 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- Show button only if user is authenticated and she is not the same as the account viewed -->
|
<!-- Show button only if user is authenticated and she is not the same as the account viewed -->
|
||||||
<div v-if="!serverData.public && accountInfo && accountInfo.viewerLink!='viewer'">
|
<div v-if="!serverData.public && accountInfo && accountInfo.viewerLink!='viewer'">
|
||||||
<NcButton v-if="isCurrentUserFollowing"
|
<div v-if="isCurrentUserFollowing"
|
||||||
:class="{'icon-loading-small': followLoading}"
|
class="follow-button-container">
|
||||||
@click="unfollow()"
|
<NcButton :disabled="loading"
|
||||||
@mouseover="followingText=t('social', 'Unfollow')"
|
class="follow-button follow-button--following"
|
||||||
@mouseleave="followingText=t('social', 'Following')">
|
type="success">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<Check :size="32" />
|
<Check :size="32" />
|
||||||
</template>
|
</template>
|
||||||
{{ followingText }}
|
{{ t('social', 'Following') }}
|
||||||
</NcButton>
|
</NcButton>
|
||||||
|
<NcButton :disabled="loading"
|
||||||
|
class="follow-button follow-button--unfollow"
|
||||||
|
type="error"
|
||||||
|
@click="unfollow()">
|
||||||
|
<template #icon>
|
||||||
|
<CloseOctagon :size="32" />
|
||||||
|
</template>
|
||||||
|
{{ t('social', 'Unfollow') }}
|
||||||
|
</NcButton>
|
||||||
|
</div>
|
||||||
<NcButton v-else
|
<NcButton v-else
|
||||||
:class="{'icon-loading-small': followLoading}"
|
:disabled="loading"
|
||||||
class="primary"
|
type="primary"
|
||||||
|
class="follow-button"
|
||||||
@click="follow">
|
@click="follow">
|
||||||
{{ t('social', 'Follow') }}
|
{{ t('social', 'Follow') }}
|
||||||
</NcButton>
|
</NcButton>
|
||||||
|
@ -46,12 +57,14 @@
|
||||||
import accountMixins from '../mixins/accountMixins.js'
|
import accountMixins from '../mixins/accountMixins.js'
|
||||||
import currentUser from '../mixins/currentUserMixin.js'
|
import currentUser from '../mixins/currentUserMixin.js'
|
||||||
import Check from 'vue-material-design-icons/Check.vue'
|
import Check from 'vue-material-design-icons/Check.vue'
|
||||||
|
import CloseOctagon from 'vue-material-design-icons/CloseOctagon.vue'
|
||||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'FollowButton',
|
name: 'FollowButton',
|
||||||
components: {
|
components: {
|
||||||
Check,
|
Check,
|
||||||
|
CloseOctagon,
|
||||||
NcButton,
|
NcButton,
|
||||||
},
|
},
|
||||||
mixins: [
|
mixins: [
|
||||||
|
@ -70,28 +83,58 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
followingText: t('social', 'Following'),
|
loading: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
followLoading() {
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
isCurrentUserFollowing() {
|
isCurrentUserFollowing() {
|
||||||
return this.$store.getters.isFollowingUser(this.account)
|
return this.$store.getters.isFollowingUser(this.account)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
follow() {
|
async follow() {
|
||||||
this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
|
try {
|
||||||
|
this.loading = true
|
||||||
|
await this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
unfollow() {
|
async unfollow() {
|
||||||
this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
|
try {
|
||||||
|
this.loading = true
|
||||||
|
await this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
.follow-button {
|
||||||
|
width: 150px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-button-container {
|
||||||
|
.follow-button--following {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.follow-button--unfollow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.follow-button--following {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.follow-button--unfollow {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.user-entry {
|
.user-entry {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
:size="128" />
|
:size="128" />
|
||||||
<h2>{{ displayName }}</h2>
|
<h2>{{ displayName }}</h2>
|
||||||
<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
|
<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
|
||||||
<ul v-if="accountInfo.details && accountInfo.local" class="user-profile--sections">
|
<ul v-if="accountInfo.details && accountInfo.local" class="user-profile__info user-profile__sections">
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">
|
<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">
|
||||||
{{ getCount('post') }} {{ t('social', 'posts') }}
|
{{ getCount('post') }} {{ t('social', 'posts') }}
|
||||||
|
@ -49,14 +49,18 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>@{{ accountInfo.account }}</p>
|
<p class="user-profile__info">
|
||||||
<p v-if="accountInfo.website">
|
<a :href="accountInfo.url" target="_blank">@{{ accountInfo.account }}</a>
|
||||||
Website: <a :href="accountInfo.website.value">
|
|
||||||
{{ accountInfo.website.value }}
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
<FollowButton :account="accountInfo.account" :uid="uid" />
|
|
||||||
<NcButton v-if="serverData.public" class="primary" @click="followRemote">
|
<p v-if="accountInfo.website" class="user-profile__info">
|
||||||
|
{{ t('social', 'Website') }}: <a :href="accountInfo.website.value">{{ accountInfo.website.value }}</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<FollowButton class="user-profile__info" :account="accountInfo.account" :uid="uid" />
|
||||||
|
<NcButton v-if="serverData.public"
|
||||||
|
class="user-profile__info primary"
|
||||||
|
@click="followRemote">
|
||||||
{{ t('social', 'Follow') }}
|
{{ t('social', 'Follow') }}
|
||||||
</NcButton>
|
</NcButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -126,7 +130,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.user-profile {
|
.user-profile {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -137,28 +141,36 @@ export default {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-profile--sections {
|
&__info {
|
||||||
display: flex;
|
margin-bottom: 12px;
|
||||||
}
|
|
||||||
.user-profile--sections li {
|
a:hover {
|
||||||
flex-grow: 1;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.user-profile--sections li a {
|
}
|
||||||
padding: 10px;
|
|
||||||
padding-left: 24px;
|
&__sections {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
background-position: 0 center;
|
|
||||||
height: 40px;
|
li {
|
||||||
opacity: .6;
|
flex-grow: 1;
|
||||||
}
|
|
||||||
.user-profile--sections li a.router-link-exact-active,
|
a {
|
||||||
.user-profile--sections li a:focus{
|
padding: 10px;
|
||||||
opacity: 1;
|
padding-left: 24px;
|
||||||
border-bottom: 1px solid var(--color-main-text);
|
display: inline-block;
|
||||||
|
background-position: 0 center;
|
||||||
|
height: 40px;
|
||||||
|
opacity: .6;
|
||||||
|
|
||||||
|
&.router-link-exact-active,
|
||||||
|
&:focus {
|
||||||
|
opacity: 1;
|
||||||
|
border-bottom: 1px solid var(--color-main-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -36,7 +36,7 @@ const addAccount = (state, { actorId, data }) => {
|
||||||
details: {
|
details: {
|
||||||
following: false,
|
following: false,
|
||||||
follower: false,
|
follower: false,
|
||||||
}
|
},
|
||||||
}, state.accounts[actorId], data))
|
}, state.accounts[actorId], data))
|
||||||
Vue.set(state.accountIdMap, data.account, data.id)
|
Vue.set(state.accountIdMap, data.account, data.id)
|
||||||
}
|
}
|
||||||
|
@ -53,10 +53,13 @@ const mutations = {
|
||||||
const users = []
|
const users = []
|
||||||
for (const index in data) {
|
for (const index in data) {
|
||||||
const actor = data[index].actor_info
|
const actor = data[index].actor_info
|
||||||
addAccount(state, {
|
if (typeof actor !== 'undefined' && account !== actor.account) {
|
||||||
actorId: actor.id,
|
users.push(actor.id)
|
||||||
data: actor,
|
addAccount(state, {
|
||||||
})
|
actorId: actor.id,
|
||||||
|
data: actor,
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Vue.set(state.accounts[_getActorIdForAccount(account)], 'followersList', users)
|
Vue.set(state.accounts[_getActorIdForAccount(account)], 'followersList', users)
|
||||||
},
|
},
|
||||||
|
|
Ładowanie…
Reference in New Issue