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

94 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-02-17 01:19:16 +01:00
<main v-if="!fetching">
2018-04-07 19:30:37 +02:00
<mk-notes :class="$style.notes" :notes="notes">
2018-04-14 18:04:40 +02:00
<span v-if="notes.length == 0">{{ '%i18n:@empty%'.replace('{}', q) }}</span>
2018-02-25 16:39:05 +01:00
<button v-if="existMore" @click="more" :disabled="fetching" slot="tail">
2018-04-14 18:04:40 +02:00
<span v-if="!fetching">%i18n:@load-more%</span>
2018-02-17 01:19:16 +01:00
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
2018-04-07 19:30:37 +02:00
</mk-notes>
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';
import parse from '../../../common/scripts/parse-search-query';
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-02-25 16:39:05 +01:00
existMore: false,
2018-04-07 19:30:37 +02:00
notes: [],
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-04-14 18:04:40 +02:00
document.title = `%i18n:@search%: ${this.q} | Misskey`;
2018-02-17 01:19:16 +01:00
document.documentElement.style.background = '#313a42';
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-04-07 19:30:37 +02:00
(this as any).api('notes/search', Object.assign({
2018-02-25 16:39:05 +01:00
limit: limit + 1
2018-04-07 19:30:37 +02:00
}, parse(this.q))).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
2018-02-25 16:39:05 +01:00
this.existMore = true;
}
2018-04-07 19:30:37 +02:00
this.notes = notes;
2018-02-25 16:39:05 +01:00
this.fetching = false;
Progress.done();
});
},
2018-02-17 01:19:16 +01:00
more() {
this.offset += limit;
2018-04-07 19:30:37 +02:00
(this as any).api('notes/search', Object.assign({
2018-02-25 16:39:05 +01:00
limit: limit + 1,
2018-02-17 01:19:16 +01:00
offset: this.offset
2018-04-07 19:30:37 +02:00
}, parse(this.q))).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
2018-02-25 16:39:05 +01:00
} else {
this.existMore = false;
}
2018-04-07 19:30:37 +02:00
this.notes = this.notes.concat(notes);
2018-02-25 16:39:05 +01:00
});
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
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
</style>