From e460f430a741ef7965d17b9086802bdc059edd2e Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sat, 9 May 2020 00:17:17 +0100
Subject: [PATCH] Populate the User list view
This commit adds a component for an entry in a list of users, and uses
it in the user list view.
---
src/components/UserListItem.vue | 57 +++++++++++++++++++++++++++++++++
src/views/UserList.vue | 34 ++++++++++++++++++--
2 files changed, 89 insertions(+), 2 deletions(-)
create mode 100644 src/components/UserListItem.vue
diff --git a/src/components/UserListItem.vue b/src/components/UserListItem.vue
new file mode 100644
index 0000000..0868ee7
--- /dev/null
+++ b/src/components/UserListItem.vue
@@ -0,0 +1,57 @@
+<template>
+ <div class="user">
+ <img :src="avatar" />
+ <div class="details">
+ <router-link :to="`/user/${user.id}`">
+ <h2>{{ user.full_name }}</h2>
+ </router-link>
+ <p class="metadata">{{ user.email }}</p>
+ </div>
+ </div>
+</template>
+
+<script>
+import user from '@/api/user.js'
+
+export default {
+ name: 'UserListItem',
+ props: ['user'],
+ data () {
+ return {
+ avatar: ''
+ }
+ },
+ created () {
+ this.avatar = user.getAvatarUrl(this.user, 60)
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.user {
+ display: flex;
+ align-items: center;
+
+ padding: 20px;
+ border-top: solid 1px #ddd;
+
+ &:hover {
+ background-color: #fff;
+ }
+
+ img {
+ margin-right: 20px;
+ border-radius: 100%;
+ }
+
+ h2 {
+ margin: 0;
+ font-weight: 300;
+ }
+
+ .metadata {
+ margin: 0;
+ color: #777;
+ }
+}
+</style>
diff --git a/src/views/UserList.vue b/src/views/UserList.vue
index f2b2300..474636c 100644
--- a/src/views/UserList.vue
+++ b/src/views/UserList.vue
@@ -1,5 +1,35 @@
<template>
- <div class="about">
- <h1>User list here</h1>
+ <div class="user-list">
+ <h1>Users</h1>
+ <UserListItem v-for="user in users" :key="user.id" :user="user" />
</div>
</template>
+
+<script>
+import user from '@/api/user.js'
+
+import UserListItem from '@/components/UserListItem.vue'
+
+export default {
+ name: 'UserListView',
+ components: {
+ UserListItem
+ },
+ data () {
+ return {
+ users: []
+ }
+ },
+ created () {
+ this.getUsers()
+ },
+ methods: {
+ async getUsers () {
+ const params = {
+ limit: 10
+ }
+ this.users = await user.browse(params)
+ }
+ }
+}
+</script>