rudeshark.net/src/client/app/mobile/views/pages/search.vue

101 lines
1.9 KiB
Vue
Raw Normal View History

2018-02-17 01:19:16 +01:00
<template>
<mk-ui>
2018-02-25 16:39:05 +01:00
<span slot="header">%fa:search% {{ q }}</span>
2018-07-04 14:23:50 +02:00
<main>
<p v-if="!fetching && empty">%fa:search%{{ q }}に関する投稿は見つかりませんでした</p>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
2018-02-17 01:19:16 +01:00
</main>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
2018-02-25 16:39:05 +01:00
const limit = 20;
2018-02-17 01:19:16 +01:00
export default Vue.extend({
data() {
return {
fetching: true,
2018-07-04 14:23:50 +02:00
moreFetching: false,
2018-02-25 16:39:05 +01:00
existMore: false,
2018-07-04 14:23:50 +02:00
empty: false,
2018-02-17 01:19:16 +01:00
offset: 0
};
},
2018-02-25 16:39:05 +01:00
watch: {
$route: 'fetch'
},
computed: {
q(): string {
return this.$route.query.q;
}
},
2018-02-17 01:19:16 +01:00
mounted() {
2018-08-02 12:03:31 +02:00
document.title = `%i18n:@search%: ${this.q} | %i18n:common.name%`;
2018-02-17 01:19:16 +01:00
2018-02-25 16:39:05 +01:00
this.fetch();
2018-02-17 01:19:16 +01:00
},
methods: {
2018-02-25 16:39:05 +01:00
fetch() {
this.fetching = true;
Progress.start();
2018-07-04 14:23:50 +02:00
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api('notes/search', {
limit: limit + 1,
offset: this.offset,
query: this.q
}).then(notes => {
if (notes.length == 0) this.empty = true;
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
Progress.done();
}, rej);
}));
2018-02-25 16:39:05 +01:00
},
2018-02-17 01:19:16 +01:00
more() {
this.offset += limit;
2018-07-04 14:23:50 +02:00
const promise = (this as any).api('notes/search', {
2018-02-25 16:39:05 +01:00
limit: limit + 1,
2018-07-04 13:44:13 +02:00
offset: this.offset,
query: this.q
2018-07-04 14:23:50 +02:00
});
promise.then(notes => {
2018-04-07 19:30:37 +02:00
if (notes.length == limit + 1) {
notes.pop();
2018-02-25 16:39:05 +01:00
} else {
this.existMore = false;
}
2018-07-04 14:23:50 +02:00
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
2018-02-25 16:39:05 +01:00
});
2018-07-04 14:23:50 +02:00
return promise;
2018-02-17 01:19:16 +01:00
}
}
});
</script>
<style lang="stylus" module>
2018-04-07 19:30:37 +02:00
.notes
2018-02-17 01:19:16 +01:00
margin 8px auto
max-width 500px
width calc(100% - 16px)
background #fff
border-radius 8px
2018-04-29 01:51:17 +02:00
box-shadow 0 0 0 1px rgba(#000, 0.2)
2018-02-17 01:19:16 +01:00
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
</style>