Merge pull request #872 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/PublicApiController.php

@@ -395,8 +395,12 @@ class PublicApiController extends Controller
 
     public function accountFollowers(Request $request, $id)
     {
-        $profile = Profile::findOrFail($id);
+        abort_unless(Auth::check(), 403);
-        $followers = $profile->followers;
+        $profile = Profile::with('user')->whereNull('status')->whereNull('domain')->findOrFail($id);
+        if($profile->is_private || !$profile->user->settings->show_profile_followers) {
+            return [];
+        }
+        $followers = $profile->followers()->orderByDesc('followers.created_at')->paginate(10);
         $resource = new Fractal\Resource\Collection($followers, new AccountTransformer());
         $res = $this->fractal->createData($resource)->toArray();
 
@@ -405,8 +409,12 @@ class PublicApiController extends Controller
 
     public function accountFollowing(Request $request, $id)
     {
-        $profile = Profile::findOrFail($id);
+        abort_unless(Auth::check(), 403);
-        $following = $profile->following;
+        $profile = Profile::with('user')->whereNull('status')->whereNull('domain')->findOrFail($id);
+        if($profile->is_private || !$profile->user->settings->show_profile_following) {
+            return [];
+        }
+        $following = $profile->following()->orderByDesc('followers.created_at')->paginate(10);
         $resource = new Fractal\Resource\Collection($following, new AccountTransformer());
         $res = $this->fractal->createData($resource)->toArray();
 
@@ -468,4 +476,5 @@ class PublicApiController extends Controller
 
         return response()->json($res);
     }
+
 }

resources/assets/js/components/Profile.vue

@@ -39,13 +39,13 @@
 									</a>
 								</div>
 								<div class="font-weight-light pr-5">
-									<a class="text-dark" :href="profile.url + '/followers'">
+									<a class="text-dark cursor-pointer" v-on:click="followersModal()">
 										<span class="font-weight-bold">{{profile.followers_count}}</span> 
 										Followers
 									</a>
 								</div>
 								<div class="font-weight-light pr-5">
-									<a class="text-dark" :href="profile.url + '/following'">
+									<a class="text-dark cursor-pointer" v-on:click="followingModal()">
 										<span class="font-weight-bold">{{profile.following_count}}</span> 
 										Following
 									</a>
@@ -223,6 +223,64 @@
 	<!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
 			<post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
 	</b-modal> -->
+  <b-modal ref="followingModal"
+    id="following-modal"
+    hide-footer
+    centered
+    title="Following"
+    body-class="list-group-flush p-0">
+    <div class="list-group">
+      <div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
+        <div class="media">
+          <a :href="user.url">
+            <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
+          </a>
+          <div class="media-body">
+            <p class="mb-0" style="font-size: 14px">
+              <a :href="user.url" class="font-weight-bold text-dark">
+                {{user.username}}
+              </a>
+            </p>
+            <p class="text-muted mb-0" style="font-size: 14px">
+                {{user.display_name}}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-if="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>
+  </b-modal>
+  <b-modal ref="followerModal"
+    id="follower-modal"
+    hide-footer
+    centered
+    title="Followers"
+    body-class="list-group-flush p-0">
+    <div class="list-group">
+      <div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
+        <div class="media">
+          <a :href="user.url">
+            <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
+          </a>
+          <div class="media-body">
+            <p class="mb-0" style="font-size: 14px">
+              <a :href="user.url" class="font-weight-bold text-dark">
+                {{user.username}}
+              </a>
+            </p>
+            <p class="text-muted mb-0" style="font-size: 14px">
+                {{user.display_name}}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-if="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>
+  </b-modal>
 </div>
 </template>
 <!-- <style type="text/css" scoped="">
@@ -271,7 +329,13 @@ export default {
 			mode: 'grid',
 			modes: ['grid', 'list', 'masonry'],
 			modalStatus: false,
-			relationship: {}
+			relationship: {}, 
+			followers: [],
+			followerCursor: 1,
+			followerMore: true,
+			following: [],
+			followingCursor: 1,
+			followingMore: true
 		}
 	},
 	beforeMount() {
@@ -592,6 +656,73 @@ export default {
 				}
 				this.relationship.following = !this.relationship.following;
 			});
+		},
+
+		followingModal() {
+			if(this.following.length > 0) {
+				this.$refs.followingModal.show();
+				return;
+			}
+			axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
+				params: {
+					page: this.followingCursor
+				}
+			})
+			.then(res => {
+				this.following = res.data;
+				this.followingCursor++;
+			});
+			this.$refs.followingModal.show();
+		},
+
+		followersModal() {
+			if(this.followers.length > 0) {
+				this.$refs.followerModal.show();
+				return;
+			}
+			axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
+				params: {
+					page: this.followerCursor
+				}
+			})
+			.then(res => {
+				this.followers = res.data;
+				this.followerCursor++;
+			})	
+			this.$refs.followerModal.show();
+		},
+
+		followingLoadMore() {
+			axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
+				params: {
+					page: this.followingCursor
+				}
+			})
+			.then(res => {
+				if(res.data.length > 0) {
+					this.following.push(...res.data);
+					this.followingCursor++;
+				} else {
+					this.followingMore = false;
+				}
+			});
+		},
+
+
+		followersLoadMore() {
+			axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
+				params: {
+					page: this.followerCursor
+				}
+			})
+			.then(res => {
+				if(res.data.length > 0) {
+					this.followers.push(...res.data);
+					this.followerCursor++;
+				} else {
+					this.followerMore = false;
+				}
+			});
 		}
 	}
 }

routes/web.php

@@ -70,6 +70,8 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
             Route::get('accounts/verify_credentials', 'ApiController@verifyCredentials');
             Route::get('accounts/relationships', 'PublicApiController@relationships');
             Route::get('accounts/{id}/statuses', 'PublicApiController@accountStatuses');
+            Route::get('accounts/{id}/following', 'PublicApiController@accountFollowing');
+            Route::get('accounts/{id}/followers', 'PublicApiController@accountFollowers');
             Route::get('accounts/{id}', 'PublicApiController@account');
             Route::post('avatar/update', 'ApiController@avatarUpdate');
             Route::get('likes', 'ApiController@hydrateLikes');