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>
<ui-container :body-togglable="true">
<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="user" v-for="user in users">
<div class="user" v-for="user in us">
<mk-avatar class="avatar" :user="user"/>
<div class="body">
<div class="name">
@ -14,6 +17,9 @@
</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>
</ui-container>
</template>
@ -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;
});
}
}
});
</script>

View File

@ -1,12 +1,12 @@
<template>
<div>
<mk-user-list :users="verifiedUsers">
<mk-user-list :make-promise="verifiedUsers">
<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
</mk-user-list>
<mk-user-list :users="popularUsers">
<mk-user-list :make-promise="popularUsers">
<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
</mk-user-list>
<mk-user-list :users="recentlyUpdatedUsers">
<mk-user-list :make-promise="recentlyUpdatedUsers">
<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
</mk-user-list>
</div>
@ -23,40 +23,26 @@ export default Vue.extend({
data() {
return {
verifiedUsers: [],
popularUsers: [],
recentlyUpdatedUsers: [],
verifiedUsers: () => this.$root.api('users', {
state: 'verified',
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
};
},
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>