Improve widget paging looks (#3482)
* Improve widget paging looks * rewind when error
This commit is contained in:
parent
2ab8a5bc0a
commit
227798300f
|
@ -2,7 +2,10 @@
|
||||||
<div class="mkw-polls">
|
<div class="mkw-polls">
|
||||||
<mk-widget-container :show-header="!props.compact">
|
<mk-widget-container :show-header="!props.compact">
|
||||||
<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
|
<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
|
||||||
<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button>
|
<button slot="func" :title="$t('title')" @click="fetch">
|
||||||
|
<fa v-if="!fetching && more" icon="arrow-right"/>
|
||||||
|
<fa v-if="!fetching && !more" icon="sync"/>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="mkw-polls--body">
|
<div class="mkw-polls--body">
|
||||||
<div class="poll" v-if="!fetching && poll != null">
|
<div class="poll" v-if="!fetching && poll != null">
|
||||||
|
@ -32,6 +35,7 @@ export default define({
|
||||||
return {
|
return {
|
||||||
poll: null,
|
poll: null,
|
||||||
fetching: true,
|
fetching: true,
|
||||||
|
more: true,
|
||||||
offset: 0
|
offset: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -53,12 +57,18 @@ export default define({
|
||||||
}).then(notes => {
|
}).then(notes => {
|
||||||
const poll = notes ? notes[0] : null;
|
const poll = notes ? notes[0] : null;
|
||||||
if (poll == null) {
|
if (poll == null) {
|
||||||
|
this.more = false;
|
||||||
this.offset = 0;
|
this.offset = 0;
|
||||||
} else {
|
} else {
|
||||||
|
this.more = true;
|
||||||
this.offset++;
|
this.offset++;
|
||||||
}
|
}
|
||||||
this.poll = poll;
|
this.poll = poll;
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.poll = null;
|
||||||
|
this.fetching = false;
|
||||||
|
this.more = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,10 @@
|
||||||
<div class="mkw-users">
|
<div class="mkw-users">
|
||||||
<mk-widget-container :show-header="!props.compact">
|
<mk-widget-container :show-header="!props.compact">
|
||||||
<template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
|
<template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
|
||||||
<button slot="func" :title="$t('title')" @click="refresh"><fa icon="sync"/></button>
|
<button slot="func" :title="$t('title')" @click="refresh">
|
||||||
|
<fa v-if="!fetching && more" icon="arrow-right"/>
|
||||||
|
<fa v-if="!fetching && !more" icon="sync"/>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="mkw-users--body">
|
<div class="mkw-users--body">
|
||||||
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
||||||
|
@ -38,6 +41,7 @@ export default define({
|
||||||
return {
|
return {
|
||||||
users: [],
|
users: [],
|
||||||
fetching: true,
|
fetching: true,
|
||||||
|
more: true,
|
||||||
page: 0
|
page: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -59,12 +63,19 @@ export default define({
|
||||||
}).then(users => {
|
}).then(users => {
|
||||||
this.users = users;
|
this.users = users;
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.users = [];
|
||||||
|
this.fetching = false;
|
||||||
|
this.more = false;
|
||||||
|
this.page = 0;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refresh() {
|
refresh() {
|
||||||
if (this.users.length < limit) {
|
if (this.users.length < limit) {
|
||||||
|
this.more = false;
|
||||||
this.page = 0;
|
this.page = 0;
|
||||||
} else {
|
} else {
|
||||||
|
this.more = true;
|
||||||
this.page++;
|
this.page++;
|
||||||
}
|
}
|
||||||
this.fetch();
|
this.fetch();
|
||||||
|
|
Loading…
Reference in New Issue