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:
Johann150 2022-11-19 19:28:19 +01:00
parent d86f826458
commit a7f3133f89
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
2 changed files with 197 additions and 17 deletions

View file

@ -167,7 +167,6 @@ general: "General"
wallpaper: "Wallpaper"
setWallpaper: "Set wallpaper"
removeWallpaper: "Remove wallpaper"
searchWith: "Search: {q}"
youHaveNoLists: "You don't have any lists"
followConfirm: "Are you sure that you want to follow {name}?"
proxyAccount: "Proxy account"

View file

@ -1,34 +1,215 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
<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>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, watch } from '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 * as os from '@/os';
import { mainRouter } from '@/router';
import { definePageMetadata } from '@/scripts/page-metadata';
const props = defineProps<{
query: string;
channel?: string;
}>();
const headerTabs = [{
key: 'all',
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,
limit: 10,
params: computed(() => ({
query: props.query,
channelId: props.channel,
})),
};
params: { query },
};
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(() => ({
title: i18n.t('searchWith', { q: props.query }),
title: i18n.ts.search,
icon: 'fas fa-search',
})));
</script>
<style lang="scss" scoped>
.input {
margin-top: 16px;
}
</style>