mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 14:31:26 +00:00
Update RemoteProfile component, add follower modals
This commit is contained in:
Daniel Supernault
parent
0e178a3371
commit
c4146a3040
2 changed files with 248 additions and 8 deletions
|
|
@ -591,11 +591,14 @@ class PublicApiController extends Controller
|
||||||
public function accountFollowers(Request $request, $id)
|
public function accountFollowers(Request $request, $id)
|
||||||
{
|
{
|
||||||
abort_unless(Auth::check(), 403);
|
abort_unless(Auth::check(), 403);
|
||||||
$profile = Profile::with('user')->whereNull('status')->whereNull('domain')->findOrFail($id);
|
$profile = Profile::with('user')->whereNull('status')->findOrFail($id);
|
||||||
$owner = Auth::id() == $profile->user_id;
|
$owner = Auth::id() == $profile->user_id;
|
||||||
if(Auth::id() != $profile->user_id && $profile->is_private || !$profile->user->settings->show_profile_followers) {
|
if(Auth::id() != $profile->user_id && $profile->is_private) {
|
||||||
return response()->json([]);
|
return response()->json([]);
|
||||||
}
|
}
|
||||||
|
if(!$profile->domain && !$profile->user->settings->show_profile_followers) {
|
||||||
|
return response()->json([]);
|
||||||
|
}
|
||||||
if(!$owner && $request->page > 5) {
|
if(!$owner && $request->page > 5) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
@ -612,7 +615,6 @@ class PublicApiController extends Controller
|
||||||
|
|
||||||
$profile = Profile::with('user')
|
$profile = Profile::with('user')
|
||||||
->whereNull('status')
|
->whereNull('status')
|
||||||
->whereNull('domain')
|
|
||||||
->findOrFail($id);
|
->findOrFail($id);
|
||||||
|
|
||||||
// filter by username
|
// filter by username
|
||||||
|
|
@ -621,7 +623,10 @@ class PublicApiController extends Controller
|
||||||
$filter = ($owner == true) && ($search != null);
|
$filter = ($owner == true) && ($search != null);
|
||||||
|
|
||||||
abort_if($owner == false && $profile->is_private == true && !$profile->followedBy(Auth::user()->profile), 404);
|
abort_if($owner == false && $profile->is_private == true && !$profile->followedBy(Auth::user()->profile), 404);
|
||||||
abort_if($profile->user->settings->show_profile_following == false && $owner == false, 404);
|
|
||||||
|
if(!$profile->domain) {
|
||||||
|
abort_if($profile->user->settings->show_profile_following == false && $owner == false, 404);
|
||||||
|
}
|
||||||
|
|
||||||
if(!$owner && $request->page > 5) {
|
if(!$owner && $request->page > 5) {
|
||||||
return [];
|
return [];
|
||||||
|
|
|
||||||
|
|
@ -44,11 +44,11 @@
|
||||||
<span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
|
<span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
|
||||||
<span>Posts</span>
|
<span>Posts</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span class="cursor-pointer" @click="followingModal()">
|
||||||
<span class="font-weight-bold text-dark">{{profile.following_count}}</span>
|
<span class="font-weight-bold text-dark">{{profile.following_count}}</span>
|
||||||
<span>Following</span>
|
<span>Following</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span class="cursor-pointer" @click="followersModal()">
|
||||||
<span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
|
<span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
|
||||||
<span>Followers</span>
|
<span>Followers</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -90,6 +90,116 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<b-modal
|
||||||
|
v-if="profile && following"
|
||||||
|
ref="followingModal"
|
||||||
|
id="following-modal"
|
||||||
|
hide-footer
|
||||||
|
centered
|
||||||
|
scrollable
|
||||||
|
title="Following"
|
||||||
|
body-class="list-group-flush py-3 px-0"
|
||||||
|
dialog-class="follow-modal">
|
||||||
|
<div v-if="!followingLoading" class="list-group" style="max-height: 60vh;">
|
||||||
|
<div v-if="!following.length" class="list-group-item border-0">
|
||||||
|
<p class="text-center mb-0 font-weight-bold text-muted py-5">
|
||||||
|
<span class="text-dark">{{profileUsername}}</span> is not following yet</p>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div v-if="owner == true" class="list-group-item border-0 pt-0 px-0 mt-n2 mb-3">
|
||||||
|
<span class="d-flex px-4 pb-0 align-items-center">
|
||||||
|
<i class="fas fa-search text-lighter"></i>
|
||||||
|
<input type="text" class="form-control border-0 shadow-0 no-focus" placeholder="Search Following..." v-model="followingModalSearch" v-on:keyup="followingModalSearchHandler">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item border-0 py-1 mb-1" v-for="(user, index) in following" :key="'following_'+index">
|
||||||
|
<div class="media">
|
||||||
|
<a :href="profileUrlRedirect(user)">
|
||||||
|
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0'">
|
||||||
|
</a>
|
||||||
|
<div class="media-body text-truncate">
|
||||||
|
<p class="mb-0" style="font-size: 14px">
|
||||||
|
<a :href="profileUrlRedirect(user)" class="font-weight-bold text-dark">
|
||||||
|
{{user.username}}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p v-if="!user.local" class="text-muted mb-0 text-break mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
|
||||||
|
<span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">@{{user.acct.split('@')[1]}}</span>
|
||||||
|
</p>
|
||||||
|
<p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
|
||||||
|
{{user.display_name ? user.display_name : user.username}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="owner">
|
||||||
|
<a class="btn btn-outline-dark btn-sm font-weight-bold" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Following</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="followingModalSearch && following.length == 0" class="list-group-item border-0">
|
||||||
|
<div class="list-group-item border-0 pt-5">
|
||||||
|
<p class="p-3 text-center mb-0 lead">No Results Found</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="following.length > 0 && followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
|
||||||
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="text-center py-5">
|
||||||
|
<div class="spinner-border" role="status">
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
|
<b-modal ref="followerModal"
|
||||||
|
id="follower-modal"
|
||||||
|
hide-footer
|
||||||
|
centered
|
||||||
|
scrollable
|
||||||
|
title="Followers"
|
||||||
|
body-class="list-group-flush py-3 px-0"
|
||||||
|
dialog-class="follow-modal"
|
||||||
|
>
|
||||||
|
<div v-if="!followerLoading" class="list-group" style="max-height: 60vh;">
|
||||||
|
<div v-if="!followers.length" class="list-group-item border-0">
|
||||||
|
<p class="text-center mb-0 font-weight-bold text-muted py-5">
|
||||||
|
<span class="text-dark">{{profileUsername}}</span> has no followers yet</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<div class="list-group-item border-0 py-1 mb-1" v-for="(user, index) in followers" :key="'follower_'+index">
|
||||||
|
<div class="media mb-0">
|
||||||
|
<a :href="profileUrlRedirect(user)">
|
||||||
|
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" height="30px" loading="lazy" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0'">
|
||||||
|
</a>
|
||||||
|
<div class="media-body mb-0">
|
||||||
|
<p class="mb-0" style="font-size: 14px">
|
||||||
|
<a :href="profileUrlRedirect(user)" class="font-weight-bold text-dark">
|
||||||
|
{{user.username}}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p v-if="!user.local" class="text-muted mb-0 text-break mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
|
||||||
|
<span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">@{{user.acct.split('@')[1]}}</span>
|
||||||
|
</p>
|
||||||
|
<p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
|
||||||
|
{{user.display_name ? user.display_name : user.username}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- <button class="btn btn-primary font-weight-bold btn-sm py-1">FOLLOW</button> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="followers.length && followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
|
||||||
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="text-center py-5">
|
||||||
|
<div class="spinner-border" role="status">
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
<b-modal ref="visitorContextMenu"
|
<b-modal ref="visitorContextMenu"
|
||||||
id="visitor-context-menu"
|
id="visitor-context-menu"
|
||||||
hide-footer
|
hide-footer
|
||||||
|
|
@ -176,7 +286,18 @@
|
||||||
fetchingRemotePosts: false,
|
fetchingRemotePosts: false,
|
||||||
showMutualFollowers: false,
|
showMutualFollowers: false,
|
||||||
loadingMore: false,
|
loadingMore: false,
|
||||||
showLoadMore: true
|
showLoadMore: true,
|
||||||
|
followers: [],
|
||||||
|
followerCursor: 1,
|
||||||
|
followerMore: true,
|
||||||
|
followerLoading: true,
|
||||||
|
following: [],
|
||||||
|
followingCursor: 1,
|
||||||
|
followingMore: true,
|
||||||
|
followingLoading: true,
|
||||||
|
followingModalSearch: null,
|
||||||
|
followingModalSearchCache: null,
|
||||||
|
followingModalTab: 'following',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -497,7 +618,121 @@
|
||||||
path += encodeURI(url);
|
path += encodeURI(url);
|
||||||
}
|
}
|
||||||
window.location.href = path;
|
window.location.href = path;
|
||||||
}
|
},
|
||||||
|
|
||||||
|
followingModal() {
|
||||||
|
if(this.followingCursor > 1) {
|
||||||
|
this.$refs.followingModal.show();
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
axios.get('/api/pixelfed/v1/accounts/'+this.profileId+'/following', {
|
||||||
|
params: {
|
||||||
|
page: this.followingCursor
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
this.following = res.data;
|
||||||
|
this.followingModalSearchCache = res.data;
|
||||||
|
this.followingCursor++;
|
||||||
|
if(res.data.length < 10) {
|
||||||
|
this.followingMore = false;
|
||||||
|
}
|
||||||
|
this.followingLoading = false;
|
||||||
|
});
|
||||||
|
this.$refs.followingModal.show();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
followersModal() {
|
||||||
|
if(this.followerCursor > 1) {
|
||||||
|
this.$refs.followerModal.show();
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
axios.get('/api/pixelfed/v1/accounts/'+this.profileId+'/followers', {
|
||||||
|
params: {
|
||||||
|
page: this.followerCursor
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
this.followers.push(...res.data);
|
||||||
|
this.followerCursor++;
|
||||||
|
if(res.data.length < 10) {
|
||||||
|
this.followerMore = false;
|
||||||
|
}
|
||||||
|
this.followerLoading = false;
|
||||||
|
})
|
||||||
|
this.$refs.followerModal.show();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
followingLoadMore() {
|
||||||
|
axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
|
||||||
|
params: {
|
||||||
|
page: this.followingCursor,
|
||||||
|
fbu: this.followingModalSearch
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if(res.data.length > 0) {
|
||||||
|
this.following.push(...res.data);
|
||||||
|
this.followingCursor++;
|
||||||
|
this.followingModalSearchCache = this.following;
|
||||||
|
}
|
||||||
|
if(res.data.length < 10) {
|
||||||
|
this.followingModalSearchCache = this.following;
|
||||||
|
this.followingMore = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
followersLoadMore() {
|
||||||
|
axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
|
||||||
|
params: {
|
||||||
|
page: this.followerCursor
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if(res.data.length > 0) {
|
||||||
|
this.followers.push(...res.data);
|
||||||
|
this.followerCursor++;
|
||||||
|
}
|
||||||
|
if(res.data.length < 10) {
|
||||||
|
this.followerMore = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
profileUrlRedirect(profile) {
|
||||||
|
if(profile.local == true) {
|
||||||
|
return profile.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return '/i/web/profile/_/' + profile.id;
|
||||||
|
},
|
||||||
|
|
||||||
|
followingModalSearchHandler() {
|
||||||
|
let self = this;
|
||||||
|
let q = this.followingModalSearch;
|
||||||
|
|
||||||
|
if(q.length == 0) {
|
||||||
|
this.following = this.followingModalSearchCache;
|
||||||
|
this.followingModalSearch = null;
|
||||||
|
}
|
||||||
|
if(q.length > 0) {
|
||||||
|
let url = '/api/pixelfed/v1/accounts/' +
|
||||||
|
self.profileId + '/following?page=1&fbu=' +
|
||||||
|
q;
|
||||||
|
|
||||||
|
axios.get(url).then(res => {
|
||||||
|
this.following = res.data;
|
||||||
|
}).catch(err => {
|
||||||
|
self.following = self.followingModalSearchCache;
|
||||||
|
self.followingModalSearch = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue