[Client] Better pagination

Fix #4628
Close #4629
This commit is contained in:
syuilo 2019-04-08 14:17:44 +09:00
parent 1c57e6f80a
commit 1e166490d9
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
24 changed files with 59 additions and 56 deletions

View file

@ -50,7 +50,7 @@ export default Vue.extend({
fetchingMoreUsers: false, fetchingMoreUsers: false,
us: [], us: [],
inited: false, inited: false,
cursor: null more: false
}; };
}, },

View file

@ -28,12 +28,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -37,12 +37,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -41,12 +41,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -41,12 +41,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -27,12 +27,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -26,7 +26,7 @@
</template> </template>
</component> </component>
<footer v-if="cursor != null"> <footer v-if="more">
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template> <template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template> <template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
@ -61,7 +61,7 @@ export default Vue.extend({
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
inited: false, inited: false,
cursor: null more: false
}; };
}, },
@ -119,7 +119,7 @@ export default Vue.extend({
this.notes = x; this.notes = x;
} else { } else {
this.notes = x.notes; this.notes = x.notes;
this.cursor = x.cursor; this.more = x.more;
} }
this.inited = true; this.inited = true;
this.fetching = false; this.fetching = false;
@ -130,11 +130,11 @@ export default Vue.extend({
}, },
more() { more() {
if (this.cursor == null || this.moreFetching) return; if (!this.more || this.moreFetching) return;
this.moreFetching = true; this.moreFetching = true;
this.makePromise(this.cursor).then(x => { this.makePromise(this.notes[this.notes.length - 1].id).then(x => {
this.notes = this.notes.concat(x.notes); this.notes = this.notes.concat(x.notes);
this.cursor = x.cursor; this.more = x.more;
this.moreFetching = false; this.moreFetching = false;
}, e => { }, e => {
this.moreFetching = false; this.moreFetching = false;
@ -157,6 +157,7 @@ export default Vue.extend({
// 稿 // 稿
if (this.notes.length >= displayLimit) { if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit); this.notes = this.notes.slice(0, displayLimit);
this.more = true;
} }
} else { } else {
this.queue.push(note); this.queue.push(note);

View file

@ -39,7 +39,7 @@ export default Vue.extend({
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -85,12 +85,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}); });

View file

@ -95,12 +95,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}); });

View file

@ -30,7 +30,7 @@ export default Vue.extend({
} else { } else {
return { return {
users: followings.map(following => following.follower), users: followings.map(following => following.follower),
cursor: null more: false
}; };
} }
}), }),

View file

@ -30,7 +30,7 @@ export default Vue.extend({
} else { } else {
return { return {
users: followings.map(following => following.followee), users: followings.map(following => following.followee),
cursor: null more: false
}; };
} }
}), }),

View file

@ -25,7 +25,7 @@
</template> </template>
</component> </component>
<footer v-if="cursor != null"> <footer v-if="more">
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template> <template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template> <template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
@ -58,7 +58,7 @@ export default Vue.extend({
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
inited: false, inited: false,
cursor: null more: false
}; };
}, },
@ -112,7 +112,7 @@ export default Vue.extend({
this.notes = x; this.notes = x;
} else { } else {
this.notes = x.notes; this.notes = x.notes;
this.cursor = x.cursor; this.more = x.more;
} }
this.inited = true; this.inited = true;
this.fetching = false; this.fetching = false;
@ -123,11 +123,11 @@ export default Vue.extend({
}, },
more() { more() {
if (this.cursor == null || this.moreFetching) return; if (!this.more || this.moreFetching) return;
this.moreFetching = true; this.moreFetching = true;
this.makePromise(this.cursor).then(x => { this.makePromise(this.notes[this.notes.length - 1].id).then(x => {
this.notes = this.notes.concat(x.notes); this.notes = this.notes.concat(x.notes);
this.cursor = x.cursor; this.more = x.more;
this.moreFetching = false; this.moreFetching = false;
}, e => { }, e => {
this.moreFetching = false; this.moreFetching = false;
@ -157,6 +157,7 @@ export default Vue.extend({
// 稿 // 稿
if (this.notes.length >= displayLimit) { if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit); this.notes = this.notes.slice(0, displayLimit);
this.more = true;
} }
} else { } else {
this.queue.push(note); this.queue.push(note);

View file

@ -30,12 +30,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -35,7 +35,7 @@ export default Vue.extend({
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -35,7 +35,7 @@ export default Vue.extend({
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -113,12 +113,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}); });

View file

@ -42,12 +42,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -21,7 +21,7 @@
</template> </template>
</component> </component>
<footer v-if="cursor != null"> <footer v-if="more">
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template> <template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template> <template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
@ -53,7 +53,7 @@ export default Vue.extend({
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
inited: false, inited: false,
cursor: null more: false
}; };
}, },
@ -113,7 +113,7 @@ export default Vue.extend({
this.notes = x; this.notes = x;
} else { } else {
this.notes = x.notes; this.notes = x.notes;
this.cursor = x.cursor; this.more = x.more;
} }
this.inited = true; this.inited = true;
this.fetching = false; this.fetching = false;
@ -124,11 +124,11 @@ export default Vue.extend({
}, },
more() { more() {
if (this.cursor == null || this.moreFetching) return; if (!this.more || this.moreFetching) return;
this.moreFetching = true; this.moreFetching = true;
this.makePromise(this.cursor).then(x => { this.makePromise(this.notes[this.notes.length - 1].id).then(x => {
this.notes = this.notes.concat(x.notes); this.notes = this.notes.concat(x.notes);
this.cursor = x.cursor; this.more = x.more;
this.moreFetching = false; this.moreFetching = false;
}, e => { }, e => {
this.moreFetching = false; this.moreFetching = false;
@ -151,6 +151,7 @@ export default Vue.extend({
// 稿 // 稿
if (this.notes.length >= displayLimit) { if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit); this.notes = this.notes.slice(0, displayLimit);
this.more = true;
} }
} else { } else {
this.queue.push(note); this.queue.push(note);

View file

@ -27,12 +27,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -27,12 +27,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -114,12 +114,12 @@ export default Vue.extend({
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: notes[notes.length - 1].id more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}); });

View file

@ -21,19 +21,19 @@ export default Vue.extend({
return { return {
makePromise: cursor => this.$root.api('notes/search', { makePromise: cursor => this.$root.api('notes/search', {
limit: limit + 1, limit: limit + 1,
offset: cursor ? cursor : undefined, untilId: cursor ? cursor : undefined,
query: this.q query: this.q
}).then(notes => { }).then(notes => {
if (notes.length == limit + 1) { if (notes.length == limit + 1) {
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: cursor ? cursor + limit : limit more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })

View file

@ -21,19 +21,19 @@ export default Vue.extend({
return { return {
makePromise: cursor => this.$root.api('notes/search-by-tag', { makePromise: cursor => this.$root.api('notes/search-by-tag', {
limit: limit + 1, limit: limit + 1,
offset: cursor ? cursor : undefined, untilId: cursor ? cursor : undefined,
tag: this.$route.params.tag tag: this.$route.params.tag
}).then(notes => { }).then(notes => {
if (notes.length == limit + 1) { if (notes.length == limit + 1) {
notes.pop(); notes.pop();
return { return {
notes: notes, notes: notes,
cursor: cursor ? cursor + limit : limit more: true
}; };
} else { } else {
return { return {
notes: notes, notes: notes,
cursor: null more: false
}; };
} }
}) })