forked from FoundKeyGang/FoundKey
client: search page for notes and users
This replaces the previous search box and allows for more narrowed down searches. Changelog: Added
This commit is contained in:
parent
d86f826458
commit
a7f3133f89
2 changed files with 197 additions and 17 deletions
|
@ -167,7 +167,6 @@ general: "General"
|
||||||
wallpaper: "Wallpaper"
|
wallpaper: "Wallpaper"
|
||||||
setWallpaper: "Set wallpaper"
|
setWallpaper: "Set wallpaper"
|
||||||
removeWallpaper: "Remove wallpaper"
|
removeWallpaper: "Remove wallpaper"
|
||||||
searchWith: "Search: {q}"
|
|
||||||
youHaveNoLists: "You don't have any lists"
|
youHaveNoLists: "You don't have any lists"
|
||||||
followConfirm: "Are you sure that you want to follow {name}?"
|
followConfirm: "Are you sure that you want to follow {name}?"
|
||||||
proxyAccount: "Proxy account"
|
proxyAccount: "Proxy account"
|
||||||
|
|
|
@ -1,34 +1,215 @@
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader/></template>
|
<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<XNotes ref="notes" :pagination="pagination"/>
|
<MkFolder>
|
||||||
|
<template #header>{{ i18n.ts.search }}</template>
|
||||||
|
<MkInput v-model="query" class="input" tabindex="1" @keydown="keydown">
|
||||||
|
<template #prefix><i class="fas fa-magnifying-glass"></i></template>
|
||||||
|
<template v-if="tab === 'users'" #label>{{ i18n.ts.username }}</template>
|
||||||
|
<template v-if="tab === 'all'" #caption>Try entering a URL or user handle!</template>
|
||||||
|
</MkInput>
|
||||||
|
<template v-if="tab === 'notes'">
|
||||||
|
<MkSelect v-model="author" class="input">
|
||||||
|
<template #label>{{ i18n.ts.author }}</template>
|
||||||
|
<option value="all">{{ i18n.ts.all }}</option>
|
||||||
|
<option value="self">{{ i18n.ts.you }}</option>
|
||||||
|
<option value="user">{{ i18n.ts.user }}</option>
|
||||||
|
<option value="local">{{ i18n.ts.local }}</option>
|
||||||
|
<option value="host">{{ i18n.ts.instance }}</option>
|
||||||
|
</MkSelect>
|
||||||
|
<MkButton v-if="author === 'user'" @click="selectUser" full class="input">
|
||||||
|
<template v-if="user == null">{{ i18n.ts.selectUser }}</template>
|
||||||
|
<template v-else>
|
||||||
|
<MkAvatar :user="user" class="avatar"/>
|
||||||
|
<MkAcct :user="user"/>
|
||||||
|
</template>
|
||||||
|
</MkButton>
|
||||||
|
<MkInput v-if="author === 'host'" v-model="host" class="input">
|
||||||
|
<template #prefix>@</template>
|
||||||
|
<template #label>{{ i18n.ts.host }}</template>
|
||||||
|
</MkInput>
|
||||||
|
</template>
|
||||||
|
<template v-if="tab === 'users'">
|
||||||
|
<MkSelect v-model="origin" class="input">
|
||||||
|
<template #label>{{ i18n.ts.instance }}</template>
|
||||||
|
<option value="combined">{{ i18n.ts.all }}</option>
|
||||||
|
<option value="local">{{ i18n.ts.local }}</option>
|
||||||
|
<option value="remote">{{ i18n.ts.remote }}</option>
|
||||||
|
</MkSelect>
|
||||||
|
</template>
|
||||||
|
<MkButton @click="search()" primary :disabled="!canSearch" class="input">
|
||||||
|
<i class="fas fa-magnifying-glass"></i> {{ i18n.ts.search }}
|
||||||
|
</MkButton>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder v-if="tab === 'all' || tab === 'users'">
|
||||||
|
<template #header>{{ i18n.ts.users }}</template>
|
||||||
|
<XUserList v-if="userPagination" :pagination="userPagination"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder v-if="tab === 'all' || tab === 'notes'">
|
||||||
|
<template #header>{{ i18n.ts.notes }}</template>
|
||||||
|
<XNotes v-if="notePagination" :pagination="notePagination"/>
|
||||||
|
</MkFolder>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</MkStickyContainer>
|
</MkStickyContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue';
|
import { computed, watch } from 'vue';
|
||||||
import XNotes from '@/components/notes.vue';
|
import XNotes from '@/components/notes.vue';
|
||||||
|
import XUserList from '@/components/user-list.vue';
|
||||||
|
import MkButton from '@/components/ui/button.vue';
|
||||||
|
import MkInput from '@/components/form/input.vue';
|
||||||
|
import MkSelect from '@/components/form/select.vue';
|
||||||
|
import MkFolder from '@/components/ui/folder.vue';
|
||||||
|
import { $i } from '@/account';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
import * as os from '@/os';
|
||||||
|
import { mainRouter } from '@/router';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
|
|
||||||
const props = defineProps<{
|
const headerTabs = [{
|
||||||
query: string;
|
key: 'all',
|
||||||
channel?: string;
|
title: i18n.ts.all,
|
||||||
}>();
|
}, {
|
||||||
|
key: 'notes',
|
||||||
|
title: i18n.ts.notes,
|
||||||
|
}, {
|
||||||
|
key: 'users',
|
||||||
|
title: i18n.ts.users,
|
||||||
|
}];
|
||||||
|
|
||||||
const pagination = {
|
let tab: 'all' | 'notes' | 'users' = $ref('all');
|
||||||
|
let query: string = $ref('');
|
||||||
|
let author: 'all' | 'self' | 'user' | 'local' | 'host' = $ref('all');
|
||||||
|
let user = $ref(null);
|
||||||
|
let host: string = $ref('');
|
||||||
|
let origin: 'combined' | 'local' | 'remote' = $ref('combined');
|
||||||
|
|
||||||
|
let notePagination = $ref(null);
|
||||||
|
let userPagination = $ref(null);
|
||||||
|
|
||||||
|
watch($$(tab), () => {
|
||||||
|
userPagination = null;
|
||||||
|
notePagination = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
let canSearch = $computed(() =>
|
||||||
|
query !== ''
|
||||||
|
&&
|
||||||
|
(
|
||||||
|
tab !== 'notes'
|
||||||
|
||
|
||||||
|
(
|
||||||
|
author === 'all'
|
||||||
|
|| author === 'self'
|
||||||
|
|| author === 'local'
|
||||||
|
|| author === 'host' && host !== ''
|
||||||
|
|| author === 'user' && user != null
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
function selectUser() {
|
||||||
|
os.selectUser().then(selectedUser => user = selectedUser);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function search(): void {
|
||||||
|
switch (tab) {
|
||||||
|
case 'all': {
|
||||||
|
query = query.trim();
|
||||||
|
// process special query strings
|
||||||
|
if (query.startsWith('@') && !query.includes(' ')) {
|
||||||
|
mainRouter.push('/' + q);
|
||||||
|
} else if (query.startsWith('#')) {
|
||||||
|
mainRouter.push('/tags/' + encodeURIComponent(query.slice(1)));
|
||||||
|
} else if (query.startsWith('https://')) {
|
||||||
|
const promise = os.api('ap/show', {
|
||||||
|
uri: query,
|
||||||
|
});
|
||||||
|
|
||||||
|
os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
|
||||||
|
|
||||||
|
const res = await promise;
|
||||||
|
|
||||||
|
if (res.type === 'User') {
|
||||||
|
mainRouter.push(`/@${res.object.username}@${res.object.host}`);
|
||||||
|
} else if (res.type === 'Note') {
|
||||||
|
mainRouter.push(`/notes/${res.object.id}`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
notePagination = {
|
||||||
endpoint: 'notes/search' as const,
|
endpoint: 'notes/search' as const,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
params: computed(() => ({
|
params: { query },
|
||||||
query: props.query,
|
};
|
||||||
channelId: props.channel,
|
origin = 'combined';
|
||||||
})),
|
userPagination = {
|
||||||
};
|
endpoint: 'users/search' as const,
|
||||||
|
limit: 4,
|
||||||
|
params: {
|
||||||
|
query,
|
||||||
|
origin,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'notes': {
|
||||||
|
const params = { query };
|
||||||
|
switch (author) {
|
||||||
|
case 'self':
|
||||||
|
params.userId = $i.id;
|
||||||
|
break;
|
||||||
|
case 'user':
|
||||||
|
params.userId = user.id;
|
||||||
|
break;
|
||||||
|
case 'local':
|
||||||
|
params.host = null;
|
||||||
|
break;
|
||||||
|
case 'host':
|
||||||
|
params.host = host;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
notePagination = {
|
||||||
|
endpoint: 'notes/search' as const,
|
||||||
|
limit: 10,
|
||||||
|
params,
|
||||||
|
};
|
||||||
|
userPagination = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'users': {
|
||||||
|
notePagination = null;
|
||||||
|
userPagination = {
|
||||||
|
endpoint: 'users/search' as const,
|
||||||
|
limit: 10,
|
||||||
|
params: {
|
||||||
|
query,
|
||||||
|
origin,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function keydown(evt: KeyboardEvent): void {
|
||||||
|
if (evt.key === 'Enter' && canSearch) {
|
||||||
|
evt.preventDefault();
|
||||||
|
evt.stopPropagation();
|
||||||
|
search();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
definePageMetadata(computed(() => ({
|
definePageMetadata(computed(() => ({
|
||||||
title: i18n.t('searchWith', { q: props.query }),
|
title: i18n.ts.search,
|
||||||
icon: 'fas fa-search',
|
icon: 'fas fa-search',
|
||||||
})));
|
})));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.input {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue