feat(frontend): in channel search

This commit is contained in:
syuilo 2023-05-05 10:05:33 +09:00
parent 5c08f2b93b
commit b45bc3fd5d
2 changed files with 34 additions and 0 deletions

View file

@ -34,6 +34,7 @@
- Fix: フォローリクエストの通知が残る問題を修正 - Fix: フォローリクエストの通知が残る問題を修正
### Client ### Client
- チャンネル内検索ができるように
- チャンネル検索ですべてのチャンネルの取得/表示ができるように - チャンネル検索ですべてのチャンネルの取得/表示ができるように
- 通知の表示をカスタマイズできるように - 通知の表示をカスタマイズできるように
- ドライブのファイル一覧から直接ノートを作成できるように - ドライブのファイル一覧から直接ノートを作成できるように

View file

@ -36,6 +36,17 @@
<div v-else-if="tab === 'featured'"> <div v-else-if="tab === 'featured'">
<MkNotes :pagination="featuredPagination"/> <MkNotes :pagination="featuredPagination"/>
</div> </div>
<div v-else-if="tab === 'search'">
<div class="_gaps">
<div>
<MkInput v-model="searchQuery">
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
<MkButton primary rounded style="margin-top: 8px;" @click="search()">{{ i18n.ts.search }}</MkButton>
</div>
<MkNotes v-if="searchPagination" :key="searchQuery" :pagination="searchPagination"/>
</div>
</div>
</MkSpacer> </MkSpacer>
<template #footer> <template #footer>
<div :class="$style.footer"> <div :class="$style.footer">
@ -63,6 +74,7 @@ import { deviceKind } from '@/scripts/device-kind';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import { url } from '@/config'; import { url } from '@/config';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import MkNote from '@/components/MkNote.vue'; import MkNote from '@/components/MkNote.vue';
import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue';
@ -76,6 +88,8 @@ const props = defineProps<{
let tab = $ref('timeline'); let tab = $ref('timeline');
let channel = $ref(null); let channel = $ref(null);
let favorited = $ref(false); let favorited = $ref(false);
let searchQuery = $ref('');
let searchPagination = $ref();
const featuredPagination = $computed(() => ({ const featuredPagination = $computed(() => ({
endpoint: 'notes/featured' as const, endpoint: 'notes/featured' as const,
limit: 10, limit: 10,
@ -123,6 +137,21 @@ async function unfavorite() {
}); });
} }
async function search() {
const query = searchQuery.toString().trim();
if (query == null) return;
searchPagination = {
endpoint: 'notes/search',
limit: 10,
params: {
query: searchQuery,
channelId: channel.id,
},
};
}
const headerActions = $computed(() => { const headerActions = $computed(() => {
if (channel && channel.userId) { if (channel && channel.userId) {
const share = { const share = {
@ -160,6 +189,10 @@ const headerTabs = $computed(() => [{
key: 'featured', key: 'featured',
title: i18n.ts.featured, title: i18n.ts.featured,
icon: 'ti ti-bolt', icon: 'ti ti-bolt',
}, {
key: 'search',
title: i18n.ts.search,
icon: 'ti ti-search',
}]); }]);
definePageMetadata(computed(() => channel ? { definePageMetadata(computed(() => channel ? {