Update RemoteProfile component, add follower modals

app/Http/Controllers/PublicApiController.php

@@ -591,11 +591,14 @@ class PublicApiController extends Controller
     public function accountFollowers(Request $request, $id)
     {
         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;
-        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([]);
         }
+        if(!$profile->domain && !$profile->user->settings->show_profile_followers) {
+        	return response()->json([]);
+        }
         if(!$owner && $request->page > 5) {
         	return [];
         }
@@ -612,7 +615,6 @@ class PublicApiController extends Controller
 
         $profile = Profile::with('user')
             ->whereNull('status')
-            ->whereNull('domain')
             ->findOrFail($id);
 
         // filter by username
@@ -621,7 +623,10 @@ class PublicApiController extends Controller
         $filter = ($owner == true) && ($search != null);
 
         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) {
         	return [];

resources/assets/js/components/RemoteProfile.vue

@@ -44,11 +44,11 @@
 								<span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
 								<span>Posts</span>
 							</span>
-							<span>
+							<span class="cursor-pointer" @click="followingModal()">
 								<span class="font-weight-bold text-dark">{{profile.following_count}}</span>
 								<span>Following</span>
 							</span>
-							<span>
+							<span class="cursor-pointer" @click="followersModal()">
 								<span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
 								<span>Followers</span>
 							</span>
@@ -90,6 +90,116 @@
 				</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">&commat;{{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">&commat;{{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"
 			id="visitor-context-menu"
 			hide-footer
@@ -176,7 +286,18 @@
 				fetchingRemotePosts: false,
 				showMutualFollowers: 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);
 				}
 				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>