Fix bug
This commit is contained in:
parent
80f2cc6728
commit
081ad9adcf
|
@ -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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue