From 5a28dc0198475726c6b17c547750ccc0da16008f Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 16 Feb 2019 09:27:53 +0900 Subject: [PATCH] Improve user-list component --- .../app/common/views/components/user-list.vue | 54 +++++++++++++++++-- src/client/app/common/views/pages/explore.vue | 54 +++++++------------ 2 files changed, 71 insertions(+), 37 deletions(-) diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue index 3147fbe37..9fcb80f8a 100644 --- a/src/client/app/common/views/components/user-list.vue +++ b/src/client/app/common/views/components/user-list.vue @@ -1,8 +1,11 @@ @@ -23,14 +29,56 @@ import Vue from 'vue'; export default Vue.extend({ props: { - users: { - type: Array, + makePromise: { required: true }, iconOnly: { type: Boolean, default: false } + }, + + data() { + return { + fetching: true, + fetchingMoreUsers: false, + us: [], + inited: false, + cursor: null + }; + }, + + created() { + this.init(); + }, + + methods: { + init() { + this.fetching = true; + this.makePromise().then(x => { + if (Array.isArray(x)) { + this.us = x; + } else { + this.us = x.users; + this.cursor = x.cursor; + } + this.inited = true; + this.fetching = false; + }, e => { + this.fetching = false; + }); + }, + + fetchMoreUsers() { + this.fetchingMoreUsers = true; + this.makePromise(this.cursor).then(x => { + this.us = x.users; + this.cursor = x.cursor; + this.fetchingMoreUsers = false; + }, e => { + this.fetchingMoreUsers = false; + }); + } } }); diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue index b1e28415d..2740e0381 100644 --- a/src/client/app/common/views/pages/explore.vue +++ b/src/client/app/common/views/pages/explore.vue @@ -1,12 +1,12 @@