heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix bug

This commit is contained in:
syuilo 2018-07-04 21:23:50 +09:00
parent 80f2cc6728
commit 081ad9adcf
2 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/client/app/desktop/views/pages/search.vue
View File

@ -7,12 +7,7 @@
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p :class="$style.empty" v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p> <p :class="$style.empty" v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
<mk-notes ref="timeline" :class="$style.notes" :notes="notes"> <mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
<div slot="footer">
<template v-if="!moreFetching">%fa:search%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</div>
</mk-notes>
</mk-ui> </mk-ui>
</template> </template>
@ -29,16 +24,13 @@ export default Vue.extend({
moreFetching: false, moreFetching: false,
existMore: false, existMore: false,
offset: 0, offset: 0,
notes: [] empty: false
}; };
}, },
watch: { watch: {
$route: 'fetch' $route: 'fetch'
}, },
computed: { computed: {
empty(): boolean {
return this.notes.length == 0;
},
q(): string { q(): string {
return this.$route.query.q; return this.$route.query.q;
} }
@ -65,41 +57,43 @@ export default Vue.extend({
this.fetching = true; this.fetching = true;
Progress.start(); Progress.start();
(this as any).api('notes/search', { (this.$refs.timeline as any).init(() => new Promise((res, rej) => {
limit: limit + 1, (this as any).api('notes/search', {
offset: this.offset, limit: limit + 1,
query: this.q offset: this.offset,
}).then(notes => { query: this.q
if (notes.length == limit + 1) { }).then(notes => {
notes.pop(); if (notes.length == 0) this.empty = true;
this.existMore = true; if (notes.length == limit + 1) {
} notes.pop();
this.notes = notes; this.existMore = true;
this.fetching = false; }
Progress.done(); res(notes);
}); this.fetching = false;
Progress.done();
}, rej);
}));
}, },
more() { more() {
if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
this.offset += limit; this.offset += limit;
this.moreFetching = true;
return (this as any).api('notes/search', { const promise = (this as any).api('notes/search', {
limit: limit + 1, limit: limit + 1,
offset: this.offset, offset: this.offset,
query: this.q query: this.q
}).then(notes => { });
promise.then(notes => {
if (notes.length == limit + 1) { if (notes.length == limit + 1) {
notes.pop(); notes.pop();
} else { } else {
this.existMore = false; this.existMore = false;
} }
this.notes = this.notes.concat(notes); notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false; this.moreFetching = false;
}); });
},
onScroll() { return promise;
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 16) this.more();
} }
} }
}); });

55
src/client/app/mobile/views/pages/search.vue
View File

@ -1,14 +1,10 @@
<template> <template>
<mk-ui> <mk-ui>
<span slot="header">%fa:search% {{ q }}</span> <span slot="header">%fa:search% {{ q }}</span>
<main v-if="!fetching">
<mk-notes :class="$style.notes" :notes="notes"> <main>
<span v-if="notes.length == 0">{{ '%i18n:@empty%'.replace('{}', q) }}</span> <p v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
<button v-if="existMore" @click="more" :disabled="fetching" slot="tail"> <mk-notes ref="timeline" :more="existMore ? more : null"/>
<span v-if="!fetching">%i18n:@load-more%</span>
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-notes>
</main> </main>
</mk-ui> </mk-ui>
</template> </template>
@ -23,8 +19,9 @@ export default Vue.extend({
data() { data() {
return { return {
fetching: true, fetching: true,
moreFetching: false,
existMore: false, existMore: false,
notes: [], empty: false,
offset: 0 offset: 0
}; };
}, },
@ -46,33 +43,43 @@ export default Vue.extend({
this.fetching = true; this.fetching = true;
Progress.start(); Progress.start();
(this as any).api('notes/search', { (this.$refs.timeline as any).init(() => new Promise((res, rej) => {
limit: limit + 1, (this as any).api('notes/search', {
query: this.q limit: limit + 1,
}).then(notes => { offset: this.offset,
if (notes.length == limit + 1) { query: this.q
notes.pop(); }).then(notes => {
this.existMore = true; if (notes.length == 0) this.empty = true;
} if (notes.length == limit + 1) {
this.notes = notes; notes.pop();
this.fetching = false; this.existMore = true;
Progress.done(); }
}); res(notes);
this.fetching = false;
Progress.done();
}, rej);
}));
}, },
more() { more() {
this.offset += limit; this.offset += limit;
(this as any).api('notes/search', {
const promise = (this as any).api('notes/search', {
limit: limit + 1, limit: limit + 1,
offset: this.offset, offset: this.offset,
query: this.q query: this.q
}).then(notes => { });
promise.then(notes => {
if (notes.length == limit + 1) { if (notes.length == limit + 1) {
notes.pop(); notes.pop();
} else { } else {
this.existMore = false; this.existMore = false;
} }
this.notes = this.notes.concat(notes); notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
}); });
return promise;
} }
} }
}); });