Improve user-list component

This commit is contained in:
syuilo 2019-02-16 09:27:53 +09:00
parent 40d2650d49
commit 5a28dc0198
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 71 additions and 37 deletions

View file

@ -1,8 +1,11 @@
<template> <template>
<ui-container :body-togglable="true"> <ui-container :body-togglable="true">
<template slot="header"><slot></slot></template> <template slot="header"><slot></slot></template>
<mk-error v-if="!fetching && !inited" @retry="init()"/>
<div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]"> <div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]">
<div class="user" v-for="user in users"> <div class="user" v-for="user in us">
<mk-avatar class="avatar" :user="user"/> <mk-avatar class="avatar" :user="user"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">
@ -14,6 +17,9 @@
</div> </div>
</div> </div>
</div> </div>
<button class="more" :class="{ fetching: fetchingMoreUsers }" v-if="cursor != null" @click="fetchMoreUsers()" :disabled="fetchingMoreUsers">
<template v-if="fetchingMoreUsers"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreUsers ? $t('@.loading') : $t('@.load-more') }}
</button>
</div> </div>
</ui-container> </ui-container>
</template> </template>
@ -23,14 +29,56 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: { props: {
users: { makePromise: {
type: Array,
required: true required: true
}, },
iconOnly: { iconOnly: {
type: Boolean, type: Boolean,
default: false 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;
});
}
} }
}); });
</script> </script>

View file

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<mk-user-list :users="verifiedUsers"> <mk-user-list :make-promise="verifiedUsers">
<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span> <span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
</mk-user-list> </mk-user-list>
<mk-user-list :users="popularUsers"> <mk-user-list :make-promise="popularUsers">
<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span> <span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
</mk-user-list> </mk-user-list>
<mk-user-list :users="recentlyUpdatedUsers"> <mk-user-list :make-promise="recentlyUpdatedUsers">
<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span> <span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
</mk-user-list> </mk-user-list>
</div> </div>
@ -23,40 +23,26 @@ export default Vue.extend({
data() { data() {
return { return {
verifiedUsers: [], verifiedUsers: () => this.$root.api('users', {
popularUsers: [], state: 'verified',
recentlyUpdatedUsers: [], origin: 'local',
sort: '+follower',
limit: 10
}),
popularUsers: () => this.$root.api('users', {
state: 'alive',
origin: 'local',
sort: '+follower',
limit: 10
}),
recentlyUpdatedUsers: () => this.$root.api('users', {
origin: 'local',
sort: '+updatedAt',
limit: 10
}),
faBookmark, faChartLine, faCommentAlt faBookmark, faChartLine, faCommentAlt
}; };
}, },
created() {
this.$root.api('users', {
state: 'verified',
origin: 'local',
sort: '+follower',
limit: 10
}).then(users => {
this.verifiedUsers = users;
});
this.$root.api('users', {
state: 'alive',
origin: 'local',
sort: '+follower',
limit: 10
}).then(users => {
this.popularUsers = users;
});
this.$root.api('users', {
origin: 'local',
sort: '+updatedAt',
limit: 10
}).then(users => {
this.recentlyUpdatedUsers = users;
});
}
}); });
</script> </script>