Add user list component

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/ProfileInfo.vue

@@ -33,13 +33,13 @@
 
 		<ul class="user-profile--sections">
 			<li>
-				<router-link :to="{ name: 'profile', params: { account: $route.params.account }}" class="icon-category-monitoring">{{ accountInfo.posts }} posts</router-link>
+				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">{{ accountInfo.posts }} posts</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'following', params: { account: $route.params.account }}" class="icon-category-social">{{ accountInfo.following }} following</router-link>
+				<router-link :to="{ name: 'profile.following', params: { account: uid } }" class="icon-category-social">{{ accountInfo.following }} following</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'followers', params: { account: $route.params.account }}" class="icon-category-social">{{ accountInfo.followers }} followers</router-link>
+				<router-link :to="{ name: 'profile.followers', params: { account: uid } }" class="icon-category-social">{{ accountInfo.followers }} followers</router-link>
 			</li>
 		</ul>
 	</div>

src/components/UserEntry.vue

@@ -0,0 +1,84 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="user-entry">
+		<div class="entry-content">
+			<div class="user-avatar">
+				<avatar :size="32" :user="item.id" />
+			</div>
+			<div class="user-details">
+				<router-link :to="{ name: 'profile', params: { account: item.id }}">
+					<span class="post-author">{{ item.displayName }}</span>
+				</router-link>
+				<p class="user-description">{{ item.description}}</p>
+			</div>
+			<button v-if="item.following" class="icon-checkmark-color">Following</button>
+			<button v-else class="primary">Follow</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Avatar } from 'nextcloud-vue'
+
+export default {
+	name: 'UserEntry',
+	components: {
+		Avatar
+	},
+	props: {
+		item: { type: Object, default: () => {} }
+	},
+	data: function() {
+		return {
+
+		}
+	}
+}
+</script>
+<style scoped>
+	.user-entry {
+		padding: 10px;
+		margin-bottom: 10px;
+	}
+
+	.user-avatar {
+		margin: 5px;
+		margin-right: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.entry-content {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.user-details {
+		flex-grow: 1;
+	}
+
+	.user-description {
+		opacity: 0.7;
+	}
+</style>

src/router.js

@@ -53,29 +53,32 @@ export default new Router({
 		},
 		{
 			path: '/:index(index.php/)?apps/social/account/@:account',
+			alias: './timeline',
 			components: {
-				default: Profile
+				default: Profile,
+				details: ProfileTimeline
 			},
 			props: true,
-			name: 'profile',
 			children: [
 				{
 					path: '',
+					name: 'profile',
 					components: {
 						details: ProfileTimeline
 					}
 				},
 				{
 					path: 'followers',
+					name: 'profile.followers',
 					components: {
-						default: Profile,
 						details: ProfileFollowers
 					}
 				},
 				{
 					path: 'following',
+					name: 'profile.following',
+
 					components: {
-						default: Profile,
 						details: ProfileFollowers
 					}
 				}

src/views/ProfileFollowers.vue

@@ -21,31 +21,50 @@
   -->
 
 <template>
-	<div class="social__timeline">
-		<ul>
-			<li>User List</li>
-		</ul>
+	<div class="social__followers">
+		<user-entry :item="user" v-for="user in users" />
 	</div>
 </template>
 
 <style scoped>
-	.social__timeline {
+	.social__followers {
 		max-width: 700px;
 		margin: 15px auto;
+		display: flex;
+	}
+	.user-entry {
+		width: 50%;
+		padding: 10px;
 	}
 </style>
 
 <script>
-import TimelineEntry from './../components/TimelineEntry'
+import UserEntry from '../components/UserEntry';
 
 export default {
 	name: 'ProfileFollowers',
 	components: {
-		TimelineEntry
+		UserEntry,
 	},
 	computed: {
 		timeline: function() {
 			return this.$store.getters.getTimeline
+		},
+		users() {
+			return [
+				{
+					id: 'admin',
+					displayName: 'Administrator',
+					description: 'My social account',
+					following: true
+				},
+				{
+					id: 'admin',
+					displayName: 'Administrator',
+					description: 'My social account',
+					following: false
+				}
+			]
 		}
 	}
 }